Convertisseur d'images et de vidéos en feuille de sprites — images PNG vers un atlas de jeu

Un convertisseur d'images en feuille de sprites prend une séquence d'images PNG — ou une courte vidéo — et les assemble dans un atlas que vous pouvez transmettre à un moteur de jeu. Sur Neta Studio, la conversion s'exécute entièrement dans votre navigateur : pas de file d'attente d'envoi, pas d'aller-retour serveur, aucun fichier ne quitte votre machine. Vous déposez un dossier de PNG numérotés ou un seul MP4, vous réglez les colonnes, les lignes, la taille des cellules et la suppression de l'arrière-plan, puis vous exportez une feuille avec un manifeste JSON correspondant.

Ce qui pose réellement problème, ce n'est pas l'assemblage. Ce sont l'ordre (frame_10 trié avant frame_2), la marge (des filtres qui échantillonnent la cellule voisine et produisent une frange), et la taille des cellules (une feuille dont les dimensions ne sont pas divisibles par la grille, si bien que la dernière colonne est rognée). Cette page traite chacun de ces points concrètement, ainsi que la manière d'extraire des images d'une vidéo et de vérifier le résultat en animation dans un vrai monde 3D.

Déposez des images ou une vidéo

Le premier écran comporte une zone de dépôt et deux branches. Déposez un dossier ou une sélection multiple d'images PNG, WebP ou JPG et l'outil traite l'entrée comme une séquence d'images ordonnée. Déposez un seul fichier vidéo — MP4, WebM ou MOV que le navigateur peut décoder — et l'outil bascule vers la branche d'extraction, où vous choisissez une fréquence d'échantillonnage et il extrait les images via WebCodecs ou un élément vidéo masqué en secours.

Les deux branches aboutissent au même éditeur : une grille de cellules à droite, une colonne de réglages à gauche et un aperçu en direct qui parcourt la feuille sur place. Rien n'est écrit sur le disque tant que vous n'appuyez pas sur exporter. Le décodage s'effectue sur le thread principal pour les images fixes et sur un worker pour la vidéo, de sorte qu'un clip 4K gardera l'interface réactive, mais une séquence de 300 images PNG bloquera brièvement l'affichage pendant le décodage.

Si le dépôt est refusé, la raison est presque toujours l'une des trois suivantes : le codec vidéo n'est pas décodable dans votre navigateur (fréquent avec le HEVC dans un MOV), les images ont des dimensions différentes, ou le nombre d'images dépasse le budget de cellules de la grille que vous avez définie. L'outil nomme le fichier en échec au lieu de l'ignorer silencieusement.

Comment créer une feuille de sprites à partir d'images PNG

L'ordre est la première décision, et l'outil peut se tromper si vos noms de fichiers sont incohérents. Le comparateur par défaut découpe chaque nom de fichier en suites textuelles et numériques et les compare, de sorte que walk_0001.png … walk_0048.png se retrouve dans le bon ordre, tout comme walk_1.png … walk_48.png. Si vos images sont nommées par horodatage ou par UUID, l'ordre de tri est arbitraire — renommez d'abord, ou faites glisser pour réorganiser la bande de vignettes avant l'assemblage.

Vérifiez le nombre d'images par rapport à ce que vous attendez de l'animation. Une boucle d'inactivité de 12 images et un cycle de marche de 24 images semblent identiques dans une grille de vignettes en petite taille. Ouvrez l'aperçu, parcourez jusqu'à la dernière cellule et confirmez qu'il s'agit de l'image qui doit précéder la première au retour de la boucle — c'est souvent l'image où une boucle paraît cassée.

Chaque image doit avoir la même largeur et la même hauteur. L'assembleur prend les dimensions de la première image et rejette tout fichier suivant qui en diffère. Si votre exportateur a ajouté une bordure de 1px lors du recadrage, ou a exporté un sprite avec un point d'ancrage différent, ces images sont les exceptions et doivent être corrigées à la source plutôt que complétées par une marge ici.

Convertir une vidéo en feuille de sprites

L'extraction d'images à partir d'une vidéo dépend d'un nombre qui détermine si le résultat est utilisable : la cadence d'extraction. La vidéo est généralement à 24, 30 ou 60 fps ; l'animation de sprites en a rarement besoin. Un clip à 30 fps échantillonné à 30 fps sur trois secondes produit 90 cellules et un atlas inutilement grand. Le même clip échantillonné à 12 fps produit 36 cellules et, pour la plupart des mouvements de personnage, une lecture indiscernable.

Choisissez la cadence d'extraction en fonction de la cadence de lecture prévue de l'animation, pas de la source. Si le sprite doit être lu à 12 fps en jeu, extrayez à 12 fps. Si vous prévoyez de le retimer, extrayez à 24 et supprimez une cellule sur deux dans le moteur — vous gardez l'option, au prix d'une feuille plus grande.

La taille des cellules provient des dimensions de la vidéo après toute mise à l'échelle que vous appliquez. Un clip 1920×1080 mis à l'échelle en 480×270 donne des cellules de 480×270. Conservez le rapport d'aspect de la source ; une mise à l'échelle non uniforme déforme chaque image et aucun réglage de marge ne corrigera cela. Lorsque la vidéo est en letterbox, recadrez les bandes avant l'extraction plutôt que de les détourer après coup, car un sujet en mouvement peut toucher la couleur des bandes.

PNG vers sprite : transparence et marge

Conservez le canal alpha. La plupart des problèmes d'assemblage signalés proviennent d'un convertisseur qui a aplati les données RGBA en RGB à l'export, ce qui transforme chaque pixel transparent en noir ou en blanc selon le remplissage du canevas. Avec cet outil, le canevas d'export est créé sans arrière-plan opaque, de sorte qu'un PNG détouré ou pré-détouré conserve son alpha lors de l'assemblage.

La marge existe parce que le filtrage de texture échantillonne en dehors de la cellule. Au bord d'un sprite, un filtre bilinéaire ou trilinéaire lit les pixels de la cellule voisine et les mélange, produisant une frange de 1px dont la couleur change selon le sprite adjacent. Une marge transparente de 2px autour de chaque cellule empêche le filtre d'aller à l'extérieur. Les valeurs de marge sont inscrites dans le manifeste, afin que le moteur puisse décaler les UV de la marge lorsqu'il lit l'atlas.

Les dimensions de feuille en puissance de deux ne sont plus exigées par la plupart des moteurs, mais elles restent utiles sur le matériel et dans les anciens pipelines qui les supposent. Définissez les colonnes et les lignes pour que (cellule + 2 × marge) × colonnes et (cellule + 2 × marge) × lignes tombent sur 256, 512, 1024, 2048 ou 4096. Si votre grille ne se divise pas de façon égale, la dernière ligne ou colonne est rognée ou remplie d'espace vide — l'outil affiche les dimensions finales de la feuille en direct pour que vous puissiez le voir avant d'exporter.

Détection automatique de la taille des cellules

L'outil lit la taille des cellules depuis la source. Pour une séquence d'images, il prend les dimensions de la première image décodée ; pour une vidéo, il prend les dimensions de sortie après mise à l'échelle. Cette valeur est préremplie dans le champ Taille des cellules et sert à calculer la grille par défaut, de sorte qu'un dossier d'images 64×64 s'ouvre avec des cellules de 64×64.

Remplacez-la lorsque la marge transparente autour de votre sujet est plus grande que le sujet. Un sprite exporté avec une marge généreuse produira des cellules majoritairement vides, et l'atlas sera plus grand que nécessaire. Le réglage de rognage trouve la boîte englobante des pixels non transparents sur toutes les images et rogne sur l'union — pas image par image, car un rognage par image fait trembler le sprite pendant l'animation.

Remplacez-la dans l'autre sens lorsque les images sont incohérentes. Si la séquence mélange des 64×64 et des 66×66 parce qu'une passe d'export a ajouté un contour, la détection de taille de cellule se cale sur le premier fichier et les autres sont mis à l'échelle ou rejetés. Corrigez la source. Aucune taille de cellule ne rend correctes des images qui ne correspondent pas.

Voyez-le s'animer en 3D

Une feuille de sprites n'est correcte que si elle s'anime. The Cyclops' Island est un monde jouable sur Neta Studio qui utilise des personnages de style sprite, et c'est le moyen le plus rapide de vérifier un atlas en mouvement — faites marcher un personnage, observez le point de boucle, voyez si les franges de marge apparaissent lorsque la caméra recule et que le filtrage entre en jeu.

Si vous préférez construire le test vous-même, le générateur de jeu 3D vous permet de déposer le PNG exporté et son manifeste dans une scène et de piloter le décalage UV depuis un minuteur. Réglez le temps d'image sur la cadence d'extraction choisie et l'animation s'exécute à la vitesse prévue. Si le résultat est incorrect ici, il le sera dans votre moteur, et la cause est presque toujours la valeur de cellule ou de marge du manifeste.

Mini World est le bac à sable plus petit si vous voulez simplement un plan plat avec la feuille dessus et une caméra que vous pouvez faire tourner autour, ce qui suffit souvent pour repérer un mauvais détourage au bord d'un sprite.

Autres outils gratuits

Le convertisseur côtoie trois outils qui partagent le même éditeur et le même format d'export. Une feuille créée dans l'un s'ouvre dans un autre sans conversion.

GIF vers feuille de sprites prend un GIF animé et en extrait les images. Les délais d'image d'un GIF sont propres à chaque image, l'outil les lit donc et indique la cadence de lecture effective de la feuille plutôt que de supposer une cadence constante. Feuille de sprites vers GIF fonctionne dans l'autre sens : choisissez une plage temporelle sur les cellules et exportez un GIF animé avec un délai d'image choisi, utile pour partager une boucle sans livrer un PNG. L'animateur de sprites prend une feuille et un manifeste et les joue dans un canevas avec des contrôles de vitesse, de direction et de boucle, afin de vérifier le minutage des images avant de s'engager dans un moteur.

Chaque outil exporte la même structure de manifeste. Largeur de cellule, hauteur de cellule, colonnes, lignes, marge et liste ordonnée des images — ainsi, une feuille qui commence dans l'extracteur vidéo et se termine dans l'animateur conserve les mêmes valeurs tout du long.

Entrez dans le monde auquel il appartient

Un sprite 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ù 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é sous forme de page jouable.