どんな事ができるかは以下の公式サイトのデモ動画を見るとすぐに分かるので是非。
Spine公式サイト：http://esotericsoftware.com
ひとまずtrial版を使ってアニメーションを作るところまでの解説をしたいと思います。
ちなみにtrial版と正規版との違いは、作成したアニメーションをCocos2dやUnity用のデータ形式にして吐き出すことが出来るかどうかですので、アニメーションを作るだけなら事足りません。
正規版は60$掛かります。
Spineの画面はこんな感じ
SET UPモードは画像を置いて、骨を付けていくフェーズで、Animationはその骨を操って文字通りアニメーションを作るフェーズです。
SET UPやANIMATIONという書かれている場所をクリックするとモードが変わります。
起動した時にSampleが表示されていると思いますので、SET UPをクリックして、ANIMATIONモードにしてから、下側にある「▶」ボタンを押してアニメーションを実行してみるといいかもしれません。
ちなみにメニューバーをクリックした際に出るOpen ProjectでSampleを開くことができます。
開き方は、「Machintosh HD」(ハードディスク)を選択、そこから「アプリケーション」を選択し、「Spine Trial」->「Example」で好きなサンプルのフォルダを選び「.spine」の拡張子を選択すればOKです。
Applicationは、私達が見てるアプリケーションフォルダとは違います。
一瞬、あれ？ない？って思うので注意です。
さて、早速簡単なアニメーションを作りましょう。
まず、NewProjectで新しいプロジェクトを作りましょう。
とりあえず「頭」、「体」、「右足」、「左足」、「右手」、「左手」を用意しましょう。
そして、その5つの画像を含んだ作業フォルダを作成します。
私はデスクトップにtestSpineというフォルダを作成しました。
そして新しいSpineのプロジェクトを、その作業フォルダに保存しましょう。
メニューバーから「Save Project as..」を選んで、作業フォルダを選んで下さい。
するとTreeの中のimagesに、作業フォルダに入っていた画像の名前が表示されます。
そしてこの画像をドラッグ＆ドロップで左側に持って行きましょう。すると画像が表示されます。
Treeのimagesも緑色になりました。表示されている画像が緑色になる仕様です。分かりやすい。
で、この画像をクリックすると、回転や移動、拡大縮小をすることができます。
したい操作は下のTransformタブで選んで下さい。
(どうやら右クリックで操作の変更もできるみたいです。Scaleは選択されませんが。。)
そして、残りの画像も全て表示させます。
するとTreeは次のようになっていると思います。
まず、画像のbone, slot, imageと説明されている四角のボタンは、Treeの中に表示するものを選択できます。
現在は全てのものが選択されているので全てが表示されていますが、選択をimageだけにするとimageだけが表示されます。
ちなみに現在Slotは、1Slotに付き、1画像を持っています。
高度になると1Slotに複数画像を持たせるらしいのですが、詳細は不明です。
次にeyeですが、この欄にある「●」をクリックすることで可視・不可視が選択できます。
Key Frameはアニメーションを設定しているかどうか。
で、大事なのがDraw Orderです。
これは画像の表示順序を決定します。Draw Orderの中で最も上にあるimageがz軸としては一番上に表示されます。
表示順序を変えたいときに重宝します。
さて、次は実際に「bone」こと骨を画像に与えます。
下部にあるToolsのCreateをクリックします。
次に、このboneをどこに作るかを選択します。
初めに作る場合は、まず「root」を選択します。
そして、体に骨でも作りましょうか。ドラッグで作れます。
するとTreeにboneが出来ています。
見ての通り、包含関係になっています。
「bone」が「body slot」を子として持つようになりました。
そのため、boneを選択して、回転してやると体も一緒に回るようになりました。
また、bone1では分かりにくいので名前を編集しましょう。
bone1をダブルクリックすると名前を編集できます。
次に頭に骨をつけます。
ここで注意です。
次はRootを選択して作りません。
bodyを選択してからつけます。頭は体に付いているものだから。
するとbody Boneの中にbone1が新たに作られました。
このbone1の中にhead slotを格納します。
これで頭の画像とbone1が関連付けされました。
更にbody boneの中にbone1があるので、body boneを回転すると、頭も一緒に回転するようになりました。
最後にbone1の名前を分かりやすく「head」にすると完了です。
これを繰り返して残りの右腕、左腕、右足、左足もbody boneにくっつけていきましょう。
こんな感じになります。
せっかくなんでDraw Orderを調整してパーツくっつけときましょう。
TranslateとRotateを使って良い感じに配置してみて下さいね。
次回：アニメーションを作る