Éditeur de pixel art et de sprites en ligne

Un éditeur de pixel art qui tourne dans un onglet de navigateur. Dessinez frame par frame, activez la pelure d'oignon pour aligner la pose suivante, et faites défiler la ligne de temps jusqu'à ce que le cycle de marche se lise. Rien à installer, pas de compte.

Les deux barres, et ce qu'elles contiennent

Les outils sont à gauche, la couleur et les réglages du canevas à droite, et le dessin au milieu.

La barre de gauche regroupe quinze outils en trois groupes, dessin, couleur, puis sélection, séparés par des lignes. Dessous, vos deux échantillons de couleur, l'actif cerné de rose, et un réglage plus/moins pour la taille du pinceau. Annuler et rétablir sont fixés au bas de la barre.

Le panneau de droite commence par Animer, qui ouvre la ligne de temps des frames. Dessous, la couleur courante en champ hex modifiable au clavier, le champ de couleur avec sa bande de teinte, et quatre transformations en un clic. Retourner horizontalement, retourner verticalement, pivoter à droite, pivoter à gauche. Puis la taille de grille, où le bouton de lien garde largeur et hauteur verrouillées ensemble, et un curseur d'échelle qui zoome le canevas sans toucher au sprite. Réinitialiser, enregistrer et télécharger sont tout en bas.

Ce que fait chaque outil

Chaque outil a un raccourci d'une seule touche, donc vous n'avez jamais à revenir à la barre.

Trois valent la peine d'être connus tôt. Crayon miroir divise le travail par deux sur tout ce qui est symétrique. Dithering est la façon de simuler un dégradé sans ajouter de couleurs. Éclaircir sert à ombrer vite, parce que vous n'arrêtez jamais pour choisir un nouvel échantillon.

Animer, frame par frame

Appuyez sur Animer et une ligne de temps s'ouvre sous le canevas. C'est elle qui fait de cet outil un éditeur de sprites plutôt qu'une appli de dessin.

Ajoutez une frame, dupliquez celle où vous êtes, ou supprimez-la. Activez ensuite la pelure d'oignon, le bouton aux calques empilés, et la frame voisine apparaît en pâle derrière votre canevas pour aligner la pose suivante sur la dernière. Ci-dessus, le fantôme montre où étaient l'épée et la cape sur la frame précédente. C'est exactement l'information qu'il faut pour les placer sur celle-ci.

La bande du bas montre chaque frame dans l'ordre, celle en cours cernée de rose. L'indicateur vous dit où vous êtes et à quelle cadence vous lisez.

Appuyez sur Lire pour voir le résultat à la cadence réglée, repérez la jambe qui saute d'un pixel de trop, corrigez, relisez. Quatre frames suffisent d'ordinaire pour une attente. Un cycle de marche en veut huit. Vous saurez que c'est bon quand ça n'a plus l'air de glisser.

Déposez un GIF animé sur le canevas et toutes ses frames atterrissent sur la ligne de temps d'un coup. C'est le moyen le plus rapide de corriger une mauvaise frame dans un cycle exporté par quelqu'un d'autre.

Tailles et export

Le canevas va de 1x1 à 512x512, et 32 ou 64 couvre la plupart des sprites.

Exportez en PNG pour tout ce qui va dans Godot, Unity, GameMaker ou un build web. Exportez en SVG quand l'art doit s'agrandir proprement, pratique pour les icônes et l'interface. Annuler et rétablir gardent tout l'historique, alors expérimenter ne coûte rien.

Ce qu'il ne fait pas

Il n'y a pas de calques, et mieux vaut le savoir avant de commencer.

Vous avez des frames à la place. Pour des sprites à 32 ou 64 pixels, l'échange passe en général, parce qu'à cette échelle vous placez des pixels un à un plutôt que de composer des passes. Mais c'est une vraie limite. Si les calques portent votre façon de travailler, ce n'est pas votre éditeur. Notre comparatif d'éditeurs dit sans détour lesquels en ont.

Le Sprite Editor de Unity, c'est autre chose

Les noms se ressemblent, alors clarifions.

Unity a une fenêtre nommée Sprite Editor. Elle découpe une sheet déjà importée en régions et règle les points de pivot, et elle ne dessine rien du tout. Cet outil-ci, c'est là que l'art se fait. Exportez un PNG ici, importez-le là-bas.

Ou sautez le dessin

Si vous préférez que le sprite existe avant de commencer à modifier, le générateur de sprites IA de Sprite AI (sprite-ai.art) en crée un à partir d'une description texte, de 32x32 à 512x512, et l'ouvre dans cet éditeur pour les retouches.