本記事は英語の原文 From a layered PSD to an animated Spine character in Unity の日本語版です。翻訳には AI を使い、手順・コード・エラーメッセージは原文およびソースコードと照合済みです。
Cat.csは spine-csharp 4.2 と Unity API のスタブを使ってコンパイルを確認しています。
レイヤー分けしたイラストから作った Spine 4.2 のキャラクターを、公式ランタイム spine-unity 4.2 で Unity のシーンに置いて動かすまでの手順です。
- spine-unity 4.2 を導入する
- アトラスのファイル名を
.atlas.txtに変える - アルファモードをストレートアルファに合わせる
- SkeletonData をシーンにドラッグする
- C# スクリプトからアニメーションを再生する
サンプルには、筆者が開発している Riggy で書き出した猫のリグを使用します。プロジェクトにそのまま入れられるファイル一式はこちら:riggy-cat-unity.zip。
何を確認したか
Phaser・PixiJS 向けの記事とは異なり、本記事ではライブデモを用意していません。そのかわり、アーカイブ内のファイルは spine-unity がスケルトンの読み込みに使っている公式ランタイム spine-csharp 4.2 で読み込み、各アニメーションについて、描画を伴わないランタイム上での動作を確認しました。Cat.cs は同ランタイムと Unity API のスタブを使ってコンパイルを確認しています。Unity エディター上でのインポート・描画・入力の動作確認は行っていません。インポートの手順は spine-unity の公式ドキュメントと 4.2 のソースに従っています。
1. spine-unity 4.2 を導入する
spine-unity のダウンロードページから .unitypackage をインポートするか、Package Manager の Add package from git URL… で次の URL を 1 つずつ追加します。
https://github.com/EsotericSoftware/spine-runtimes.git?path=spine-csharp/src#4.2
https://github.com/EsotericSoftware/spine-runtimes.git?path=spine-unity/Assets/Spine#4.2
末尾の #4.2 が重要です。ランタイムのメジャー・マイナーバージョンは書き出したデータと一致している必要があり、spine-unity 4.3 は 4.2 のファイルを読めません。詳しくは公式の spine-unity installation を参照してください。
2. アトラスを .atlas.txt にリネームする
spine-unity がアトラスとしてインポートするのは拡張子 .atlas.txt のファイルだけです。ただの .atlas は無視され、コンソールに次の警告が出て、スケルトンはテクスチャなしのままになります。
If this file is a Spine atlas, please change its extension to `.atlas.txt`.
コピーする前にリネームし、3 つのファイルを同じフォルダに入れて Assets 以下の好きな場所に置きます。
Assets/
Characters/
riggy-cat/
skeleton.json
skeleton.atlas.txt ← skeleton.atlas からリネーム
page.png
すると spine-unity が同じフォルダーに 3 つのアセットを自動生成します。skeleton_Atlas、アトラスページごとの _Material、そして実際に使う skeleton_SkeletonData です。上のアーカイブはリネーム済みです。
3. ストレートアルファに合わせる
アトラスのページ画像には、乗算済みアルファ(Premultiplied Alpha, PMA)とストレートアルファの 2 種類があります。spine-unity 4.2 のデフォルトは PMA 前提で、Riggy の書き出しはストレートアルファです。設定が合っていないと、パーツの輪郭に暗い縁や明るい縁が出ます。ストレートアルファのアトラス画像には、次の設定を適用します。
- 生成された
_Materialで Straight Alpha Texture をオンにする -
page.pngで sRGB (Color Texture) と Alpha Is Transparency をオンにする
PMA で書き出したデータの場合は逆の設定になります。公式の spine-unity assets を参照してください。
4. スケルトンをシーンに置く
skeleton_SkeletonData を Scene ビューか Hierarchy にドラッグすると、作成するコンポーネントを選ぶメニューが表示されます。
- SkeletonAnimation:通常のゲームオブジェクト
- SkeletonGraphic (UI):Canvas 用
- SkeletonMecanim:Animator で制御する場合
ここでは SkeletonAnimation を選びます。インスペクターの Animation Name で開始時に再生するアニメーションを選び、Loop をオンにするとループ再生されます。コードを 1 行も書かずに猫がうなずくのを確認できます。このリグはボーン 18 本・パーツ 15 個で、4 つのアニメーションがすべてドロップダウンに並びます。
5. スクリプトからアニメーションを再生する
SkeletonAnimation と同じゲームオブジェクトに、同梱の Cat.cs をアタッチします。AnimationState は Spine のどのランタイムでも共通の API です。開始時は idle をループし、クリックするたびにワンショット(1 回だけ再生する)アニメーションを再生してから idle に戻ります。
// Plays the Riggy cat with spine-unity 4.2: idle on start, a one-shot on every click.
// Add it to the GameObject that has the SkeletonAnimation component.
using Spine.Unity;
using UnityEngine;
public class Cat : MonoBehaviour {
static readonly string[] OneShots = { "hack", "glitch", "bigwin" };
SkeletonAnimation cat;
int next;
void Start () {
cat = GetComponent<SkeletonAnimation>();
// blend 0.2 s between any two animations instead of snapping
cat.AnimationState.Data.DefaultMix = 0.2f;
cat.AnimationState.SetAnimation(0, "idle", true);
}
void Update () {
if (!Input.GetMouseButtonDown(0)) return;
string name = OneShots[next];
next = (next + 1) % OneShots.Length;
// play the one-shot once, then go back to the idle loop
cat.AnimationState.SetAnimation(0, name, false);
cat.AnimationState.AddAnimation(0, "idle", true, 0);
}
}
ポイントは 2 つです。DefaultMix = 0.2f で、アニメーションを瞬時に切り替えずに 0.2 秒かけてブレンドします。また、同じトラック 0 で SetAnimation(ワンショット・ループなし)の直後に AddAnimation で idle のループ再生をキューに追加すると、ワンショットが終わったら自然に idle へ戻ります。
読み込めないとき
-
The given key 'hash' was not present in the dictionary:JSON にskeleton.hashがありません。Web 系のランタイムでは不要ですが、spine-csharp(Unity)は必須として読みます。解説(英語) -
Color hexadecimal length must be 8:スロットの色が 6 桁です。Web のランタイムは許容しますが、Unity ではスケルトン全体の読み込みが止まります。解説(英語) -
Parent bone not found:参照先の親ボーンが存在しないか、親ボーンより先に子ボーンが定義されています。解説(英語) - そのほかのエラー一覧(英語)と、ブラウザで使える Spine JSON バリデーター(英語)もあります。
ライセンスについて
spine-unity は Spine Runtimes の一部です。Spine Runtimes をゲームに組み込む際は、スケルトンの作成者にかかわらず、その時点で有効な Spine Editor ライセンスが必要です(Spine Editor License)。Riggy は独立したツールで、Esoteric Software および Unity とは関係ありません。
サンプルのリグとアニメーションは、レイヤー分けした PSD から Riggy で作成しました(有料サービス、英語 UI)。
