Pixel Editor
Sprites et tilemaps, pixel par pixel : images, pelure d'oignon, palettes, collisions par tuile, normal maps, 9-slice, export GIF ou Aseprite.
En un mot#
Un éditeur de sprites et de tilemaps fait pour travailler aussi confortablement en 32×32 qu'en 1024×1024, avec des images d'animation et un outillage couleur qui comprend les palettes.
L'agencement#
| Barre de menus | File · Edit · View · Plugins |
| Onglets de mode | Sprite et Tilemap |
| Barre d'outils | Nouveau, annuler/rétablir, taille de toile, recadrage, aplatissement, miroirs horizontal et vertical, grille, import, export, Enregistrer |
| Ligne d'options | taille et forme de brosse, opacité, vue partagée, préréglages |
| Colonne de gauche | crayon, formes, remplissage, dégradé, texte, sélection, pipette, paire de couleurs, palette |
| Centre | la toile, avec un rappel de l'outil et des couleurs, et un aperçu à 1:1 |
| Droite | Calques, puis Effets, Normal map, Référence et Modes |
| Bas | la bande d'images, puis la barre de palette |
| Barre d'état | taille de toile, calque actif, zoom |
Ce qu'on y fait#
Dessiner#
Espace + glisser fait le panoramique, la molette zoome, 0 réinitialise la
vue. La brosse a une taille, une forme (carrée par défaut) et une opacité.
L'aperçu montre le sprite à 1:1 pendant que vous travaillez zoomé: la seule vue
honnête d'un sprite pixel.
Les calques#
Nommés, réordonnables, chacun avec son mode de fusion et son opacité, plus une étiquette de couleur et un champ de filtrage quand il y en a beaucoup. Les Effets s'appliquent de façon non destructive.
Animer#
La bande d'images en bas est une suite de vignettes. Ajoutez, dupliquez, supprimez, réordonnez ; fixez une durée en millisecondes par image ; lisez en avant, en arrière ou en va-et-vient. Le rappel vous dit ce que cela donne, 1 image • 100 ms • ~10 i/s.
La pelure d'oignon montre les images voisines en transparence sous l'image courante : c'est ce qui empêche un cycle de marche de dériver.
La couleur#
La barre de palette est la partie qui récompense l'apprentissage :
| Palette | le jeu de travail, avec un compteur et + Ajouter |
| Récents | ce que vous avez pioché dernièrement |
| Nuances | une rampe clair-sombre engendrée depuis la couleur courante |
| Harmonies | suggestions complémentaires, triadiques et analogues |
| Rampe | une rampe que vous construisez et gardez |
La couleur courante s'édite en hexadécimal.
Les tilemaps#
L'onglet Tilemap fait passer du dessin d'un sprite à sa disposition en tuiles. Le résultat part vers Engine, qui a son propre éditeur de tilemap pour le niveau lui-même.
Les normal maps#
La section Normal map dérive une normal map du sprite : un sprite 2D peut alors être éclairé dans l'Engine au lieu de rester plat.
La référence#
Déposez une image dans la section Référence et elle se place derrière la toile pendant que vous dessinez par-dessus.
Les panneaux#
Ils sont neuf, et les quatre derniers sont ce qui transforme un sprite en ressource de jeu :
| Tool Palette | les outils |
| Layers | la pile |
| Timeline | les images d'animation |
| Reference | une image derrière la toile |
| Effects | des effets non destructifs sur un calque |
| Tileset | fabriquer un jeu de tuiles depuis la toile, à la taille de tuile choisie |
| Tilemap | disposer ces tuiles en carte |
| Collisions | les formes de collision, tuile par tuile |
| Normal Map | dériver et retoucher une normal map |
Jeux de tuiles et cartes#
Le panneau Tileset découpe la toile en tuiles (16 px par défaut) ; le panneau Tilemap les dispose en carte, avec des calques, et sait la redimensionner.
Les cartes s'enregistrent en .tilemap, et s'exportent de deux façons : en un
seul fichier, ou séparément: la carte en JSON et chaque jeu de tuiles en
image, ce qu'attend en général un moteur externe.
Les collisions#
Chaque tuile porte une forme de collision, dessinée par-dessus le jeu de tuiles plutôt que déclarée dans le code :
| Full | toute la tuile bloque |
| None | traversable |
| Moitié haut / bas / gauche / droite | collision partielle |
| Slope up / Slope down | collision en pente |
Show Collisions les superpose, et l'ensemble s'exporte en JSON. Le faire ici signifie que Engine reçoit une carte qui sait déjà sur quoi le joueur peut marcher.
Les normal maps#
Generate Normal Map en dérive une du sprite, avec une force ; le Normal
Map Editor permet ensuite de peindre la direction de la normale à la main
(P), seul moyen de corriger les endroits que la passe automatique rate.
9-slice et pivot#
Les repères 9-slice marquent les zones étirables d'un sprite d'interface, et Pivot / Origin fixe le point autour duquel le sprite tourne et s'ancre. Les deux voyagent avec le sprite jusque dans l'Engine.
La symétrie#
Mirror X et Mirror Y peignent les deux côtés à la fois: horizontal, vertical, les deux, ou radial.
Rampes de couleur et palettes#
La modale Color Ramp construit une rampe proprement plutôt qu'à l'œil, et les
palettes s'importent depuis .gpl (le format de palette GIMP dans lequel
arrivent la plupart des palettes de pixel art).
Exporter#
| Format | Pour |
|---|---|
| PNG | une image seule |
| GIF | une animation, partout |
| APNG | une animation, avec une vraie couche alpha |
| Aseprite | le retour dans Aseprite, calques intacts |
| Atlas / planche de sprites | un moteur de jeu |
.tilemap | la carte, d'un bloc ou scindée en JSON + images |
Fichiers lus et écrits#
| Format natif | .editor |
| Imports | .png, .jpg, .aseprite, .tilemap, .gpl (palettes) |
| Exports | .png, .gif, APNG, .aseprite, atlas de sprites, .tilemap (d'un bloc ou scindé), collisions en JSON |
Envoyer vers les autres ateliers#
Produit du pixel art. Accepte du pixel art et des images.
Le pixel art est accepté par Inkwell, Composer, Animator, Matter et Engine: une planche de sprites peut entrer dans un jeu sans détour par un fichier.
Travailler à plusieurs#
Le Pixel Editor synchronise opération par opération : données de scène, ressources, animations et scripts.
Limites et pannes courantes#
- Le zoom n'est pas la résolution. La barre d'état donne la vraie taille de toile ; l'aperçu la montre à 1:1.
- Une brosse douce n'est pas une brosse pixel. Une opacité inférieure à 100 % crénera vos bords, rarement ce qu'on veut sur un sprite.
- La durée est par image, pas par animation. Un cycle de 12 images à 100 ms chacune tourne à ~10 i/s, quoi que fassent les autres.