「Unityのアニメーションの使い方がいまいちわからない」「なにがどう関係しているのか、そもそもわからない…」という方向けに書かれています。
Unityには、アニメーションというキャラクターを走らせたり、ジャンプさせたりする便利な機能があります。
Table of Contents
筆者はテックアカデミー でUnityを勉強しました！
この記事をご覧になっている方の中には、プログラミング初心者でUnityがまだまだわからないという方が多いのではないでしょうか？
筆者は、元々ITとは無縁の仕事をしており、Unityどころかプログラミング自体が初めてでした。
独学で頑張っていましたが、些細なことでつまづいてしまい…。それが、積み重なり疲れ切ってしまいました。
そして、悩んだ末にプログラミングスクール「テックアカデミー 」を受講することにしました。
テックアカデミー で、Unityの基礎を習得できたので、現在ゲームの作り方やUnityに関する情報を発信できています。
もし、「テックアカデミー って実際どうなんだろう？」と気になっている方がいれば、こちらの記事も参考にしてみてください。
筆者がプログラミングスクール「テックアカデミー 」を受講するに至った経緯や、受講した感想を詳しく紹介しています。
アニメーションの3つの機能について
Unityのアニメーションには、プログラミングを使わずに、キャラクターの大きさや色を変えたりなど、様々な変化を与えることができます。
アニメーションでできることは、主に以下の3つが挙げられます。
- キャラクターの位置や大きさなどの値を徐々に変更させるパラメータアニメーション
- 画像を切り替えてパラパラ漫画のようなアニメーション（例：走るアニメーション）
- キャラクターの関節部分を動かして、ジャンプしたり走ったりするアニメーション
Unityでは、キャラクターに動きをつけることができます。
次の見出しでは、これらのアニメーションを編集する管理ウィンドウが2つあるので紹介します。
アニメーションクリップとアニメーションコントローラーの違い
Unity上でアニメーションを作成するときには、アニメーションに名前をつけます。
その時に、「アニメーションクリップ」と「アニメーションコントローラー」の2つのファイルが同時に作成されます。
アニメーションクリップを管理するウィンドウをアニメーションウィンドウ。
アニメーションコントローラーを管理するウィンドウをアニメーターウィンドウと呼びます。
アニメーションクリップについて
アニメーションクリップとは、アニメーションのデータが記録されたものです。
アニメーションのデータとは、キャラクターの大きさや色など、アニメーションを形作る要素とも言いかえることができます。
基本的には、このアニメーションクリップを使って、キャラクターに変化を加えていきます。
ちなみに、アニメーションクリップのフォルダ名には「＠」が入れることが多いです。
この名前の付け方は、あなた自身が理解できる名前であれば何でも大丈夫ですよ。
なお、写真のアニメーションクリップの＠の前には、動きの名前（例：ふわふわ浮かぶ→float）。
＠の後ろには、キャラクターの名前（例：モグラ→mogura）としています。
アニメーションコントローラーについて
アニメーションコントローラーとは、複数のアニメーションクリップを管理し、タイミングに応じて切り替えるものです。
上の写真で言うと、赤い線で囲われた部分がアニメーションコントローラーに該当します。
そして、青い線で囲われた部分が、アニメーションクリップに該当します。
アニメーションクリップとアニメーションコントローラーの関係を理解するために、下記のキツネのアニメーションを見てください。
何もしていない時のキツネは、上下に軽く動くアニメーションクリップ（オレンジ色）が再生されています。
そして、左右に動く時は走るアニメーションクリップ（上の灰色）、上に飛ぶ時ジャンプするアニメーションクリップ（下の灰色）が使われています。
左から右へ青いゲージみたいなものが移動しているアニメーションクリップが、その時点で再生されているアニメーションクリップです。
つまり、アニメーションクリップとは、パラパラ漫画の一コマ（オレンジ色や灰色の部分）で、アニメーションコントローラーは、一コマ一コマを繋げて、キャラクターに動きに変化をつけることができます。
このように、言葉は似ていますがアニメーションクリップとアニメーションコントローラーの役割は異なりますので、注意して覚えておきましょう。
【さっそく実践！】Unityでアニメーションを作ってみよう！
アニメーションの使い方を覚えるには、実際にアニメーションを作るのが早いです。
今回は、以下の動画のように大きさが変わるアニメーションと、左右に移動するアニメーションを作成してみましょう。
いらすとやさんから、かわいい牛とくもの画像をダウンロードしてきました。使う素材はこの2つだけです。
下記のリンクからいらすとやさんにアクセスして、名前を付けて保存をしておいてください。
手順①素材をゲームビューに反映
ここから、アニメーションの作成に入りますよ！最後まで、頑張りましょう！
まず、下記の画像のように、デスクトップに保存した画像をプロジェクトへドラック＆ドロップしましょう。
次に、ヒエラルキーからCreate→UI→Imageを選択すると、シーンビューに白い正方形が登場します。
その後、画像を下記のように、アタッチしてSet Native Sizeを押して大きくしましょう。
牛の画像を貼り付けることができたら、同じ要領で、Create→UI→Imageでくもの画像をImageにアタッチします。
すると、下記のように、牛とくもがゲームビューに（シーンビューにも）反映されています。
ヒエラルキーのImageの名前は、それぞれ「Kumo」と「Ushi」に変更しておいてください。
なお、牛やくもの位置や大きさを、上の画像のように調整するにはどうしたらよいのかは、シーンビューの操作の方法を知っている必要があります。
Unityエディターの使い方については、こちらの記事を参考にして勉強してみてください。
手順②くものアニメーションクリップとアニメーターコントローラーを作成
次は、アニメーションクリップとアニメーターコントローラーを作成します。
ヒエラルキーの「Kumo」を選択した状態で、Windows→Animation→Animationを選択しましょう。
すると、下記のようにアニメーションクリップが登場しますので、Create→名前を付けて保存します。
今回は、ふわふわ浮かぶ雲ということで、「float@kumo」と名付けました。
名前を付けて保存すると、アニメーションクリップとアニメーターコントローラーが同時に作成されているので、プロジェクトから確認してみましょう。
上の写真では、アニメーションクリップを操作するためのウィンドウは、プロジェクトの右隣のタブに作成されています。
しかし、アニメーションコントローラーの方はないため、自分で表示させる必要があります。
上の左写真のように、Window→Animation→Animatorと選択しましょう。
上の右写真のようにアニメーターコントローラーが表示されるはずです。
手順③アニメーションクリップで、くもの大きさと色を変える
まずは、くものアニメーションから作成していきます。
編集しやすいように、アニメーションクリップとシーンビューが見えるように、レイアウトを変更しておきましょう。
そして、くものアニメーションを編集するのは、アニメーションクリップからです。
編集する前に、下画像のプロパティリスト、ライムライン、キーフレーム、現在時刻を示すライン、レコードボタン、再生ボタンを見てください。
主に、これらの機能を駆使することで、アニメーションを作ることができます。
くもの大きさを変える
Add Property→Scaleを選択します。すると、ｘ、y、ｚの大きさの方向を表すプロパティ（要素）がでてきます。
次に、下の動画のようにタイムラインを変更して広くします。
タイムラインは、マウスのスクロールするボタンで簡単に変更できますよ。
そして、レコードボタンを押してから、白いラインを調整し、変化を加えたい時間でインスペクターからScaleの値を変更します。
すると、その時間にキーフレームが作成されます。
くもの色を変える
次に、くもを徐々に不透明になるように、色を変更していきます。
今度は、Add Property→Colorを選択します。
くもの色を変える際は、タイムライン0秒で黒系のColorを「255」にし、タイムライン1秒でColorを「0」にすれば、徐々に消えていくくものアニメーションが完成します。
手順④アニメーションクリップで、牛を移動させる
今度は、牛のアニメーションを作成しましょう。
くものアニメーションと同様に、まずヒエラルキーからUshiを選択した状態で、アニメーションウィンドウからアニメーションクリップを作ります。
名前は、下写真のように、「move@ushi」と名付けました。
牛を左右に移動させる
次に、Add Property→Anchored Positionを選択します。
レコードボタンを押してから、白い線を動かします。
2秒経過したら、牛を左に移動させたいので、UshiのインスペクターのPosXを400に変更します。
すると、下の動画のように、0秒から2秒までの間に牛が左に移動するようになりました。
なお、4秒のところにもキーフレームがありますよね。
これは、0秒のキーフレームをダブルクリックすると生成されます。
生成されたキーフレームを4秒のところまで移動させておきましょう。
牛を反転させて、戻ってくるようにする
上の動画のままだと、牛が平行移動しているだけですよね。
左まで移動したら、反転して戻ってくるようにアニメーションのプロパティを追加しましょう。
反転するために、追加するプロパティはRotationです。
Add Property→Rotationを選択しましょう。
上の写真のように、アニメーションクリップにRotation（回転の要素）が加わりました。
そして、2つのキーフレームを追加する必要があります。
2秒のところに、RotationのX＝0、Y=0。
2.1秒くらいのところに、RotationのX＝-180、Y=-180の数値に変更します。
さらに、4秒のところにあるキーフレームのRotationのX＝-180、Y=-180の数値に変更しましょう。
では、下の動画のように、牛が2秒地点で反転するようなアニメーションができましたか？
動画の5秒あたりで牛に変な回転が見られますよね。
これは、RotationのX＝-180、Y=-180のキーフレームの位置が、2秒のキーフレームと離れているからです。
この2つのキーフレームの距離もギリギリまで小さくしましょう。
すると、一瞬で牛が反転して、折り返し戻ってくる牛のアニメーションが完成します。
おまけ：プログラムでアニメーションを動かす場合
プログラムを組んで、なにかのアニメーションを発生させるようにしてみましょう！
目標は、下の動画のように、スペースキーを押したら、牛がジャンプするアニメーションが起こるようにすることです。
牛がジャンプするアニメーションを作る
牛が左右に移動するアニメーションに加え、ジャンプするアニメーションを作成します。
新しくアニメーションを作成する時は、move@ushiのとなりの小さなボタンを押します。
すると、 Create New Clipというボタンがあるため、そこから「jump@ushi」と名前をつけて新しいアニメーションクリップを作成できます。
アニメーションクリップにプロパティとキーフレームを加える
牛をジャンプさせるので、位置に関するプロパティであるPositionを追加します。
それから、赤丸のレコードボタンを押してから、キーフレームを画像のように追加してください。
画像では、1秒と1.2秒のところにキーフレームを作成しています。そこで、Y軸の数値を現在の位置よりも高く変更しましょう。
そして、1.5秒で0秒のときと同じY軸の数値にしています。
こうすることで、上下に動く牛のアニメーションクリップが完成します。
アニメーションウィンドウでパラメータを作る
アニメーターウィンドウでは、Boolを使って、アニメーションクリップを切り替えるための指標を作ります。
上の画像のように、Boolを選択した状態で2つの指標を作ってください。
名前は、buttonBoolとbuttonBool２です。
アニメーションの遷移を設定する
ここからは、アニメーションウィンドウを駆使して、アニメーションの遷移を細かく設定していきます。
AnyState→move@ushiへTransitionを引く
まず、牛のアニメーションウィンドウを開いておきます。
アニメーションを変えるための線をTransition（トランジッション）といいます。これは、右クリックでMake Transitonで作成することが可能です。
Any Stateからmove@ushiへTransitionを引っ張ります。
そして、このTransitionはどんな時に発動させるのか、その設定を右画面のインスペクターから設定します。
conditionのプラスボタンを押してから、先ほど作った指標のbuttonBoolを選択して、falseを選択しましょう。
この意味は、buttonBoolという指標がfalse判定になったら、move@ushiが発動して牛が左右に動くということです。
Any State→jump@ushiへTransitionを引く
今度は、jump@ushiをどんな時に発動させるのかを設定します。
Any Stateからjump@ushiにTransitonを引きます。そして、インスペクターを見ましょう。
まず、Preview source stateというjump@ushiの前のstate（状態）を設定します。
ジャンプする前は、左右に移動するアニメーションなので、move@ushiにしておきます。
次に、jump@ushiとmove@ushiのアニメーションを間隔をゼロにするように、マウス操作でフレームを調整しましょう。
そして、buttonBool2を選択して、trueにします。この意味は、buttonBool2という指標がtrue判定になったら、jump@ushiが発動して牛がジャンプするということです。
jump@ushi→move@ushiへTransitionを引く
次に、jump@ushiからmove@ushiへTransitionを引きます。
ここで、Has Exit Timeに必ずチェックを入れてください。
これを入れないと、jump@ushiの再生が終わる前にmove＠ushiが再生されてしまい、牛がジャンプできなくなります。
そして、buttonBool2を選択して、falseにします。
この意味は、buttonBool2という指標がfalse判定になったら、move@ushiが発動して牛が左右に動き出すということです。
jump@ushi→ExitへTransitionを引く
jump@ushiからtransitonをExit（アニメーションの終了）へ引きます。
そして、この遷移はbuttonBoolがfalseになった時に起こるように設定しましょう。
いよいよプログラムを書く
ここから、アニメーションウィンドウで設定したことをプログラムで実行していきます。
まずは、UshiManagerというC#のスクリプトを作成しましょう。
作成したら、ヒエラルキーのUshiにドラック＆ドロップして貼り付けます。すると、インスペクターにこのスクリプトが反映されていることがわかるでしょう。
次に、UshiManagerをダブルクリックして、スクリプトを開いてください。
下記のように、コードをタイピングするか、まるごとコピペしましょう。
ちなみに、赤文字が今回書いたコードです。それ以外は、元からVisualStudioに書いてあるものです。
using System.Collections;
using System.Collections.Generic;
using UnityEngine;
public class UshiManager : MonoBehaviour
{
private Animator animator; //Animatorコンポーネントを取得するために、Animatorという変数を用意する
// Start is called before the first frame update
void Start()//Start関数には、ゲーム起動時だけやりたいことを書く
{
animator = GetComponent<Animator>(); //ヒエラルキーのUshiが持つAnimatorコンポーネントを取得する
}
// Update is called once per frame
void Update()//Update関数には、ゲーム起動時からずっとやり続けたい処理を書く
{
if (Input.GetKey(KeyCode.Space))//スペースを押して離した時＝ジャンプする
{
animator.SetBool("buttonBool", false); //buttonBoolがfalseになる＝move@ushiを止める
animator.SetBool("buttonBool2", true); //buttonBool２がtrueになる＝jump@ushiを動かす
}
else//スペースを押していない時＝左右に移動している
{
animator.SetBool("buttonBool", true);//buttonBoolがtrueになる＝move@ushiが再生する
animator.SetBool("buttonBool2", false);//buttonBool２がfalseになる＝jump@ushiが止まる
}
}
}
コードにある「//」はコメントアウト機能と呼びます。
//を含めて右に書いてある日本語は、コードの意味を表しており、私が独自で書きました。
これはプログラマーが後からスクリプトを見て、どういう意図でこのコードを書いたのかをわかりやすくメモするためのものです。
長くなりましたが、ここまでがアニメーションの一連の機能を紹介した内容となります。
まとめ
今回の記事では、Unityのアニメーションの基本的な使い方と実際の作り方について詳しく紹介しました。
プログラミングを使わなくても、それなりのアニメーションを再現できるのがUnityの良いところですよね。
アニメーションに関するウィンドウは、非常に字が小さくて、細かい操作が必要なので慣れるまでに時間がかかるかもしれません。
少しずつ、練習してアニメーションの使い方を覚えていきましょう！
おつると申します。２児の息子の専業主婦です。長男は、ややADHD気質がありますが、毎日子育て奮闘中。夫が、発達支援の仕事をしていたこともあり、いつも勉強になります。日々感じたことを子育てで役に立つノウハウとして記事でアウトプットしています。デザインが得意！ブログのサムネイル、アイコンなど、すべて手作りです！よろしくお願いします！
アニメーションの機能や操作方法を、実際にアニメーションを作る手順を紹介しながら説明してきますので、ぜひ最後まで読み進めてくださいね。