Anima2D入門〜実践(アニメーション作成)編〜

# Anima2D入門

前回「リンク」は2DのSpriteMeshにboneを組み込んでIKをつけるところまで行きました。今回はAnima2Dの機能＋Unity2017の機能を使ってアニメーションを作成したいと思います。

※今回はMecanimやステートマシンは使用しません。そのうちおまけとして、Timelineを用いたアニメーションを作成して記事にした思います。

前回の記事はこちら↓
[Anima2D入門〜紹介&実践(IK付けまで)編〜](http://qiita.com/4_mio_11/items/42512d7d8dbe7e16415e)

## はじめに

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

- Unity (version 2017.1.0b9)
- Visual Studio Code (Version 1.13.0)

ご了承ください。
ちなみに、記事の流れとしては 「試しに実践→細かい使い方」 という順になっています。

## 従来のフレームアニメーションとの比較

前回書き忘れていた部分に関して説明をしておこうと思います。アニメーション手法には「フレームアニメーション」と「スケルトンアニメーション」のに種類が存在しています。この二つの違いを表にして以下にまとめました。

|項目|フレームアニメーション|スケルタルアニメーション|
|---|------------------|---------------------|
|アニメーション方法|手書きのフレームをコマ送り。|Spriteに組み込まれているboneを動かす。|
|テクスチャシート|フレーム一枚一枚を格納するので非常に大きい。|atlasに要素がまとまっているので非常に小さい。|
|サイズ|テクスチャが大きいためサイズも大きくなる。メモリを気にしないPC向け。|使用するメモリは少ない。比較的モバイル向け。|
|CPU負荷|小さい|大きい|
|柔軟性|ない|Unity上で髪の色を変更したりなどが可能。|
|フレームの増やし方|自前でフレームを増やす必要がある。|Unity上で中間のフレームを作ってもらえる。|
|ブレンディング|研究はされているがまだ実現不可。|可能|
|複雑さ|外部ツールを使って面白いことができる。|ある程度制約がかかる。|

カメラから遠いオブジェクトや小さなオブジェクト(例えば小さな敵)にはフレームアニメーション、大きなオブジェクト(アバターやボスなど)にはスケルタルアニメーションが向いているということがわかりました。

## Unityで作るアニメーションのワークフロー

前回までで、アニメーションを作成するための基本的な準備は整いましたが、さらにAnima2Dの機能を使って、より楽にアニメーションを編集できるようにしたいと思います。具体的には、アニメーションクリップを作成する前に、Anima2Dの機能の一つである、ポーズを作ったり、コントロールを作成します。

その次に「Animation View」を使用して、「アニメーションクリップ(Animation Clips)」というものを作成して行きます。アニメーションクリップというのは、アニメーションの動き自体を設定した最小のデータのことです(例えば"歩く"、"走る"など)。アニメーションクリップとしてアニメーションデータを独立させることで柔軟に設定を行うことができます。

アニメーションクリップを作成するときにAnima2Dの機能であるオニオンスキンを用いてみましょう。

アニメーションクリップ作成後は、アニメーターコントローラー(Animation Controlles)というステートマシンのようなシステムに落とし込みます。ここで、「現在どのアニメーションクリップを再生するか、ブレンドするか」を制御することができます。今回は解説しませんが、時間があるときにでも記事として書いてみようと思います。

## ポーズの作成

まずはポーズを作ってみます。この機能は編集したbone群のポジション、回転などを登録し、好きなときにロードを行なって復元するためのものです。Projectウィンドウ内で左クリックメニューから[Create > Anima2D > Pose]を選択して、名前をつけてください。今回は「Idle」にしています。

<img src="https://qiita-image-store.s3.amazonaws.com/0/36899/345418d5-e287-cecf-34d4-929bd936025b.png" width=30%>

次に、boneを持つ任意のオブジェクト(例えば親など)に「Pose Manager」をアタッチし、Posesに先ほど作成したPoseを登録しておきます。

<img src="https://qiita-image-store.s3.amazonaws.com/0/36899/e0cb0b54-d9e6-e6a4-c1cc-29895619affe.png" width=50%>

あとは好きなポーズを適当に取らせて、"Save"を押下すると登録/上書き保存が行われ、"Load"を押下するといつでも登録したポーズに戻ることができます！

## コントローラーの作成

これはboneの位置や回転を簡単に変更できるようになるハンドルです。試しに、Hierarchyから任意のboneを持ったオブジェクト内に作成してみます[Create > 2D Object > Control]。

<img src="https://qiita-image-store.s3.amazonaws.com/0/36899/28e8a0db-fed0-5259-3f79-354d2cd77ee3.png" width=50%>

あとはInspectorに表示されている、Bone Transformに任意のboneをアタッチしておくと簡単に位置が動かせるようになります。

## アニメーションクリップの作成

それでは、メニューバーから「Animationビュー」を開いて(Window > Animation)開いてみましょう。ウィンドウや機能面に関しても、実際に操作した後に説明を行います。

### キーフレームの打ち込み

まずは、アニメーションクリップを作成します。Hierarchy上でアニメーションクリップを作成したいゲームオブジェクトを選択し、Animationビュー中央にある「Create」ボタンを押下して、名前をつけて下さい。今回は「Attack」にして置きます。

次にAnimationビューの左上にある赤丸(録画ボタン)を押下して、編集モードにしてください。ちなみにフレームの数値を表示している箇所が赤い時が編集モード、青い時がプレビューモードです。また、この色はInspector上にも現れるので次のGIFで注目して見てください。

<img src="https://qiita-image-store.s3.amazonaws.com/0/36899/1652764e-7887-aa7e-e5b2-e74fb0b7a4c1.png" width=50%>

押下したら適当なフレームを選んで、任意のboneやTransformを動かして見ます。ちなみに、この操作はIKを動かしても可能となります。

![CreateKeyFrame.gif](https://qiita-image-store.s3.amazonaws.com/0/36899/5fe34418-ad62-96bf-960d-6b82ff84455f.gif)

すると自動的に左にあるプロパティリストという領域に変更されたIKのTransformが追加され、タイムライン上でもキーフレームが打たさりました。この状態で"▶"を押下するとキーフレーム時に打ち込んだ位置/大きさ/角度に至るまでのフレームを補完してアニメーションしてくれます。

![Animation1.gif](https://qiita-image-store.s3.amazonaws.com/0/36899/a3104bf5-bea6-c444-5834-e7ea7be04450.gif)

軽くホラーですね…。もっとガクガクしない且つ緩やかになるように調整して見ましょう。矩形選択で移動と、選択後にコピーしてタイムライン上でダブルクリック(貼り付け)をしています。

![CreateKeyFrame2.gif](https://qiita-image-store.s3.amazonaws.com/0/36899/1ef26418-8b72-0cfe-708e-df122f8f1e87.gif)

これで再生すると…

![Animation2.gif](https://qiita-image-store.s3.amazonaws.com/0/36899/09c34890-a8c3-46c1-ce8a-ba6c06764168.gif)

ピョンピョンするようになりました！

### Spriteの差し替え

次に、ジャンプ時に目のスプライトメッシュをを切り替えるように設定して見ます。切り替えたいパーツを持つオブジェクトに「Sprite Mesh Animation」コンポーネントを追加します。

<img src="https://qiita-image-store.s3.amazonaws.com/0/36899/3bab9686-1966-f075-ad20-0f7c47f0282c.png" width=50%>

ここに目のスプライトメッシュを登録していきます。

<img width=50% alt="2017-06-29-21-02-15.png" src="https://qiita-image-store.s3.amazonaws.com/0/36899/3c32c7cd-801d-fed0-3ceb-decd11873c98.png">

ここでAnimationビューに戻り、ジャンプのタイミングに合わせて目のキーフレームを打ち込みます。

![eyeKey.gif](https://qiita-image-store.s3.amazonaws.com/0/36899/3c5ca67f-6047-c471-56a4-c440c6464996.gif)

これでプレビューすると、ちゃんと切り替わってます！

![jump.gif](https://qiita-image-store.s3.amazonaws.com/0/36899/160b47de-f1f5-b00d-593b-f9b50414d315.gif)

ただし、Pivot位置を合わせておかないと差し替えたときに位置がずれるらしいので注意が必要です。

#### Animation View

<img width="859" alt="2017-06-29-12-01-03.png" src="https://qiita-image-store.s3.amazonaws.com/0/36899/1df60477-5ace-b8dc-9ae9-6d9c14b032b2.png">

|色|説明|
|-----|-------|
|青("●"や"▶︎"など)|ボタン群はアニメーションクリップの再生を制御します。その横にある数値は、現在アクティブ(または選択)状態になっているフレームの値です。ショートカットキーも存在しています(後述)。|
|緑(タイムライン)|上部にある数値は"秒とフレーム"を表し(例えば1:10なら1秒と10フレーム)、現在編集しているアニメーションクリップの、どのフレームを参照しているかが垂直線で示されます。Sceneには選択フレーム時の状態となったオブジェクトが表示されます。◆は設定している要素のキーフレームである事を示しています。これは矩形選択からのドラッグなどでキーフレームの移動を行なったり、削除したりすることが可能です(後述)。また、ダブルクリックで任意のプロパティのキーフレームを追加することもできます。|
|赤(アニメーションクリップ選択/作成)|ここで編集を行うアニメーションクリップを選択するか、新たにアニメーションクリップを作成・保存することができます。ちなみにアニメーションクリップが一つも作成されていないときは下のウィンドウ中央に作成ボタンが表示されます。|
|ピンク(Samples)|1秒間に何コマのアニメーションにするか設定できます。値を少なくすればアニメーションはゆっくりとなり、大きくすれば早くなります。|
|水色(キーフレームの追加とイベントの追加)|「キーフレームの追加」ボタンを押下すると、現在アニメーションビューで選択状態にあるプロパティのキーフレームが作成されます。キーフレームはタイムライン上をダブルクリックしても追加されます。「イベントの追加」ボタンを押すと、追加したフレームへ到達時に、対象オブジェクトが持つスクリプトの関数を呼び出す処理が行われます(後述)。|
|白色(プロパティリスト)|キーフレームで編集が行われたオブジェクトのプロパティをリストとして表示しています。又、録画ボタンを押してオブジェクトのキーフレームを作成した場合には、アニメーションのために使用しているプロパティ(Transform等)が自動的にここに追加されます。|
|オレンジ(モード切り替え)|DopesheetモードとCurvesモードを切り替えるボタンです。Curvesモードに関してはこれから解説も交えつつ使用していきたいと思います。|
|黄色(ロックアイコン)|有効にしておくと、現在アニメーションの編集をしているオブジェクト以外にフォーカスを当てても、Animationビューは切り替わらなくなります。特定のオブジェクトのアニメーションに集中しつつ他のオブジェクトを移動させたい時などに便利です。|

##### ショートカットキー(使いそうなもの)

|ショートカットキー|説明|
|-----|-------|
|,(カンマ)|前のフレームに移動|
|.(ピリオド)|次のフレームに移動|
|Alt + ,(カンマ)|前のキーフレームに移動|
|Alt + .(ピリオド)|次のキーフレームに移動|

##### タイムライン上での便利操作

正式名称は「Box Selection」と言うようです。

まずは基本操作です。矩形選択後にdeleteで選択したキーフレームの一括削除が行えます。

![Box Selection R.gif](https://qiita-image-store.s3.amazonaws.com/0/36899/8f1266fe-1ffc-04da-0e80-4abb37eb22c3.gif)


矩形選択後にShiftキーを押下しながら別の箇所にあるキーフレームを矩形選択して編集することができます。

![Box Seleciton Shift.gif](https://qiita-image-store.s3.amazonaws.com/0/36899/a106d85a-a243-e481-4441-76ff4d1e4774.gif)

最後にリップル編集と呼ばれる操作です。矩形選択後にRキーを押下しながら移動、スケーリングを行います。

![Box Selection1.gif](https://qiita-image-store.s3.amazonaws.com/0/36899/2b98ef4a-95d2-eaef-864a-a9ba42890c65.gif)

### Curvesモードで調整

キーフレームの打ち込んだあとは、Curvesモードに切り替えて値を調整していきます。先ほど紹介したモード切り替えのボタンを押下してください。すると以下の画像用のような表示になったと思います。

<img width=100% alt="2017-06-29-19-11-51.png" src="https://qiita-image-store.s3.amazonaws.com/0/36899/a88f8424-dc8a-d89c-8a9a-c2db824e8635.png">

ここではTransformなどのプロパティの値が、フレームと共にどう変化するかを表すグラフが表示されます。今回はぴょんぴょんしている女の子を今度は下にスイングさせて見ます。操作方法は至って簡単です。

![curves.gif](https://qiita-image-store.s3.amazonaws.com/0/36899/3c2bf6ba-213b-ed9a-920b-76acb10ac98b.gif)

ここでAnima2Dのオニオンスキンを使用して見ましょう。メニュバーから[Window > Anima2D > Onion Skin]を選択してください。すると、「Onion Skin」のウィンドウと共にアニメーション部分が緑と赤のぶれのようなものが確認できたと思います。

<img width=50% alt="2017-06-29-20-50-33.png" src="https://qiita-image-store.s3.amazonaws.com/0/36899/dddc65c4-1def-873b-5883-830f35c8c581.png">

これは、緑がフレームが進んだらどの位置に移動/回転/大きさになるかを表し、赤はその逆です。視覚化することで、動きを予測することができるようになります。

#### Animation View(Curvesモード)

プロパティリストから特定のプロパティ(例えば"Rotation.x")を選択すると、そのプロパティのグラフのみ表示され、見やすくなります。

Curvesモードでは、位置や回転などの他にも、色なども変更することができます。サポートしているプロパティのタイプは以下の通りです。

- Float
- Color
- Vector2
- Vector3
- Vector4
- Quaternion
- Boolean

#### タイムライン上での便利操作(Curvesモード)

- プロパティ又はグラフでのキーを選択した状態で"F"キーを押下すると、編集されている値の範囲に合わせて自動で縮尺が行われます。
- "A"キーでクリップ内にある全てのキーフレームが表示されます。タイムライン全体を表示させるのに便利です。

この他にも、キーを左クリックすると、いくつかのメニューが表示されます。これは現在選択中のキーから次のキーへ至るまでにどのようなスロープにするかを変更することができます。詳しくは[公式リファレンス](https://docs.unity3d.com/2017.1/Documentation/Manual/EditingCurves.html)の後半部分を確認して見てください。

Curvesモードでも「Box Selection」と同じような操作が可能です。とても便利なのでお試しください！

## イベントの追加

一通り動きの部分を作ったら、イベント機能も試して見ましょう。

イベントを追加したフレームへ到達時に、対象オブジェクトが持つスクリプトの関数を呼び出す処理が行われるようになります。例えば、以下の画像のように20フレーム目にイベントを登録したとします。

<img width=50% alt="2017-06-29-14-44-50.png" src="https://qiita-image-store.s3.amazonaws.com/0/36899/b148e864-63f9-6b73-e218-eb0e01b3e80a.png">

その後、このアニメーションの対象となっているオブジェクトにスクリプトを作成・アタッチしておきます。今回は以下のようなメソッドを作成しました。

<img width=80% alt="2017-06-29-14-44-50.png" src="https://qiita-image-store.s3.amazonaws.com/0/36899/469119ba-bf15-88b5-903c-fbf517a5e95f.png">

先ほど追加したイベントを選択してInspectorのFunction部分を確認すると、「PringLog( int )」が選択できるようになっています。また、選択すると、Parametersという項目が表示され、スクリプトに渡す値を設定できます。
<img width=50% alt="2017-06-29-15-04-43.png" src="https://qiita-image-store.s3.amazonaws.com/0/36899/169ba07a-2b69-662a-077d-b4f33fb28b97.png">

イベントに登録できるメソッドの条件は以下の通りです。

- 引数は1つ or 無し
- 引数の型はfloat,string,int,GameObject,[AnimationEvent](https://docs.unity3d.com/jp/540/ScriptReference/AnimationEvent.html)など
- Update / Start 以外
- このほかにもあれば教えてください<(_ _)>

AnimationEventオブジェクトは、発火したイベントに関する他の情報とともに、float、string、int、およびオブジェクト参照の全てを一度に関数に渡すことが可能になります(その場合、EventDataというメンバ変数に格納されます)。

ちなみに、メソッドのアクセス修飾子は問われません。

イベントも、先ほどのBox Selectionと似たような操作でまとめて移動などの編集を行うことができます。スケーリングとリップル編集は行えません。

## おまけ

### Animator Component

Unityのゲームオブジェクトをアニメートするために、開発者側がAnimation Viewを使ってアニメーションクリップを作成すると自動的に対象のゲームオブジェクト(もしくは親)に、この「Animator Component」がアタッチされます。項目については後述していますが、[こちら(公式のリファレンス)](https://docs.unity3d.com/ja/540/Manual/class-Animator.html)からでも確認してみてください。

<img width=50% alt="2017-06-28-16-34-48.png" src="https://qiita-image-store.s3.amazonaws.com/0/36899/709c48c8-8cd1-f338-ba2a-8b4a77477209.png">


|項目|説明|
|-----|------|
|Controller|オブジェクトにアタッチされたアニメーターコントローラー。|
|Avatar|(AnimatorでMecanimを使ってアニメーションしている場合に)キャラオブジェクト用のアバター。|
|Apply Root Motion|キャラクターの位置をアニメーション自体から制御するかスクリプト側から制御するかどうか。|
|Update Mode|Animatorの更新タイミングと、使用するタイムスケールを選択できます。(後述)|
|Culling Mode|対象のオブジェクトのカリングを制御します。(後述)|

また、これらの設定群の下には対象のオブジェクトにアタッチされているアニメーターコントローラーの情報が表示されています。

#### Update Mode

Animatorの更新タイミングと、使用するタイムスケールを選択することができます。タイムスケールに関しては[こちらの公式リファレンス「Time Manager」](https://docs.unity3d.com/ja/540/Manual/class-TimeManager.html)を参照してください。

|項目|説明|
|-----|------|
|Normal|アニメーターはUpdateに合わせて同時に更新されます。なので設定したタイムスケールもアニメーターに適用されます。|
|Animate Physics|これに関してはテラシュールブログさんで詳しく書かれています。[【Unity】アニメーションと物理演算を連動させる　5.6以降](http://tsubakit1.hateblo.jp/entry/2017/04/03/224912)|
|Unsaled Time|アニメーターはUpdateに合わせて同時に更新されます。しかし、タイムスケールの設定は無視されます。ゲームが一時停止中にUIを通常速度でアニメーション化する場合に活用できるそうです。|

#### Culling Mode

対象のオブジェクトのアニメーションのカリングをどうするか、ここで設定できます。ちなみにカリングとは、ざっくり言うとカメラに映らないようなポリゴンをレンダリングしない最適化のことです。今回の場合は、カメラに対象のオブジェクトが映らない場合アニメーションをさせるかどうかの設定となります。

|項目|説明|
|------|-------|
|Always Animate|対象のオブジェクトがカメラに映っていなくても常にアニメーションさせます。|
|Cull Update Transforms|対象のオブジェクトがカメラに映っていない場合は「[リターゲット](https://docs.unity3d.com/jp/540/Manual/Retargeting.html)」、「IK」、「Transform」での動きは無効になります。|
|Cull Completely|対象のオブジェクトがカメラに映っていない場合は、アニメーションを完全に無効にします。|

## Spineとの比較

ここまででAnima2Dの機能や操作を紹介してきました。簡単にSpineとの比較を考えて見たいと思います。

|項目|Spine|Anima2D|
|-----|-----|------|
|料金|有料|無料|
|Unityとの親和性|プラグインあり|そこそこ。今後Unity標準機能として組み込まれることを想定しているので良いかも。|
|機能|多機能|FFDは未実装。当分先。|
|UX|◎|○|

というようになっています。Unityで開発するならAnima2Dで十分だとは思いますが、それ以外の場合はSpineかなぁという印象です。FFDを使って3Dアニメチックにオブジェクトを動かしたい場合にもSpineや、もしくはLive2Dが良いと思います。

## 最後に

いかがだったでしょうか。今回紹介できなかった、アバターマスクの作成やアニメーションベイクについてもぼちぼち理解し次第記事にできたらなぁと思います。次回は、今回のおまけということで、Timeline使って女の子を本格的に動かしてみようと思います。それでは良きUnityライフを！

## 参考資料

- [はじめてのUnity 【第8回 Unityのアニメーション 基礎編】](http://www.sakc.jp/blog/archives/40650)
- [アニメーションを作ろう (1/5)](http://libro.tuyano.com/index3?id=2966003)
- [5.5ベータ版のアニメーション ウィンドウのワークフローご紹介](https://blogs.unity3d.com/jp/2016/09/19/in-beta-animation-window-workflows/)
- [【Unity1】アニメーション実装！AnimationとAnimator Controller【ユニティちゃん縦スクロール7】](http://hiyotama.hatenablog.com/entry/2015/04/27/103000)
- [Anima2Dで遊んでみる](http://ayumegu.jp/asset-anima2d)