Spineとは、2Dスケルトンアニメーションを作成するツールで、これを使ってCocos2d用のアニメーションデータの作成および書き出しが出来るようです。

社長から「これ使って、なんか動いてる所が見たい」と指令があったので、あれこれ触りながらサンプルを作って行きたいと思います。
Spineは無料で使えるトライアル版もあるのですが、保存や書き出しなどの操作が一切できないので、今回はPro版を使用します。

##素材を用意する このツールにはデフォルトで男の子やドラゴンのサンプルが用意されていますが、男の子だと覚える気が全く起きないので、某セ○さんの可愛いミクさんをこっそりとお借りしてきました。
勉強するには、やる気が大切です。

ここにミクさんがおるじゃろ？

これを、こうじゃ。

サンプルの男の子のパーツ画像はpngになっているので、ミクさんも同じように分解してpng形式の画像を用意しました。
また、分解前の元絵のjpgもこの後使うので、一緒のフォルダに入れておいて下さい。

これで下準備が完了しました。

##素材を読み込む

Spineを立ち上げ、左上のSpineロゴをクリック、メニューから【NewProject】を選択します。
すると何も無い画面と、画面右側のTreeにskeletonが新規で作成されます。
※画面右側のTreeが表示されていない場合は、右上の三角をクリックすると表示されます。

このskeletonの中にあるImagesがミクさんのパーツを入れる場所です。
Imagesを選択し、Tree下方にあるBrowseボタンから先ほど作成したフォルダを読み込みます。

##素材を配置する

読み込みが完了したら、ステージに配置していきます。
画面左上のモードが【SETUP】の時だけ配置ができます。
【ANIMATE】になっている場合はアイコンをクリックしてモードを【SETUP】に変更しておいてください。

まずはどのパーツをどのあたりに配置するか分かりやすいように、元絵のjpgであたりをつけましょう。
skeletonのimagesの中にあるjpg「miku」をドラッグして左側の画面に配置します。

配置が完了するとimagesの中のmikuのアイコンが緑色に変わります。
そしてskeletonのrootに「miku」という名前の丸いアイコンができました。
これを「slot」と言うようです。

この元絵にあわせてパーツを配置していくのですが、邪魔にならないように元絵を少し透過させておきましょう。
mikuのslotを選択し、colorで透過率を下げておきます。

そして、同じように全てのパーツを配置していきます。
位置の微調整は、TransformのTranslateを選択しておくとキーボードで操作できます。
レイヤーの重ね順がおかしい場合は、TreeのDrawOrderの中で変更できます。

##ボーンを作成する

次に、ミクさんを動かす為のボーンを作成します。

まずは基礎になる胴体部分にボーンを作成しましょう。
ToolsからCreateを選択し、胴体の中心に適当に作成します。
この際、配置したパーツが邪魔になるので、Treeの目のアイコンの下にある●をクリックして下絵以外を非表示にしておきます。

作成したボーンには分かりやすいように名前を付けます。
Treeの中のboneをダブルクリックするか、Rと書いてあるボタンをクリックすると名前を変更できます。

あとは同じように、残りのボーンも作ってしまいましょう。
rootを選択してからボーンを作成し、必ず全てのボーンがrootと同じ階層になるようにします。

##ボーンとスロットを関連付ける

このままではslot（スロット）とbone（ボーン）が連動しないので、ボーンにスロットを関連付けたいと思います。

まず非表示になっているパーツを全て表示します。
下絵は邪魔になるので非表示にしましょう。
次にbodyのslotを選択し、下にある「Set Parent」をクリックします。

次に親となるbody boneを選択します。するとslotが入れ子になりました。

同じように残りのslotも関連付けましょう。

##ボーンを親子にする

バラバラになっているボーンを親子関係にします。
body boneを親とし、neck boneとleg boneを子にします。
foot boneはleg boneの子に、head boneはneck boneの子に、
hair boneはhead boneの子にします。

やり方は関連付けと同じです。
子になるboneを選択し、Set Parentボタンで親boneに入れます。

完了したら、body boneを選択して回転させてみましょう。　 全てのパーツが離れなければ成功です。

part2ではこのミクさんを使って、アニメーションを作っていこうと思います。

ところで、『初音ミク Live Stage Producer』というクールでナイスなアプリがSEGAさんから好評配信中らしいですよ。
是非ダウンロードして遊んでみましょう。
※すみません、これで勘弁してください＞＜；