*

Spineアニメーションを、Unityの画面で確認してみよう!

公開日: : 最終更新日:2016/02/15

こんにちは、CG開発室アニメーターの吉村です。

今回は「SpineのデータがUnityに読み込めない…」とお困りの方に向けた記事になります。

Spineで作ったキャラクターアニメーションは、ゲームやアプリの素材として使用されます。そして、そのゲームの開発ツールの一つとして「Unity」が挙げられます。

Unityとは…
様々なプラットフォームに対応したゲームエンジンのことです。 プラットフォームとは、WindowsやOSXなどのPCのOS、AndroidやiOSといったスマートフォンOSなどが動作する基盤の環境のことを差します。

弊社でもSpineで作ったアニメーションがUnity上で正しく動作するかどうかを、確認する機会が増えてきました。

そこで、今回のwhomor PicturesではSpineデータのExport(出力)機能を解説しつつ、 SpineアニメーションをUnityに読み込む方法を、出来るだけわかりやすく解説していきたいと思います。 Spineの使い方をおさらいしたい方は下記の過去記事を参照してみてください。

「Spine」の使い方をおさらいしよう!IKボーン入れ方講座 | whomor Pictures
こんにちは、フーモアCG開発室のアニメーターNです。フーモアでは2Dアニメーションツール「Spine」を主に使用した、スプライトアニメーション制作をしています。そのSpineが2016年1月10日に、新バージョンである3.0.0をリリースしました。また、今月末の1月29日に、2Dアニメーションツール勉強会でSpineを

1.Unityに読み込みたいSpineデータを用意する

1-1.SpineのExport機能を知ろう

SpineにはExport機能という、アニメーションデータ、連番画像データ、動画データを出力できる機能があります。 出力できるデータの種類は以下になります。

アニメーションデータ

  • jsonファイル
  • Binaryファイル

連番画像データ

  • GIF
  • JPEG
  • PNG

動画データ

  • AVI
  • QuickTime

各項目には詳細設定があります。 アニメーションデータは主にプログラム言語の指定や記述の整理などができます。連番動画や動画データは、拡張子の変更・画質・フレーム数の設定ができます。

1-2.Spineから出力できる、Unityに必要なデータを知ろう

今回はこのExport機能を使って、Unityに読み込むためのデータを出力してみましょう。

筆者が使用するSpineは、Windows7の環境でバージョンは2.1.27です。(2.1.xシリーズの最新版になります)

Spineのアニメーション制作を終えたら、Unityに読み込ませるためのファイルを生成する必要があります。 Unityに読み込ませるためのファイルは3つです。

  • アトラス画像
  • atlasファイル
  • jsonファイル

どれも聞き慣れない名前だと思いますが、一つずつ説明していきます。

1.アトラス画像

アトラス画像はSpineで使用したパーツの画像を一つにまとめたデータです。

アトラスとは地図帳という意味で、 Spineで使用した画像を地図のように並べたものをアトラス画像と呼びます。

※後述するSpine Texture Packerという機能で生成できます。 一枚にまとめる理由は画像のファイル数を減らすことでゲームの読み込み時間を短くしようという目的のためです。 chara

2.atlasファイル

アトラス画像の位置情報を文字で記したファイルのことです。拡張子は「.atlas」です。

アトラス画像とatlasファイルは2つで1つのセットだと考えておくと良いでしょう。 基本的にUnity側でアトラス画像を読み込むために使用します。

3.jsonファイル

ジェイソンと読みます。拡張子は「.json」です。

JavaScript Object Notationの略で、WEBで使用されるJavaScriptを元にした言語のことです。このjsonファイルは、Spineのアニメーション情報を全てプログラム言語に変換したファイルです。Unity側でアニメーション情報を読み込ませるために使用されます。

1-3.SpineのExport機能で、Unity用のデータを作ろう

SpineのExport機能を使用して、Unity用のデータを作ってみましょう。

実際の案件では、Spine Texture Packerの設定方法とExportの設定方法は開発元に確認してから行う必要があります。

Spine Texture Packerの設定方法(アトラス画像、atlasファイル)

Spine Texture Packerとは…
画像を一つにまとめる機能を持つ、アトラス画像を生成するツールです。 atlasファイルを同時に生成してくれるため、テクスチャについてはこの機能に任せておけば大丈夫です。
※注意として、CodeAndWebより配布されているTexturePackerとは別のツールで、あくまでもSpineというソフトに内蔵された機能の一つです。

Spineでアトラス画像を作る場合には、指定した領域に全てのパーツが収まらないと、2枚以上のアトラス画像が作成されてしまいます。出来るだけ少ない枚数に収めることを心がけて、パーツ分け画像を作りましょう。

Spine Texture Packer機能を使用するにはSpineの左上のメニュー→「Texture Packer」を選択する事でメニューを開くことができます。
ショートカットキーCtrl + Pで開くことも可能です。

img03

読み込み先とアトラス画像の出力先を選択します。

img04

Spine Texture Packerの詳細につきましては、下記のブログ記事が分かりやすいです。

SpineのTexturePackingを利用する(基本編) - Qiita
はじめにSpineにはテクスチャアトラスを書き出す機能がデフォルトでついており、これがなかなか高機能で良いものです。高機能ゆえに設定できることがそこそこ多く、若干面食らうので、詳細を調べてそれぞれを解説してみようと思います。内容については、執筆時点での公式ドキュメントと、手持ちのSpine2.1.27 Essentialを元にして書かれています。 http://ja.esotericsoftware.com/spine-texture-packer#Imag...

Exportの設定方法(jsonファイル)

Export機能でjsonファイルを生成します。

img02

Export機能を使用するにはSpineの左上のメニュー→「Export」を選択する事でメニューを開くことができます。 ショートカットキーの「Ctrl + E」で開くことも可能です。

img01

Output folderでjsonファイルの出力先を指定します。

Extentionは拡張子の指定です。

FormatはjsonかJavaScriptかMinimalから選ぶことができます。

Nonessential dataはjsonファイルの中に画像パスを追記することができます。

Pretty printは人が見やすいようなプログラムに整形をしてくれる機能です。その代わりjsonファイルの容量が増えます。

Create atlasはSpine TexturePackerを起動できる機能です。既にアトラス画像出力済みならこの機能は不要になります。

1-4.Unityで読み込むためのファイルをフォルダにまとめよう

Unityへデータを持っていくために、【1-3】で作成した3つのファイルを1つのフォルダに入れておくと便利です。 ここではspine_assetというフォルダを用意しておきました。

img06

一点注意なのが、Unityへaltasファイルを読み込ませる場合はテキストファイルにしないといけません。「.atlas」の後に「.txt」を追記し、テキストファイルとして読み込めるようにしましょう。

img05

自分がよく使用する作業フォルダにデータを格納しておくと良いでしょう。

2.UnityでSpineデータを読み込む準備をしよう

2-1.UnityにSpineを読み込むためのランタイムを入れよう

Unityのインストール方法は下記の記事が参考になります。

Unity5の環境構築 - Qiita
簡単なので需要はないかと思いますが、講座ように作成したのでアップしておきます。 ...

Unityを初めて使うという方のために、Unityの起動画面の解説をしておきます。

1.起動する

Unityのアイコンをクリックして、Unityを起動します。 「NEW」のボタンをクリックします。 img07

2.プロジェクトファイルを作成する場所を選ぶ。

Unityはプロジェクトファイルを作成したところに作業用のフォルダを自動的に作成します。 img08

プロジェクトファイルを作成する場所はあらかじめ決めておくと良いかもしれません。また、3D環境か2D環境を選べるのですが、ここでは3Dをクリックします。

3.Unityのウィンドウの説明

また、UnityをSpineで動かすためのプログラムをダウンロードしてきましょう。このプログラムのことをランタイムと呼びます。下記サイトの右上にある「Download ZIP」をクリックしましょう。

ファイルを解凍すると、たくさんフォルダが出てきます。

img16

このZIPファイルはspineで使用するプログラムをまとめたものなので、この中から必要なものを選ぶ必要があります。 Unityで使用するフォルダは下記の2種類です。

  • spine – csharp
  • spine – unity

このフォルダの用意ができたらUnityを起動して、Unityのプロジェクト画面にあるAssetsフォルダの中にドラッグしてみましょう。

img09

2-2.Unityにファイルを読み込ませてみよう

【1-4】の項目で作った「spine_assets」フォルダのデータをそのまま、Unityのプロジェクト画面にあるAssetsフォルダの中にドラッグしてみましょう。

2-3.UnityでSpineのキャラクターを表示させてみよう

img10

spine_assetsをクリックするとフォルダの中身が表示され、上図のように6つのファイルが表示されるようになります。

img11

skelton_SkeltonDataを右クリック→「Spine」→「Instantiate(SkeltonAnimation)」を選びます。

img12

Spineで作ったキャラクターが、ちゃんと表示されました。

3.UnityでSpineデータが正しく動作するか確認しよう

3-1.Unity上のパラメータを知ろう

さて、Unityでの表示確認が出来たら今度はアニメーションをさせてみましょう。

その前にUnityの基本的な構造を理解しておくと、今後Unityを学習していく際の手助けになるかもしれません。 Unity上のパラメーターはHierarchyウィンドウでデータを選択した後に、Inspectorという部分で操作することができます。アニメーションをさせたりするのもInspector上で行います。

3-2.実際に動いた様子を見てみよう

それでは、実際に動かしてみましょう。

1.Hierarchyウィンドウからskeltonを選択。

img13

Hierarchyは階層という意味です。ここにはカメラやライトやスケルトンデータなどが格納されています。そこで、Spine_assetsを追加した際に生成されたjsonファイルのスケルトンデータ「skelton」を選択します。

※jsonファイル名によって名前が変動するので注意です。

2.InspectorウィンドウからAnimationを選択。

skeltonをクリックしたら、Inspectorウィンドウに注目。いろんなパラメーターが表示されるようになります。ここで、位置やアニメーションの設定を行います。

img14

Animationの「None」となっている部分でSpineで制作したアニメーション名を選択します。ループさせたければその下にある「Loop」にチェックを入れます。

3.再生ボタンを押します。

img15

再生ボタンを押してアニメーションしていることが確認できれば、確認作業は終了となります。お疲れ様でした。

まとめ

いかがでしたでしょうか。

ゲーム業界では多くのソフトウェアを扱うことになります。Spineというソフトウェアでアニメーションを完成させたとしても、次の工程で正しく動かなければ意味がありません。

ゲーム開発をする上で、Spineで作ったアニメーションがゲーム開発環境で正しく動作するかどうかという意識は、アニメーターには必要だと思いました。

Unityへの理解を深めるためにも、実際にUnityで何かを作ってみると良いかもしれませんね。

▼3DCG・アニメーション制作のご相談はフーモアまでご連絡ください。

contact_button

Comments

comments

  • このエントリーをはてなブックマークに追加
  • LINEで送る

イラストレーター大募集中!!

漫画家大募集中!!

イラスト制作依頼ならフーモア!

プロの漫画制作ならフーモア!

関連記事

whomorPicturesBlog_140901C

Live2D風モーション、Spineの限界に挑め part3~モデリングちょい足しレシピ~

フーモアDCCツール研究開発局局長の遠藤です。 隔月ペースの記事投稿になってしまいまして、不甲斐な

記事を読む

whomorPicturesBlog_140604D

Spineで2Dアニメーション制作には事前にイラストの仕様をしっかりと作らないと、手戻りに…

フーモアピクチャーズ技術部の遠藤です。引き続きEsotericSoftwareのSpineについて解

記事を読む

puppet2d

期待のツール!?Puppet2Dは使える?その他諸々

フーモアCG開発室の遠藤です。 ■なかなか忙しくさせていただいており、スタッフ一同、毎

記事を読む

img01_160411

Road to Stingray:セミナーレポート

こんにちは。CG開発室の鈴木です。 近年、UnityやUnrialEngineでのプリレンダリ

記事を読む

3_Synfig Studio1.0

今、注目のスプライトアニメーションツールSpineとSynfig Studioを比較してみた。

はじめまして、フーモアでスプライト系ツールを担当している吉村と申します。 趣味でMMDを触っていた

記事を読む

e14d883a2a6efd80446f6cad692a716b

第一回spine勉強会〜Mastache x フーモア共同開催(会場mixi)のお知らせ

フーモアピクチュアズの遠藤です。 さて、このたびMustasche × フーモア 共同開催

記事を読む

icatch2

「Spine 3.0.0」の新たな機能を紹介!

こんにちは、CG開発室アニメーターの吉村です。 今回は、2016年1月10日にリリースされた「

記事を読む

icatch3

MayaとUnity スケール補正についてのお話

こんにちは。CG開発室の鈴木です。 Mayaからアニメーションを出力し、Unityに入れてみた

記事を読む

icatch2

Spineアニメーションを、JavaScriptでWEB上に表示してみよう!

こんにちは、CG開発室アニメーターの吉村です。 SpineがWEB上で動いたら、もしかしてゲー

記事を読む

勉強会

【資料公開】マスタッシュ ✕ フーモア共同開催Spine勉強会資料

平成27年1月20日にミクシィcollaboスペースで、スマートフォン向けゲームなどで需要拡

記事を読む


  • 「おもしろいMANGAを創る」をビジョンに今までになかった新しい価値観を創造する会社。イラストや漫画制作のディレクター集団。
    お問合せはこちらからお気軽にどうぞ
  • ブログ最新記事とクリエイティブに役立つ情報を日々配信しています。

PAGE TOP ↑