Anima2Dで遊んでみる

今回はUnityが出した無料のasset Anima2D触ってみます
<a href="https://www.assetstore.unity3d.com/jp/#!/content/79840" target="_blank">
<img src="http://ayumegu.jp/wp-content/uploads/2017/02/19-1.png" /></a>

##作業環境
mac Unity5.6.0b8
AssetはUnity 5.5.0から使えるよ

##何ができるの？
ボーンアニメーションとかメッシュアニメーションがUnity内ででできるよ！
IKとかも使える上、Unityのアニメーションでアニメーションさせたりも可能です。
もう外部ツール立ち上げる必要がないよ！やったね！
下記画像はパッケージに入っているDemo
<img src="http://ayumegu.jp/wp-content/uploads/2017/02/anima2D1.gif" width="200"/><img src="http://ayumegu.jp/wp-content/uploads/2017/02/anima2D2.gif" width="300"/>

##インポートしたところ
<img src="http://ayumegu.jp/wp-content/uploads/2017/02/19-2.png" />

##早速使ってみよう
###Mesh作成
まずこんな一枚画像用意しました。SpriteのModeをMultipleで設定しています
<img src="http://ayumegu.jp/wp-content/uploads/2017/02/19-3.png" />

そしたら、その画像を選択した状態で、右クリック、Create->Anima2D->Sprite Meshを選択
<img src="http://ayumegu.jp/wp-content/uploads/2017/02/19-4.png" width="300"/>

するとこんな感じの物ができます。
これを画面に配置。
<img src="http://ayumegu.jp/wp-content/uploads/2017/02/19-5.png" />

###ボーンをつける
ヒエラルキーからCreate->2D Object->Boneを選択。
すると画面上にボーンが表示されます。
<img src="http://ayumegu.jp/wp-content/uploads/2017/02/19-6.png" /><img src="http://ayumegu.jp/wp-content/uploads/2017/02/19-7.png" />

こんな感じにボーンを複数テクスチャに合わせて設定して・・・
<img src="http://ayumegu.jp/wp-content/uploads/2017/02/19-8.png" />

次に画像のメッシュの分割の設定です。
先ほSprite Meshで作成されたメッシュのインスペクタからEdit Sprite Meshボタンを押します
<img src="http://ayumegu.jp/wp-content/uploads/2017/02/19-9.png" />

するとこんな画面になります。
左上のSliceボタンを押して、いい感じに自動で分割し、気になったところは手動で綺麗にします
<img src="http://ayumegu.jp/wp-content/uploads/2017/02/19-11.png" width="500"/>

Tessellationを大きくすると分割がこまかくなります
<img src="http://ayumegu.jp/wp-content/uploads/2017/02/19-12.png" width="500"/>

微調整してこれでOk
<img src="http://ayumegu.jp/wp-content/uploads/2017/02/19-13.png" width="500"/>

###ボーンをSpriteを関連付ける
このままでは骨を動かしてもspriteはついてこないのでここの関連付けをします
ヒエラルキーに配置したSpriteのインスペクタの
Sprite Mesh InstanceのSet Boneに骨をセット。
するとこんな感じになります
<img src="http://ayumegu.jp/wp-content/uploads/2017/02/19-14.png" /><img src="http://ayumegu.jp/wp-content/uploads/2017/02/19-15.png" />

次に、先ほどのSprite Mesh Editウィンドウに戻って、
左上の方のBindボタンを押します。
このままだとちょっとわかりにくいので
<img src="http://ayumegu.jp/wp-content/uploads/2017/02/19-16.png"  width="400"/>

右下のOverRayにチェックを入れると他の3Dのモデリングツールなどでウェイトをつけるときのような見慣れた表示になります。
左下にインスペクタの小さなウィンドウがあるのでそこで骨ごとの重なり順の設定などもできます。
今回は大したオブジェクトじゃないのでこのままApplyを押して確定
<img src="http://ayumegu.jp/wp-content/uploads/2017/02/19-17.png"  width="400"/>

これでboneを回転させると曲がるようになりました。
<img src="http://ayumegu.jp/wp-content/uploads/2017/02/ahoge.gif"/>

##IKを使ってみる
アホ毛の一番子のboneを選択した状態で、ヒエラルキーからCreate->2D Object->IK CCDを選択
<img src="http://ayumegu.jp/wp-content/uploads/2017/02/19-18.png" />

すると画面上に緑色の円の表示が出ます。
<img src="http://ayumegu.jp/wp-content/uploads/2017/02/19-20.png" width="300"/>

インスペクターのTargetに先ほどのBoneを設定。
(私の場合はアホ毛の先端)
Dampingなどをいい感じに設定すてあげれば、
このオブジェクトを動かすといい感じに動きます。
<img src="http://ayumegu.jp/wp-content/uploads/2017/02/19-19.png" />
<img src="http://ayumegu.jp/wp-content/uploads/2017/02/ahoge2.gif" />


##Spriteを差し替える
画像を差し替える時はSprite Mesh Animation.csを差し替えるパーツのメッシュにアタッチし、
差し替えるSpriteをそれぞれアタッチします。
これでFrameのスライダーを動かすだけで切り替えることが可能です
注意としてはpivot位置を合わせておかないと、差し替えた時に位置がずれるので注意
<img src="http://ayumegu.jp/wp-content/uploads/2017/02/19-21.png" />

##ポーズを作る
一番親の階層などにPose Manager.csをアタッチ。
Create new poseを押すと名前をつけて保存になるので、適当にidleとかつけて保存します。
そしてシーン上でポーズをつけてSaveでそのポーズが保存されます。
これで必要なポーズ分作ってしまいます。Loadでそのポーズに一瞬で切り替えられます。
何が便利かというと、アニメーションを作る際に、animation windowでポーズのLoadを押すと自動でキーを打ってくれるんです！これはすごい便利！
<img src="http://ayumegu.jp/wp-content/uploads/2017/02/19-22.png" />

はい、駆け足だけど、今回はここまで〜