
Naninovel(Unityノベルゲームアセット)でSpine Characterを動かしてみた手順
SpineキャラをUnity-Naninovel上で動かしてみた。その備忘録。
準備&環境
・Windows 10
・Unity Editor 2021.2.2f1
・Spine Pro 4.0.63
・Spine runtime for Unity (Spine公式から)
spine-unity-4.0-2022-01-26.unitypackage
・Naninovel の Spine 拡張パッケージ(Naninovel公式から)
NaninovelSpine.unitypackage
Spineのアニメーションデータはすべて完成済という前提
今回の例としてはIdleアニメーションを作成済み
Spine側の手順
Step.1
SpineデータをJsonファイルにExportする。
今回の例として使用するファイル名はI_am_Unity-Chan-09_clean.spine
Spine側のExport設定はテクスチャアトラスにチェックを入れて、
パック設定のオプションからアトラス拡張子.atlas.txt拡張子に変更する。


OKを押して、生成されるものは下記の3つのファイル。これでSpine側の準備はOK。
I_am_Unity-Chan-09_clean.atlas.txt
I_am_Unity-Chan-09_clean.json
I_am_Unity-Chan-09_clean.png
※Unityにインポートする際にSkeletonDataAsset has missing Atlas.となった場合アトラス、アトラスファイルの拡張子が、
I_am_Unity-Chan-09_clean.atlas
となっていないか確認する。最後に.txt拡張子を付けないとインポートエラーになる。
Unity側の手順
Step.2
spine-unity-4.0-2022-01-26.unitypackage
NaninovelSpine.unitypackage
の二つをUnityプロジェクトにインポートする。
Step.3
Step1で生成した必要なファイル群をドラッグ&ドロップする

Unity上でSpineのSkeltonDataが自動生成される
Step.4
Step3で自動生成されたSkeletonData.assetを一度UnityのシーンにObjectとして置く。するとSpineGameObjectが生成される。
選択肢が出るのでSkeletonAnimationを選択。

Step.5
生成されたSpineGameObjectにNaninovelのスクリプトSpineController(Assets/NaninovelSpine/Runtime以下にある)をアタッチする。
オブジェクトをプロジェクトビューへドラッグ&ドロップしてプレハブ化する。

作成したプレハブのSpineControllerコンポーネントのOn Appearance Changed (RuntimeOnly)に自身のルートオブジェクトを指定し、SpineController.SetAnimationを選択
RendorCanvasコンポーネントのXY座標を調整してSpineキャラの描画したい範囲を決定
ハマり箇所メモ
※先に空のプレハブのコンポーネントにNaninovelのスクリプト(SpineController)をアタッチするとSkeletonAnimationでなく、SkeletonRendererのコンポーネントがついてしまう。(先にSkeletonAnimationをプレハブにアタッチしておく必要がある)
この場合SkeletonData.assetを指定してもアニメーションしないので、Step4,5の順番通りにするのが無難
Step.6
Step5で作ったプレハブをNaninovelのConfigからキャラを登録(SpineCharacterを選択)

Naninovelからの呼び出し
Naninovelスクリプト(.nani)からの呼び出し
@char "登録キャラ名"."Spineのアニメーション名"
で呼び出し可能
今回の例だと
@char unitychan.idle
でSpineのIdleアニメーションが呼び出し可能
実際に動かしてみた
Spine2DモデルをNaninovel上で動かしてみましたー!
— 梅しらす@Arcanite Links (@ume_white) February 12, 2022
Live2DよりもUnity側でのアニメーション設定は少なくて済むので気持ち楽です。
デモ動画は3Dモデルとの共演です。#Naninovel #スーパーゲ制デー pic.twitter.com/NX5FYNhveh
3DモデルをNaninovelで動かしてみた記事はこちら
Live2DモデルをNaninovelで動かしてみた記事はこちら
Spineとは?
esotericsoftwareが開発した2Dスケルトンアニメーションソフトウェア。ゲーム用2Dアニメーションに特化したアニメーションを作成することが可能。
Naninovelとは?
NaninovelはUnityゲームエンジン上で動くアセット。
ビジュアルノベルゲーム開発を簡単に実現可能。