Communitygithub.com

youtiaoguagua/spine-animation

Erstellen Sie Spine-Skelettanimationen aus Bildern mit agentenbasierten Teil- und Bewegungsplänen, exportieren Sie JSON/Atlas/PNG für Game-Engines und öffnen Sie eine lokale Animationsvorschau-Seite. Verwendung für Charakteranimationen, Bild-Rigging, Blinken oder UI-Bewegungen in Spine.

Was ist spine-animation?

Diese Fähigkeit ermöglicht es einem KI-Agenten, Spine-Skelettanimationen direkt aus Bildern zu erstellen, ohne dass eine separate Modell-API oder ein API-Schlüssel erforderlich ist. Der Agent analysiert ein Bild, plant seine Teile und Bewegungen und verwendet dann ein gebündeltes lokales Laufzeitsystem, um die Teile zu riggen, Keyframes hinzuzufügen, Vermögenswerte zu exportieren und eine Vorschau zu bedienen. Dies ist besonders nützlich für die Charakteranimation, das Riggen von Bildern, Blinkeffekte und UI-Bewegungen in Spielen, die mit der Spine-Runtime erstellt wurden. Die Fähigkeit funktioniert, indem sie zuerst eine Umgebungsvorprüfung mit einem `doctor`-Befehl durchführt, um Abhängigkeiten zu überprüfen und die Ausgabebereitschaft sicherzustellen. Sobald die Vorprüfung bestanden ist, wird eine lokale Arbeitsumgebung gestartet, in der der Agent das Quellbild inspiziert, die beweglichen Teile und Gelenke identifiziert und einen geeigneten Rig-Ansatz wählt (z. B. ein Mesh für das gesamte Bild oder separate ausgeschnittene Schichten). Der Agent erstellt dann JSON-Analyse- und Bewegungsdateien, validiert sie mit `validate` und erstellt die endgültigen Exporte mit `build`, wobei die Ausgabeformate wie Unity (.json, .atlas, .png) unterstützt werden. Zu den wichtigsten Funktionen gehören die lokale Vorschau (über die einfache Ausführung eines `preview`-Befehls), die Integration von Qualitätsprüfungen durch Menschen und die Unterstützung verschiedener Exportziele. Der Agent kann auch Bildgenerierungswerkzeuge für die fehlende Kunstfertigkeit nutzen und die Auflösung und das Budget der Bilder automatisch verwalten, um optimale Ergebnisse zu erzielen. Die Fähigkeit betont die Trennung von Belangen: Der Agent plant und validiert, während die lokale Laufzeit die Rendering- und Build-Aufgaben übernimmt.

Funktioniert mit✓Claude Code✓Codex CLI~Cursor
npx skills add https://github.com/youtiaoguagua/animation-2d/tree/HEAD/skills/spine-animation

In Ihrer bevorzugten KI fragen

Öffnet einen neuen Chat, in dem dieser Agent-Skill bereits geladen ist.

Dokumentation

Was macht spine-animation?

Nutzen Sie Ihr eigenes Bildverständnis, um die Teile und Bewegungen zu planen. Die gebündelte lokale Laufzeit riggt ein transparentes Gesamtbild oder schneidet Teile aus, fügt Keyframes hinzu, exportiert Assets und stellt eine Vorschau bereit. Die lokale Laufzeit ruft kein separates Modell-API auf und benötigt keinen API-Schlüssel. Die Vervollständigung von Grafiken wird, falls erforderlich, mit den Bildgenerierungs-/Bearbeitungswerkzeugen des Hosts durchgeführt.

Umgebungsvorprüfung – zuerst ausführen

Ermitteln Sie das Verzeichnis dieser Fähigkeit anhand des Speicherorts ihrer SKILL.md. Führen Sie ihren Launcher mit absoluten Pfaden aus; es funktioniert auch, wenn Ihr aktuelles Verzeichnis ein anderes Projekt ist:

node --version
node /absoluter/pfad/zu/spine-animation/scripts/spine.mjs doctor \
  --segmentation mesh --output /absoluter/pfad/ausgabe --preview

Führen Sie vor prepare, validate, build oder dem Start einer Vorschau Folgendes aus:

  1. Bestätigen Sie Node.js 20.9+. Wenn node fehlt oder älter ist, bereiten Sie ein kompatibles Node mit dem verfügbaren Paket-/Versionsmanager der Umgebung vor, bevor Sie die Fähigkeit starten. Die Fähigkeit enthält kompiliertes JavaScript, nicht die Node-Ausführungsdatei.
  2. Führen Sie doctor mit dem tatsächlichen Ausgabeverzeichnis des Benutzers aus. Verwenden Sie mesh für die anfängliche Abhängigkeitsprüfung; dies wählt nicht die Rig-Strategie für die Animation aus. Fügen Sie --preview hinzu, es sei denn, der Benutzer überspringt die Workbench explizit. Fügen Sie --editable/--spine-cli nur hinzu, wenn eine bearbeitbare .spine-Datei benötigt wird. Überprüfen Sie erneut mit --segmentation mobilesam oder sam3, bevor Sie dieses Backend explizit verwenden; diese Prüfungen verifizieren auch seine Python-Importe, ohne Gewichte für die Inferenz zu laden. Fehlende optionale Modelle blockieren Mesh-/Polygon-Workflows nicht.
  3. Lesen Sie result.ready, checks[].required und repairs. Reparieren Sie innerhalb der vorhandenen Autorisierung des Benutzers nur fehlende Anforderungen für die aktuelle Aufgabe und führen Sie dann dieselbe Prüfung erneut aus. repairs stellt Befehle als command plus args bereit; bewahren Sie Pfade als Argumente. Die Reparatur von installierten Paketabhängigkeiten verwendet pnpm im Skill-Verzeichnis; der Quellcode-Checkout verwendet seine eigene Installationsroutine. Starten Sie jeden Generierungsbefehl erst, nachdem seine eigenen erforderlichen Prüfungen bestanden sind; unabhängige Planung/Vorbereitung kann fortgesetzt werden, während Blocker behoben werden. Ersetzen Sie ein angefordertes Backend oder endgültiges Format nicht stillschweigend. Wenn eine Reparatur durch Netzwerk/Zugriff blockiert wird oder fehlschlägt, melden Sie den spezifischen Blocker, anstatt wiederholt neu zu installieren oder Bereitschaft zu behaupten. Installieren Sie SAM 3 nicht nur, weil es als nicht verfügbare optionale Fähigkeit aufgeführt ist.

Der Bootstrap-Doctor verwendet Node-Built-ins und kann fehlende/defekte Sharp/Express melden, bevor die Anwendung sie importiert. Er überprüft die Laufzeitdateien, native Bildcodierung, den Paketmanager, die Schreibbarkeit des angeforderten Ausgabeverzeichnisses und optionale Funktionen. Er installiert keine Pakete oder Modelle. pnpm wird benötigt, um fehlende Abhängigkeiten zu reparieren; eine bereits installierte Laufzeit kann ohne pnpm im PATH ausgeführt werden.

Die Bereitschaft der Vorschauressourcen beweist nicht, dass der Agent über Browser-/Computer-Tools verfügt. Die installierte Fähigkeit bedient vorgebaute statische Web-Assets; React/Vite werden nur benötigt, wenn das Frontend aus dem Quellcode entwickelt oder neu erstellt wird. Überprüfen Sie die verfügbaren Tools des Hosts, wenn das automatische Öffnen von Seiten oder Screenshots angefordert werden, und melden Sie die visuelle Überprüfung separat. Behalten Sie das vom Benutzer gewählte Ausgabeverzeichnis bei; der Standard ist ./output im aktuellen Arbeitsverzeichnis. stdout ist JSON, der Fortschritt wird nach stderr ausgegeben, und fehlgeschlagene erforderliche Prüfungen beenden den Vorgang mit einem Fehlercode ungleich Null.

Öffnen Sie die Workbench zu Beginn der Aufgabe

Starten oder verwenden Sie für jede Animationserstellungsanfrage die Workbench, sobald die grundlegende Vorprüfung bestanden ist, noch bevor Fragen zur Zielauswahl stehen, Grafiken generiert werden, geplant oder das Modell eingerichtet wird. Verwenden Sie den Ausgabeordner des Benutzers (andernfalls ./output im aufrufenden Arbeitsverzeichnis). Ein leerer Ausgabeordner wird unterstützt:

node /absoluter/pfad/zu/spine-animation/scripts/spine.mjs preview \
  --output /absoluter/pfad/ausgabe

Senden Sie sofort die tatsächlich zurückgegebene result.url als anklickbaren Link. Verwenden Sie im Codex-Desktop ein verfügbares open_in_codex-Werkzeug, um es im rechten Bereich des aktuellen Chats zu öffnen. Siehe references/workbench-start.md für die Tool-Argumente, die Wiederverwendung von Tabs und Fallbacks. Das Öffnen der Workbench erfordert keine abgeschlossene Animation oder ein ausgewähltes Exportziel.

Halten Sie den Dienst und die Seite während der Produktion und der menschlichen Überprüfung verfügbar. Navigieren Sie nach jedem abgeschlossenen Build die bestehende Workbench zur zurückgegebenen previewUrl oder teilen Sie dem Benutzer mit, das neue Projekt auszuwählen und auf „Aktualisieren" zu klicken, wenn der Host dies nicht automatisieren kann. Beachten Sie eine explizite Aufforderung, die Webseite zu überspringen.

Erstellen Sie eine Animation

  1. Identifizieren Sie bei bereits bereitgestelltem Workbench-Link das Quellbild, die angeforderte Bewegung, das Exportziel und den Ausgabeordner aus dem Gespräch. Wenn der Benutzer kein Exportziel gewählt hat, bieten Sie Unity (unity) als Standard-/empfohlene Option an, Cocos Creator 3.8 und die anderen unterstützten Ziele. Warten Sie auf die Auswahl des Benutzers vor einem Build oder Export; eine vorausgewählte Standardeinstellung oder Stille ist keine Wahl. Verwenden Sie eine vorhandene explizite Wahl wieder, einschließlich der Anweisung, die Standardeinstellung zu verwenden, ohne erneut zu fragen. Siehe references/export-targets.md für Optionen und Versionskompatibilität. Unabhängige Umgebungsprüfungen, Bildvorbereitung und Planung können während des Wartens fortgesetzt werden. Verwenden Sie bereitgestellte Bilder und Assets wieder. Wenn nur eine Charakterbeschreibung bereitgestellt wird, verwenden Sie ein verfügbares Bildgenerierungswerkzeug, wenn der Benutzer die Erstellung der Grafik angefordert hat; andernfalls besorgen Sie sich ein Quellbild.

  2. Wenden Sie references/image-size.md an, bevor Sie Grafiken generieren oder vorbereiten. Standardmäßig wird eine längste Kante von 512 px und ein Arbeits-PNG von 512 KiB verwendet. Fordern Sie die kleinste geeignete Generierungsgröße an und verwenden Sie dann prepare, um das tatsächliche Pixel-/Byte-Budget durchzusetzen, ohne das Original zu ändern:

    node /absoluter/pfad/zu/spine-animation/scripts/spine.mjs prepare \
      --image /absoluter/pfad/charakter.png --workdir /absoluter/pfad/pläne/charakter \
      --max-edge 512 --max-bytes 524288 \
      --prompt "2-Sekunden-Idle, kleine Kopf- und Armbewegungen, Blinken"
    
  3. Überprüfen Sie das zurückgegebene sourceImage mit Ihrer Bildanzeigefähigkeit. Lesen Sie references/plans.md für Koordinaten- und Keyframe-Formate. Verwenden Sie die zurückgegebene imageSize als Koordinatenbasis; notieren Sie imageBudget. Bestätigen Sie, dass Augen, Finger und dünne Konturen nach der Reduzierung lesbar bleiben. Definieren Sie die Schlüsselposen und Gelenke der Aktion, die sich unabhängig bewegen, und wählen Sie dann den Rig mit references/artwork-completion.md. Ein mesh für das gesamte Bild ist für kleine, zusammenhängende Idle-Bewegungen geeignet, die von den vorhandenen Pixeln unterstützt werden. Verwenden Sie für artikulierte Gliedmaßenbewegungen, große Gelenkrotationen oder wechselnde Überlappungen separate ausgeschnittene/vervollständigte Schichten mit Gelenküberlappung und ausgefüllten verborgenen Bereichen. Verwenden Sie alternative Anhänge/Posen, wenn Hand-, Gesichts- oder Perspektivenänderungen unterschiedliche Grafiken erfordern; kombinieren Sie diese Methoden nach Bedarf. Verwenden Sie kein Idle-Gesamtbild-Rig für einen Schlag, einen Gang oder einen Tanz nur zur Vermeidung von Nähten wieder, und reduzieren Sie die angeforderte Aktion nicht, um in dieses Rig zu passen. Notieren Sie die Wahl und die erforderlichen beweglichen Teile als rigDecision in quality-review.json. Überprüfen Sie, ob der aktive Build-Pfad die Assets verbrauchen kann und die erforderlichen Posen ausführen kann, bevor Sie in Keyframes investieren. Vervollständigen und überprüfen Sie fehlende Grafiken, wenn dies unterstützt wird; beheben Sie eine fehlende Fähigkeit oder einen überarbeiteten Umfang mit dem Benutzer, bevor Sie die abhängige Produktion fortsetzen. Schreiben Sie analysis.json und motion.json selbst. Bitten Sie den Benutzer nicht, diese Dateien zu erstellen. Teilen Sie an Gelenken, die relative Bewegung benötigen, und Grenzen, die für die visuelle Schichtung erforderlich sind; vermeiden Sie unnötige Schnitte in festen Bereichen. Verwenden Sie auto/mobilesam/sam3/polygon, um eine vorhandene Quelle zu schneiden. auto wählt ein installiertes Masken-Backend aus, keine Rig-Strategie. Lesen Sie bei schmutzigen Kanten, SAM-Anfragen oder neuen transparenten Grafiken references/cutouts.md, bevor Sie einen Pfad wählen.

  4. Validieren und erstellen Sie einen Überprüfungskandidaten. Lesen Sie references/human-review.md vor dem ersten Build, damit der Kandidat die für die menschliche Qualitätsprüfung erforderlichen Nachweise enthält. Das folgende Beispiel schneidet Teile mit polygon aus; verwenden Sie das für die tatsächliche Aufgabe ausgewählte Backend. Verwenden Sie mesh für eine Gesamtbildstrategie oder einen getesteten Schichten-/Posenintegrationspfad, wenn der Standard-build die erforderlichen Posen nicht ausführen kann:

    node /absoluter/pfad/zu/spine-animation/scripts/spine.mjs validate \
      --image /absoluter/pfad/pläne/charakter/source.png \
      --analysis /absoluter/pfad/pläne/charakter/analysis.json \
      --motion /absoluter/pfad/pläne/charakter/motion.json
    
    node /absoluter/pfad/zu/spine-animation/scripts/spine.mjs build \
      --image /absoluter/pfad/pläne/charakter/source.png \
      --analysis /absoluter/pfad/pläne/charakter/analysis.json \
      --motion /absoluter/pfad/pläne/charakter/motion.json \
      --project charakter-bewegung --output /absoluter/pfad/ausgabe \
      --target unity --segmentation polygon --background transparent --blink --preview
    

    Übergeben Sie immer die vom Benutzer ausgewählte ID mit --target; das obige Beispiel geht davon aus, dass Unity gewählt wurde. Fügen Sie --blink nur hinzu, wenn Blinken angefordert wird und der Charakter klare, nach vorne gerichtete dunkle Augen hat. Lassen Sie --motion weg, um den Standard-Idle zu verwenden. Verwenden Sie --name für einen stabilen Asset-Namen. Verwenden Sie beim Iterieren eines zuvor generierten Jobs --replace; andere Projekte und Quellen bleiben getrennt.

  5. Aktualisieren Sie die bereits geöffnete Workbench auf die zurückgegebene previewUrl und verwenden Sie ihren Tab wieder, wo dies unterstützt wird. Überprüfen Sie das Originalbild gegen die Animation im Ruhezustand und bei der größten Bewegung und überprüfen Sie einen Frame mit geschlossenen Augen, wenn Blinken angefordert wurde. Passen Sie die Pläne an und bauen Sie neu, wenn ein konkreter Defekt sichtbar ist. Überprüfen Sie auch die angeforderte Aktion anhand ihrer Schlüsselposen: Ein Schlag benötigt einen lesbaren Schlag und eine Erholung mit einer geeigneten Handform und Körpermechanik. Notieren Sie Bild-/Aktions-Selbstprüfungen getrennt von der Dateivalidierung. Führen Sie die folgenden menschlichen Kontrollpunkte aus, bevor Sie das Ergebnis als akzeptiert bezeichnen. Bewahren Sie angeforderte offene Seiten.

Menschliche Qualitätskontrollpunkte

Verwenden Sie drei Kontrollpunkte während der Animationsproduktion:

KontrollpunktMenschliche Überprüfung
Materialien und RigRig-Strategie, tatsächliche geschnittene/vervollständigte Teile oder Gesamtbildtextur, Gelenküberlappung, Ruhe-/Extremposen
BewegungAbspielbare Animation, Extremposen, Loop-Naht und geschlossene/wieder geöffnete Augen, wenn angefordert
LieferungDas überprüfte Zielformat der Revision, die tatsächlichen Dateien und alle ungelösten Einschränkungen

Warten Sie auf die explizite Genehmigung des Menschen, bevor Sie einen Qualitätskontrollpunkt überschreiten. Entwurfs-Builds und -Exporte sind erlaubt, um Überprüfungsnachweise zu erzeugen. Beheben Sie zuerst Defekte, die der Agent identifizieren kann, zeigen Sie dann die tatsächlichen Bilder/Vorschau und bitten Sie um gezieltes Feedback. Ein erfolgreicher Build oder die eigene visuelle Überprüfung des Agenten stellt keine menschliche Genehmigung dar.

Folgen Sie references/human-review.md für Checklisten, Überprüfungsaufzeichnungen und Änderungen, die eine weitere Überprüfung erfordern. Präsentieren Sie Kontrollpunkte gemeinsam, wenn ihre Nachweise bereit sind, und verwenden Sie die explizite Genehmigung unveränderter Artefakte wieder. Beachten Sie die explizite Anweisung eines Benutzers, einen Kontrollpunkt zu überspringen oder zu lockern; notieren Sie diesen Kontrollpunkt als verzichtet und nicht als genehmigt.

Qualität und Liefergegenstände

  • Verwenden Sie englische Teilbezeichner. parent beschreibt die Bewegungsvererbung; depth beschreibt die Zeichenreihenfolge. Behalten Sie ein Glied mit seinem gehaltenen Objekt bei, wenn sie sich zusammen bewegen.
  • Passen Sie den Rig an die angeforderte Aktion an. Halten Sie artikulierte Gelenke durch geeignete Drehpunkte, überlappende vollständige Grafiken und abgestimmte Gewichte verbunden. Verwenden Sie lokale Mesh-Deformation innerhalb separater Schichten, wenn nützlich; überprüfen Sie, ob sich bewegende Gliedmaßen tatsächlich unabhängig artikulieren. Fehlende Grafiken oder die Bewegungsgrenzen des Standard-Builds erfordern einen kompatiblen Grafik-/Integrationspfad oder eine vereinbarte Umfangsänderung, anstatt einer kleineren Ersatzgeste.
  • Ein transparentes Gesamtbild benötigt dennoch Knochenregionen und Drehpunkte. Gesamtbild-Meshes unterstützen kohärente Deformationen; die Deckkraft pro Teil und sich unabhängig ändernde Verdeckung erfordern separate Schichten. Versprechen Sie keine unsichtbaren Grafiken.
  • build lädt niemals SAM/Python-Umgebungen herunter oder ruft Bildgenerierungs-APIs auf. doctor meldet die optionale lokale MobileSAM/SAM 3-Verfügbarkeit. auto verwendet ein installiertes Backend und meldet tatsächliche Polygon-Fallbacks; explizite SAM-Modi schlagen fehl, wenn sie nicht verfügbar sind. Verwenden Sie sam-setup nur als Teil angeforderter SAM-Arbeiten, wenn die lokale Modellinstallation dem Umfang und den Ressourcenbeschränkungen des Benutzers entspricht.
  • Bevorzugen Sie für neu angeforderte Grafiken die echte transparente Hintergrundoption eines Generators und überprüfen Sie dann Alpha mit inspect oder prepare --background transparent. Ein Schachbrettmuster, das in RGB gemalt wurde, ist keine Transparenz. Vermeiden Sie Greenscreen-Hintergründe für neue Assets. Vorhandenes RGBA kann dennoch mattefarbene Kanten haben; der Build inspiziert Alpha und repariert konservativ identifizierbare Farbverschmutzungen.
  • Halten Sie normale Arbeitsbilder innerhalb von 512 px / 512 KiB. Verwenden Sie ein größeres Budget nur für eine explizite Größenanforderung des Benutzers oder ein konkretes Detailbedürfnis; notieren Sie den Grund. Überprüfen Sie die endgültigen Atlas-Abmessungen/Bytes und bauen Sie von der budgetierten Quelle neu, wenn sie zu groß ist, anstatt eine exportierte Textur allein zu skalieren.
  • Überprüfen Sie die warnings des Builds. Behaupten Sie nicht, dass ein übersprungenes Blinken oder ein nicht verfügbares bearbeitbares Projekt erstellt wurde. Standard-Liefergegenstände sind gleichnamige .json-, .atlas- und .png-Dateien; eine bearbeitbare .spine-Datei benötigt zusätzlich einen installierten Spine-Editor und --editable (oder --spine-cli /pfad/zum/editor). Melden Sie diese Einschränkung, wenn zutreffend.
  • Geben Sie den Vorschaulink, den Artefaktordner oder die Dateien, die Animationen und was überprüft wurde, einschließlich des menschlichen Überprüfungsstatus, zurück. Ausstehende oder abgelehnte Arbeiten bleiben ein Überprüfungskandidat. Überprüfen Sie Kanten sowohl gegen helle als auch gegen dunkle Vorschauhintergründe. Wenn kein Browser verfügbar ist, melden Sie die visuelle Überprüfung als unvollständig und lassen Sie den Menschen die verfügbare Vorschau oder Bilder überprüfen.

Der Vorschau-Server verwendet Express und bedient die erstellten Assets über HTTP; er ist für die lokale Entwicklung und Überprüfung ausgelegt. Die Exportformate umfassen Unity (.json, .atlas, .png), Cocos Creator 3.8 und andere. Der Agent sollte die Dokumentation konsultieren, um die spezifischen Exportoptionen und deren Kompatibilität zu verstehen.

Fehlerbehebung

Wenn der Build fehlschlägt, überprüfen Sie die Konsolenausgabe auf Fehlermeldungen. Häufige Probleme sind:

  • Fehlende Abhängigkeiten (Sharp, Express) – führen Sie doctor erneut aus oder reparieren Sie manuell mit pnpm.
  • Bild zu groß oder Speicherplatz reicht nicht aus – passen Sie die Bildgröße oder das Budget an.
  • Ungültige JSON-Planungsdateien – validieren Sie die Syntax und stellen Sie sicher, dass Koordinaten innerhalb der Bildabmessungen liegen.
  • SAM-Backend nicht verfügbar – verwenden Sie mesh oder polygon als Fallback.

Wenn die Vorschauseite nicht geladen wird, stellen Sie sicher, dass der preview-Befehl ausgeführt wird und der Port nicht blockiert ist. Verwenden Sie den bereitgestellten Link, um darauf zuzugreifen, und aktualisieren Sie die Seite, nachdem ein Build abgeschlossen ist.

Referenzen

Verwandte Skills