本来は、Spineのマルチトラックの概念について紹介する記事を書く予定でした。
しかし最近は、AI コーディングエージェントに Unity プロジェクトを直接読ませながら実装を進められる時代です。
そこで今回は、
- Unity に Spine Runtime を導入
- Spineboy を配置
- Codex にコードを書かせる
という流れで、実際にSpineを実装していくことで、マルチトラックの概念と、ついでにオーバーライドの仕組みを体験しながら理解していく記事にしました。
この記事では、ローカルの Unity プロジェクトを読める AI コーディングエージェントとして Codex を使っています。
利用条件やプランは変わる可能性があるので、最新の公式情報を確認してください。
1．準備
UnityとCodexについては自力で導入してください。ChatGPTに聞けば、懇切丁寧に教えてくれるはずです。
・ランタイムの導入
いくつか方法はありますが、ここでは直感的なUnitypackage版を使います。
https://en.esotericsoftware.com/spine-unity-download
spine-unity unitypackage をダウンロードして、UnityのAssetにドラッグ＆ドロップします。
Unityに、Spineを動かすためのランタイムといくつかのデモがインストールされます
導入後、Assets配下にSpine関連フォルダとサンプルが追加されれば成功です。
2．サンプルキャラクターの配置
下のスクリーンショットのように、spineboy-proのスケルトンデータをSceneにドラッグします。
大きさと位置を調整したら、パラメータを確認します。細かいところは基本的に触らなくて大丈夫なので、Animation Nameのプルダウンメニューから、idleのアニメーションを選択しておきます。
これは、ロード時にデフォルトで再生されるアニメーションの指定です。
ここまで終わったら、画面中央上のプレイボタンを押します。SpineBoyがGameタブで呼吸するアニメーションをしてればOKです。確認出来たら、停止ボタンを押して編集モードに戻してください。
3．コーディング
Codexに丸投げです。まずは、ここまで作ったUnityプロジェクトをCodexに確認してもらいましょう。
「SpineBoyがSceneに配置されているのを確認してください」とCodexに指示すれば、プロジェクトの読み込みから分析までやってくれるはずです。
次は、アニメーションを切り替えるUIを作ります。Codexに、トグルの作り方を聞きながら、3つ配置してください。
WalkToggle
AimToggle
ShootToggle
の3つです。配置出来たら、Codexにこう頼むのです
「トグルをonにしたとき、それぞれのアニメを別トラックで再生するようにプログラムを書いて」
トグルをon/offすると、歩いたり止まったり。その足の動きとは関係なく、銃を構えたり発射したり。
Spineは、このように１つのモデルに、複数のアニメーションを同時に適用することが出来ます。
この記事のキモである、マルチトラックの概念がこれです。複数のアニメーションを「Track」というレイヤー構造で同時に再生できます。
例えば、今作ったプロジェクトであれば、
Track0 : idle / walk（トグルで切り替え）
Track1 : aim
Track2 : shoot
が同時に、独立して再生されています。
ここまで出来たら、あとは応用です。Codexに色々頼んでみてください。
「左右キーで左右に歩かせて」「スペースバーで銃を発射して」「発射から１秒経ったらaimを終了して」
４．応用
コード側から、Spineのボーンを動かすことができます。play中にSceneタブへ切り替えたときに表示されるこの赤いターゲットカーソル。これは、SpineBoyのSpineデータ側にあるオブジェクトです。これの座標を動かすと、銃口がこれを追尾するようになっています。
このオブジェクトはSpine側のものなので、これをUnity側からオーバーライドして制御を乗っ取ってみましょう。
まずは、Add Componentで、Skeleton Utilityを追加します。SpineのボーンをUnityのオブジェクトとして動かす仕組みですね。モードには、フォローとオーバーライドがあります。
FollowはSpine側のボーンの動きに、Unity側が追従するモードです。
逆に、OverrideはUnity側で、Spineのボーンの動きを上書きするモードです。
さて。SpineBoyやその周辺にクリックできる丸いUIが出たと思います。これは、Spineのボーンを表しています。Spine側は主にこのボーンを動かすことでアニメーションを実現しています。
次に、先ほどのターゲットカーソルのところにあった赤丸を選択します。先ほど説明したとおり、銃口はこのボーンの座標を追随しています。InspectorビューのSkeletonUtilityBoneコンポーネントに、AddOverride というボタンがあるので、これをクリックします。
これで、ボーンの制御をUnity側で乗っ取れるようになりました。
「マウスでクリックしたワールド座標を保持するGameObjectを作って、crosshairのOverride Transformをそれに同期させて」
とCodexにお願いすれば、SpineBoyは、そのターゲットカーソルに向けて、銃を発射するようになるでしょう。
少し面倒くさい書き方になったのは以下の理由です
・Unity側から、Boneを直接触るのは難しい
座標の起算元がSpineBoyだったり、ゲーム空間だったり敵だったり。更新タイミングもSpineBoyのアニメーション更新なのか、ゲーム側の更新なのか。
そういう面倒な部分をSpine側の更新タイミングで処理してくれるオーバーライドの仕組みに丸投げしている、と言うわけです。
と言うわけで、Spineは単に「アニメーションを作って再生するツール」ではなく、
トラックによるアニメーション合成
ボーン制御
コンストレイント
Unity側からのオーバーライド
などを組み合わせることで、ゲーム側のロジックと密接に連携できる仕組みになっています。
まずは SpineBoy を歩かせたり、銃を構えさせたりしながら、マルチトラックやコンストレイントの感覚を実際に触ってみてください。
次回は、このマルチトラックの概念を立ち絵アニメーションに応用してみます。