Communitygithub.com

spine-animation (Spineアニメーション)

画像からSpineスケルトンアニメーションを作成し、JSON/atlas/PNGを出力してゲームエンジンで使用可能にします。ローカルプレビューページも提供。

spine-animation (Spineアニメーション) とは?

このスキル(youtiaoguagua/spine-animation)は、画像を元にSpineスケルトンアニメーションを作成するためのツールです。エージェントが画像のパーツ分割や動作計画を立案し、それに基づいてアニメーションを生成、最終的にJSON、atlas、PNGファイルとしてエクスポートします。出力されたアセットはUnity、Cocos Creatorなどのゲームエンジンでそのまま利用可能です。また、ローカル環境で動作するプレビューサーバーを起動し、アニメーションの確認ができるワークベンチを提供します。このスキルは外部のモデルAPIやAPIキーを必要とせず、Node.js 20.9以上の環境で動作します。画像のパーツ切り出しにはポリゴンやSAM(Segment Anything Model)を選択でき、まばたきやUIモーションなど、さまざまなアニメーションに対応します。品質管理のための人間による確認ポイント(マテリアル・リグ、モーション、納品物)が設けられており、各段階での承認を経て制作が進みます。

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

お気に入りのAIに質問する

このエージェントスキルを事前に読み込んだ状態で新しいチャットを開きます。

ドキュメント

Spineアニメーション

自身の画像理解を使用してパーツとモーションを計画します。バンドルされたローカルランタイムは、透明な全体画像をリギングするか、パーツを切り出し、キーフレームを追加し、アセットをエクスポートし、プレビューを提供します。ローカルランタイムは別のモデルAPIを使用したり、APIキーを必要としたりしません。アートワークの補完が必要な場合は、ホストの画像生成/編集ツールを使用します。

環境事前確認 — 最初に実行

このスキルのディレクトリをSKILL.mdの場所から特定します。そのランチャーを絶対パスで実行します。現在のディレクトリが別のプロジェクトでも動作します。

node --version
node /absolute/path/to/spine-animation/scripts/spine.mjs doctor \
  --segmentation mesh --output /absolute/path/output --preview

prepare、validate、build、またはプレビューの開始前に:

  1. Node.js 20.9+であることを確認してください。nodeがないか古い場合は、スキルを起動する前に、環境で利用可能なパッケージ/バージョンマネージャーを使用して互換性のあるNodeを準備してください。スキルはコンパイル済みのJavaScriptをバンドルしており、Node実行可能ファイル自体は含みません。
  2. ユーザーの実際の出力ディレクトリを指定してdoctorを実行します。初期の依存関係チェックにはmeshを使用します。これはアニメーションのリグ戦略を選択するものではありません。ユーザーが明示的にワークベンチをスキップしない限り、--previewを追加してください。編集可能な.spineが必要な場合にのみ--editable/--spine-cliを追加してください。そのバックエンドを明示的に使用する前に、--segmentation mobilesamまたはsam3で再チェックしてください。これらのチェックは、推論のために重みをロードせずに、Pythonのインポートも検証します。オプションのモデルが欠落していても、メッシュ/ポリゴンワークフローはブロックされません。
  3. result.ready、checks[].required、およびrepairsを読み取ります。ユーザーの既存の許可の範囲内で、現在のタスクに必要な不足している要件のみを修復し、同じチェックを再実行します。repairsはcommandとargsとしてコマンドを提供します。パスを引数として保持します。インストール済みパッケージの依存関係修復は、スキルディレクトリ内でpnpmを使用します。ソースチェックアウトは独自の依存関係インストールを使用します。各生成コマンドは、必要なチェックがすべて成功した後にのみ開始します。ブロッカーが解決されている間は、独立した計画/準備を続行できます。要求されたバックエンドまたは最終フォーマットを黙って置き換えないでください。修復がネットワーク/アクセスによってブロックされた場合、または失敗した場合は、繰り返し再インストールしたり準備完了を主張したりせず、特定のブロッカーを報告してください。利用できないオプション機能としてリストされているという理由だけでSAM 3をインストールしないでください。

ブートストラップドクターはNode組み込み機能を使用し、アプリケーションがインポートする前に、欠落または壊れたSharp/Expressを報告できます。ランタイムファイル、ネイティブ画像エンコーディング、パッケージマネージャー、要求された出力の書き込み可能性、およびオプション機能をチェックします。パッケージやモデルはインストールしません。不足している依存関係を修復するにはpnpmが必要です。すでにインストールされたランタイムは、PATHにpnpmがなくても実行できます。

プレビューリソースの準備ができていても、エージェントにブラウザ/コンピューターツールがあるとは限りません。インストールされたスキルは、事前にビルドされた静的Webアセットを提供します。React/Viteは、フロントエンドをソースから開発または再構築する場合にのみ必要です。 自動ページ開封やスクリーンショットが要求された場合は、ホストの利用可能なツールを確認し、視覚的検証を別途報告してください。ユーザーが選択した出力ディレクトリを保持します。デフォルトは現在の作業ディレクトリの./outputです。stdoutはJSON、進捗はstderrに出力され、失敗した必須チェックはゼロ以外で終了します。

タスク開始時にワークベンチを開く

アニメーション作成リクエストごとに、基本的な事前確認が成功したらすぐに、ターゲット選択の質問、アートワーク生成、計画、モデル設定の前に、ワークベンチを開始または再利用します。ユーザーの出力フォルダーを使用します(それ以外の場合は、呼び出し元の作業ディレクトリの./output)。空の出力フォルダーもサポートされています。

node /absolute/path/to/spine-animation/scripts/spine.mjs preview \
  --output /absolute/path/output

実際に返されたresult.urlをクリック可能なリンクとしてすぐに送信します。Codexデスクトップでは、利用可能なopen_in_codexツールを使用して、現在のチャットの右パネルで開きます。ツールの引数、タブの再利用、およびフォールバックについては、references/workbench-start.mdを参照してください。ワークベンチを開くために、完成したアニメーションや選択されたエクスポートターゲットは必要ありません。

制作中および人間によるレビュー中は、サービスとページを利用可能に保ちます。各ビルド完了後、既存のワークベンチを返されたpreviewUrlに移動/更新するか、ホストがそれを自動化できない場合は、ユーザーに新しいプロジェクトを選択して更新ボタンをクリックするように伝えてください。Webページをスキップするという明示的なリクエストは尊重してください。

アニメーションを作成する

  1. すでに提供されたワークベンチリンクを使用して、会話からソース画像、要求されたモーション、エクスポートターゲット、および出力フォルダーを特定します。ユーザーがエクスポートターゲットを選択していない場合は、Unity(unity)をデフォルト/推奨オプションとして提供し、Cocos Creator 3.8、およびその他のサポート対象ターゲットを提供します。ビルドまたはエクスポートの前にユーザーの選択を待ちます。事前選択されたデフォルトまたは沈黙は選択と見なされません。デフォルトを使用する指示を含め、既存の明示的な選択を、再度尋ねることなく再利用します。オプションとバージョンの互換性については、references/export-targets.mdを参照してください。待機中も、独立した環境チェック、画像準備、および計画を続行できます。提供された画像とアセットは再利用します。キャラクターの説明のみが提供された場合、ユーザーがアートワークの作成を要求している場合は利用可能な画像生成ツールを使用し、そうでない場合はソース画像を入手します。

  2. アートワークを生成または準備する前に、references/image-size.mdを適用します。デフォルトは、最長辺512ピクセル、作業用PNGは512 KiBです。最小の適切な生成サイズを要求し、次にprepareを使用して、元の画像を変更せずに実際のピクセル/バイト予算を適用します。

    node /absolute/path/to/spine-animation/scripts/spine.mjs prepare \
      --image /absolute/path/character.png --workdir /absolute/path/plans/character \
      --max-edge 512 --max-bytes 524288 \
      --prompt "2秒間の待機モーション、小さな頭と腕の揺れ、まばたき"
    
  3. 返されたsourceImageを画像表示機能で検査します。references/plans.mdで座標とキーフレームの形式を確認してください。返されたimageSizeを座標ベースとして使用し、imageBudgetを記録します。縮小後も目、指、細い輪郭が読み取れることを確認します。アクションのキーポーズと独立して動くジョイントを定義し、references/artwork-completion.mdを使用してリグを選択します。全体画像meshは、既存のピクセルでサポートされる、小さなまとまりのある待機モーションに適しています。関節のある手足の動き、大きなジョイントの回転、または変化するオーバーラップには、ジョイントオーバーラップと非表示領域を埋めた、別のカット/完成レイヤーを使用します。手、顔、または遠近感の変化に異なるアートワークが必要な場合は、代替アタッチメント/ポーズを使用します。必要に応じてこれらの方法を組み合わせます。パンチ、ウォーク、ダンスのために、継ぎ目を避けるという理由だけで待機中の全体画像リグを再利用したり、要求されたアクションをそのリグに合わせて縮小したりしないでください。選択内容と必要な可動部品をquality-review.jsonのrigDecisionとして記録します。アクティブなビルドパスがアセットを消費し、必要なポーズを実行できることを、キーフレームに投資する前に確認します。サポートされている場合は不足しているアートワークを完成させて検査します。続行する前に、欠落した機能や修正されたスコープについてユーザーと解決します。analysis.jsonとmotion.jsonは自分で作成します。ユーザーにこれらのファイルを作成するよう依頼しないでください。相対的な動きが必要なジョイントと、視覚的なレイヤリングに必要な境界で分割します。固定領域での不必要なカットは避けます。auto/mobilesam/sam3/polygonを使用して既存のソースを切り出します。autoはインストール済みのマスクバックエンドを選択しますが、これはリグ戦略ではありません。汚れたエッジ、SAMリクエスト、または新しい透明アートワークについては、パスを選択する前にreferences/cutouts.mdを読んでください。

  4. レビュー候補を検証してビルドします。最初のビルドの前にreferences/human-review.mdを読んで、候補に人間による品質レビューに必要な証拠が含まれるようにします。以下の例ではpolygonでパーツを切り出しています。実際のタスクで選択されたバックエンドを使用してください。全体画像戦略にはmeshを使用するか、標準のbuildで必要なポーズを実行できない場合は、テスト済みのレイヤー/ポーズ統合パスを使用します。

    node /absolute/path/to/spine-animation/scripts/spine.mjs validate \
      --image /absolute/path/plans/character/source.png \
      --analysis /absolute/path/plans/character/analysis.json \
      --motion /absolute/path/plans/character/motion.json
    
    node /absolute/path/to/spine-animation/scripts/spine.mjs build \
      --image /absolute/path/plans/character/source.png \
      --analysis /absolute/path/plans/character/analysis.json \
      --motion /absolute/path/plans/character/motion.json \
      --project character-motion --output /absolute/path/output \
      --target unity --segmentation polygon --background transparent --blink --preview
    

    常にユーザーが選択したIDを--targetに渡します。上記の例ではUnityが選択されたと想定しています。まばたきが要求され、キャラクターに明確で正面を向いた暗い目がある場合にのみ--blinkを追加します。デフォルトの待機モーションを使用するには--motionを省略します。安定したアセット名には--nameを使用します。以前に生成したジョブを反復する場合は--replaceを使用します。他のプロジェクトとソースは別個のままです。

  5. すでに開いているワークベンチを返されたpreviewUrlに更新し、サポートされている場合はそのタブを再利用します。元の画像と静止時および最大の動き時のアニメーションを比較し、まばたきが要求された場合は閉じた目のフレームを検査します。具体的な欠陥が見える場合は計画を調整して再ビルドします。また、要求されたアクションをそのキーポーズと照合します。パンチには、読み取り可能なストライクとリカバリ、適切な手の形状と身体メカニクスが必要です。画像/アクションの自己チェックはファイル検証とは別に記録します。結果が受け入れられたと判断する前に、以下の人間によるチェックポイントを完了してください。要求された開いているページは保持します。

人間による品質チェックポイント

アニメーション制作中は3つのチェックポイントを使用します。

チェックポイント人間によるレビュー
マテリアルとリグリグ戦略、実際のカット/完成パーツまたは全体画像テクスチャ、ジョイントオーバーラップ、静止/極端なポーズ
モーション再生可能なアニメーション、極端なポーズ、ループの継ぎ目、要求された場合の閉眼/開眼
納品レビューされたリビジョンのターゲット形式、実際のファイル、および未解決の制限事項

品質チェックポイントを進める前に、明示的な人間の承認を待ちます。レビュー証拠を生成するためのドラフトビルドとエクスポートは許可されています。まずエージェントが特定できる欠陥を修正し、次に実際の画像/プレビューを表示して対象を絞ったフィードバックを求めます。ビルドの成功やエージェント自身の視覚チェックは、人間の承認とは見なされません。

チェックリスト、レビューレコード、および別のレビューが必要な変更については、references/human-review.mdに従ってください。証拠の準備ができたらチェックポイントをまとめて提示し、変更されていないアーティファクトの明示的な承認を再利用します。チェックポイントをスキップまたは緩和するというユーザーの明示的な指示は尊重します。そのチェックポイントは承認済みではなく放棄済みとして記録します。

品質と成果物

  • 英語のパート識別子を使用します。parentはモーションの継承を説明し、depthは描画順序を説明します。一緒に動く手足とその保持オブジェクトはまとめておきます。
  • リグを要求されたアクションに一致させます。関節接続されたアーティキュレーションを、適切なピボット、重なり合う完全なアートワーク、および調整されたウェイトを通じて接続したままにします。必要に応じて別々のレイヤー内でローカルメッシュ変形を使用します。動く手足が実際に独立して関節運動することを確認します。アートワークの欠落や標準ビルドのモーション制限には、互換性のあるアートワーク/統合パスまたは合意されたスコープ変更が必要であり、より小さい代替ジェスチャーでは対応しません。
  • 透明な全体画像でも、ボーン領域とピボットが必要です。全体画像メッシュはコヒーレントな変形をサポートします。パーツごとの不透明度と独立して変化するオクルージョンには、別々のレイヤーが必要です。存在しないアートワークを約束しないでください。
  • buildはSAM/Python環境をダウンロードしたり、画像生成APIを呼び出したりしません。doctorはオプションのローカルMobileSAM/SAM 3の可用性を報告します。autoはインストール済みのバックエンドを使用し、実際のポリゴンフォールバックを報告します。明示的なSAMモードは、利用できない場合に失敗します。sam-setupは、ローカルモデルのインストールがユーザーのスコープとリソースの制約に収まる場合にのみ、要求されたSAM作業の一部として使用します。
  • 新しく要求されたアートワークについては、ジェネレーターの実際の透明背景オプションを優先し、次にinspectまたはprepare --background transparentでアルファを検証します。RGBにペイントされたチェッカーボードは透明度ではありません。新しいアセットにはグリーンスクリーン背景を避けてください。既存のRGBAでもマットカラーのエッジがある場合があります。ビルドはアルファを検査し、特定可能な色のにじみを保守的に修復します。
  • 通常の作業画像は512 px / 512 KiB以内に保ちます。明示的なユーザーサイズ要件または具体的な詳細の必要性がある場合にのみ、より大きな予算を使用します。その理由を記録します。最終的なアトラスの寸法/バイトを確認し、予算超過の場合は、エクスポートされたテクスチャを単独でリサイズするのではなく、予算内のソースから再ビルドします。
  • ビルドのwarningsを検査します。スキップされたまばたきや利用できない編集可能なプロジェクトが生成されたと主張しないでください。標準の成果物は、同じ名前の.json、.atlas、および.pngです。編集可能な.spineファイルには、追加でインストールされたSpineエディターと--editable(または--spine-cli /path/to/editor)が必要です。該当する場合はその制限を報告します。
  • プレビューリンク、アーティファクトフォルダーまたはファイル、アニメーション、および検証された内容(人間のレビューステータスを含む)を返します。保留中または却下された作業は、レビュー候補のままです。明るい背景と暗い背景の両方に対してエッジを検査します。ブラウザが利用できない場合は、視覚的検証が不完全であると報告し、人間が利用可能なプレビューまたは画像を検査できるようにします。

プレビューサーバーは、ビルド出力ディレクトリを提供します。

関連スキル