SpineアニメーションをWebで触れる表現にする流れ

この記事では、イラストからSpineアニメーションを作り、Web上の作品ページへ組み込むまでの流れをざっくり整理します。 工程が複数の分野にまたがるので、まずは全体像だけつかんでもらえたらうれしいです。

なぜSpineなのか？

かわいくてもちもちした2Dキャラクターをリアルタイムで触れる体験を作りたいからです。

全体の流れ

分野を横断するので、全体の理解が必須です。

大きくは、イラストをパーツごとに分け、キャラクターを動かせるように組み立て、 Web上で表示・操作できるようにつなぐ、という流れです。

ただの静止画ではなく、クリックやドラッグ、なでる動きに反応するように、 触れる場所と画面側の操作を対応させています。制作の途中で「この髪だけ描き直したい」 「表情を1つ足したい」といった変更は必ず出てくるので、最初からパーツを 細かいレイヤーに分け、一部だけ差し替えられる状態にしておくことが大切です。

1. イラストをWebで動かしやすい形に分ける

パーツ分けでは、顔、髪、腕、服、表情差分などを、動かしたい単位で分けます。 Web上で触れる表現にしたい場合は、あとからドラッグしたい場所やリアクションを出したい場所を 先に想定しておくと、Spine側の設計が楽になります。

• 手前のものが上に表示されるようにパーツの重なり順を意識する
• パーツを分ければ分けるほどリッチな表現ができるが、難易度も増大する
• 関節部位は重なりが円状になるように作り、回転ツールで破綻していないかチェックする

レイヤーの命名規則やタグの付け方も重要で、コツとしては次のとおりです。

• PSDとの互換性を持たせる（CLIP独自のレイヤー構造にしない。最初からPSDでも良い）
• 描き直しが発生する想定で設計する（線画と塗りレイヤーを結合しないために[merge]タグを使う）
• 3Dモデルを参考にパーツごとに命名ルールを決めておく
• SpineへPSDを読み込むときはImport PSD機能を使う（Spine 4.2以降）
• あとから修正は効くので厳密に考えすぎない

2. 絵コンテを作る

パーツ分け済みの立ち絵ができたら絵コンテを作ります。

自由変形やパペット変形を用いてざっくりと感情やポーズを決めていき、これを元に差分パーツやアニメーションを制作します。

3. Spineでボーンとメッシュを作る

いわゆるセットアップと言われる工程です。リアルタイムで動かす想定なので、ボーンやメッシュ構造が複雑になりすぎないように、できるだけシンプルになるように心がけています。

このときのボーンへの命名も重要です。役割がわかる名前にしておくと、メンテナンスや後のプログラム側からの制御が楽になります。

4. Spineでアニメーションを作る

待機アニメーションが全ての軸になっています。これを元に、キーフレームをコピー・反転したり、 再生速度（タイムスケール）を変えたりして別のアニメーションを作ることが多いです。

Web実装側から参照するアニメーション名は、あとから変えると接続が崩れやすいため、IDLE、PULL、PETTING のように 役割がわかる名前にしています。

5. 触れる場所にヒットボックスを設置する

キャラクター全体ではなく、触ってほしい場所だけに反応させるため、 Spine側にヒットボックスを用意しています。Web側ではポインター位置をSpineの座標へ変換し、 どのヒットボックスに入っているかを見てリアクションを切り替えます。

• ほっぺ: ドラッグ量に応じてボーンを動かす
• 頭: なでる動きとタップを分けて判定する
• 体: 一定量動かしたらくすぐりリアクションへ移る

6. PixiJSでSpineを表示する

Spineで作ったキャラクターをWebページ上でぬるぬる動かすために、描画エンジンとしてPixiJSを使っています。 たくさんのメッシュを毎フレーム変形させ続けるSpineの表現には、 軽快な2D描画に特化したPixiJSが向いています。

PixiJSを選んでいる理由は次のとおりです。

• GPUを使ったWebGL描画で、複雑なメッシュ変形でも滑らかに動く
• spine-pixi（今回はPixi v8対応の@esotericsoftware/spine-pixi-v8）という公式ランタイムがあり、Spineの出力をそのまま読み込める
• 2D表示に特化しているぶん、カメラや奥行きといった余計な設定がいらず、 キャラを画面に置くまでがシンプルで扱いやすい

3D向けのthree.jsでもSpineを扱えますが、機能が3D前提で重く、 今回のような2Dキャラをテンポよく表示する用途にはPixiJSの方が適していました。（開発当初はthree.jsを使っていました）

流れとしては、ページ上にキャラクターを描くための「画面」を用意し、 そこへSpineで作ったキャラクターを読み込んで動かしています。

7. Webサイトに組み込む

サイト自体はNext.jsというフレームワークで作っています。 表示の速さやSEO（検索エンジンへの見つけられやすさ）に強く、 キャラクターのような重い要素を扱いつつ、ページ全体を軽く保ちやすいのが理由です。

Web上で動かすまでには、いくつか苦労した点もありました。

• キャラクターの読み込みは重いので、待っている間もページが固まらないよう 後から表示を差し替える工夫が必要だった
• スマホとPCで画面サイズや操作（タップとマウス）が違うため、 どちらでも自然に触れるよう調整に時間がかかった
• 触れる場所の判定や動きの反応を、気持ちよく感じるよう地道に微調整した

まとめ

イラストのパーツ分けからSpineでの制作、PixiJSでの描画、Webサイトへの組み込みまで、 分野を横断しながらひとつの「触れるキャラクター」を作っています。 工程は多いですが、常に最終的な体験を思い描きながら進めるのがコツです。

今回は全体の流れの解説にとどめ、細かい部分の解説は省きました。このノートが好評で 時間に余裕ができたら小さなテクニックなども共有していきたいです。

不明な点や質問などありましたら、お問い合わせフォームやXのDMからお気軽にどうぞ。 できる限りお答えします。

読んでくださってありがとうございました。