Cocos Sprite Sheet in der Praxis: Ein großes Bild in mehrere Animationsframes aufteilen

Sie haben mit Midjourney oder Stable Diffusion eine Laufsequenz für eine Figur erzeugt – alle Frames stehen ordentlich auf einem Bild: vom Stehen über Start und Laufen bis zum Stoppen, acht Frames in einer Reihe.

Das sieht gut aus.

In Cocos Creator merken Sie aber: Das sind nicht acht separate PNGs, sondern eine große Textur. Wie holen Sie jede Pose heraus? Wie wird daraus ein abspielbarer Animation Clip?

Ohne plist geht manuelles Schneiden zu langsam. Dieser Artikel stellt drei Wege vor – von kostenlosen Online-Tools bis zur Profi-Software – damit Sie den schnellsten passenden Workflow finden.

Was ist ein Sprite Sheet – und warum braucht Spieleentwicklung das?

Ein Sprite Sheet (oft „Sprite-Atlas“ oder „图集“) legt viele kleine Bilder in einer großen Textur und speichert in einer Konfiguration Position und Größe jedes Frames.

Beispiel: acht Lauf-Frames à 64×64 Pixel. Als Einzeldateien sind es acht PNGs. Als Sprite Sheet passen sie auf z. B. 512×64 oder 256×256; plist oder json sagt: Frame 1 bei (0,0), Frame 2 bei (64,0) usw.

Warum der Aufwand? Zwei harte Gründe.

Weniger Draw Calls. Jeder Draw Call ist ein GPU-Zeichenbefehl. Acht lose Texturen können acht Wechsel und Bindungen bedeuten – auch in derselben Szene. Ein Atlas: oft ein Draw Call, spürbar effizienter auf dem Handy.

Laut Cocos-Dokumentation kann in komplexen Szenen die Draw-Call-Zahl von Dutzenden auf wenige sinken – 60 FPS bleiben stabiler. In einem kleinen Projekt habe ich es selbst gesehen: nach dem Wechsel von Einzel-PNGs zum Atlas ruckelte ein schwaches Android-Gerät deutlich weniger.

Weniger Speicherfragmentierung. TexturePacker nennt in Tests oft 30–50 % Ersparnis gegenüber losen Bildern: weniger separate Puffer, kompaktere Allokation, GPU-freundlicher.

Konfigurationsformate: Cocos nutzt plist (XML mit Name, Koordinaten, Größe, Rotation); viele Tools und Unity bevorzugen json – ähnliche Felder, schlanker Aufbau.

Drei Aufteilungsmethoden – welche passt?

Nur ein großes Bild, keine plist – drei Wege:

Railway - Moderne Deployment-Plattform, ohne DevOps-Aufwand, in Minuten live

Jetzt starten →Anzeige

Option 1: TexturePacker

Branchenstandard für Atlas-Pack und -Split; Export für Cocos, Unity, SpriteKit u. a.

Vorteile: Layout (MaxRects, Grid, Shelf), Pixelformate (PVRTC iOS, ETC Android), Rotation, Trim, direkter Cocos-plist-Export, Batch für hunderte Assets.

Nachteile: Kosten – Basis ca. $49, Pro ca. $199. Für kleine Indie-Projekte nicht immer nötig. Desktop Windows/macOS, kein Linux.

Einsatz: Langfristige Projekte, viele Assets, kommerzielle Releases – die Investition lohnt sich oft.

Option 2: Online-Slicer

Keine Installation: Connected-Component auf transparenten Bereichen, Bounding Box, Export als PNG.

Zwei stabile Optionen:

ImgCrop (imgcrop.com): Upload, automatische Frames, Option „Nach visueller Reihenfolge benennen“ (oben→unten, links→rechts).

图文工具箱 (imgtool.net): ähnlich, teils Batch und Formatwechsel.

Vorteile: Kostenlos, schnell – 50 Frames in wenigen Sekunden, saubere Namen.

Nachteile: Schwächer bei Überlappung oder nicht-transparentem Hintergrund; Upload – sensible Assets vorsichtig behandeln.

Einsatz: Prototyp, KI-Output mit wenigen Sequenzen, einmalige Jobs.

Option 3: Manuell (Photoshop / GIMP)

Slices oder Export Frame für Frame.

Vorteile: Volle Kontrolle bei unregelmäßigen Layouts.

Nachteile: Langsam, fehleranfällig, Naming-Chaos bei vielen Frames.

Einsatz: Einmalig, unregelmäßige Handzeichnung, wenn Automatik scheitert.

Vergleich

Praxis: Fünf Schritte vom großen Bild zur Animation

Beispiel: KI-Laufanimation → abspielbarer Animation Clip in Cocos Creator.

Schritt 1: Assets prüfen

Angenommen, Midjourney liefert character running animation sprite sheet, 8 frames, transparent background – acht Frames horizontal.

Vultr - Hochleistungs-NVMe-Cloud-Server mit 32 Standorten weltweit, Docker per Klick

Preise ansehen →Anzeige

Prüfen:

1. Transparenz: sauberes PNG, keine Ränder oder Wasserzeichen; bei Bedarf in PS oder online nachbearbeiten.
2. Reihenfolge: links nach rechts die Bewegungsfolge? KI mischt manchmal – kurz visuell kontrollieren.

Name: z. B. character_run_sheet.png.

Schritt 2: Aufteilen

Schnellster Weg: ImgCrop öffnen, PNG hochladen, aktivieren:

• „Nach visueller Reihenfolge benennen“ → frame_01.png … frame_08.png
• „Originalgröße beibehalten“

Download – fertig in Sekunden.

Mit TexturePacker: Bild importieren, Modus „bestehenden Atlas aufteilen“ (nicht nur „lose Bilder packen“), plist + SpriteFrames exportieren, optional Pixelformat wählen.

Schritt 3: Import in Cocos Creator

Cocos Creator 3.8 LTS: PNGs nach assets/sprites/character/ ziehen. Pro Datei entsteht .meta; Typ sprite-frame (Standard) belassen.

Bei TexturePacker: plist + PNG zusammen importieren → Atlas mit mehreren SpriteFrame-Kindern.

Schritt 4: Animation Clip

Acht SpriteFrames → eine Animation:

1. Sprite-Node (Hierarchy → Create → Sprite)
2. Animation-Komponente (Add Component → Animation)
3. character_run.anim erstellen (Create → Animation clip), an Clips hängen
4. Window → Animation, Sprite-Node wählen

Acht SpriteFrames auf die Spur ziehen – acht Keyframes, Standardabstand oft zu langsam.

Sample auf 10 oder 12: ca. 10–12 Bilder pro Sekunde; für Laufen natürlich. Play in der Animation-Ansicht – die Figur läuft.

Schritt 5: Skript

Einfacher Loop:

// 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) {
            // Laufanimation, Loop
            this.animation.play('character_run');
            const state = this.animation.getState('character_run');
            if (state) {
                state.repeatCount = Infinity;
            }
        }
    }
}

Skript am Sprite, Animation referenzieren – beim Start läuft die Figur.

Wechsel z. B. Laufen → Idle:

playAnimation(name: string) {
    if (this.animation) {
        this.animation.crossFade(name, 0.2); // 0,2 s Übergang
    }
}

// z. B. Stopp
this.playAnimation('character_idle');

crossFade vermeidet harte Sprünge zwischen Clips.

Typische Fallstricke

1: Cocos 3.x und altes TexturePacker

plist aus 4.x in Creator 3.0+: Fehler „Atlas format not supported“ – Parser erwartet 5.x.

Fix: TexturePacker 5.x oder Cocos Auto Atlas (assets → Create → Auto Atlas, lose PNGs rein).

🔥 Verschwende keine Monate für ungenutzte Produkte! Teste deine SaaS-Nutzenversprechen mit Adsterra bei kleinem Budget →

Jetzt testen →Anzeige

2: Falsche Frame-Reihenfolge

frame_01 … frame_08 passen nicht zur Bewegung – KI von rechts nach links, Tool sortiert „visuell“ → Laufen wirkt rückwärts.

Fix: Richtung vor dem Split klären, umbenennen oder TexturePacker-Sortierung (z. B. links→rechts).

3: Trim und Positions-Sprung

Trim schneidet transparente Ränder – gut für Performance, schlecht wenn Frames unterschiedlich groß sind (64×64 vs. 64×70): Figur wackelt.

Fix: SpriteFrame Trim Type → None oder Custom, einheitliche Frame-Größe.

4: Falsches Sample

Standard 60: acht Frames in ~0,13 s – „Teleport-Laufen“.

Fix: Sample 10–12 für Laufen, 6–8 für Idle/Atmen; Keyframes manuell verschieben geht auch.

Performance: Atlas-Design

Größe

Max. 2048×2048 – Limit vieler Geräte. Viele Frames (z. B. 50 Angriffsposen): zwei Atlanten; in TexturePacker Max Size 2048.

Pixelformat

• iOS: PVRTC (z. B. 4bpp in TexturePacker)
• Android: ETC1/ETC2
• Test / universal: RGBA8888 (groß, kompatibel)

Release: plattformspezifisch; TexturePacker kann mehrere Formate in einem Durchlauf erzeugen.

Auto Atlas in Cocos

assets → Create → Auto Atlas, lose Sprites rein – beim Build Atlas, weniger Draw Calls. Für wenig Content praktisch; bei vielen Assets oft TexturePacker vorab.

Draw Calls messen

Profiler in den DevTools: Draw Call live. Ziel: alle Frames einer Figur in einem Atlas → oft 1 Draw Call; wechselt der Clip zwischen Atlanten, springt die Zahl – verwandte Animationen zusammenlegen.

Fazit

Vom KI-Sprite Sheet zum Animation Clip in Cocos Creator:

1. Assets prüfen (Transparenz, Reihenfolge)
2. Methode wählen (Online schnell, TexturePacker für Produktion)
3. Import (PNG oder Atlas)
4. Animation Clip (Frames, Sample, Vorschau)
5. Skript (Loop, crossFade)

Prototyp: Online-Tools; Produktion: TexturePacker. Achten auf Version, Naming, Trim und Sample – dann läuft die Figur in der Engine wie geplant.