Créateur de sprites RPG — Générez gratuitement personnages, sprites et tilesets RPG

Un créateur de sprites RPG transforme une description écrite en éléments graphiques utilisables. Vous tapez quelque chose comme « vieux pêcheur, manteau bleu, chapeau de paille, vue de dessus, 32 par 32, marche en quatre images », et le générateur renvoie un sprite de personnage, une feuille de sprites ou un tileset sous forme de PNG avec un fond transparent. L'outil qui se cache derrière tout cela est Agent Sprite Forge, et il fonctionne dans le navigateur au sein de Neta Studio. Rien à installer, pas de tablette graphique, pas d'éditeur de pixels ouvert dans une seconde fenêtre.

Le plus difficile dans l'art RPG n'est pas la qualité, c'est la quantité. Un petit jeu a besoin d'un joueur, de huit PNJ, de quatre marchands et de vingt variantes d'ennemis, la plupart dans au moins deux directions. Cela représente environ quarante personnages avant même d'avoir dessiné un seul arbre. La plupart des personnes qui créent un RPG ne savent en dessiner aucun. Un générateur qui produit en quelques secondes un sprite 32x32 cohérent, un peu quelconque, apporte plus à un projet terminé qu'une superbe illustration qui a demandé un week-end entier.

Générez la distribution que vous êtes incapable de dessiner

Commencez par la distribution, pas par le héros. Le héros est le seul personnage que vous prendrez réellement plaisir à dessiner ou à retoucher. C'est la distribution qui fait mourir les projets : le forgeron, l'apprenti du forgeron, trois gardes aux armures légèrement différentes, un marchand, un enfant, un chien, six slimes et un loup. Chacun est une petite tâche artistique, et quarante petites tâches artistiques forment un mur. Agent Sprite Forge existe pour vous aider à franchir ce mur, afin que le monde soit peuplé avant que votre élan ne s'épuise.

L'entrée est une description, et cette description constitue toute l'interface. Une bonne description nomme quatre choses : l'identité du personnage, ce qu'il porte, la palette et le point de vue. « Garde, tabard bleu foncé sur cotte de mailles, lance, vue de dessus, 32x32, deux directions » est exploitable. « Guerrier cool » ne l'est pas, et l'échec est prévisible : le générateur choisit des détails génériques, vous obtenez un chevalier en gris et vous régénérez cinq fois en tentant de corriger un problème de description avec un bouton de relance.

Le deuxième mode d'échec est la sur-description. À 32 pixels de large, un personnage se résume à peu près à une tête, un torse et deux jambes. Une cape, un sac à dos, une écharpe, une épaulière et un amulette lumineux se disputent tous les mêmes douze pixels de silhouette. Aux petites tailles, les accessoires n'ajoutent pas du détail, ils ajoutent du bruit. Si votre première génération revient sous forme de masse illisible, retirez des éléments de la phrase avant de changer quoi que ce soit d'autre. Le créateur de jeu 3D et des mondes comme Mini World et L'Île du Cyclope appliquent le même principe : des formes lisibles d'abord, l'ornement ensuite.

Exemples générés

Trois formats de sortie couvrent presque tous les besoins d'un RPG. Chacun s'exporte en PNG avec un canal alpha, et chacun atterrit à un endroit différent. Ces différences comptent plus que le style graphique, car une feuille avec la mauvaise grille est inutilisable, peu importe la qualité du sprite.

Un personnage, une image, un fichier. Un PNG 32x32 avec transparence est la plus petite unité utile. C'est ce que vous générez pour un PNJ immobile, un marchand derrière son comptoir, un panneau, un coffre ou un ennemi qui ne bouge jamais. Il s'exporte en PNG à une seule cellule.

Il s'intègre comme texture sur un plan plat ou sur un panneau orienté vers la caméra. Dans le créateur de jeu 3D, un sprite à pose unique sur un panneau suffit pour tout un village de PNJ statiques, et comme il n'y a aucun état d'animation, rien ne peut se casser. Si votre liste de personnages est longue et votre temps limité, c'est le format à privilégier par défaut.

Quatre images disposées de gauche à droite, exportées en bande ou en grille. Quatre images en 32x32 sur une seule ligne forment un PNG de 128x32. Quatre directions donnent une grille 4x4 en 128x128, ou deux directions une grille 4x2 en 128x64. Le cycle de marche boucle en faisant avancer un index d'image au fil du temps ; à huit images par seconde, une marche de quatre images couvre une demi-seconde par cycle de pas et se lit correctement à vitesse de déplacement normale.

Il s'exporte en un seul PNG, accompagné en option d'un fichier JSON annexe listant la taille d'image, le nombre d'images, les colonnes et les directions. Ce fichier annexe n'est que des métadonnées simples, pas un format propriétaire. Si vous préférez vous en passer, les chiffres sont visibles dans les dimensions du PNG : 128 divisé par 32 donne quatre images.

Une grille de tuiles de terrain dans une seule image : herbe, bords d'herbe, chemins de terre, eau et bordures d'eau, sommets de murs, transitions de sol. Avec des cellules de 16x16, un atlas 8x8 est un PNG de 128x128 contenant 64 tuiles. En 32x32, les mêmes 64 tuiles nécessitent 256x256.

Il s'exporte en un seul PNG d'atlas. Il s'intègre dans une couche de carte Tiled, un TileSet Godot ou un maillage de tuiles Three.js. La propriété essentielle est que la taille de cellule corresponde exactement à la grille de la carte. Si vous générez des tuiles de 32x32 et les placez sur une grille de 16 unités, une tuile sur deux se décale d'un demi-pas et les jointures sont visibles depuis l'orbite.

Sprites de personnages vs feuilles de sprites vs tilesets

Ces trois termes sont employés indifféremment dans la conversation, mais ils ne sont pas interchangeables dans un projet. Un sprite de personnage est une seule image et ne porte aucune information de timing. Une feuille de sprites est une grille d'images d'un même personnage et porte l'ordre des images. Un tileset est une grille de différentes pièces de terrain et porte à la place des informations d'adjacence. Choisissez le mauvais et vous découperez un tileset en images d'animation, ou vous poserez des images de cycle de marche comme sol.

C'est le consommateur qui décide du format, pas le générateur. Demandez-vous ce qui lira le fichier : un emplacement de feuille de personnage veut une grille fixe commençant à la cellule en haut à gauche, sans marge intérieure ni marge extérieure ; une couche de tuiles veut des cellules uniformes avec une origine connue ; et un nœud d'image d'interface veut une seule image. La marge intérieure est l'erreur d'export la plus courante. Une marge d'un pixel ajoutée par sécurité décale chaque index d'image de un et décale toute l'animation.

Deux directions (gauche et droite, le sprite étant mis en miroir pour l'autre côté) réduisent votre feuille de moitié et constituent le raccourci standard des jeux en vue de côté. Quatre directions (bas, gauche, droite, haut) est la valeur par défaut en vue de dessus et exige une grille carrée ; une marche de quatre images en quatre directions représente donc 16 images. Huit directions est le moment où la plupart des petites équipes devraient s'arrêter et réfléchir ; la feuille passe à 32 images par personnage et les poses diagonales sont celles qui se lisent le plus mal en 32 pixels.

Des nombres d'images qui fonctionnent : 2 pour un léger balancement d'attente, 4 pour une marche, 6 pour une marche plus fluide, 8 pour une course. En dessous de 4, une marche ressemble à une claudication. Au-dessus de 8, vous payez pour des images que le joueur ne verra pas consciemment.

Comment ça marche

Cinq étapes, dans cet ordre. Sauter la vérification de silhouette de l'étape quatre est la raison pour laquelle certains génèrent vingt fois et n'obtiennent toujours rien d'utilisable.

Placez-le dans un monde

Un PNG dans un dossier de téléchargements n'est pas un produit. C'est l'étape à laquelle la plupart des générateurs de sprites s'arrêtent, et c'est l'étape qui détermine si vous avez réellement terminé quelque chose. La feuille ne devient un jeu que lorsqu'elle est placée sur une grille, dotée d'un volume de collision et pilotée par un minuteur d'animation.

Dans le créateur de jeu 3D, la même session de navigateur qui a généré la feuille peut la placer. La taille de cellule du tileset définit la grille du monde, si bien qu'une tuile de 32x32 signifie que toutes les boîtes de collision s'alignent sur des incréments de 32 unités. Cette seule décision élimine toute une catégorie de bugs : pas de trous d'une demi-tuile aux angles, pas de joueur coincé entre deux tuiles de sol. La feuille de sprites devient un panneau animé sur un quad, avec la caméra réglée sur un angle isométrique 2:1 (environ 26,57 degrés) afin qu'une tuile en losange de 32x16 se lise comme un sol carré.

Les mondes construits de cette manière fonctionnent dans le navigateur, sans runtime de moteur à installer ni étape de compilation. Mini World et L'Île du Cyclope sont tous deux des exemples d'une description écrite devenant une scène Three.js jouable, soit le même chemin que suit votre distribution générée. L'ordre qui fonctionne : générez d'abord le tileset, générez ensuite la distribution, placez le joueur en troisième, puis ajoutez les PNJ. Si vous construisez la distribution en premier, vous ne saurez pas quelle taille fait le sol.

Gratuit, en ligne, sans installation : le créateur de sprites RPG fonctionne dans le navigateur

Le créateur de sprites est gratuit et fonctionne en ligne. Aucun installateur, aucune application de bureau, aucun plugin et aucun logiciel de dessin à acheter. Vous ouvrez la page, saisissez une description et obtenez un PNG. Il utilise le canvas du navigateur et WebGL2, donc la machine que vous possédez déjà suffit.

Ce que vous obtenez est volontairement banal. Les exports sont des fichiers PNG standard avec un canal alpha, à la taille d'image et aux dimensions de feuille que vous avez choisies, plus un fichier JSON facultatif décrivant la taille d'image, le nombre d'images, les colonnes et les directions. Aucun conteneur propriétaire. Rien ne verrouille les éléments graphiques dans Neta Studio. Si vous emportez le PNG vers un autre outil demain, il s'ouvrira.

Ce qui n'est pas inclus, afin que vous puissiez en tenir compte : pas de gréement squelettique, pas d'animation par os et pas d'interpolation automatique. Chaque image est une image plate. Une marche de quatre images, c'est quatre images. C'est une limite, et c'est aussi pourquoi les fichiers restent portables, car les images plates fonctionnent dans toutes les chaînes 2D existantes.

Tailles de sprites pour les RPG — choisir une grille dans le créateur de sprites RPG

Trois tailles couvrent la plupart du travail RPG : 16, 32 et 48 pixels par image. Le 16x16 offre des cartes denses et un look rétro, et une fenêtre de 640x360 montre une grande portion de monde d'un coup, mais les visages deviennent illisibles. Le 32x32 est la valeur par défaut sûre ; il laisse assez de place pour une tête, un torse et des jambes lisibles, et se divise proprement dans toutes les tailles de feuille courantes. Le 48x48 est réservé aux personnages qui ont besoin d'un détail facial visible, aux cibles mobiles ou tactiles qui doivent être assez grandes pour être touchées, et aux jeux comportant un plus petit nombre de tuiles visibles.

La règle qui compte plus que la taille choisie : la taille d'image doit diviser la largeur de la feuille de manière égale. Une feuille de 256 pixels de large contient exactement huit images de 32 pixels. Elle ne contient pas d'images de 48 pixels ; 256 divisé par 48 donne 5,33, la sixième colonne est donc coupée en deux et l'échantillonneur lit dans l'image voisine. En pratique, vous voyez une colonne d'un pixel de la pose suivante sur le bord gauche de la pose en cours, et cela ressemble à un bug de rendu alors qu'il s'agit en réalité d'une erreur de calcul. Réglez aussi le filtrage de texture sur le plus proche voisin (NearestFilter dans Three.js, filtre désactivé dans Godot, filtre Point dans Unity). Le filtrage linéaire mélange les pixels adjacents au-delà des limites des images et transforme un sprite net en traînée floue.

Le guide des tailles de sprites sur ce site répertorie l'ensemble complet avec l'arithmétique de feuille pour chacune, y compris les tailles de losanges isométriques où la cellule est en 32x16 ou 64x32 plutôt que carrée.

Entrez dans le monde auquel il appartient

Un sprite seul est un personnage qui n'a nulle part où se tenir. L'étape qui compte est celle qu'un éditeur ne peut pas vous offrir : prenez la feuille que vous venez de créer et placez-la dans un monde où quelqu'un peut se promener. Les mondes isométriques de ce site ont tous été construits et publiés de cette façon.

FAQ