Anima2D入門〜紹介&実践(IK付けまで)編〜

# Anima2D入門

この記事は全2回に渡ります。

第2回の記事はこちらから↓
[Anima2D入門〜実践(アニメーション作成)編〜](http://qiita.com/4_mio_11/items/b769915aea2806ac5e42)

## はじめに

この記事を執筆するに当たっての作業環境は以下の通りです。

- Unity (version 2017.1.0b9[最新のβ版])
- Visual Studio Code (Version 1.13.0)

また、参考資料からそのまま抜粋を行なった文章に関しては、できるだけ引用&リンク状態にしています。

ご了承ください。

## Anima2D入門

Anima2Dでは以下のことができるようです。

>- Unity3Dの標準機能と同じ感覚で2Dキャラを動かすことができます。
>- UnityEditor上で2Dアニメーションのセットアップができます。
>    - Bone設定
>    - Sprite頂点編集
>    - Weight値設定
>    - スキニング：関節を曲げた時に周辺の肉を生物のように柔らかく動かすことができます
>    - インバースキネマティクス(Limb,CCD)：手足の先部分を動かすことでアニメーションを制御することができます

このようにMaya等のツールを介さずにUnityEditor上だけでアニメーションの編集を完結できます。

ただしSpineのようにFFDには現在対応しておりません。また、Sprite Atlasに関しても対応はしていないようです…。

### Anima2Dの特徴

- Unity5.5からAssetStoreで無料提供しています。
- (一部Editor上の操作を使いやすくするための部分でネイティブコードが使われているけど)殆どの部分がC#で実装されていて、ソースコードは公開されています。
- 今後、同等の機能がUnityの標準機能として統合されていく予定(2018年?)

### どんなシチュエーションで使用するか

>- 無料で2Dのスキニングアニメーションを使いたい
>- Unity3D標準のAnimation, Mecanim, Skinningを2Dにも使いたい
>- 編集をなるべくUnityEditorだけで完結したい
>- C#部分を改造してプロジェクト用にカスタマイズ・グレードアップして使いたい
>- Unityに今後追加される2Dアニメーション機能をいち早く試したい

### 導入方法

これは至って簡単で、AssetStoreからAnima2Dで検索し、DLとインポートを行えばOKです。Exampleは入れなくても問題ありません。ただし、インポートした内容はAssets直下に置いて下さい。別のフォルダへ移動するほど、後ほどAnima2Dの機能を使用した場合に、指定パスの不一致による「NullReferenceException」が出力されてしまいます。

<img src="https://qiita-image-store.s3.amazonaws.com/0/36899/a5cbffbe-dbb1-e459-103b-24fca61d8c61.png" width=80%>

#### Sprite Mesh？

これはUnityとは関係なく、Anima2D独自のコンポーネントです。スキニングに対応した、拡張版Spriteで、輪郭のポリゴンだけではなく、肉部分のポリゴンも編集が可能です。

### 作業の流れ

>1. spriteシートを作ってインポートする(通常)
>1. **SpriteMeshを作る(Anima2D)**
>1. **Boneを作る(Anima2D)**
>1. **Weight値を設定する(Anima2D)**
>1. **インバースキネマティクスの設定(Anima2D)**
>1. Animator, Mecanimを編集する(通常)

#### spriteシートを作ってインポートする

今回は、[キャラメイクファクトリー](http://www15.atpages.jp/kisekae99/kisekae.html)さんという、無料でアバターが作れるサービスを利用しました。以下の黒髪ツインテJKをバラバラに解体して編集を行い、Unityにインポートします。

<img src="https://qiita-image-store.s3.amazonaws.com/0/36899/5dda9640-b57c-8198-6ddc-8ee18e2a745f.png" width=30%>

<img src="https://qiita-image-store.s3.amazonaws.com/0/36899/b1cfc557-83f4-f917-3e59-33a54eddb28a.png" width=80%>

この画像を使用する前に、事前に画像の設定を行なっておきます。

|項目|設定|説明|
|---|---|----|
|Texture Type|2D and UI|このテクスチャを2Dゲーム用のスプライトとして設定します。|
|Sprite Mode|Single(or Multiple)|複数の画像で構成されているかどうかを表します。もしも複数の部品を一枚の画像にまとめている場合は、Multipleに設定をしてSliceを行なって下さい。(詳しくは[Unity2017 Sprite Editorの使い方](http://qiita.com/4_mio_11/items/e0fd127d47ea2bbc185f))それ以外はSingleで設定して下さい。|
|Filter Mode|Point|[【Unity】スプライト端の謎の線/ゴミ/ちらつきの修正方法](http://www.f-sp.com/entry/2016/11/24/152957)を参照。|
|format|こちらを参照して任意に設定。[Texture compression formats for platform-specific overrides](https://docs.unity3d.com/2017.1/Documentation/Manual/class-TextureImporterOverride.html)|DefaultタブのNone,Low Quality...を変更すると、プラットフォーム別のタブ内の圧縮形式も、設定したクオリティーとなるように同時変更されます。|

<img src="https://qiita-image-store.s3.amazonaws.com/0/36899/f0f0d69a-2a62-f0fb-f11b-4f6241c3d74c.png" width=50%>

ここまで終わったら、Inspector上にある「Sprite Editor」ボタンを押下します。以下のようなウィンドウが表示されたら、手動もしくは自動スライスで画像の分割を行います。必要があれば頂点の編集なども行います。

詳しくは以下の記事を書きましたので参照してください。

[Unity2017 Sprite Editorの使い方](http://qiita.com/4_mio_11/items/e0fd127d47ea2bbc185f)

編集後、アトラスを右クリックしてSpriteMeshを作成します( Create→Anima2D→SpriteMesh)。ここで、部品単体のアトラスである場合はそのままSpriteMeshが作成され、複数部品のまとまったアトラスであっても分割さえしてあれば、それに沿う形でSpriteMeshが個別に作成されます。

<img src="https://qiita-image-store.s3.amazonaws.com/0/36899/3bfc5626-6c2c-e4be-22e8-5aef6b96f74e.png" width=70%>

後からわかりやすいように専用のフォルダを作っておくと良いかもです。

#### SpriteMeshを作る

SpriteMeshができあがったら、各々の輪郭の頂点を調整してみましょう。任意のSpriteMeshを選択して、Inspectorに表示されている「Edit Sprite Mesh」ボタンを押下して下さい。すると、以下のようなウィンドウが表示されたはずです。ここで、簡単に機能を紹介します。

<img src="https://qiita-image-store.s3.amazonaws.com/0/36899/ec8d9812-2142-b808-ec27-6f6e70186a9a.png" width=100%>

|色|説明|
|-----|-----|
|赤(bornアイコン)|この後に作成するボーンの表示/非表示を切り替えます。|
|青(Slice)|スライスツール(後述)の表示/非表示を切り替えます。|
|緑(Hole)|メッシュに表示されない状態にする穴を作成することができます。
|オレンジ(Bind/Unbind)|メッシュの内側に組み込まれたボーンを、Bindを押下することでメッシュと適合させ、自動的にボーンの重量の計算を行います。unbindで適合を解除します。|
|水色(Revert/Apply)|変更を破棄する/適応する。|
|紫(Inspector)|選択されている要素に応じて様々な情報を出力します。(後述)|

ここで手動で頂点の調整を行っても良いのですが、面倒なのでSliceを使用しましょう。Sliceボタンを押下してください。すると、Slice Toolというウィンドウが表示されたと思います。こちらに関しても簡単に機能紹介を行います。

<img src="https://qiita-image-store.s3.amazonaws.com/0/36899/1f752062-6908-59c4-db23-64aaf15132bc.png" width=50%>

|項目|説明|
|-----|-----|
|Outline detail|値が大きいほど、メッシュの輪郭部分により多くの頂点を生成します。|
|Alpha cutout|アルファ部分のピクセルをどれだけカットするか設定できます。|
|Tessellation|値が大きいほど、メッシュの内側(肉)部分により多くの頂点を生成し、どれぐらい細かく分割するか指定します。最初は0.1とか0.2で、そこから様子を見ていく。|
|Detect holes|穴を開けた部分が検出するかどうかです。|

値を調整してApplyを押下すると、自動分割が行われます。問題があるようなら手作業で修正を行いましょう。問題がなくなったら、SpriteMesh Editor自体のApplyを押下して、編集を適用します。

<img src="https://qiita-image-store.s3.amazonaws.com/0/36899/08672eda-bc6b-95c3-4a48-df2cef8d6e82.png" width=50%>

##### Inspector

**何も選択していない状態**

<img src="https://qiita-image-store.s3.amazonaws.com/0/36899/12718d0d-a514-b138-d9a3-f1b5e4c23e14.png" width=50%>

|項目|説明|
|----|----|
|Sprite|スプライト名|
|Pivot|中心|

**boneを選択**

<img src="https://qiita-image-store.s3.amazonaws.com/0/36899/5a45bb5f-f419-3257-d2f5-a5a8065c8543.png" width=50%>

|項目|説明|
|----|----|
|Name|ポーズ名。|
|Z-Order|自身の他の要素と比べて前後どの位置に表示するかのレイヤーを設定します。|
|Color|表示色の設定。|

**Bind後に表示される頂点ごとの影響値アイコンを選択**

<img src="https://qiita-image-store.s3.amazonaws.com/0/36899/d8d77c9d-34f7-12f8-6aba-1627f1b2b38e.png" width=50%>

頂点が持つウェイトをスライダとして表示し、手動でウェイトの設定を行うことができます。最大４つのboneから影響を受ける設定を行えます。

#### Boneを作る

SpriteMeshを編集後、これらをSceneにD&Dして配置して行きます。できればGameタブで確認できるサイズで表示させておくと良いです。表示の優先順位は、「Order n Layer」の数値を変更することで調整できます。

配置後↓
<img src="https://qiita-image-store.s3.amazonaws.com/0/36899/55f6ef93-ecea-e647-6f60-f71faec53b7e.png" width=30%>

ここまで出来たら、実際にBoneを作って行きましょう。作り方は、HierarchyのCreate > 2D Object > Boneをクリックか、Alt + Shift + Bで追加が行われます。

Lengthや回転を調整しながらBoneを入れて行きます…。

<img src="https://qiita-image-store.s3.amazonaws.com/0/36899/dff790e4-b2c1-92dd-9f82-19eb20bc8cfc.png" width=30%>

ここまで出来たら、SpriteMeshのInspectorを開き、「Set bones」に作ったボーンをセットします。

![set bones.gif](https://qiita-image-store.s3.amazonaws.com/0/36899/833e2865-76b8-9373-de78-244e2da93d8c.gif)

また、ボーンチェーンを作るためには、boneのインスペクターにある「Child」という項目に子boneを追加する必要があります(一般的に尖っている方にくっついているbone)。

#### Weight値を設定する

セットしたら再度、Hierarchy上にある対象のSpriteMesh Objectを選択しながら、SpriteMesh Editorを開き、Bindを押下します。すると、ウェイトが自動的に計算されて、それぞれのボーンの影響範囲が色合いで表示されます。

<img src="https://qiita-image-store.s3.amazonaws.com/0/36899/8279ac77-7445-c386-ca2c-805e1caee113.png" width=50%>

この状態であれば、それぞれのボーンの影響値を加減算して編集することができます。また、Weight toolに表示されている「Smooth」または「Auto」で影響値を自動的に設定してくれます。個人的にはAutoを行った後、Smoothをしつつ手動で直すのが楽で良いと思います。

![weight.gif](https://qiita-image-store.s3.amazonaws.com/0/36899/f929688d-ea7f-5a72-a58e-69ebacfcd609.gif)

ここで簡単に、Weight toolについて説明をしておきます。

##### スライダー

設定した値の分だけ選択したboneの影響範囲を加減します。

![weight slider.gif](https://qiita-image-store.s3.amazonaws.com/0/36899/a4bf5000-dced-cf98-5604-41c5b987b65b.gif)

##### Smooth

隣接する頂点のグループのウェイトの平均化を行います。

![smooth.gif](https://qiita-image-store.s3.amazonaws.com/0/36899/6933b627-44a1-a5e4-e99a-b5b582216eaa.gif)

##### Auto

自動的にウェイトがつけられます。手動で行っている時にぐちゃぐちゃになってしまったら再設定しなおしても良いかもしれません。

##### Overlay

頂点ごとのboneの影響を表すカラーメッシュの表示を切り替えます。。

##### Pies

各頂点がどのboneからどれくらい影響を受けるのかを表す円グラフの表示を切り替えます。

#### インバースキネマティクス(IK)の設定

次に簡単に動きを制御できるIKの設定を行います。ちなみにこれを設定してうまく動かない場合は、もしかしたらboneのChildがうまく設定できてないのかもしれません。

##### Limb

>手足(2関節)のbone制御の補助機能です。boneの角度を指定する代わりに、先端の位置を指定してアニメーションをつけることができます。途中の骨の回転でアニメーションをつけてるわけじゃなく、あくまでもLimbの位置でキーフレームを打つことになります。

例えば、膝から足首までのboneをセットすると以下のように、太ももから膝まで、膝から足首までのboneがLimbの影響を受けて自然に曲がるようになります(足首のboneにもLimbをセットして角度を調整しています)。

![Limb.gif](https://qiita-image-store.s3.amazonaws.com/0/36899/00d19828-a5c1-6271-03ba-1b578af0533a.gif)

<img src="https://qiita-image-store.s3.amazonaws.com/0/36899/52cfdeed-5e51-47ad-2921-b31b33e12c30.png" width=50%>

|項目|説明|
|----|----|
|Record|アニメーションモードの間ボーンキーフレームを記録します。|
|Target|手足の先、又は手首足首部分をここにセットします。|
|Weight|IKがどれだけポーズに影響を与えるかを設定します。|
|Restore Default Pose|計算を行う前のデフォルトのポーズを設定します。|
|Orient Child|Targetに設定されている子boneを現在の回転状態のまま追従を行うようにするか設定できます。|
|Flip|関節を反転させるかどうか設定できます。|

##### CCD2D

>蛇のような細長い体を持つものや、尻尾など長い多関節のbone制御の補助機能です。こちらもLimbと同じように、boneの角度を指定する代わりに、先端の位置を指定してアニメーションをつけることができます。

今回はこれを髪の毛に適用してみたいと思います。

![hair.gif](https://qiita-image-store.s3.amazonaws.com/0/36899/fd4e854d-5477-d436-2961-166a4ed8a60d.gif)

<img src="https://qiita-image-store.s3.amazonaws.com/0/36899/2918d663-07eb-0aeb-2d1d-a27dad495f9d.png" width=50%>

|項目|説明|
|----|----|
|Record|アニメーションモードの間ボーンキーフレームを記録します。|
|Target|尻尾の先などの部分をここにセットします。|
|Weight|IKがどれだけポーズに影響を与えるかを設定します。|
|Restore Default Pose|計算を行う前のデフォルトのポーズを設定します。|
|Orient Child|Targetに設定されている子boneを現在の回転状態のまま追従を行うようにするか設定できます。|
|Num bones|IKの影響を受けるboneの数です。|
|Iterations|ソルバの反復回数を設定できます。|
|Damping|ソルバのステップ速度を制御します。値が小さいと大きく曲がり、大きいと小さく曲がるようになります。|

#### Animator, Mecanimを編集する

ここからはUnity標準のAnimatorやMecanimを使用してアニメーション作成を行っていきます。ここでもAnima2Dの機能である、オニオンスキンや、ここからまた長くなるので次回の記事にて解説を行います。

更新したらここにリンクを貼ります。

### 使用上の注意点

> - 同時表示ボーン数が1000個などのように膨大だと処理負荷が問題になることがあります(1ボーン毎に1GameObjectが割り当てられる方式)。
> - UnityEngineに統合、再構築中なためAnima2Dへの新機能追加は保留中。おそらくFFDも当分先になりそうです。
> - ポリゴンコライダーに関してはメッシュ変形に対応していないため、ある程度変形を想定した大きさにしておく必要があります。

## 参考資料

- [【Unity道場 博多スペシャル 2017】無料アニメーションツールAnima2Dを使ってみよう](https://www.youtube.com/watch?v=As6mF4sgrVE&feature=youtu.be)
- [Anima2DでSpriteMeshとBoneを追加したときのメモ](http://subarunari.hatenablog.com/entry/2017/05/10/140639)
- [Unity Anima2Dについてのメモ書き](http://taka8.hateblo.jp/entry/2017/01/18/224955)
- [Anima2Dで遊んでみる](http://ayumegu.jp/asset-anima2d)