Aseprite : comment créer un thème

Bonjour et bienvenue dans mon guide sur la façon d'ajuster un thème dans aseprite. Dans les thèmes Aseprite, déterminez l'apparence du programme à l'aide de ce didacticiel, vous pourrez personnaliser aseprite pour votre style. Les thèmes n'affectent pas les couleurs utilisées sur le canevas, comme le damier indiquant le fond transparent et la grille, ceux-ci peuvent être ajustés dans leurs propres sections dans le menu Préférences. Vous aurez besoin d'un programme comme Winrar pour créer des fichiers Zip. Je suis un mannequin pour tout type de codage, il s'agit donc principalement d'un didacticiel "remplacez ce numéro par un numéro différent pour cet effet", rien de trop farfelu.
------------------------

Quoi qu'il en soit, d'abord pour créer votre propre thème, nous ferons simplement une copie du thème aseprite par défaut. La façon la plus simple de le faire est de naviguer dans le menu Thèmes (Edition-> Préférences-> Thèmes), puis de sélectionner "par défaut" et de cliquer sur Ouvrir le dossier.
------------------------

Copiez tous les fichiers puis naviguez vers un endroit accessible comme des documents/téléchargements/images. Là, vous créerez votre propre dossier, vous pourrez le nommer comme vous le souhaitez, mais je vous recommande de respecter le schéma de dénomination qu'aseprite semble avoir ("nameoftheme-theme").
------------------------

Les fichiers sont les suivants : le fichier « LICENCE » est un fichier texte avec lequel vous n'avez pas vraiment besoin de vous occuper, sauf si vous envisagez probablement de distribuer/vendre votre thème. Le fichier "package" est un peu comme des informations de projet sur votre thème. Le fichier "sheet.aseprite-data" est un fichier généré par aseprite, vous n'avez pas du tout besoin de vous en soucier, je crois. Le fichier « feuille » est une image de toutes les icônes/éléments de l'interface utilisateur, tout ici peut être recoloré ou complètement redessiné à votre guise ! Enfin, le fichier "thème" est ce que vous utilisez pour ajuster les couleurs, les tailles, les polices, la taille des icônes/éléments ui, l'emplacement des icônes/éléments ui sur le fichier "feuille" et leurs noms, et je suis sûr beaucoup Suite. Tout d'abord, nous devrions nous concentrer sur le fichier "package" pour commencer. Sélectionnez-le puis faites un clic droit et Ouvrir avec le Bloc-notes ou un équivalent. (astuce spéciale, vous pouvez ajuster la taille du texte dans le Bloc-notes en maintenant la touche Ctrl enfoncée et en faisant défiler)
------------------------

Vous rencontrerez du code, mais pas trop heureusement. Lorsque vous modifiez du texte, assurez-vous de ne pas supprimer les virgules et les guillemets. Heureusement, nous modifions une copie de la valeur par défaut afin que le fichier par défaut réel soit toujours là pour se replier. Quoi qu'il en soit, vous voudrez d'abord renommer "aseprite-theme" par le nom du dossier dans lequel se trouvent ces fichiers. Ensuite, "Aseprite Default Theme" par le nom de votre thème. Vous pouvez également ajuster le reste des éléments, mais ils ne sont généralement importants que si vous distribuez ou partagez votre thème avec d'autres. Enfin, vous verrez un "par défaut" à côté des mots "id" et "chemin", c'est en fait quelque chose que vous devez renommer, changez-le en nom de votre thème. Enregistrez ensuite le fichier et quittez.
------------------------

À tout moment, vous pouvez maintenant compresser le dossier du thème que vous avez créé dans un zip à l'aide de winrar et l'ajouter à aseprite en tant que nouvelle extension/thème. Je vous recommande de tester votre thème très souvent pendant que vous le créez, ce qui peut être pénible. Mais mieux que d'ajuster quelque chose de mal et de ne pas savoir ce que c'était. Donc, avant de montrer comment ajuster visuellement votre thème, je vais vous montrer comment ajouter votre thème à aseprite afin que vous puissiez voir à quoi il ressemble plus tard. Vous devez d'abord le transformer en ZIP, pour le compresser, faites un clic droit sur le dossier avec winrar installé et cliquez sur "Ajouter à l'archive…" tout ce que vous devez faire est de sélectionner ZIP sous le format d'archive. Cela devrait faire une copie ZIP de votre projet. Vous n'avez pas à vous soucier du nom du ZIP, donc même s'il s'appelle mytheme(19645), tout ira bien grâce à ce que nous avons ajusté dans le fichier "package".
------------------------

Après cela, pour installer un thème dans aseprite, accédez au menu Extensions (Edition-> Préférences-> Extensions) et cliquez sur Ajouter une extension. Ensuite, accédez au dossier facile à localiser dans lequel vous avez placé votre dossier zip/projet et double-cliquez sur votre ZIP pour l'ajouter en tant qu'extension. Ensuite pour appliquer votre thème vous passez dans le menu "Thème" et double-cliquez dessus dans la liste (le double-clic est très important si vous sélectionnez le thème et appuyez sur ok ou l'appliquer ne changera pas le thème, cette petite bizarrerie m'a fait pense que je ne faisais pas mon propre thème correctement pendant environ une heure). Pensez ensuite à retourner dans le menu des extensions et à désinstaller votre thème s'il n'est pas prêt.
------------------------

Maintenant, vous devriez être prêt à changer les choses pour votre thème. Revenez à votre version décompressée de votre projet. Tout d'abord le fichier "feuille", n'ouvrez pas ce fichier dans MS Paint car MS Paint ne prend pas en charge la transparence. Vous aurez envie d'ajuster ce fichier en un mot bien sûr ! Tout d'abord, vous remarquerez de nombreuses lignes indiquant les tranches (si vous ne souhaitez pas les voir, vous pouvez aller dans view->show->Slices). Le créateur d'aseprite l'a inclus pour nous et ils montrent la taille des sprites pour chaque icône/9splice/ect. Essayez de rester dans les cases indiquées par eux pour les thèmes de recoloration simples. Vous pouvez également créer votre propre feuille de sprites et lorsque nous arrivons au fichier "thème", vous pouvez rediriger les emplacements de ce que vous remplacez vers cette image au lieu de celle-ci. Vous reconnaîtrez probablement la plupart des icônes ici si vous avez beaucoup utilisé aseprite, recherchez tout ce qui a des bords arrondis sur l'interface utilisateur. S'il a des bords arrondis, il s'agit probablement d'une épissure 9 et indiquée sur cette feuille. Notez que certaines des couleurs ont une transparence qui pourrait ne pas s'afficher correctement sur le damier gris par défaut d'aseprite.
------------------------

Voici quelques images incluses pour avoir une idée de l'emplacement de certaines des 9 épissures sur la feuille. Il y a un 9splice pour les boutons dans les états non enfoncés, survolés et enfoncés, alors gardez cela à l'esprit. Les barres de défilement, les sélections dans les menus déroulants et les zones de saisie ont également leurs propres couleurs. L'utilisation exacte de chaque épissure se trouve dans le fichier "thème" si vous souhaitez ajuster les couleurs dans une direction plus programmatrice.
------------------------

 

Il peut être difficile de deviner ce qui se passe où dans la feuille de sprites, donc donner aux choses une couleur éclatante pour les yeux peut aider à résoudre un peu les problèmes. Vous pouvez également consulter la section Parties du fichier "Thème" pour trouver les noms et les coordonnées x/y du coin supérieur gauche de chaque sprite, mais les noms ne sont pas toujours très clairs sur ce qui va où dans un sprite.
------------------------

Le fichier "theme" s'ouvre de la même manière que le fichier "package". Vous sélectionnez et ouvrez dans le Bloc-notes. Ce fichier est l'endroit où vous effectuez tous les autres ajustements et peut être très écrasant. Je ferai de mon mieux pour le briser. Vous pouvez d'abord ajuster le nom de votre thème (à des fins d'organisation) et la mise à l'échelle de l'écran et de l'interface utilisateur. La mise à l'échelle de l'écran ajuste le canevas, je crois, et la mise à l'échelle de l'interface utilisateur ajuste la fenêtre de l'interface utilisateur. Ce que vous mettez ici n'est stocké que sous forme de valeurs entières et est ensuite multiplié à l'échelle d'origine… exemple : la mise à l'échelle de l'écran 1 se traduirait par un grossissement de 100 %, la mise à l'échelle de l'écran 1.9 se traduirait par un grossissement de 100 %, la mise à l'échelle de l'écran 2 se traduirait par un grossissement de 200 % . Pas exceptionnellement utile pour le moniteur moyen, mais probablement utile si vous utilisez un projecteur tout en étant allongé dans votre lit et ainsi de suite. Ensuite, un autre endroit pour glisser votre nom comme crédit pour la création de ce thème.
------------------------

Ensuite, l'option de changer la police utilisée dans aseprite. Les options de police par défaut à glisser ici sont limitées, si vous voulez changer la police accédez au dossier des polices dans le dossier de données d'aseprite (Aseprite\data\fonts) Vous y verrez 2 images qui affichent la police par défaut personnalisée d'aseprite et un fichier nommées "polices". L'ouverture du fichier "polices" avec le bloc-notes vous montrera vos options par défaut pour ce que vous pouvez changer la police. Si ce n'est pas dans cette liste, vous ne pouvez pas l'utiliser dans aseprite. Si vous êtes déterminé à créer votre propre police, vous pouvez probablement faire une copie des feuilles de sprite pour la police personnalisée d'aseprite et les utiliser comme guide pour créer une nouvelle police. Je ne sais pas grand-chose sur la création de polices personnalisées, désolé. Pour ajouter une police installée existante à cette liste, copiez et collez simplement l'entrée Arial et remplacez "Arial" par le nom de fichier de la police installée dans le fichier "polices" de votre système d'exploitation, puis écrivez le nom de la police dans le fichier "thème". Assurez-vous de redémarrer aseprite si vous avez installé la police avec aseprite ouvert.
------------------------

Vient ensuite les dimensions des éléments ui dans ce que je pense être des pixels. Les éléments de l'interface utilisateur sont tous assez bien étiquetés, ils devraient donc être assez faciles à comprendre.
------------------------

Après cela, les couleurs. Je vais être honnête, il est très difficile de dire ce qui va où pour moi. Il faudra probablement beaucoup de temps pour ajuster cela. Ce que vous voyez ici est une liste des sections de l'interface utilisateur auxquelles un code de couleur hexadécimal est attribué.
------------------------

Heureusement, vous pouvez facilement comprendre les codes de couleur hexadécimaux pour les couleurs dans aseprite et copier les codes hexadécimaux à partir de là dans votre fichier.
------------------------

Voici une liste des couleurs par défaut dans le fichier pour vous aider à visualiser les couleurs que vous pourriez être en mesure d'échanger. Une chose utile que j'ai trouvée était d'appuyer sur ctrl + F pour ouvrir le menu de recherche dans le bloc-notes et de rechercher les couleurs hexadécimales exactes si je voulais dire changer toutes les choses qui sont blanches en noir et toutes les choses qui sont noires en blanc. Enfin, il y a évidemment un schéma de nommage et les zones de l'interface utilisateur semblent être regroupées. Les visages sont comme la couleur d'arrière-plan pour les sections de l'interface utilisateur et les visages chauds sont, je crois, des parties cliquables ? Le texte chaud est un texte cliquable, la radio fait référence aux menus radio, je crois, les "sélectionnés" sont évidemment des éléments d'interface utilisateur sélectionnés, le survol pour la couleur lorsqu'il est survolé, etc.
------------------------

Les parties sont toutes les icônes/éléments ui du fichier « feuille ». D'abord, il donnera ses coordonnées x et y sur la feuille de sprite où l'icône commence, puis donnera une hauteur et une largeur en pixels pour cette icône. Vous changeriez cela si vous faisiez des icônes plus grandes/plus petites. Ceux qui ont plusieurs largeurs et hauteurs sont des icônes/éléments épissés (comme 9 épissures), vous êtes la longueur d'identification de chaque section.
------------------------

Enfin, la section style. Il s'agit de décider quels éléments vont où à partir de ce que vous avez défini dans toutes les autres sections. Cela peut être utile pour déterminer où va une couleur ou une pièce. Vous pouvez également ajuster le remplissage, la longueur de la marge et l'alignement du texte ici.