Marumittu Engineer Blog

個人でゲーム開発を行っています。ゲーム開発に関する情報を紹介するブログ。

UnityでSpineを使ってみた ①導入編

Spineを購入したので、Unityで色々と遊んでみました。

UnityのScriptからSpineを操作する方法について
あまり情報がなかったので自分なりにまとめてみました。

今回は第1回目なのでUnityでSpineを導入する方法について紹介していきます。


この記事を書いた時の開発環境は以下の通りです。

 Unity 5.6.0p4
 Spine 3.5.51 Professional

Spineランタイムの設定

下記のサイトからSpine-Unity Runtime(.unitypackage)を入手します。

http://esotericsoftware.com/spine-unity-download/

f:id:marumittu_tech:20170607212903p:plain

この時にSpine-Unity Runtimeと互換性のあるSpineバージョンを使用しているかを確認します。
今回使用するSpine-Unity RuntimeはSpine 3.5.x以上との互換性との事なので、
インストールされているSpineのバージョンを確認してみます。

バージョンの確認方法

Spineを起動して「Spine(左上のロゴマーク)」→「設定」(F12)でSpine Settingsが開きます。
このメニューでSpineのバージョン確認ができます。

f:id:marumittu_tech:20170607212934p:plain

Spineランタイムのインポート方法

次にUnityへSpine-Unity Runtimeをインポートします。
Unityのプロジェクトを作成し、「Assets」→「Import Package」→「Custom Package」を選択し
先ほどダウンロードしたSpine-Unity Runtime(.unitypackage)をインポートします。

Exampleはサンプルプロジェクトとなりますので、インポートのチェックを外しても問題ありません。

f:id:marumittu_tech:20170607214124p:plain

Spineのエクスポート設定

では作成したSpineアニメーションをエクスポートします。
今回はこのタコです!

f:id:marumittu_tech:20170607215705p:plain

この時、スケルトン名とアニメーション名はUnityでも使用しますので任意の名前にしてください。

f:id:marumittu_tech:20170607215549p:plain

それでは「Spine(左上のロゴマーク)」→「Export」(CTRL + E)でExportメニューを開きます。
①データ項目のJSONにチェック
JSONエクスポート項目のアトラス作成にチェック

f:id:marumittu_tech:20170607212956p:plain:w500


続けて「アトラス作成」隣にある「設定」を選択しアトラス設定メニューを開きます。
③アトラス拡張子に.atlas.txtを指定

f:id:marumittu_tech:20170607213020p:plain:w500


以上の設定をした状態でエクスポートを行うと下記の3つのファイルが出力されます。

  1. .json : スケルトンのデータを保持するファイル
  2. .png : パックされたテクスチャ
  3. .atlas.txt : パックされたテクスチャのマッピング情報

UnityへのSpine取り込み

Unityプロジェクトを起動し、Spineで出力した
3つのファイル(.json, .png, .atlas.txt)をProject ViewのAssets以下にドラッグ&ドロップします。

自動で以下の3つのファイルが生成されます。

  1. _Material
  2. _Atlas
  3. _SkeletonData

合計6つのファイルがAssets内にあることになります。
これらがSpineを動かすために必要な基本データとなります。

f:id:marumittu_tech:20170606225944g:plain


自動生成された_SkeletonDataをHierarchy Viewにドラッグ&ドロップします。
すると、Skeleton AnimationのコンポーネントがアタッチされているGameObjectが生成されます。

f:id:marumittu_tech:20170606230735g:plain


Skeleton AnimationのInspectorのAnimation Nameに任意のアニメーションを指定します。
ループさせる場合はLoopの項目にチェックを入れます。

f:id:marumittu_tech:20170606231337p:plain 

実行結果

Spineで作成したアニメーションがUnity上で再生されています。

f:id:marumittu_tech:20170606231840g:plain