プログラミング

UnityでSpineを使ってみて分かったメリット・デメリット

Spineとは

Spineとは2Dアニメーションを作成するためのツールです。

メッシュやボーンといった機能を使用することで、少ない枚数のイラストで、高度なアニメーションを制作することができます。

SpineにあらかじめImportされているSpine Boyを使用して解説していきたいと思います。

ボーン


緑色と赤色の線・点がボーンです。
線は骨、点は関節のような役割を果たします。

メッシュ


3Dモデルのポリゴンのようなものです。
青い線で画像を囲っているものがメッシュです。
これにボーンを組み込むことで画像を変形可能になります。

一般的なアニメーション作成方法

フレームごとに別々の画像が必要になります。

  • アニメーションの種類が増えるほど必要な画像枚数が増加
  • 同じモーションをするキャラクターでも新しく描き下ろす必要がある

画像総数は

アニメーションの種類 ✕ フレーム数 ✕ キャラクター数

となります。

Spineを使ったアニメーション作成方法

部位ごとにパーツ分けした画像を用意します。

  • 各部品にメッシュ、ボーンを設定しアニメーションを作成
  • ボーンやアニメーションは使い回しが可能複数キャラクターを作成する手間を削減

画像総数は

キャラクター数 ✕ パーツ数

となります。
※アニメーション作成やボーンを組み込む作業は必要

主な機能

アニメーションブレンド

2つ以上のアニメーションの遷移をなめらかに補完する機能です。

ミキシング

複数のアニメーションを重ねて再生する機能です。

Skin

一体のアニメーションに対し、複数の見た目を用意するための仕組みです。
あるボーンに対して別の画像セットを使い、同じアニメーションを再生することが可能で、この画像セットをSkinと呼びます。


共通化させるキャラクターの仕様は統一させる必要があります
※画像サイズがずれるとボーンとの関係がおかしくなる

Slot

イメージやアニメーション、メッシュといったデータはアタッチメントと呼ばれます。
アタッチメントはボーンに直接装着されず、間にスロットが挟まります。
スロットがアタッチメント情報を持ちます。

これにより、スロット内のイメージを変更するだけでキャラクタの装備や、アバターといった特定の一部分のみを変更可能になります。

Event

アニメーションの任意のタイミングでイベントトリガーを実行する機能です。
整数、float、文字列といった情報を持たせることができます。
データはScript内から取得可能です。

開発上のメリット

DrawCallが少ない

Spineから吐き出されたテクスチャは1枚のシート(画像)にパッキングされるため、複雑な形状でも処理が軽いです。

小容量

フレームごとに画像を必要とせず、イメージとボーン情報などだけを保存するため小容量です。

Unityでの使用方法

SkeletonDataAsset


赤枠で囲まれたものをSkeletonDataAssetと呼びます。
SkeletonDataAssetはアニメーションやボーンなど全ての情報を持ちます。

これをヒエラルキー上に持っていくことで、Spineオブジェクトを生成することができます。(下図)

SkeletonAnimation

SpineオブジェクトはSkeletonAnimationというコンポーネントを持ちます。
別のScriptからこのコンポーネントを取得し、Script上でオブジェクトを操作することができます。

Scriptからの制御

SkeletonAnimationコンポーネントを取得します

アニメーション再生

skeletonAnimation.state.SetAnimation(Track番号,Animation名,Loop)
skeletonAnimation.state ・・・ アニメーションをコントロールするオブジェクトです。

  • Track番号…アニメーションを再生するレイヤー
    別々のtrackでアニメーションを再生することで、同時再生が可能です。
    数字が高いほど優先度が高い
  • Animation名…アニメーションの名前
  • Loop…アニメーションをループさせるか

アニメーション連続再生

skeletonAnimation.state.AddAnimation(Track番号,Animation名,Loop,Delay)
再生したいアニメーションをキューに追加します。

  • Delay…1つ前のアニメーション再生後、何秒後にこのアニメーションを再生するかどうか
    ※0fを指定すると1つ前のアニメーション終了後に再生します

アニメーションブレンド(遷移時間)

skeletonAnimation.state.Data.defaultMix
デフォルト遷移時間を設定します。

skeletonAnimation.state.Data.SetMix(Anim名, Anim名,duration)
アニメーション間の遷移時間を個別で設定します。

アニメーション間の遷移時間はinspector上でも設定可能です。

ミキシング

アニメーションを重ねて再生させることです。
別トラックで同時にアニメーションを再生させることで実現します。

例えばRunとShootを重ねることで、走りながら撃つアニメーションが再生されます。

ただこのままだと問題があります。

Shootを再生したレイヤーの優先度が高いので、アニメーション終了時の体制が固定されてしまいます。

解決策としては、Shootアニメーションの後に空のアニメーションを追加します。
こうすることで、Shootアニメーション終了後腕の位置がデフォルト状態に戻され、腕の位置もRunning状態へ遷移します。
SkeletonAnimation.state.AddEmptyAnimation(Track番号,mixDuration,Delay)

  • mixDuration….アニメーション遷移時間

スキン変更

skeletonAnimation.skeleton.SetSkin(skin名orスキンデータ)

skeletonAnimation.skeleton.SetSlotsToSetupPose();
動的に変更する場合はこのメソッドを呼ばないとSkinが適用されません。

アタッチメント変更

skeletonAnimation.skeleton.SetAttachment(Slot名,Attachment名)
Slot内にある別アタッチメントへ変更可能です。

コールバック

AddAnimationやSetAnimationでアニメーションを再生すると、TrackEntryオブジェクトが戻り値で返ってきます。

返されたTrackEntryのメソッドを使うことで、アニメーション開始、終了などのタイミングでCallbackを呼ぶことが可能になります。

  • trackEntry.Complete+=callback
  • trackEntry.Start+=callback
  • trackEntry.End+=callback

Callbackの引数にはTrackEntryが必要です。

TrackEntryはその他に再生速度の変更、途中再生といった設定が変更でできるため、個別にアニメーションをカスタマイズ可能です。

イベント通知

skeletonAnimation.state.Event += delegate
イベントを受け取るデリゲートメソッドを設定しておきます。
デリゲートメソッドの引数はTrackEntry,Eventを設定します。

まとめ

メリット
  • Spineは少ないイメージで高度な2Dアニメーションを作成できるツールである
  • ボーンやアニメーションを共通利用可能など、一般的なアニメーション制作方法よりもかなり開発効率を上げることが出来る
  • アニメーションに関する様々な設定をScriptから操作可能なため、ゲーム上で多彩な表現が可能である
デメリット
  • 出来ることが多い半面、覚えることや癖が多い部分もある
オンラインプログラミングスクールならSkill Hacksがおすすめ。安いのに満足度高すぎ今からプログラミングを学ぼうとしているなら、Skill Hacksというオンライン講座がおすすめです。料金が安いだけでなく、分かりやすい内容と、無制限の質問サポートが付いているので、初心者にピッタリのオンラインプログラミングスクールです。...