Blogをいつもご覧いただきありがとうございます。
先日、「Unity+Myo(ジェスチャーを活用して牛乳を搾るゲームを作りました)」というテーマのブログを発表しました。

下記のURLはゲームの映像です。

その中の「牛」はAnima2Dプラグインを利用して制作しました。Anima2Dの使い方のチュートリアルとして今回はAnima2Dを利用して「牛」を動かしてみましょう!

Anima2Dのメリットは?

 

  • Unity3Dのアニメーションと同じ感覚で2Dキャラクターが動かせます。
    • スキニングとBoneが付くアニメーションを作ることができます。
    • Spriteの各頂点編集することができます。
    • 全部アニメーション(Unity3Dの標準機能)でコントロールすることができます

 

Step1 Anima2Dをインストール

 

  • AssetStoreからAnima2Dを検索し、ダウンロードしてから、インポートをしてください。

 

Step2 「牛」の画像を分割

上記の画像はまだ分割していない状態です。

ゲームでは「頭」、「足」二本、「体」を分けたいので、こちらで「Gimp2」でこの4つの部分を分割しました。

そして、分割した画像をUnityにインポートして、下記の状態になりました。

画像のInspectorのTexture TypeSprite (2D and UI)に変更するのを忘れないで下さい。

これで、下準備は完了です。

Step3 SpriteMeshを作る

ここから本番ですね。先用意した画像を選択して、右クリックしてSpriteMeshが作れます。( Create→Anima2D→SpriteMesh)

上記のステップで、拡張子が「asset」のファイルができると思います。保存先が分からなくなってしまわぬよう独立のフォルダーを入れるとよいと思います。

Step4 SpriteMeshをSceneに配置

これから、作り上げたSpriteMeshをシーンに配置します。

まず、シーンにempty GameObjectを作って、この中で二つ空のGameObjectを作ります。下記の画像ご参考までに。

そして、SpriteMeshを一個ずつBodyのGameObjectに入れます。(一気に全部選択しても一個ずつしか入りませんので)

全部入れて、元「牛」の四肢のようにポジションを調整したら、下記の画像のようになるかと思います。

Step5 SortingLayer、OrderLayerの調整

ですが、牛の頭が体に隠れてしまってるように見えますので、そこで、OrderLayerの順位を調整します。

  • 先ず、SpriteMeshのSortingLayerを全部同じにします。SpriteMeshのオブジェクトを選択して、右側は下記のようにします。

デフォルトの状態で全部のSpriteMeshのOrderLayerは0になっていますので、一番前に表示したい物のLayerの順位を0より大すると前面に表示できます。

今回の場合は牛の頭を体の前に表示しようと思いますので、頭のオブジェクトを選択して、OrderLayerは1にすれば、一番前に表示できるようになると思います。

これで、SortingLayerとOrderLayerの説明は維持上です。

Step6 Boneを入れる

これがAnima2Dのとても大事な機能です。スプライトに骨を付けることができます。

先ず、先ほど作ったBoneというゲームオブジェクトに右クリックしてください。

下記の画像のように選択します。

こうすれば、新しいBoneオブジェクトがインスタンスされます。自分が分かりやすい名前を決めてください。

そして、「Torso」の中で頭、両足の2DBoneを作って、針みたいなものを相応の所に配置します。

 

注意点:上記の赤い箇所で示している所は「骨」の長さです、スプライトの大きさに相応して決めてください。

そして、BoneとSpriteMeshを繋げましょう!

下記の画像の通りにそれぞれのBoneオブジェクトをSpriteMeshのSet bonesの所に入れます。

 

注意点:繋げたくない部分があれば、右クリックで削除してください。

これで、BoneとSpriteMeshは繋がりました。

とは言え、Boneを動かしてみたら、Meshの方は全然ついて来きません。それはなぜでしょうか?次のステップで解決していきます。

Step7 SpriteMeshはBoneと一緒に動かす

SpriteMeshはBoneと一緒に移動できるようにする場合は、先ず、移動させたいSpriteMeshを選択したまま、「Window」をクリックしてください。そして、「Anima2D」→「Sprite Mesh Editor」を押してください。

開いたら、下記の画面が表示します。

注意点:赤い箇所は頂点の数がコントロールできます。今回はデフォルトの設定で十分だと思いますので、デフォルトのままで行きます。

次は「Bind」の方に進みましょう。

設定する前に、先ず右下の「Overlay」をチェックしてください。そして、影響範囲が可視化されてもっとわかりやすくなるのでしょう。

次は右上の「Apply」を押したら、MeshとBoneは一緒に動かすことができるはずです。

全部上記の設定が完了すると、牛の頭を移動しても体のSpriteMeshも一緒に連動して動きます。

次回はインバース キネマティクス(IK)の使い方を説明したいと思います。