Découper une planche IA irrégulière

Pourquoi les planches de sprites IA ne suivent jamais une grille parfaite

Une planche traditionnelle est construite par un outil : dessin à taille fixe, empaquetage aux positions exactes, cases identiques et boîtes connues. La découpe est arithmétique.

Les générateurs d’images ne fonctionnent pas ainsi. Les modèles de diffusion comme DALL·E, Midjourney et Stable Diffusion génèrent une image continue. Lorsque vous demandez « une planche de sprites d’un chevalier marchant, grille 4x4 », le modèle produit quelque chose qui ressemble à une planche de sprites parce qu’il en a vu des milliers. Il imite l’aspect visuel d’une grille, sans calculer les limites des cellules. Rien dans la génération n’impose que la troisième ligne commence exactement 384 pixels plus bas.

Les conséquences pratiques sont constantes :

• Espacement variable. Les espaces entre sprites varient de quelques pixels à quelques dizaines. La dérive s’accumule généralement de gauche à droite et de haut en bas : les images du coin inférieur droit sont donc les plus touchées.
• Tailles de sprites variables. Un personnage en marche est plus large qu'au repos. Le modèle choisit la taille de chaque pose sans boîte uniforme.
• Contenu décentré. Même lorsque les cases sont à peu près régulières, le sprite y est rarement centré. Une découpe de grille correcte produit donc encore des images qui tremblent à la lecture.
• Images absentes ou fusionnées. Il arrive d’obtenir quinze sprites dans une disposition 4x4, ou deux poses qui se chevauchent et ressemblent à une seule masse.
• Dimensions impaires. Une sortie 1024x1024 divisée en trois colonnes donne 341.33 pixels. Un arrondi est inévitable et les erreurs s'accumulent.

Pourquoi le découpage sur grille fixe échoue

Le découpage en grille fixe repose sur une hypothèse : l’image est un réseau de cases identiques. Il divise la largeur par les colonnes, la hauteur par les lignes, puis découpe. Lorsque cette hypothèse est juste, il est précis et rapide. Sinon, l’erreur n’est pas un bruit aléatoire que l’on peut ignorer. Chaque découpe tombe au mauvais endroit, et les erreurs apparaissent précisément là où elles affectent le plus l’animation.

Une image coupée de quatre pixels en haut n’est pas qu’un problème esthétique. Dans un moteur de jeu, les images sont dessinées au même point d’ancrage : si le contenu du sprite se trouve quatre pixels plus bas dans la deuxième image, il rebondit visiblement à la lecture. Les joueurs y voient un bug, même sans pouvoir le nommer. Le corriger manuellement, image par image, prend plus de temps que de découper correctement dès le départ.

La solution : découper selon le contenu, pas les coordonnées

Si la grille ne peut pas indiquer où se trouvent les sprites, les pixels le peuvent. Sur une planche à fond transparent, chaque pixel appartient soit à un sprite (alpha supérieur à zéro), soit au fond (alpha nul). Cette seule distinction suffit à repérer les sprites sans connaître la disposition à l’avance.

Fonctionnement de la détection par contenu

1. Confirmez la transparence du fond. Échantillonnez les pixels des coins. S’ils sont entièrement transparents, la planche peut convenir à la détection automatique. S’ils sont blancs ou d’une couleur unie, il faut d’abord supprimer l’arrière-plan.
2. Trouver les rangées et colonnes vides. Parcourez l’image et relevez les lignes de pixels ne contenant aucun pixel opaque, puis faites de même pour les colonnes. Ces bandes vides sont les séparations entre les sprites, où qu’elles se trouvent.
3. Coupez au milieu de chaque intervalle. Un intervalle est une zone, pas une ligne. Couper au centre laisse de l'air aux voisins et tolère un ou deux pixels lissés isolés.
4. Rognez chaque morceau à son rectangle englobant. Une fois un morceau isolé, réduisez-le au plus petit rectangle contenant les pixels opaques. Cela retire les marges irrégulières qui donnaient aux cases des tailles incohérentes.
5. Vérifiez puis répétez. Une première passe laisse souvent des problèmes : un morceau contient encore deux sprites parce qu’ils se touchent, ou bien beaucoup plus d’espace vide que les voisins. Réanalyser la sortie et subdiviser ou rogner à nouveau corrige la plupart de ces cas.

C’est ce que fait le Découpage magique onglet dans notre Découpeur de planches de sprites fait. Il détecte les fonds transparents, trouve les limites des sprites à partir du canal alpha, puis effectue jusqu’à trois passes de raffinement, vérifiant chaque morceau produit pour repérer les marges excessives ou plusieurs sprites et redécoupant si nécessaire. Une sensibilité faible, moyenne ou élevée contrôle l’agressivité de la détection : augmentez-la lorsque les sprites se touchent presque, réduisez-la lorsqu’un sprite avec des parties détachées — bouclier flottant ou effet magique — est fragmenté.

Limites détectées sur la planche

Seize fichiers, chacun rogné

Si la planche a un fond uni

La détection du contenu exige de la transparence. Si la planche possède un fond blanc, noir ou magenta uni, utilisez d’abord un outil de suppression d’arrière-plan ; le nôtre se trouve à /remove-bg et fonctionne en échantillonnant les pixels des coins, en effaçant tous les pixels assez proches de cette couleur, puis en exportant un PNG transparent. Faites cela avant le découpage, pas après : supprimer le fond une fois sur une planche constitue une opération ; le faire sur seize images séparées donne seize occasions d’obtenir des résultats incohérents.

Lignes manuelles : solution de repli fiable

La détection automatique échoue sur certaines planches, et il est utile de savoir lesquelles. Des sprites qui se touchent ou se chevauchent ne peuvent pas être séparés en recherchant des bandes vides, puisqu’il n’y en a pas. Une ombre ou une lueur couvrant tout le canevas empêche aussi toute ligne entièrement transparente. Un personnage composé de morceaux détachés sera au contraire trop fragmenté.

Dans tous ces cas, glissez les lignes vous-même. Le Manuel et préréglages onglet part d’une grille prédéfinie entre 2x2 et 6x6 — ou de nombres personnalisés de lignes et colonnes jusqu’à 20x20 — puis vous laisse déplacer chaque ligne de grille vers sa véritable position. Le flux de travail est :

1. Choisissez le préréglage le plus proche de la disposition prévue — 4x4 pour une planche de seize images, même si les espacements réels sont irréguliers.
2. Déplacez les verticales dans les intervalles, de gauche à droite contre les lignes déjà corrigées.
3. Faites pareil horizontalement, du haut vers le bas.
4. Zoomez sur l’image la plus serrée — généralement la pose la plus large — et vérifiez qu’aucune ligne ne la traverse.
5. Exportez. Le PNG conserve la transparence et convient aux sprites ; le JPG et le WebP sont également proposés, mais le JPG supprime entièrement le canal alpha.

Le réglage manuel semble lent, mais ne l’est pas : une planche de seize images comporte six lignes intérieures au total, soit six déplacements, pas seize recadrages. C’est beaucoup plus rapide que d’ouvrir la planche dans un éditeur et de sélectionner chaque image séparément.

Préparer les images pour un moteur de jeu

Une fois les PNG individuels obtenus, deux voies permettent de les utiliser dans un moteur : les importer comme images séparées ou les réempaqueter en planche propre et régulière. Le choix dépend du moteur et du projet.

Unity

Importez les PNG indépendants et réglez Texture Type sur Sprite (2D and UI), Sprite Mode sur Single. Réglez Filter Mode sur Point (no filter) et Compression sur None pour le pixel art : le filtrage bilinéaire sur un sprite 32x32 le rend indistinct. Réglez Pixels Per Unit selon votre grille, puis sélectionnez toutes les images et faites-les glisser sur un GameObject pour qu’Unity crée automatiquement un Animation Clip.

Pour une planche recomposée, utilisez Sprite Mode Multiple et le Sprite Editor. Grid By Cell Size ne fonctionne que si la planche réassemblée est réellement uniforme : c’est précisément ce que fournit le réassemblage et ce que la planche IA d’origine ne fournissait pas.

Godot

Dans Godot 4, ajoutez un AnimatedSprite2D, créez un nouveau SpriteFrames ressource, et utilisez Add Frames from Sprite Sheet pour une planche uniforme ou Add Frames from File(s) pour charger directement vos PNG individuels. Les images séparées sont plus simples ici, car l’importeur de planches de sprites attend des cellules uniformes. Pour le pixel art, réglez le filtre de texture sur Nearest, par nœud sous CanvasItem → Texture → Filter ou globalement via le rendering/textures/canvas_textures/default_texture_filter réglage du projet.

Ancrage et alignement

C’est l’étape négligée qui coûte ensuite un après-midi de diagnostic. Si chaque image est rognée à son rectangle, leurs dimensions diffèrent et le moteur les centre sur la même origine. Un personnage dont le bras s’étend sur la deuxième image semble reculer, car la largeur supplémentaire décale son centre visuel.

La solution est de compléter chaque image jusqu’à une taille commune avec un contenu placé de façon cohérente, généralement centré horizontalement et aligné en bas pour garder les pieds au sol. Choisissez la taille commune selon la plus grande image, arrondissez-la à une valeur pratique et complétez les autres avec de la transparence. Rogner puis ajouter des marges peut sembler circulaire, mais non : le rognage supprime les marges arbitraires du générateur, puis vous ajoutez celles que vous contrôlez.

Dépannage

Trop d'éléments détectés

La sensibilité est trop élevée, ou vos sprites ont des éléments détachés. Réduisez-la pour que les petits espaces transparents à l’intérieur d’un sprite ne soient pas considérés comme des séparations. Si cela ne suffit pas, passez aux lignes manuelles : un personnage tenant un objet séparé apparaîtra toujours comme deux sprites à une analyse alpha.

Trop peu d'éléments détectés

Les sprites se touchent, ou une faible lueur relie l’espace entre eux. Augmentez d’abord la sensibilité. S’ils se chevauchent réellement, aucune méthode automatique ne les séparera ; régénérez la planche en demandant explicitement de l’espace entre les images, ou découpez manuellement.

1. Sensibilité trop faible : peu de limites détectées

2. Huit fichiers au lieu des vingt attendus

3. Pourquoi : aucune colonne nette entre eux

4. Sensibilité augmentée : quatre fichiers

Les images gardent un léger contour de l'ancien fond

La suppression a teinté les bords semitransparents avec l'ancien fond. Consultez notre guide sur PNG transparents et contours blancs pour les solutions.

L’animation tremble dans le moteur

C’est presque toujours un problème d’ancrage plutôt que de découpage. Vérifiez que toutes les images ont les mêmes dimensions et la même convention d’alignement, puis contrôlez le pivot du sprite dans le moteur.

Rien ne marche, la planche est désordonnée

Régénérer coûte peu. Les prompts qui améliorent régulièrement le résultat : demander explicitement un fond transparent, des espacements réguliers et une taille de personnage cohérente, demander moins d’images par planche (un 3x3 a bien plus de chances d’être exploitable qu’un 6x6), et générer les poses séparément si l’animation importe plus que la commodité.

Questions fréquentes