Créateur de pixel art — Éditeur et générateur de pixel art en ligne gratuit

Un créateur de pixel art, c'est quatre choses : une grille, un crayon, une gomme et un bouton d'export. Tout le reste — calques, animation, gestion des palettes — n'est que du confort empilé sur cette boucle. L'éditeur proposé ici fonctionne dans le navigateur. Vous choisissez une taille de canevas, vous dessinez avec un crayon d'un pixel et vous téléchargez un PNG. Pas d'installation, pas de compte, pas d'étape d'envoi.

La décision que la plupart des outils enterrent : la taille de la grille est ce qu'il y a de plus difficile à inverser. Tout ce qui suit en découle — le nombre de pixels dont dispose un visage, qu'un œil fasse un pixel ou deux, la manière dont le sprite survit à un agrandissement 4x dans un moteur de jeu. Cette page couvre l'éditeur lui-même, le calcul de la grille, le dessin par opposition à la génération d'un sprite, les palettes comme budget, et comment prendre le personnage que vous venez de dessiner pour l'intégrer dans un monde 3D que l'on peut parcourir à pied.

Créateur de pixel art (canevas en direct)

Le canevas, c'est la page. Au-dessus de la ligne de flottaison, vous disposez d'une grille bitmap à taille fixe, d'un crayon qui écrit un pixel par clic, d'une gomme qui réinscrit la valeur transparente, d'une bande de palette et d'un bouton d'export qui écrit un PNG. Le clic gauche dessine, le clic droit ou une touche modificatrice efface, et le centre du canevas montre toujours la vraie frontière du pixel plutôt qu'une approximation mise à l'échelle.

Comprenez la différence entre la taille du canevas et la taille de la vue avant de dessiner quoi que ce soit. Un canevas 32x32 affiché en 800x800 représente toujours 32x32 pixels de données. Le zoom modifie la taille à laquelle les pixels sont rendus, jamais leur nombre. Exporter alors que vous êtes zoomé produit quand même un fichier 32x32 : c'est le comportement correct, et cela surprend presque tout le monde la première fois.

Le réglage que les débutants ratent, c'est la taille de grille choisie après le dessin plutôt qu'avant. Quelqu'un croque un personnage sur un canevas 64x64, l'aime bien, puis veut l'intégrer dans un jeu de tuiles 16x16. Réduire un sprite 64x64 dessiné à la main vers du 16x16 par rééchantillonnage le détruit : les détails de deux pixels deviennent des traînées grises, les contours d'un pixel se transforment en lignes grises de deux pixels, et le nombre de couleurs explose parce que chaque bord moyenné invente une nouvelle valeur. Si vous avez déjà dessiné à la mauvaise taille, redessinez à la taille cible en vous servant de l'ancienne version comme référence visuelle. C'est plus rapide et plus propre que n'importe quelle réduction, et cela impose la simplification dont la grille plus petite a réellement besoin.

Agrandir plus tard est sans risque. Réduire plus tard ne l'est pas. Choisissez la plus petite grille capable de contenir les détails dont vous avez besoin, et considérez chaque pixel dépensé comme définitivement dépensé.

Grille et modèles de pixel art

Les personnes qui cherchent une grille de pixel art, une grille pour du pixel art ou le dessin de pixel art sur une grille parlent toutes du même objet : un champ délimité de carrés où un carré est un pixel et une couleur. La grille n'est pas une décoration posée sur l'illustration. C'est le contrat de résolution. Un cercle de rayon 5 n'est pas un cercle : c'est un escalier précis de pixels isolés que vous placez à la main ou que vous acceptez depuis un modèle.

Les modèles existent parce que les quatre premières rangées d'un cercle, d'un cube isométrique ou d'un personnage en vue 3/4 sont pénibles à dériver de mémoire et faciles à rater légèrement. Un modèle est une position de départ, pas un sprite fini. Collez la forme, puis retirez les pixels qui n'appartiennent pas à votre personnage et repeignez le contour afin que la direction de la lumière soit cohérente avec tout le reste de ce que vous avez dessiné.

La taille que vous choisissez est un budget exprimé en pixels. Un sprite 8x8 laisse à un visage environ 4x4 pour travailler, ce qui ne laisse pas de place à la fois à un contour, un œil et une bouche — vous en choisissez deux. Un sprite 16x16 accueille un contour d'un pixel et deux tons par matière. Un sprite 32x32 a enfin de la place pour une direction de la lumière. Au-delà de 64x64, la tentation est de dessiner des traits plutôt que des pixels, et la rigueur qui fait lire le style commence à s'échapper.

Les grilles non carrées comptent pour les tuiles. Un canevas 16x32, c'est un personnage debout dans un jeu en vue de dessus ; un canevas 32x32, c'est une tuile. Gardez ces deux catégories dans des fichiers séparés, car un sprite de personnage et une tuile de jeu de tuiles suivent des règles d'alignement différentes une fois arrivés dans le moteur.

Certaines personnes construisent la grille dans un tableur, une cellule par pixel, en remplissant des cellules et en dézoomant pour vérifier si la forme se lit d'un coup d'œil. Ça marche, et cela présente un vrai avantage : vous pouvez copier un bloc d'œil 6x6 et le coller dans chaque cellule d'une feuille de sprites sans le redessiner.

Le mode d'échec, c'est l'export. Les tableurs affichent des lignes de grille, des bordures et du remplissage de cellule. Si vous faites une capture d'écran de la feuille puis la recadrez, vous héritez d'une fine jointure sombre d'un pixel entre chaque pixel et d'une couleur légèrement fausse sur chaque bord de cellule. Désactivez d'abord les lignes de grille et les bordures, réglez le zoom sur un multiple entier exact, puis recadrez sur la frontière du pixel plutôt qu'à l'œil. Un canevas dédié évite tout le problème, et c'est pourquoi le tableur est un bon outil de planification et un mauvais outil de production.

Dessiner ou générer

Les deux méthodes remplissent le même canevas. Le dessin à la main écrit exactement les pixels que vous placez. La génération écrit un ensemble de pixels qui satisfait une description, que vous modifiez ensuite. Ni l'une ni l'autre n'est un raccourci qui dispense de l'autre ; elles répondent à des questions différentes.

Le dessin à la main l'emporte quand vous voyez déjà la silhouette. Si vous connaissez la forme du casque, l'espacement exact des yeux ou la manière dont ce personnage doit s'aligner à côté de quatre sprites existants, placer les pixels est plus rapide que de les décrire puis de corriger le résultat. La génération l'emporte quand vous explorez. Si vous connaissez l'idée — une grenouille blindée de profil tenant un bouclier — mais pas la silhouette, la génération vous donne une position de départ en une seule passe au lieu de quarante décisions. Agent Sprite Forge génère des sprites à partir d'une description directement dans une grille que vous pouvez continuer à modifier, ce qui compte parce que le résultat est un point de départ, pas un livrable.

La sortie d'un sprite généré est plausible en taille miniature et brouillonne à un zoom 8x. Dommages typiques : des pixels isolés qui flottent à un carreau du contour, des ruptures dans ce qui devrait être un contour continu d'un pixel, des bords anticrénelés porteurs de couleurs absentes de votre palette, et le sprite qui touche la bordure du canevas. Ce dernier point n'est pas cosmétique — un sprite qui occupe tout le canevas n'a aucune marge, donc une rotation, une ombre portée ou un quelconque remplissage du moteur le rognera.

La correction est mécanique et prend quelques minutes par sprite. Faites-la toujours dans le même ordre pour ne pas réintroduire des problèmes que vous avez déjà réglés.

En ligne, gratuit, sans téléchargement

La gratuité couvre toute la boucle de dessin : choix de la grille, crayon, gomme, remplissage, édition de la palette et export PNG. Cela n'expire pas et l'export n'est pas conditionné à la création d'un compte. La génération est la partie soumise à des limites pratiques, car produire un sprite coûte de la puissance de calcul, contrairement au fait de placer un pixel. Le dessin et l'export ne sont pas limités en débit.

Aucun compte n'est requis pour dessiner ou exporter. Rien de ce que vous dessinez n'est envoyé ; l'image reste dans l'onglet du navigateur et ne part qu'au moment où vous la téléchargez. Le compromis de l'édition côté client est le même que pour n'importe quelle application de bureau sans sauvegarde automatique : fermer l'onglet sans exporter fait perdre le dessin. Exportez quand le sprite se lit correctement, pas quand il est terminé. Les versions intermédiaires ne coûtent rien.

L'export contient exactement les pixels. Un PNG aux dimensions natives du canevas, en RGBA 8 bits, alpha préservé. Si vous avez dessiné sur un fond transparent, le fond reste transparent — transparent est une valeur, pas une couleur, et elle survit à l'export. Si vous avez dessiné sur un fond rempli, ce remplissage est intégré dans chaque pixel derrière le personnage. Si vous voulez une couleur de fond, peignez-la délibérément. Si vous voulez composer le sprite par-dessus autre chose plus tard, laissez le fond vide et exportez tel quel.

La séparation honnête se fait entre la génération et tout le reste. L'édition, le travail des couleurs et la sortie de fichier s'exécutent en local et se comportent de la même façon que vous utilisiez l'outil une fois ou tous les jours. Les limites pratiques s'appliquent à la génération, ce qui explique pourquoi le bon flux de travail consiste à générer une forme approximative, puis à passer votre temps dans l'éditeur, où rien n'est mesuré.

Rien dans le chemin d'export n'ajoute de filigrane, ne rééchantillonne l'image ni ne renomme le fichier selon les dimensions du canevas. Ce que vous avez dessiné est ce que vous obtenez.

Palettes et styles

La couleur est un budget, pas une préférence. Une palette de 16 couleurs est une contrainte qui force la réutilisation, et c'est la réutilisation qui fait qu'un sprite se lit comme un seul objet plutôt que comme un tas de pixels. Quand le même brun moyen apparaît sur la lanière de cuir, le manche en bois et la botte, l'œil les regroupe et le personnage devient net. Une palette de 256 couleurs, c'est assez de corde pour se pendre : elle vous permet d'ajouter une nouvelle couleur chaque fois que vous rencontrez un problème, et le résultat n'a aucune logique interne. Deux sprites du même artiste avec deux palettes de 60 couleurs sans lien donnent l'impression de venir de deux projets différents.

Construisez la palette sous forme de rampes plutôt que de couleurs individuelles. Un jeu de 16 couleurs exploitable, c'est cinq rampes de trois tons, plus une couleur de contour dédiée. Chaque rampe est une base, une ombre et une lumière. La base est votre ton moyen. L'ombre est la base assombrie et décalée vers le bleu ou le violet, pas simplement obscurcie — une ombre obtenue en baissant uniquement la luminosité se lit comme de la saleté. La lumière est la base éclaircie et décalée vers le jaune. Sur un sprite 16x16, les lumières doivent couvrir environ un dixième des pixels ; au-delà, la source lumineuse cesse d'être directionnelle.

Le style vient des règles que vous appliquez avec constance, pas des couleurs elles-mêmes. Une palette partagée par toute une distribution signifie que le rouge de la tunique du joueur a exactement la même valeur RVB que le rouge de la bannière ennemie et le rouge du ramassable de soin. C'est toute l'astuce. L'appliquer ne coûte rien et c'est la différence entre un jeu qui paraît délibéré et un jeu qui paraît assemblé.

Transformez votre personnage en pixel art en un monde 3D

Le passage se résume en une phrase : exportez le sprite à 100 %, importez-le comme texture et placez-le dans le monde à un multiple entier de la grille de pixels pour que les pixels restent carrés.

Le constructeur de jeu 3D prend cette texture et la place sur un plan toujours orienté vers la caméra, de sorte qu'un personnage 16x16 se lit comme un personnage 16x16 sous tous les angles au lieu de se réduire à une fine lamelle quand vous marchez de côté. Les collisions, la gravité et une caméra suiveuse sont indépendantes du sprite, ce qui signifie que vous pouvez remplacer l'illustration plus tard sans toucher au contrôleur du personnage. Mini World est le plus petit endroit pour tester le résultat : une petite zone praticable, un personnage, quelques objets à percuter. The Cyclops' Island est le test plus grand, où la hauteur du terrain et les lignes de vue rendent évident si l'échelle du sprite est correcte par rapport à l'environnement.

L'échelle est l'endroit où la plupart des premières tentatives échouent. Décidez d'une conversion avant de placer quoi que ce soit — un pixel égal à une unité de monde est trop petit sur un sprite 16x16 et trop grand sur un sprite 128x128. Choisissez un facteur pour que le personnage finisse à peu près à la hauteur d'un encadrement de porte, puis conservez ce facteur pour chaque personnage du projet. Une distribution construite avec deux rapports pixel-monde différents ne paraîtra jamais correcte lorsque les personnages sont côte à côte.

Mise à l'échelle et agrandissement sans le flou

Le pixel art a des bords nets par construction. Chaque filtre de lissage — bilinéaire, bicubique, Lanczos — fonctionne en moyennant les pixels voisins, et la moyenne de deux couleurs de palette produit une troisième couleur absente de votre palette. Cette troisième couleur, c'est le flou. Ce n'est pas un réglage de rendu que vous pouvez annuler plus tard ; une fois qu'une image a été rééchantillonnée, ses bords nets d'origine ont disparu.

N'agrandissez que par multiples entiers : 2x, 3x, 4x, 8x. Un sprite 16x16 à 4x fait 64x64, et chaque pixel source devient un bloc propre de 4x4. À 2,5x, certains pixels sources font 2 pixels de large et d'autres 3, si bien que le sprite développe une irrégularité visible sur toute la grille — des contours épais à un endroit et fins à un autre. Impossible de corriger cela après coup, sinon en réexportant à un multiple entier.

Le réglage qui ruine silencieusement un sprite net, c'est le filtre de rééchantillonnage, que les différents outils appellent Interpolation, Rééchantillonnage, Rééchantillonner l'image, ou une case Lissage à côté de Mettre à l'échelle. Il est par défaut en mode lissage dans la plupart des éditeurs et visionneuses d'images, et il refiltre l'image à chaque utilisation. Réglez-le sur « plus proche voisin » avant de toucher aux dimensions. La même règle s'applique en dehors de l'éditeur d'images : une texture importée dans un moteur 3D doit avoir ses filtres de minification et de magnification réglés sur « plus proche voisin », avec les mipmaps désactivées pour les textures en pixels, sinon le moteur la lissera dès que la caméra bouge. Sur une page web, l'équivalent est la propriété image-rendering réglée sur pixelated — sinon un navigateur qui met à l'échelle un PNG 32x32 sur 96 pixels de large applique son propre lissage et défait votre travail à la dernière étape.

Un dernier point : ne laissez jamais une interface mettre votre sprite à l'échelle par un pourcentage. Un conteneur qui dimensionne l'image à 100 % d'une largeur flexible tombera sur 2,3x ou 3,7x selon la fenêtre, et le sprite aura un aspect différent sur chaque écran. Rendez-le à sa taille de pixels native et mettez-le à l'échelle par un facteur entier, ou fixez explicitement la taille d'affichage.

Entrez dans le monde auquel il appartient

Un sprite, c'est un personnage qui n'a nulle part où se tenir. La dernière étape est celle que personne d'autre ne propose : prenez la feuille que vous venez de créer et placez-la dans un monde où l'on peut se promener — une petite île, une planète, un coin de rue sous la pluie. Chaque monde de ce site a été créé à partir d'une seule description écrite et publié sous forme de page jouable.

FAQ