Sprite Sheet Cocos : guide complet pour découper une grande image en frames d'animation

Vous avez généré avec Midjourney ou Stable Diffusion une animation en frames séquentielles d’un personnage. Toutes les frames sont alignées sur une seule image — de la position debout au départ, à la course, puis à l’arrêt, 8 frames bien ordonnées.

L’image a l’air parfaite.

Mais une fois importée dans Cocos Creator, le problème apparaît : ce ne sont pas 8 images indépendantes, mais une seule grande image. Comment extraire chaque pose ? Comment en faire un Animation Clip jouable ?

Sans fichier plist prêt à l’emploi, le découpage manuel est trop lent. Cet article présente trois approches — des outils en ligne gratuits aux logiciels professionnels — pour choisir la voie la plus simple.

Qu’est-ce qu’un Sprite Sheet ? Pourquoi le développement de jeux en dépend

Un Sprite Sheet — les développeurs chinois disent souvent « sprite sheet » ou « atlas » — consiste à regrouper plusieurs petites images en une grande, avec un fichier de configuration qui enregistre la position et la taille de chaque sous-image.

Par exemple, une animation de personnage de 8 frames, 64×64 pixels chacune. En fichiers séparés, ce sont 8 PNG distincts. En sprite sheet, les 8 frames forment une image 512×64 ou 256×256, plus un plist ou json indiquant « la frame 1 est en (0,0), la frame 2 en (64,0) ».

Pourquoi s’embêter ainsi ? Deux raisons solides.

Réduire les Draw Call. C’est le gain de performance le plus direct. Un Draw Call correspond à un appel de rendu GPU. Avec 8 images dispersées, même affichées dans la même scène, le GPU doit traiter 8 fois — chaque changement de texture implique une nouvelle liaison. Regroupées en une seule image, un seul Draw Call suffit et l’efficacité de rendu monte nettement. Sur mobile, où le matériel est limité, l’écart est visible.

Selon la documentation officielle Cocos, dans une scène complexe, passer de dizaines de Draw Call à quelques-uns permet de maintenir 60 FPS. Je l’ai vérifié sur un petit jeu — après le passage de sprites dispersés à un atlas, les saccades sur un Android bas de gamme ont nettement diminué.

Diminuer la fragmentation mémoire. TexturePacker a mesuré que les atlas économisent 30 à 50 % de mémoire par rapport aux images dispersées. Le principe est simple : chaque image isolée a son propre tampon de texture ; l’alignement des bords et la conversion de format s’accumulent. Regroupées, l’allocation est plus compacte et le GPU travaille plus efficacement.

Vous vous demandez peut-être : quel format pour la configuration ? Cocos Creator utilise plist ; les outils génériques préfèrent souvent json. Le plist, format Apple en XML, enregistre le nom, les coordonnées, la taille et la rotation de chaque SpriteFrame. Le json est similaire mais plus concis ; de nombreux outils en ligne et Unity le supportent.

Trois méthodes de découpage : laquelle choisir

Vous n’avez qu’une grande image, sans fichier de config — comment la découper ? Trois approches selon votre contexte.

Option 1 : TexturePacker, l’outil professionnel

C’est le choix dominant dans l’industrie du jeu. TexturePacker pack et découpe les atlas, avec prise en charge de Cocos, Unity, SpriteKit et bien d’autres moteurs.

Avantages : fonctionnalités complètes. Algorithmes de placement automatique (MaxRects, Grid, Shelf), optimisation des formats de pixels (PVRTC pour iOS, ETC pour Android), rotation, rognage, compression des zones transparentes. Formats d’export variés ; le plist Cocos est utilisable directement. Le traitement par lot est simple — des centaines d’images, un clic.

Inconvénients : payant. Version de base à 49 $, pro à 199 $. Puissant, mais pour un petit projet solo, l’investissement n’est pas toujours rentable. Installation requise ; Windows et macOS oui, pas Linux.

Cas d’usage : projets maintenus sur la durée, gros volumes d’assets, jeux commerciaux mis à jour régulièrement. Pour un produit en production, l’investissement en vaut la peine.

KiloClaw - OpenClaw managé pour l’entreprise : orchestration d’agents IA et routage intelligent

Commencer →Pub

Option 2 : outils de découpage automatique en ligne

Sans installation : ouvrez une page web. Le principe est la détection de composantes connexes — repérer les blocs de pixels indépendants sur fond transparent et calculer leur boîte englobante.

J’en ai testé plusieurs ; voici deux options fiables :

ImgCrop (imgcrop.com). Uploadez une sprite sheet, l’outil repère les frames isolées et exporte des PNG séparés. L’option « nommer selon l’ordre visuel » classe de haut en bas, de gauche à droite — pas besoin de renommer à la main.

Boîte à outils image (imgtool.net). Fonctions similaires, plus traitement par lot et conversion de format.

Avantages : gratuit, sans installation, rapide. Sur une animation de 50 frames, j’ai obtenu le résultat en 3 secondes, noms de fichiers propres.

Inconvénients : fonctionnalités limitées. Dispositions complexes, zones qui se chevauchent, fonds non transparents posent problème. Dépendance réseau — évitez d’uploader des assets sensibles.

Cas d’usage : prototypes rapides, traitement ponctuel, peu de matériel. Pour découper quelques animations générées par l’IA, cette option suffit.

Option 3 : découpage manuel (Photoshop ou GIMP)

La méthode la plus ancienne : ouvrir l’image, tracer des tranches à la main, exporter une par une.

Avantages : contrôle précis. Formes irrégulières, dispositions spéciales, zones à rogner — le manuel reste le plus flexible. Avec de bonnes compétences PS, quelques images ne prennent pas longtemps.

Inconvénients : faible efficacité, risque d’erreurs. Des dizaines de frames, c’est fatigant. Chaque nouveau lot recommence à zéro. La convention de nommage se mélange facilement.

Cas d’usage : besoins particuliers, traitement unique, compétences PS existantes. Assets dessinés à la main, disposition irrégulière que les outils auto ne reconnaissent pas — le manuel est alors la seule option.

Tableau comparatif

Mise en pratique : cinq étapes de la grande image à l’animation

Méthode choisie — comment procéder ? Exemple complet : « animation de personnage générée par l’IA → Animation Clip jouable dans Cocos Creator ».

Étape 1 : préparer les assets

Supposons une animation de course générée avec Midjourney, prompt du type character running animation sprite sheet, 8 frames, transparent background. Le résultat est un PNG, 8 frames alignées horizontalement.

Deux vérifications :

1. Fond transparent. Format PNG, zones transparentes propres, sans bruit ni filigrane. Les images IA laissent parfois des résidus sur les bords — nettoyez avec PS ou un outil en ligne.
2. Alignement des frames. L’ordre est-il continu de gauche à droite ? L’IA peut mélanger ; vérifiez à l’œil.

Convention de nommage : character_run_sheet.png pour l’original.

Étape 2 : choisir la méthode de découpage

Les outils en ligne sont les plus rapides. Ouvrez ImgCrop (imgcrop.com), uploadez le PNG.

Cochez deux options :

• « Nommer selon l’ordre visuel » — de gauche à droite, export frame_01.png à frame_08.png
• « Conserver la taille d’origine » — pas de redimensionnement, précision des pixels IA intacte

Cliquez sur Découper, téléchargez. Trois secondes.

Avec TexturePacker, le flux est proche. Ouvrez le logiciel, importez la sprite sheet, mode « découper un atlas existant » (pas « packer des images dispersées »), export plist + SpriteFrames. Plus professionnel, avec optimisation des formats de pixels.

Étape 3 : importer dans Cocos Creator

Ouvrez Cocos Creator 3.8 LTS (version LTS actuelle). Glissez les PNG dans assets, par exemple assets/sprites/character/.

Chaque PNG génère un fichier .meta. Dans le panneau de propriétés, confirmez le type sprite-frame (valeur par défaut).

Avec un atlas TexturePacker (plist inclus), glissez plist + PNG ensemble. Cocos le reconnaît comme ressource Atlas avec plusieurs sous-ressources SpriteFrame.

Étape 4 : créer l’Animation Clip

Vous avez 8 SpriteFrame — il faut une animation jouable.

Alibaba Cloud - Choix n°1 des développeurs, 15 % de réduction exclusive sur Lighthouse

Obtenir -15 % →Pub

1. Créez un nœud Sprite (clic droit Hierarchy → Create → Sprite)
2. Ajoutez un composant Animation (Inspector → Add Component → Animation)
3. Créez un Animation Clip : clic droit sur assets → Create → Animation clip, nom character_run.anim
4. Glissez le clip sur la propriété Clips du composant Animation

Ensuite, l’étape clé :

Ouvrez l’éditeur d’animation (menu Window → Animation). Sélectionnez le nœud Sprite ; la piste apparaît.

Glissez les 8 SpriteFrame sur la piste. Par défaut, 8 keyframes, une image par frame, espacées d’1 seconde — trop lent.

Ajustez l’intervalle : en bas de l’éditeur, réglez Sample à 10 ou 12. Soit 10-12 images par seconde, vitesse naturelle pour la course.

Prévisualisez : bouton lecture de l’éditeur ; le Sprite alterne les images et le personnage court.

Étape 5 : contrôler la lecture par script

Animation Clip prêt — comment l’appeler en jeu ?

Scénario simple — boucle automatique :

// CharacterController.ts
import { _decorator, Component, Animation } from 'cc';
const { ccclass, property } = _decorator;

@ccclass('CharacterController')
export class CharacterController extends Component {
    
    @property(Animation)
    animation: Animation | null = null;
    
    start() {
        if (this.animation) {
            // Lancer l'animation de course en boucle
            this.animation.play('character_run');
            // Mode boucle infinie
            const state = this.animation.getState('character_run');
            if (state) {
                state.repeatCount = Infinity;
            }
        }
    }
}

Attachez ce script au nœud Sprite, liez le composant Animation. Au lancement, le personnage court en boucle.

Changement d’animation — de la course à l’arrêt :

playAnimation(name: string) {
    if (this.animation) {
        this.animation.crossFade(name, 0.2); // Transition 0,2 s pour éviter un saut brutal
    }
}

// Appel : le personnage arrête de courir
this.playAnimation('character_idle');

crossFade adoucit la transition entre deux animations, sans saut brutal. Ce détail compte — sinon le changement paraît rigide.

Pièges que j’ai rencontrés — pour vous les éviter

Le traitement des sprite sheets a plusieurs écueils courants ; les connaître à l’avance fait gagner du temps de débogage.

Piège 1 : Cocos Creator 3.x refuse l’ancien TexturePacker

Avec TexturePacker 4.x ou antérieur, l’import du plist dans Cocos Creator 3.0+ affiche : « Atlas format not supported ».

Raison : Cocos Creator 3.x a changé son parseur et ne reconnaît que le format TexturePacker 5.x.

Solution : passez à TexturePacker 5.x. Ou utilisez l’Auto Atlas intégré : clic droit sur assets → Create → Auto Atlas, glissez les images dispersées, atlas généré automatiquement.

Piège 2 : ordre de nommage des frames chaotique

Après découpage en ligne, les fichiers s’appellent frame_01.png, frame_02.png… mais l’ordre peut être faux. Si l’IA a aligné les frames de droite à gauche, le nommage « ordre visuel » place la dernière pose en première frame.

Résultat : la course semble jouer à l’envers — le personnage recule.

Solution : vérifiez la direction avant découpage. De droite à gauche ? Renommez à la main ou en lot dans PS. TexturePacker propose un tri spatial configurable (haut-bas, gauche-droite).

Piège 3 : rognage des pixels transparents

Le composant Sprite a une propriété Trim qui rogne par défaut les pixels transparents en bordure — une optimisation pour un rendu plus compact.

Parfois cela pose problème. Si chaque frame n’a pas exactement la même taille — 64×64 puis 64×70 parce que le bras s’étire — le rognage change les limites et le personnage saute à la lecture.

Solution : dans SpriteFrame, réglez Trim Type sur None ou Custom. Gardez des dimensions identiques pour éviter le décalage.

Piège 4 : intervalle des frames dans l’Animation Clip

Erreur fréquente chez les débutants : animation trop rapide ou trop lente.

Le taux par défaut est 60 images/s. Avec 8 frames, la lecture dure 0,13 s — la course ressemble à une téléportation.

Railway - Plateforme de déploiement moderne, sans opérations complexes, en ligne en quelques minutes

Commencer →Pub

Solution : ajustez Sample. Pour la course, 8-12 images/s, donc 10 ou 12. Pour respiration ou idle, 6-8 suffisent.

Dans l’éditeur d’animation, vous pouvez aussi déplacer les keyframes pour contrôler précisément chaque intervalle.

Optimisation des performances : comment concevoir l’atlas

Atlas prêt — on peut encore compresser les performances.

Taille d’atlas recommandée

Ne dépassez pas 2048×2048 pixels par atlas — limite sur de nombreux appareils bas de gamme. Au-delà, erreur ou rendu dégradé.

Beaucoup de frames (par ex. 50 pour une attaque) ? Scindez en deux atlas. TexturePacker le fait via Max Size à 2048.

Choix du format de pixels

Chaque plateforme a son format optimal :

• iOS : PVRTC (compression Apple). À l’export TexturePacker, choisissez PVRTC 4bpp — taille divisée par environ 4.
• Android : ETC1 ou ETC2. Large support, bonne compression.
• Multi-plateforme : RGBA8888 (sans compression). Fichiers lourds, compatibilité maximale — idéal en phase de test.

En production, choisissez selon la cible. TexturePacker permet le « multi-format pack » — jeux iOS et Android en une passe.

Auto Atlas dynamique

Cocos Creator peut fusionner automatiquement les SpriteFrame dispersés d’une scène pour le rendu par lot.

Activation : clic droit sur assets → Create → Auto Atlas, glissez les images. À la build, atlas généré, Draw Call réduits.

Adapté aux projets avec peu de ressources. Gros volumes d’assets : préférez TexturePacker en amont, plus de contrôle.

Surveillance des Draw Call

Comment vérifier que la sprite sheet optimise vraiment ? Regardez le nombre de Draw Call.

Dans les outils développeur Cocos Creator, le panneau Profiler affiche les Draw Call en temps réel. Comparez images dispersées et atlas dans une scène chargée.

État idéal : toutes les frames d’animation d’un personnage dans un seul atlas, Draw Call stable à 1. Animations sur plusieurs atlas — les Draw Call fluctuent à chaque changement ; regroupez alors les animations liées.

Conclusion

D’une sprite sheet générée par l’IA à un Animation Clip jouable dans Cocos Creator, le flux reste simple :

1. Vérifier les assets (fond transparent, ordre des frames)
2. Choisir la méthode de découpage (en ligne pour la vitesse, TexturePacker pour le pro)
3. Importer dans Cocos Creator (PNG ou Atlas)
4. Créer l’Animation Clip (glisser les frames, ajuster l’intervalle, prévisualiser)
5. Contrôler la lecture par script (boucle, changement, transition)

Choix d’outils : prototype rapide → outils en ligne ; projet commercial → TexturePacker. Attention aux pièges : compatibilité de version, ordre de nommage, réglages de rognage, intervalle des frames.

Après ces étapes, l’animation de votre personnage tournera dans le jeu.