【Unity連載】アニメーションの基礎


1.はじめに


ゲーム内のオブジェクトは時間経過とともにその場所や大きさ、角度を変化させていくものですが、これをプログラミングで実現するのは中々骨の折れる作業です。
ですが、Unityではアニメーションという機能を使うことで、この『時間経過でパラメータを変化させていく』処理を直感的に設定することが可能となります。

本記事では、単純にオブジェクトを一回転させるアニメーションを例にとり、アニメーション機能の使い方を概観していこうと思います。

2.アニメーションの作成


アニメーションはゲームオブジェクトに付随する機能です。
そのため、はじめにアニメーションを適用するゲームオブジェクトを用意してあげる必要があります。
今回はデフォルトのCubeオブジェクトを使用しましょう。

このCubeオブジェクトをZ軸で回転させていきたいと思います。
それでは早速アニメーションを作成していきましょう。

プロジェクトビューで右クリックして、「Create」→「Animation」でファイルを作成します。
名前は適当に付けておいてください(画像では『Rotation Animation』という名前にしています)。
ちなみに、ここで作成したファイルをアニメーションクリップと呼びます。是非覚えてみて下さい。

さて、続いてはアニメーションを設定するビューを表示します。
どこに表示しても良いのですが、シーンビューとは別のウィンドウにタブを追加すると操作しやすいのでお勧めです。
という訳で、プロジェクトビューと同じウィンドウにアニメーションビューを追加します。
プロジェクトビューのタブを右クリックして「Add Tab」→「Animation」でアニメーションビューを追加します。

すると以下のようなビューが表示されます。

続いて、一旦ウィンドウをプロジェクトビューに戻します。
ヒエラルキービューでCubeを選択して、Cubeのインスペクタービューに先ほど作成したアニメーションクリップをドラッグ&ドロップします。
すると、画面上でいくつか変化が生じたのが分かったでしょうか。
まず一つ目に、インスペクタービューにAnimatorというコンポーネントが追加されています。
そして二つ目、プロジェクトビューに『Cube』という名前のファイルが追加されています。
これはアニメーターコントローラーと呼ばれるものです(詳しくは次の記事で解説します)。
一つ目の変化、AnimatorコンポーネントのController欄にセットされているCubeはこのアニメーターコントローラーになります。
と今話しても難しいと思いますので、名前だけでも覚えてあげて下さい。

これにて、「空の」アニメーションの作成・適用が完了しました。
続いて、アニメーションの中身を設定していきます。
すなわち『時間経過でパラメータを変化させていく』処理です。

3.アニメーションの設定


アニメーションビューを開き、「Add Property」→「Transform」→「Rotation」右側の十ボタンをクリックします。
「Cube:Rotation」という項目が追加されます。
展開するとRotation.x、Rotation.y、Rotation.zという項目が表示されます。
一見しても操作方法が良くわからないこの画面も、実際に使用してみることで意味が分かってきます。
ということで、実際に画面をいじってみましょう。
0:15の目盛りの辺りをクリックしてみて下さい。白線がその位置に移動するかと思います。
(下図赤枠で囲った欄に直接15と入力してもOKです。)
Rotation.z左側の「-」→「Add Key」をクリックして下さい。
白線上に青い菱形(キー)がマークされます。
この状態で、Rotation.zに「180」と入力します。
同様に、0:30の位置でも「180」、1:00の位置でも「360」と入力します。
さて、ここまで設定したら一度アニメーションを再生してみましょう。
画面左上▶のボタンがアニメーションの再生ボタンです。
GIF
動いていますね。もう一度▶ボタンを押すことで停止します。
いかがでしょうか。勘の良い人はなんとなく何を設定したのかわかったかも知れませんね。
では設定した内容について、解説していきましょう。
⓪目盛り0:00でRotation.zの値を0にした(デフォルト)
①目盛り0:15でRotation.zの値を180にした
②目盛り0:30でRotation.zの値を180にした
①目盛り1:00でRotation.zの値を360にした
上記の①~③が我々が今回行った操作になります。
まずは目盛りについて。
これは経過時間を表しています。単位はフレームで、デフォルトでは一秒間を60分割したものになっています。
次にRotation.zの値について。これはZ軸の回転角を表しています。
すなわち上記の設定は言い換えると以下のようになります。
⓪経過時間0/60秒の時点ではZ軸の回転角は0度
①経過時間15/60秒の時点ではZ軸の回転角は180度
②経過時間30/60秒の時点ではZ軸の回転角は180度
③経過時間60/60秒の時点ではZ軸の回転角は360度
そのため、アニメーションを再生すると、
⓪~①:180度回転
①~②:(180度回転した状態で)静止
②~③:さらに180度回転
という動作になるのでした。

4.グラフを使ったアニメーションの設定


上記の方法でもかなり直感的にアニメーションの設定が可能ですが、さらに視覚的に操作する画面も提供されていますので確認してみましょう。
アニメーションビュー左下の「Curves」をクリックしましょう。
謎の画面に切り替わります。

この状態では何が何だかよくわからないので、画面をズーム&サイドバーを上にずらしてみましょう。
(Shiftを押しながらスクロールすると縦方向に、Ctrlを押しながらスクロールすると横方向にズームできます。)
この画面では経過時間によるパラメータの変化がグラフ(ベジェ曲線)で表現されています。
菱形のマーク(キー)をドラッグすることで設定値を変化させることができますし、線上をダブルクリックすることで新たにキーをマークすることができます。

3.で説明した方法と4.で説明した方法、どちらを使って設定をしても結果は変わりません。
自分の好みに合った方法を選べば良いでしょう。

  • このエントリーをはてなブックマークに追加

PAGE TOP