Skyfall, partie 9 : un éditeur de sprites pour les blocs et les décors

Partie 9 de l’histoire de Skyfall, et le dernier des trois outils que j’ai bâtis du 10 au 12 novembre. La partie 7 parlait de l’éditeur de pistes et la partie 8 de l’éditeur de cartes. L’éditeur de cartes peint les arènes avec des blocs et des objets. Cet article parle de l’outil qui peint les blocs et les objets eux-mêmes : l’éditeur de sprites, arrivé tard le 12 novembre, en un seul commit de 32 fichiers.

Table des matières

• Des blocs et des objets
• Peindre un bloc
• Le jeu dans le coin
• Images et calques
• Des terrains animés
• Enregistrer : PNG, Aseprite et registre
• Entre les deux éditeurs
• Où en est Skyfall
• L’histoire de Skyfall

Des blocs et des objets

Les arènes de la partie 8 sont faites de deux sortes de sprites.

Un bloc est un terrain, comme la pierre de ruine moussue ou le basalte. C’est une seule image PNG de 96 pixels sur 64, un gabarit d’autotile. Ses premières rangées contiennent 16 formes : un bloc de 3 cases sur 3, un pilier de 1 case de large, une barre de 1 case de haut et un bloc seul. Elles existent en trois variantes, A, B et C, pour qu’un long mur ne répète pas la même tuile. Les dernières rangées contiennent les coins intérieurs, un remplissage calme pour les cases au fond d’un mur, les débordements du dessus (l’herbe et la neige, dessinées dans la case vide au-dessus) et ceux du dessous (les gouttes et les glaçons). Une variante vide reprend la variante A, et des cases de débordement vides rendent les débordements plus rares.

Un objet est une bande d’images côte à côte, comme une torche, une bannière ou le four-bouteille d’Embergrove.

À l’arrivée des stages, un script a généré les images PNG des blocs, et ce script était jetable. Ce sont maintenant les images PNG qui font foi, et l’éditeur de sprites les repeint sur place. Sa fenêtre Open liste les 21 blocs par biome et les 15 objets. Un nouveau bloc part d’un gabarit vide ou de la copie d’un autre bloc. Un nouvel objet part d’une taille d’image, d’un nombre d’images et d’un type : décor ou lumière.

Peindre un bloc

love tools/sprite/editor ouvre l’éditeur. Comme les deux autres, c’est une application LÖVE autonome avec les mêmes widgets en pixel art.

Les outils sont un crayon, une gomme, un pot de peinture, une ligne, un rectangle, un outil d’ombrage, une pipette et une sélection, avec des pinceaux de taille 1 à 4. Le bouton droit efface. Sur un bloc, le pot de peinture reste dans sa tuile de 8 pixels sur 8. L’outil d’ombrage éclaircit un pixel d’un cran le long des couleurs du sprite lui-même, et le bouton droit l’assombrit d’un cran.

Le miroir passe par le gabarit. Peindre un bord gauche peint le bord droit, retourné. Peindre le coin intérieur en haut à gauche peint celui en haut à droite. Un pilier ou un débordement se reflète dans sa propre tuile. Sur un objet, le miroir retourne simplement le dessin autour de son milieu.

Le guide nomme les rangées du gabarit. Il marque aussi en rouille les côtés de chaque forme qui donnent sur le vide, là où va le rebord du bloc.

Le panneau des couleurs a un champ hexadécimal, la teinte, la saturation, la valeur et l’alpha. Avec « Recolour the sprite » coché, changer la couleur repeint chaque pixel de cette couleur, dans chaque calque et chaque image non verrouillés, en une seule étape d’annulation. La palette liste les couleurs du sprite par dégradé, ou celles d’un autre bloc ou objet, en plus de l’encre foncée que partagent tous les sprites, #0b0e1c.

Le jeu dans le coin

En haut à droite, le panneau In game dessine le sprite non enregistré avec le moteur de rendu des stages du jeu. Il peut montrer un échantillon avec chaque forme du gabarit, une pièce d’exemple sur un fond choisi, ou une arène qui utilise le sprite. Les lumières sont allumées, et tout s’anime sur l’horloge du jeu. Chaque coup de crayon apparaît dans l’arène avant que j’enregistre.

Images et calques

En bas, la ligne de temps a une rangée par calque et une colonne par image. L’œil cache un calque, et un calque caché reste hors de l’image PNG. Le cadenas protège un calque du pinceau. « + Frame » ajoute une copie liée de l’image : les deux images partagent leurs pixels jusqu’à ce que j’en peigne une. La pelure d’oignon teinte les pixels qui changent depuis l’image d’avant, en rouge, et vers l’image d’après, en bleu. Entrée joue l’animation à la vitesse et dans l’ordre du jeu.

Une animation a une vitesse en images par seconde et un ordre de lecture. Dans un ordre comme « 1 2 1 3 », une image répétée reste plus longtemps à l’écran.

Le four-bouteille le montre bien : 6 images de braises, jouées à 8 images par seconde dans un ordre de 24 étapes, pour que le scintillement n’ait pas l’air d’une boucle. Chaque four placé sur une carte commence aussi à son propre point de l’ordre.

Des terrains animés

Le même commit a appris au jeu à animer les terrains. Un bloc animé place ses images côte à côte, alors son image PNG fait un multiple de 96 pixels de large, et sa ligne dans engine/map/stage/terrains.lua donne une vitesse et, au besoin, un ordre de lecture. Chaque case de ce terrain s’anime en même temps, sur la même horloge que les torches. Le moteur de rendu change la texture de chaque lot de tuiles à chaque image.

Deux blocs s’en servent. Le magma est un nouveau terrain de lave, avec 8 images à 6 images par seconde, et le plancher d’Embergrove en est fait. La brique de temple runique, celle de la ziggourat de Cragspire, a eu un calque Runes par-dessus ses briques et 4 images à 6 images par seconde. Son ordre, 1 1 1 2 3 4 4 3 2, s’attarde sur la première image, va jusqu’à l’image 4 et revient.

Enregistrer : PNG, Aseprite et registre

Ctrl+S écrit trois choses. D’abord, la bande PNG que le jeu lit. Ensuite, <nom>.aseprite à côté, quand le sprite a plusieurs calques ou quand ce fichier existe déjà. Il garde les calques cachés et s’ouvre dans Aseprite et LibreSprite. Enfin, l’entrée du sprite dans le registre, terrains.lua pour un bloc ou objects.lua pour un objet, avec sa vitesse, son ordre de lecture, sa largeur, son ancrage et sa lumière. Les autres entrées restent identiques à l’octet près.

La partie Aseprite, c’est ase.lua, environ 200 lignes. Il lit les fichiers RGBA, en niveaux de gris et indexés, avec les cels liés et les groupes cachés, et il écrit des fichiers RGBA comme le fait Aseprite. Quand j’ouvre un sprite, l’éditeur prend le fichier .aseprite seulement s’il contient la même image que le PNG, ou s’il est le plus récent des deux.

Entre les deux éditeurs

L’éditeur de cartes a reçu un bouton Edit art. Il ouvre le bloc ou l’objet choisi dans l’éditeur de sprites. L’éditeur de cartes recharge aussi les dessins et les registres chaque fois que sa fenêtre reprend le focus. Alors je peins dans une fenêtre, j’enregistre, je clique sur l’autre, et l’arène montre le nouveau dessin.

Comme les deux autres éditeurs, celui-ci a un test, love tools/sprite/editor --selftest. Il peint, ajoute des calques et des images liées, recolore, puis enregistre et recharge sur une copie temporaire des dessins. Il lit aussi chaque fichier .aseprite du dépôt, vérifie qu’un enregistrement laisse les registres identiques à l’octet près, et fait jouer une feuille animée dans le moteur de rendu.

Où en est Skyfall

• Toujours en pré-alpha, à la version 0.0.0.
• Environ 540 commits depuis le 11 janvier, dont 34 du 10 au 12 novembre.
• Environ 41 500 lignes de Lua dans 214 fichiers, contre 27 800 dans 153 fichiers le 9 novembre.
• Environ 10 300 de ces lignes sont les trois éditeurs : environ 3 900 pour les pistes, 2 600 pour les cartes et 3 800 pour les sprites.

L’histoire de Skyfall

1. D’un cube dans Defold à un nouveau départ dans LÖVE
2. Sauts muraux, un vrai arc et un réseau silencieux
3. Des manches, de la pluie, des torches et une reprise VHS
4. La salle de guerre et l’armurerie
5. Un éditeur de cartes, un fantôme et la forge des champions
6. Des menus en pixel art, six arènes et enfin du son
7. Un éditeur de pistes pour la musique
8. Un éditeur de cartes qui dessine avec le jeu
9. Un éditeur de sprites pour les blocs et les décors (cet article)