Anima2D入門
前回「リンク」は2DのSpriteMeshにboneを組み込んでIKをつけるところまで行きました。今回はAnima2Dの機能＋Unity2017の機能を使ってアニメーションを作成したいと思います。
※今回はMecanimやステートマシンは使用しません。そのうちおまけとして、Timelineを用いたアニメーションを作成して記事にした思います。
前回の記事はこちら↓
Anima2D入門〜紹介&実践(IK付けまで)編〜
はじめに
この記事を執筆するに当たっての作業環境は以下の通りです。
- 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」にしています。
次に、boneを持つ任意のオブジェクト(例えば親など)に「Pose Manager」をアタッチし、Posesに先ほど作成したPoseを登録しておきます。
あとは好きなポーズを適当に取らせて、"Save"を押下すると登録/上書き保存が行われ、"Load"を押下するといつでも登録したポーズに戻ることができます！
コントローラーの作成
これはboneの位置や回転を簡単に変更できるようになるハンドルです。試しに、Hierarchyから任意のboneを持ったオブジェクト内に作成してみます[Create > 2D Object > Control]。
あとはInspectorに表示されている、Bone Transformに任意のboneをアタッチしておくと簡単に位置が動かせるようになります。
アニメーションクリップの作成
それでは、メニューバーから「Animationビュー」を開いて(Window > Animation)開いてみましょう。ウィンドウや機能面に関しても、実際に操作した後に説明を行います。
キーフレームの打ち込み
まずは、アニメーションクリップを作成します。Hierarchy上でアニメーションクリップを作成したいゲームオブジェクトを選択し、Animationビュー中央にある「Create」ボタンを押下して、名前をつけて下さい。今回は「Attack」にして置きます。
次にAnimationビューの左上にある赤丸(録画ボタン)を押下して、編集モードにしてください。ちなみにフレームの数値を表示している箇所が赤い時が編集モード、青い時がプレビューモードです。また、この色はInspector上にも現れるので次のGIFで注目して見てください。
押下したら適当なフレームを選んで、任意のboneやTransformを動かして見ます。ちなみに、この操作はIKを動かしても可能となります。
すると自動的に左にあるプロパティリストという領域に変更されたIKのTransformが追加され、タイムライン上でもキーフレームが打たさりました。この状態で"▶"を押下するとキーフレーム時に打ち込んだ位置/大きさ/角度に至るまでのフレームを補完してアニメーションしてくれます。
軽くホラーですね…。もっとガクガクしない且つ緩やかになるように調整して見ましょう。矩形選択で移動と、選択後にコピーしてタイムライン上でダブルクリック(貼り付け)をしています。
これで再生すると…
ピョンピョンするようになりました！
Spriteの差し替え
次に、ジャンプ時に目のスプライトメッシュをを切り替えるように設定して見ます。切り替えたいパーツを持つオブジェクトに「Sprite Mesh Animation」コンポーネントを追加します。
ここに目のスプライトメッシュを登録していきます。
ここでAnimationビューに戻り、ジャンプのタイミングに合わせて目のキーフレームを打ち込みます。
これでプレビューすると、ちゃんと切り替わってます！
ただし、Pivot位置を合わせておかないと差し替えたときに位置がずれるらしいので注意が必要です。
Animation View
| 色 | 説明 |
|---|---|
| 青("●"や"▶︎"など) | ボタン群はアニメーションクリップの再生を制御します。その横にある数値は、現在アクティブ(または選択)状態になっているフレームの値です。ショートカットキーも存在しています(後述)。 |
| 緑(タイムライン) | 上部にある数値は"秒とフレーム"を表し(例えば1:10なら1秒と10フレーム)、現在編集しているアニメーションクリップの、どのフレームを参照しているかが垂直線で示されます。Sceneには選択フレーム時の状態となったオブジェクトが表示されます。◆は設定している要素のキーフレームである事を示しています。これは矩形選択からのドラッグなどでキーフレームの移動を行なったり、削除したりすることが可能です(後述)。また、ダブルクリックで任意のプロパティのキーフレームを追加することもできます。 |
| 赤(アニメーションクリップ選択/作成) | ここで編集を行うアニメーションクリップを選択するか、新たにアニメーションクリップを作成・保存することができます。ちなみにアニメーションクリップが一つも作成されていないときは下のウィンドウ中央に作成ボタンが表示されます。 |
| ピンク(Samples) | 1秒間に何コマのアニメーションにするか設定できます。値を少なくすればアニメーションはゆっくりとなり、大きくすれば早くなります。 |
| 水色(キーフレームの追加とイベントの追加) | 「キーフレームの追加」ボタンを押下すると、現在アニメーションビューで選択状態にあるプロパティのキーフレームが作成されます。キーフレームはタイムライン上をダブルクリックしても追加されます。「イベントの追加」ボタンを押すと、追加したフレームへ到達時に、対象オブジェクトが持つスクリプトの関数を呼び出す処理が行われます(後述)。 |
| 白色(プロパティリスト) | キーフレームで編集が行われたオブジェクトのプロパティをリストとして表示しています。又、録画ボタンを押してオブジェクトのキーフレームを作成した場合には、アニメーションのために使用しているプロパティ(Transform等)が自動的にここに追加されます。 |
| オレンジ(モード切り替え) | DopesheetモードとCurvesモードを切り替えるボタンです。Curvesモードに関してはこれから解説も交えつつ使用していきたいと思います。 |
| 黄色(ロックアイコン) | 有効にしておくと、現在アニメーションの編集をしているオブジェクト以外にフォーカスを当てても、Animationビューは切り替わらなくなります。特定のオブジェクトのアニメーションに集中しつつ他のオブジェクトを移動させたい時などに便利です。 |
ショートカットキー(使いそうなもの)
| ショートカットキー | 説明 |
|---|---|
| ,(カンマ) | 前のフレームに移動 |
| .(ピリオド) | 次のフレームに移動 |
| Alt + ,(カンマ) | 前のキーフレームに移動 |
| Alt + .(ピリオド) | 次のキーフレームに移動 |
タイムライン上での便利操作
正式名称は「Box Selection」と言うようです。
まずは基本操作です。矩形選択後にdeleteで選択したキーフレームの一括削除が行えます。
矩形選択後にShiftキーを押下しながら別の箇所にあるキーフレームを矩形選択して編集することができます。
最後にリップル編集と呼ばれる操作です。矩形選択後にRキーを押下しながら移動、スケーリングを行います。
Curvesモードで調整
キーフレームの打ち込んだあとは、Curvesモードに切り替えて値を調整していきます。先ほど紹介したモード切り替えのボタンを押下してください。すると以下の画像用のような表示になったと思います。
ここではTransformなどのプロパティの値が、フレームと共にどう変化するかを表すグラフが表示されます。今回はぴょんぴょんしている女の子を今度は下にスイングさせて見ます。操作方法は至って簡単です。
ここでAnima2Dのオニオンスキンを使用して見ましょう。メニュバーから[Window > Anima2D > Onion Skin]を選択してください。すると、「Onion Skin」のウィンドウと共にアニメーション部分が緑と赤のぶれのようなものが確認できたと思います。
これは、緑がフレームが進んだらどの位置に移動/回転/大きさになるかを表し、赤はその逆です。視覚化することで、動きを予測することができるようになります。
Animation View(Curvesモード)
プロパティリストから特定のプロパティ(例えば"Rotation.x")を選択すると、そのプロパティのグラフのみ表示され、見やすくなります。
Curvesモードでは、位置や回転などの他にも、色なども変更することができます。サポートしているプロパティのタイプは以下の通りです。
- Float
- Color
- Vector2
- Vector3
- Vector4
- Quaternion
- Boolean
タイムライン上での便利操作(Curvesモード)
- プロパティ又はグラフでのキーを選択した状態で"F"キーを押下すると、編集されている値の範囲に合わせて自動で縮尺が行われます。
- "A"キーでクリップ内にある全てのキーフレームが表示されます。タイムライン全体を表示させるのに便利です。
この他にも、キーを左クリックすると、いくつかのメニューが表示されます。これは現在選択中のキーから次のキーへ至るまでにどのようなスロープにするかを変更することができます。詳しくは公式リファレンスの後半部分を確認して見てください。
Curvesモードでも「Box Selection」と同じような操作が可能です。とても便利なのでお試しください！
イベントの追加
一通り動きの部分を作ったら、イベント機能も試して見ましょう。
イベントを追加したフレームへ到達時に、対象オブジェクトが持つスクリプトの関数を呼び出す処理が行われるようになります。例えば、以下の画像のように20フレーム目にイベントを登録したとします。
その後、このアニメーションの対象となっているオブジェクトにスクリプトを作成・アタッチしておきます。今回は以下のようなメソッドを作成しました。
先ほど追加したイベントを選択してInspectorのFunction部分を確認すると、「PringLog( int )」が選択できるようになっています。また、選択すると、Parametersという項目が表示され、スクリプトに渡す値を設定できます。
イベントに登録できるメソッドの条件は以下の通りです。
- 引数は1つ or 無し
- 引数の型はfloat,string,int,GameObject,AnimationEventなど
- Update / Start 以外
- このほかにもあれば教えてください<(_ _)>
AnimationEventオブジェクトは、発火したイベントに関する他の情報とともに、float、string、int、およびオブジェクト参照の全てを一度に関数に渡すことが可能になります(その場合、EventDataというメンバ変数に格納されます)。
ちなみに、メソッドのアクセス修飾子は問われません。
イベントも、先ほどのBox Selectionと似たような操作でまとめて移動などの編集を行うことができます。スケーリングとリップル編集は行えません。
おまけ
Animator Component
Unityのゲームオブジェクトをアニメートするために、開発者側がAnimation Viewを使ってアニメーションクリップを作成すると自動的に対象のゲームオブジェクト(もしくは親)に、この「Animator Component」がアタッチされます。項目については後述していますが、こちら(公式のリファレンス)からでも確認してみてください。
| 項目 | 説明 |
|---|---|
| Controller | オブジェクトにアタッチされたアニメーターコントローラー。 |
| Avatar | (AnimatorでMecanimを使ってアニメーションしている場合に)キャラオブジェクト用のアバター。 |
| Apply Root Motion | キャラクターの位置をアニメーション自体から制御するかスクリプト側から制御するかどうか。 |
| Update Mode | Animatorの更新タイミングと、使用するタイムスケールを選択できます。(後述) |
| Culling Mode | 対象のオブジェクトのカリングを制御します。(後述) |
また、これらの設定群の下には対象のオブジェクトにアタッチされているアニメーターコントローラーの情報が表示されています。
Update Mode
Animatorの更新タイミングと、使用するタイムスケールを選択することができます。タイムスケールに関してはこちらの公式リファレンス「Time Manager」を参照してください。
| 項目 | 説明 |
|---|---|
| Normal | アニメーターはUpdateに合わせて同時に更新されます。なので設定したタイムスケールもアニメーターに適用されます。 |
| Animate Physics | これに関してはテラシュールブログさんで詳しく書かれています。【Unity】アニメーションと物理演算を連動させる 5.6以降 |
| Unsaled Time | アニメーターはUpdateに合わせて同時に更新されます。しかし、タイムスケールの設定は無視されます。ゲームが一時停止中にUIを通常速度でアニメーション化する場合に活用できるそうです。 |
Culling Mode
対象のオブジェクトのアニメーションのカリングをどうするか、ここで設定できます。ちなみにカリングとは、ざっくり言うとカメラに映らないようなポリゴンをレンダリングしない最適化のことです。今回の場合は、カメラに対象のオブジェクトが映らない場合アニメーションをさせるかどうかの設定となります。
| 項目 | 説明 |
|---|---|
| Always Animate | 対象のオブジェクトがカメラに映っていなくても常にアニメーションさせます。 |
| Cull Update Transforms | 対象のオブジェクトがカメラに映っていない場合は「リターゲット」、「IK」、「Transform」での動きは無効になります。 |
| Cull Completely | 対象のオブジェクトがカメラに映っていない場合は、アニメーションを完全に無効にします。 |
Spineとの比較
ここまででAnima2Dの機能や操作を紹介してきました。簡単にSpineとの比較を考えて見たいと思います。
| 項目 | Spine | Anima2D |
|---|---|---|
| 料金 | 有料 | 無料 |
| Unityとの親和性 | プラグインあり | そこそこ。今後Unity標準機能として組み込まれることを想定しているので良いかも。 |
| 機能 | 多機能 | FFDは未実装。当分先。 |
| UX | ◎ | ○ |
というようになっています。Unityで開発するならAnima2Dで十分だとは思いますが、それ以外の場合はSpineかなぁという印象です。FFDを使って3Dアニメチックにオブジェクトを動かしたい場合にもSpineや、もしくはLive2Dが良いと思います。
最後に
いかがだったでしょうか。今回紹介できなかった、アバターマスクの作成やアニメーションベイクについてもぼちぼち理解し次第記事にできたらなぁと思います。次回は、今回のおまけということで、Timeline使って女の子を本格的に動かしてみようと思います。それでは良きUnityライフを！