Convertisseur de feuille de sprites en GIF — Transformez une feuille de sprites en GIF animé

Un GIF, ce sont des images dans le temps. Une feuille de sprites, ce sont des images dans l'espace. Convertir une feuille de sprites en GIF consiste à découper la feuille en cellules dans le bon ordre, puis à attribuer un délai à chaque cellule pour que le navigateur les rejoue comme un mouvement. Ce convertisseur s'exécute entièrement dans le navigateur et gère les points qui cassent habituellement : les dernières lignes partielles, les grilles irrégulières et les arrière-plans transparents.

Déposez une feuille de sprites, définissez la taille d'image, les colonnes, les lignes et les FPS, puis téléchargez le GIF. Vous pouvez prévisualiser la boucle avant l'export, ce qui compte lorsque la dernière ligne est incomplète ou que le délai ne correspond pas à un nombre entier d'images.

Déposez une feuille de sprites

L'outil constitue le premier écran. Il n'y a ni étape d'inscription ni file d'attente. Vous déposez un PNG ou un GIF sur la page, et le décodeur lit immédiatement les dimensions de la feuille.

Vous définissez quatre choses : largeur et hauteur d'image, colonnes, lignes et FPS. La taille d'image est la taille de cellule en pixels. Le nombre de colonnes multiplié par le nombre de lignes donne la capacité de la grille. Si la feuille fait 512 par 256 avec des cellules de 64 par 64, cela fait 8 colonnes et 4 lignes, capacité 32. Les FPS définissent le délai par image. Vous téléchargez ensuite le GIF.

L'aperçu exécute la boucle sur place. Si une image semble tranchée — un demi-personnage décalé dans la cellule suivante — la taille d'image est fausse de quelques pixels. Si l'animation dérive, le nombre de colonnes est faux. Corrigez les valeurs et l'aperçu se met à jour.

Comment ça marche

Le fichier ne quitte jamais le navigateur. L'image est décodée localement avec le décodeur d'images du navigateur, dessinée sur un canevas hors écran, puis relue sous forme de données de pixels. Aucune étape de téléversement n'existe, car aucune n'est nécessaire.

Le convertisseur mesure la feuille : il vérifie si la largeur est divisible exactement par la largeur d'image déclarée, et si la hauteur est divisible exactement par la hauteur d'image déclarée. Si les deux se divisent proprement, la grille est uniforme. Sinon, le reste vous indique soit que la taille d'image est fausse, soit qu'il y a une marge intérieure et un espacement à prendre en compte.

Il parcourt ensuite la grille de gauche à droite, de haut en bas. Chaque cellule est copiée dans un tampon d'image. Les pixels transparents sont conservés comme transparents. L'encodeur écrit le GIF avec un délai par image, de sorte que le minutage réside dans le fichier et non dans le lecteur.

Pour une feuille de 32 images exportée à 12 FPS, cela représente un délai d'environ 8 centièmes de seconde par image, soit 8 centisecondes en termes de GIF. La boucle totale est de 32 divisé par 12, environ 2,67 secondes.

Feuilles avec une dernière ligne partielle

De nombreuses feuilles sont exportées sous forme de grille fixe avec des cellules inutilisées à la fin. Une feuille 4 par 4 peut ne contenir que 13 images. La dernière ligne comporte trois cellules vides. Si vous laissez le nombre d'images à la capacité de la grille, ces cellules vides deviennent trois images vides dans le GIF, et la boucle clignote ou marque une pause.

Définissez le nombre réel d'images. Si l'animation comporte 13 images, indiquez 13. Le convertisseur s'arrête à l'image 13 et ignore les cellules vides. Il en va de même lorsque la dernière ligne est une ligne plus courte avec une largeur de cellule différente.

Si vous ne pouvez pas déterminer si la feuille comporte des images vides à la fin, définissez le nombre une image au-dessus de la dernière image visible. Exportez, regardez l'aperçu, puis réduisez de un si vous voyez une image vide. Il est plus rapide de vérifier dans l'aperçu que d'inspecter la feuille à la main.

Les arrière-plans transparents restent transparents

Le GIF possède une couleur transparente, pas un canal alpha. C'est de l'alpha 1 bit : un pixel est soit entièrement transparent, soit entièrement opaque. Il n'y a pas de transparence partielle dans ce format. Les feuilles aux bords doux afficheront un bord net après export, sauf si vous les traitez.

Le convertisseur conserve la transparence source. Il écrit la couleur transparente dans la palette du GIF et marque ces pixels comme transparents. Un pixel dont l'alpha est inférieur au seuil devient transparent ; tout ce qui est supérieur devient opaque.

Le mode de défaillance à éviter est l'aplatissement. Si la feuille est dessinée sur un canevas opaque avant l'encodage, les pixels transparents prennent la couleur qu'avait le canevas. C'est généralement du blanc ou du noir, et sur un nouvel arrière-plan, cela apparaît comme un bloc plein. Conservez le PNG source avec son alpha et ne le compositez pas avant l'export.

Pour les bords doux, détourez le bord sur une couleur connue sur laquelle l'image est affichée. Si le GIF doit être posé sur une page blanche, détourez le bord sur du blanc pour que le halo anti-aliasé corresponde. S'il doit être posé sur un arrière-plan sombre, détourez plutôt sur cette couleur. Une seule couleur de détourage ne peut pas convenir aux deux.

Feuilles qui ne forment pas une grille uniforme

Les feuilles compactées ont souvent un écart entre les cellules et une marge autour de la feuille. Une cellule de 64 par 64 avec un écart de 2 pixels a un pas de 66 pixels. Si vous saisissez 64 comme largeur d'image, chaque cellule après la première est décalée de 2 pixels cumulés, et l'animation dérive.

Saisissez la taille de cellule plus l'écart comme pas, et la marge comme décalage. Certains exportateurs écrivent la feuille entière sous forme de cellules plus écarts sans marge ; d'autres ajoutent une marge. Lisez les métadonnées du fichier ou mesurez la première cellule pour trouver les deux valeurs.

Lorsque la dernière cellule a une taille différente — une feuille où l'image finale est plus large pour une traînée ou une image d'effet — la grille uniforme ne peut pas la décrire en une seule passe. Séparez la feuille : traitez les images uniformes dans le convertisseur comme une plage, puis ajoutez l'image irrégulière séparément, ou recadrez-la à la taille de cellule commune avant la conversion.

Si la feuille est compactée plutôt que disposée en grille, il n'existe pas de pas simple. Exportez-la sous forme de grille depuis l'outil source, ou découpez les cellules avec un rectangle par image et fournissez ces images individuellement.

Choisir un FPS

GIF stocke le délai entre les images en centisecondes. À 10 FPS, cela fait 10 centisecondes par image. À 30 FPS, cela fait 3,33, qui arrondit à 3, soit environ 33 FPS. Le format ne peut pas exprimer de délais arbitraires inférieurs à la centiseconde, alors choisissez un FPS qui divise proprement 100 : 10, 20, 25 ou 50 FPS.

Les délais irréguliers provoquent des saccades. Si vous définissez 24 FPS, le délai est de 4,17 centisecondes et l'arrondi est incohérent, de sorte que certaines images durent plus longtemps que d'autres. Sur une boucle courte, cela se voit comme un à-coup une fois par cycle. Utilisez plutôt 20 ou 25.

Faites correspondre la durée de la boucle à la durée prévue de l'animation. Un cycle de marche conçu pour 0,8 seconde doit produire un GIF qui boucle en 0,8 seconde. À 16 images, cela fait exactement 20 FPS. Modifiez le nombre d'images et le FPS prévu change avec lui.

La plupart des navigateurs imposent également un délai minimum. Les délais inférieurs à 2 centisecondes sont fréquemment limités à environ 10 centisecondes par le lecteur, de sorte qu'un export à 50 FPS peut être lu à 10 FPS dans certains contextes, indépendamment du contenu du fichier. Testez le GIF exporté dans le navigateur que vous ciblez.

Dans l'autre sens

Le sens inverse est courant. Vous avez un GIF animé et vous voulez une feuille de sprites : une seule image avec toutes les images disposées sur une grille, afin qu'un moteur de jeu puisse la découper en une animation. Un convertisseur de GIF en feuille de sprites fait cela : il décode les images du GIF, les assemble dans une grille uniforme et exporte un PNG avec la taille et le nombre d'images.

La partie délicate du chemin inverse est le même problème de transparence. Un GIF a une seule couleur transparente. Lorsque vous le convertissez en feuille, cette couleur devient les pixels transparents de la feuille, et tout bord anti-aliasé qui a été aplati dans le GIF reste aplati. La feuille hérite de ce que le GIF a perdu.

Le délai entre les images est également perdu à la sortie. Une feuille de sprites n'a pas de minutage ; le moteur ou l'animateur l'attribue. Si vous avez besoin du minutage, notez les FPS du GIF avant la conversion et définissez-les dans l'animation cible.

Voyez le GIF s'animer en 3D

Une boucle GIF est une animation plate. The Cyclops' Island est un monde 3D jouable construit dans Neta Studio, où le sprite est le personnage et le monde est l'endroit où il vit. Vous pouvez charger une animation convertie sur un personnage et le déplacer dans la scène.

Cela change ce que vous vérifiez. Un GIF qui se lit bien sur une page peut se lire mal dans un monde : la fréquence d'images qui semblait fluide sur un arrière-plan blanc peut sembler lente face à une géométrie en mouvement, et la couleur de détourage choisie pour la transparence peut ne pas correspondre à l'environnement.

Mini World et le constructeur de jeu 3D sont les deux autres endroits où placer le résultat. Mini World est un petit monde avec la même interface de construction. Agent Sprite Forge génère des personnages sprites que vous pouvez exporter et animer. Tous s'exécutent dans le navigateur.

Plus d'outils gratuits

Si vous travaillez avec des sprites, le convertisseur est une étape dans une chaîne. Voici les autres.

Animateur de sprites : lit une feuille à un FPS défini avec pelure d'oignon et avance image par image, afin que vous puissiez vérifier une boucle avant de l'exporter. Utile pour repérer une mauvaise image sans exporter d'abord un GIF.

Créateur de feuilles de sprites : assemble des images de trames individuelles dans une grille avec une taille de cellule, des colonnes et une marge choisies. C'est ce que vous utilisez lorsque les images arrivent sous forme de fichiers séparés plutôt qu'en une seule feuille.

Bibliothèque de ressources de sprites : un ensemble de sprites et de feuilles prêts à l'emploi pour tester le convertisseur, y compris des feuilles avec des dernières lignes partielles et des arrière-plans transparents.

Aucun de ces outils ne nécessite de téléversement. Ils s'exécutent dans le navigateur comme le convertisseur.

Entrez dans le monde auquel il appartient

Un sprite est un personnage sans endroit 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ù quelqu'un 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é comme une page jouable.

FAQ