Cocos Creator KI-Art-Assets organisieren: Vom Generieren bis zum Import

Im Kopf unzählige coole Charaktere, Szenen und Items – Budget und Zeit reichen für einen Charakter-Skizze. Art-Assets, die Kluft zwischen Idee und Produkt, lassen viele Game-Ideen in Dokumenten stecken.

Klassisch: 2D-Charakter von Design bis nutzbar, tausende Yuan, Wochen. KI-Tools schaffen Charakter, Rigging, Skinning, Animation in 10 Minuten, Kosten etwa ein Zehntel. Aber: Wie werden KI-Assets Cocos-tauglich? Chaotische Ordner, Wartungsalbtraum, hohe Draw Calls – alles schon erlebt.

Dieser Artikel führt Schritt für Schritt durch Verzeichnisstruktur, Namenskonventionen, Atlas-Erstellung und Performance – von KI-Generierung bis Engine-Nutzung. Der Weg ist nachvollziehbar.

Cocos Creator Ressourcenverzeichnis – Grundlagen

Ein Cocos Creator Projekt zeigt assets, library, local, settings, temp. Welches ist die „Ressourcenbibliothek“?

Nur eines: assets.

assets ist das einzige Verzeichnis im Editor-Asset-Manager. Bilder, Animationen, Prefabs, Skripte – alles hier. library (Cache), local (lokal), settings, temp – ignorieren, nicht löschen.

meta-Dateien: „Ausweis“ jeder Ressource

Neben jeder Datei eine .meta – z. B. knight.png und knight.png.meta.

meta ist Cocos’ Kernmechanismus: uuid, Version, Sub-Ressourcen. meta löschen → Ressource weg. Umbenennen/Verschieben nur mit meta synchron, sonst Referenzen kaputt.

Beim ersten Projekt alle meta gelöscht – Projekt tot, alles „Missing“. Unvergessliche Lektion.

resources: Kanal für dynamisches Laden

Unter assets liegt resources. Ressourcen dort per Code laden:

resources.load('sprite-frames/background', cc.SpriteFrame, (err, spriteFrame) => {
    // Dynamisch geladenes SpriteFrame
});

Aber: Beim Build wird alles unter resources gepackt – auch Ungenutztes. Nicht alles reinwerfen. Nur wirklich dynamisch Geladenes, z. B. Mehrsprach-Texte, freischaltbare Szenen.

Typische Fallstricke

• project.json manuell ändern – Editor pflegt das; manuelle Änderung bricht Dinge
• library löschen – Neubau beim Öffnen, bei großen Projekten Minuten warten
• Alles in resources – Build explodiert, Ladezeiten steigen
• meta ignorieren – Referenzen brechen, Prefab-Bilder „Missing“

KI-Tools für Art-Assets

Viele KI-Art-Tools – drei Empfehlungen für Solo-Entwickler.

SOON: Skelett-Animation per Klick

SOON generiert Game-Charakter-Animation per Prompt, z. B. „Cartoon-Ritter in Rüstung, Schwertkampf“. Charakter, Rigging, Skinning, Aktionen, Spine-Export.

Klassisch: Design, Rigging, Skinning, Animation – Wochen, Profis. SOON: 10 Minuten. Medienberichte: 80–90 % Kostensenkung.

Für einen Side-Scroller-Protagonisten: 10 Minuten, 36 Animationssets – Idle, Laufen, Sprint, Sprung, Angriff, Treffer, Tod. Bei Freelance-Preisen wird es still.

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

Preise ansehen →Anzeige

Holopix AI: Game-Art + Smart-Matting

Holopix AI für Spieleentwicklung: Ein-Klick-Final und Ein-Klick-Matting.

Ein-Klick-Final: Prompt → mehrere Stile. Western, Anime, Pixel – spezialisierte Modelle, besser als generische KI.

Ein-Klick-Matting: Hintergrund weg, saubere Kanten, kein PS – Rettung für Programmierer ohne Art-Skills.

Anything XL: Lokales SDXL

Anything XL (万象熔炉) – lokales Stable Diffusion XL. Kein Cloud-Leak, keine Nutzungslimits.

Bei Geheimhaltung: keine Ideen in die Cloud. Setup braucht GPU, danach stabil und kontrollierbar.

Vergleich und Auswahl

Strategie: Animation SOON, statische Sprites Holopix AI, sensible Assets Anything XL.

Von KI-Generierung bis Cocos-Import

KI-Material → engine-taugliche Ressource. Hier die meisten Stolpersteine.

Format und Hintergrund

KI-Bilder haben oft Hintergrund. Spiele brauchen transparente Sprites – zuerst Matting.

• Transparify: Web, Ein-Klick, saubere Kanten
• SpriteCut AI: Game-Sprites, Kontur, Leerraum trimmen
• Holopix AI Matting: Beim Generieren transparent wählen

Export als PNG mit Alpha. Kein JPG.

Atlas in der Praxis

Einzelne Sprites = je ein Draw Call. 10 Sprites = 10 Calls, 100 = 100 – auf schwachen Geräten spürbar.

Atlas packt Sprites in ein Bild – ein Draw Call für alle referenzierten Sprites.

TexturePacker:

1. Sprites hinzufügen
2. Output cocos2d-x, plist + png
3. Trim Mode trim – transparente Pixel weg, Rahmen gleich (nicht crop/flush position – Animations-Versatz)
4. Max Size z. B. 2048×2048

Cocos Creator 3.0 braucht TexturePacker ≥ v4.x – alte Version upgraden.

Import in Cocos Creator

TexturePacker liefert .plist und .png – zusammen importieren.

Beide nach assets ziehen → Atlas-Ressource, darunter alle SpriteFrames.

Im Sprite-Komponenten-SpriteFrame die Frame wählen.

Beispiel: Side-Scroller-Ritter

SOON-Ritter, 36 Aktionen:

Schritt 1: KI

• SOON: „Cartoon-Ritter in Rüstung“
• Aktionen: Idle, Laufen, Angriff, Sprung …
• PNG-Sequenz pro Aktion

Schritt 2: Matting

• Sequenz in Transparify
• Hintergrund weg, transparentes PNG

Schritt 3: Atlas

• TexturePacker, alle Frames
• Output cocos2d-x
• knight_atlas.plist + knight_atlas.png

Schritt 4: Engine

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

Jetzt starten →Anzeige

• Nach assets/characters/hero/sprites/
• meta automatisch

Schritt 5: Szene

• Sprite-Node
• SpriteFrame aus knight_atlas
• Animation-Komponente für Aktionen

Fertig: Ritter läuft, 36 Aktionen, ein Draw Call (ein Atlas).

Namenskonventionen und Best Practices

Halb durchs Projekt: assets-Chaos, alles gemischt, Namen beliebig – Suche wie Nadel im Heuhaufen. Bewährtes Schema:

Basis-Regeln

Ein Ordner, ein Dateityp.

texture, prefab, animation nicht mischen. Trennung erleichtert Suche und Wartung.

Schema (Unity/Unreal-ähnlich):

prefix_theme_description_suffix

Beispiele:

• char_knight_idle_a.png — Charakter, Ritter, Idle, Albedo
• char_knight_attack_01.png — Charakter, Ritter, Angriff, Nr. 01
• ui_btn_play_9slice.png — UI, Button, Play, 9-Slice

Suffix:

• _a — Albedo
• _n — Normal
• _9 — 9-Slice

Aufwand lohnt sich: Dateiname = Dokumentation, niedrige Team-Kommunikationskosten.

Empfohlene Struktur

Nach Funktionsmodul, nicht nach Ressourcentyp – Sie denken in „Charaktersystem“, nicht „alle Texturen“.

assets/
├── characters/
│   ├── hero/
│   │   ├── textures/         # Charakter-Texturen
│   │   ├── animations/       # Animationen
│   │   ├── sprites/          # SpriteFrames
│   │   └── prefab/           # Charakter-Prefabs
│   ├── enemies/
│   │   ├── textures/
│   │   ├── animations/
│   │   ├── sprites/
│   │   └── prefab/
│   ├── npcs/
│
├── scenes/
│   ├── level01/
│   │   ├── textures/         # Szenen-Texturen
│   │   ├── tilemaps/         # Tilemaps
│   │   ├── prefab/           # Szenen-Prefabs
│
├── ui/
│   ├── textures/             # UI-Texturen
│   ├── fonts/                # Schriften
│   ├── prefab/               # UI-Prefabs
│
├── audio/
│   ├── effects/              # SFX
│   ├── music/                # Musik
│
├── scripts/                  # TypeScript
│   ├── components/           # Komponenten
│   ├── utils/                # Utilities
│
├── resources/                # Dynamisch (sparsam)
│   ├── languages/            # Mehrsprach
│   ├── unlock-scenes/        # Freischalt-Szenen

Vorteil: Module autark; hero-Änderungen nur unter characters/hero.

Fehler vermeiden

Falle 1: Gemischt
hero.png und hero.prefab im selben Ordner – später Chaos. textures vs. prefab trennen.

Falle 2: Beliebige Namen
image1.png, new_picture.png – nach einem Monat unlesbar. Konvention = Dokumentation.

Falle 3: meta vergessen
Umbenennen/Verschieben ohne meta – Prefab-Referenzen „Missing“. Im Editor umbenennen/verschieben → meta sync automatisch. Alle Ressourcen-Ops im Editor.

meta – Kernregeln

meta und Ressource sind gebunden:

1. Gleicher Name, gleicher Ordner: knight.png.meta neben knight.png
2. Nicht löschen: uuid weg → Referenzen tot
3. meta nicht manuell umbenennen
4. Nur Editor: Umbenennen, Verschieben, Löschen

Batch-Import außerhalb: meta generieren lassen, nicht unterbrechen – bei großen Projekten Minuten warten.

Performance: Atlas und Draw Calls

Nach Launch: „Ruckelt“, „FPS drop“. Draw Call 120+ – schwache Geräte kapitulieren.

Draw Call = eine GPU-Zeichnanweisung pro Sprite. Zu viele → CPU-GPU-Overhead, FPS unter 30.

Warum Atlas: Draw-Call-Prinzip

50 UI-Elemente als einzelne Sprites → 50 Draw Calls.

Alles in einem Atlas → 1 Draw Call. GPU lädt Atlas, SpriteFrame schneidet Regionen.

Alibaba Cloud - Top-Wahl für Entwickler, exklusiv 15 % Rabatt auf Lighthouse-Server

15 % Rabatt sichern →Anzeige

Vorher 120+, nachher unter 10. FPS 25 → 60 – auf schwachen Geräten sichtbar.

Dynamic Atlas

Cocos Dynamic Atlas: Laufzeit-Merge loser Bilder zu temporärem Atlas.

SpriteFrame Packable: an = Teilnahme, aus = nicht.

Grenzen:

1. Max. ~32 lose Bilder
2. Laufzeit-Overhead
3. Instabil bei wechselnder Sprite-Anzahl

Produktion: manueller Atlas. Dynamic Atlas für Prototypen.

Auto Atlas beim Build

Cocos 3.x Auto Atlas:

1. AutoAtlas-Ressource unter assets
2. SpriteFrames hinzufügen
3. Build mit „Auto Atlas“
4. Merge im Build-Output

Vorteil: automatisch beim Build. Atlas liegt im Output, nicht in assets – beim Debugen bedenken.

Effekt messen

Debug-Panel → Draw Call vorher/nachher.

Doppelte FPS, kein Ruckeln – Wert des Atlas.

Weniger Texture-Switches → stabilerer Speicher, weniger GC-Druck.

Fazit

Von KI-Art bis Cocos-Ressource: Standardisierung und Automatisierung.

SOON, Holopix AI, Anything XL – Kosten auf ein Zehntel. Generierung ist nur Schritt eins. Import, Ordnerstruktur, Atlas, Draw Calls entscheiden über Wartbarkeit.

Kernpunkte:

• assets ist die einzige Bibliothek – andere Ordner nicht löschen
• meta = Ausweis – Ops nur im Editor
• Struktur nach Modul, ein Typ pro Ordner
• Atlas-Pflicht – Draw Calls von 100+ auf unter 10

Klein anfangen: SOON oder Holopix AI, einen Charakter, diesen Workflow – Ressourcen-Management wird reproduzierbar.

Danach skaliert es für große Projekte.