はじめに
はじめまして、ぴーよです。
ペーパーマリオライクな見た目のゲームを作っています。（ｎ年目）
上昇気流で滑空すると上昇できるようになった
— ぴーよ 郵便RPG屋さん (@PyoTDev) July 20, 2025
色んなところに行けて便利 pic.twitter.com/f4qi56OitT
皆さん、Spineって使ってますか？
ちょっとお高いですが、買い切りで非常に強力な2Dボーンアニメーションツールで、UEプロジェクトまでのワークフローもしっかりしていて愛用しています。
ただ、そんな素敵なSpineなんですが、現状公式の提供してくださっている機能は、AnimationNameを指定して再生する機能しかないんですよね。
基本的な制御は自前で書く必要があり、今はこんな感じで使っています。泥臭いですね。今回はここを是正して行ければと思います。
解決策
可能であれば基本的な挙動くらいはAnimBPみたいなものでまとめられるとありがたいなーと思い、色々探していたところ、素晴らしいリポジトリを公開してくださってる方がいらっしゃいました。
PaperZDForSpine2Dという名前の通り、PaperZDをSpine2Dでも使えるようにする神プラグインです。
PaperZDとは？
平たく言えばFlipBookに色々機能追加してくれるプラグインです。通常FlipBookはFlipBookオブジェクトとフレームとPlayRateぐらいしか弄れませんが、これを有効にすると任意のフレームに通知を追加したり、FlipBook用のAnimationBPの様なものを作ることができます。
導入方法
※UE5.4で実施しています。
1.次のリポジトリからダウンロード
https://github.com/heavybullets/PaperZDForSpine2D
※Githubに不慣れな方は緑色のCodeをクリック→DownloadZipをクリック
2.PaperZDをインストール
Fabから追加。
https://www.fab.com/ja/listings/6664e3b5-e376-47aa-a0dd-f7bbbd5b93c0
3.SpinePluginの導入
長くなるので割愛。公式の指示通りにやれば入りました。
spine-cppを移動するところに注意
https://ja.esotericsoftware.com/spine-ue
4.PaperZDForSpine2Dの導入
PaperZDForSpine2DのZipファイルを解凍してプロジェクトのPlugins配下に移動します。
画像の様な構成になっていればOK。
5.プロジェクトを開いて各プラグインの有効化
編集>>プラグインから
これまで入れたPaperZD、SpinePlugin、PaperZDForSpine2Dを有効化してエディタ再起動
無事再起動されれば導入完了です。
使用方法
ここからはちょっと試した結果なので、基本的な使い方だけご紹介できればと思います。こんな使い方見つけました！とかあればコメントください！
1.Spineで作成したアニメーションのインポート
ザっとメモ程度に勘所まとめておきます。
・SpineでAnimationをExport
・Exportしたらファイルが三種類吐き出される。
{name}.atlas
{name}.skel
{name}.png
→それぞれ次にリネーム
A_{name}.atlas
Sk_{name}.skel
T_{name}.png
・Spineで吐き出したファイルをコンテンツブラウザにドラッグ&ドロップ。
※リネームしていないと名前が解決できない
・コンテンツブラウザのAtlasを開き、AtlasPagesにT_{name}が入っていることを確認する。
※稀に読み込み順の関係で入っていないことがある
2.PaperZD
2-1. AnimationSourceの作成
コンテンツブラウザで右クリック
PaperZD>>AnimationSourceを選択
作成したAnimationSourceを開く
左下のAnimation内にAtlasとSkeletonを設定
・アニメーションは左上のAdd Newを押すと追加できます
右の詳細でAnimationDataから作成したアニメーションを選択できます。
2-2. AnimBPの作成
コンテンツブラウザ右クリックで
PaperZD>>PaperZD AnimBPを選択
2-1.で作成したAnimationSourceを選択
ここからはほとんどAnimBPと同じです。
AnimGraphを開いて
OutputAnimationのResultからStateMachineを追加
StateMachineを開くと
Outから伸ばして適当なStateを作成して開く
OutputのResultから引くと、AnimationSourceで追加したAnimationが選択できます。
2-3.再生
キャラクターBPにSpineSkeletonAnimation、SpineSkeletonRenderer、PaperZDAnimationの3コンポネントを追加します。
SpineSkeletonAnimationのAtlas、SkeletonDataをセット
PaperZDAnimationのPaperZD以下をセット
AnimInstanceClassは先ほど作ったAnimBPを、
RenderComponentRefにSpineSkeletonRendererをセット
これでレベルにキャラクターを置くとアニメーションが再生されます。
終わりに
参考になれば幸いです。Spineは非常に強力なツールなので、PaperZDが使えないのがネックに感じていた方はこれを機に導入してみてはいかがでしょうか。
ペラペラなキャラクターを作る人がもっと増えたら嬉しいです！