学んでいる初心者がぶち当たる壁のひとつに「アニメーションって何?」があります。アニメーションの基礎をきっちりと説明することで、自分の入るべき初心者向けの入り口を知り、スムーズに学んでいけるのではないか?そう考えてこの説明文を作成してみました。Unityの初心者、アニメーションをこれから学ぼうとしている方にお勧めします。アニメーション」と言われたら、まずは以下のようなものを想像しませんか?確かにこれは「Unityのアニメーション」としては正しいです。これを題材に、初心者がアニメーションを理解するには無理があります。使うだけならいいのですが「理解」するには適さない、初心者には高度すぎるサンプルなんです。料理の初心者は最初に「ゆで玉子」など簡単なものを作りますよね。「活オマールエビのテルミドール」などを作り出す初心者は稀なわけです。何事にも段階があり、難易度の差があり、初心者は基本的なものから学ぶ、のが理にかなったやりかたです。初心者にお勧めのアニメーションは、例えば以下のような地味なものです。この記事ではこのレベルの題材を対象にアニメーションの解説をしていきます。記事を参考に、三色のキューブが並んだシーンを用意してください。いう名前に変更します。アニメーションの設定画面がないと思うので、上の「シーン」タブ上で右クリックし「アニメーション」タブを追加してください。アニメーションを選択すると、以下のような表示になるはず。赤枠の部分がこれからよく使用するアニメーションの設定画面です。オブジェクトを選択し、右側のインスペクターにオブジェクトの設定内容を表示します。アニメーションをドラッグ&ドロップで追加してください。すると以下の赤枠のようにインスペクターに追加されるはず。オブジェクトに設定された、状態になりました。した際に、色を設定したマテリアルをオブジェクトに設定した時と同じですね。アニメーションは作成しただけではダメで、対象のオブジェクトがないと設定できません。対象の形状によって可能なアニメーションも異なりそうですよね。いままさに設定がされたので!アニメーションの設定画面にも変化が起こります。再生ボタンなどが有効化され、そしてなにより重要な「プロパティーを追加」というボタンが有効化されています。最初のアニメーションを設定する今の状況を整理しましょう。オブジェクトに設定しました。アニメーションの中身は空です。よし、今度は空のアニメーションに内容を定義していきましょう。アニメーション設定の画面で「プロパティーを追加」ボタンを押して、「拡大/縮小」を追加してみます。右にある+のアイコンで追加です。追加すると以下のような表示になります。この表示を見て、ピン!ときた方はこの先は楽に理解できるでしょう。音楽ソフトや、映像編集ソフトなどを使ったことがあれば、これと似た「タイムライン」表示を操作した経験があるはずです。見て、ガンガン進めていってokです。試しに再生ボタンを押してみると、中央のタイムラインのところで白線が右に動き、それにあわせて右のインスペクターの拡大/縮小の欄が青く光るのがわかります。アニメーションで時間が経過すると、この部分が変化するよ、と教えてくれています。アニメーション動作の追加です。部分をクリックして白い線を移動しましょう。この位置は開始から0分30秒を示しています。Key」を選択します。するとその位置にキーフレームが追加され、四角いアイコンが表示されるようになります。今度はこのキーフレームにおける値の変化を設定するため、下のタブで「カーブ」モードに変更します。位置にある小さな丸いアイコンを、上にぐっとドラッグして持ち上げます。あたりまで持ち上げています。これで設定は終わりです。持ち上げたとなります。値が増減するのを確認できます。x軸方向に0.5秒ほどぐぃーんと伸びて、次の0.5秒で元に戻ります。これが今回設定したアニメーションの動作なのです。実行すると、伸びるアニメーションは1回で終了します。上の画像はアニメーションGIF化しているので、それが繰り返し表示されています。アニメーターについて最初のアニメーション作成は如何だったでしょうか?地味なサンプルではありますが、アニメーションの仕組みを理解するのには適した対象だとおもいます。時間とともにパラメーターを変化させる仕組みなんですよね。オブジェクトを選択した時、インスペクターのここに表示されているものです。この自動生成されたオブジェクトが「アニメーター」もしくは「アニメーションコントローラー」と呼ばれるものです。選択してインスペクターを見てもよくわからないのですが...「開く」ボタンを押すと、「アニメーター」の設定画面が開きます。さきほど操作していた「アニメーション」とは違うので注意してください。これが自動生成された理由なのですが、以下になります。いうアニメーターが自動生成されていた、というわけです。アニメーターの仕組みさて、アニメーター(アニメーションコントローラー)ですが、名前のとおりアニメーションをコントロールするもの、です。複数のアニメーションをまとめて、実行順序などをコントロールしてくれます。アニメーターをよく見てみましょう。Animation」に矢印が設定されているのがわかります。この矢印を「遷移」と呼ぶのですが、まあ、アニメーションの実行順序を指定するものです。最初から用意されている3つのボックスにはそれぞれ意味があって、まずは緑の「Entry」はこのコントローラーの実行の開始点です。それに対して赤の「Exit」が終了点ですね。「Entry」から始まった矢印、つまり遷移が、最後の「Exit」までいけばこのコントローラーの管理しているアニメーションは終わり、ってことですね。State」は特に遷移先のない場合に実行される、いわゆるデフォルト処理的なボックスのようです。アニメーションが1回実行されます。Animation」へループする遷移を追加してみましょう。Animation」ボックスをクリックして遷移を作成します。Animation」ボックスの下に小さな白い矢印で遷移追加されその遷移のインスペクターは以下のようになります。アニメーションを遷移させると、前のアニメーションの終了を待つのではなくて、クロスフェードのように少し重なった状態があるのがわかりますね。この状態でシーンを再生してみましょう。連続でアニメーションするようになりましたが、重なっているせいか完全に戻る前に次のアニメーションが始まってしまいますね。アニメーターの遷移を変更してみるさきほどのアニメーターの遷移を調節して、アニメーションの間隔をちょっとあけてみます。以下の赤枠の値を修正してみました。この状態でシーンを再生してみましょう。よっしゃ、うまくいきました!2018年5月23日追記この記事では遷移の先を同じアニメーションにすることでアニメーションをループさせていますが、アニメーションのインスペクターにはループの設定がありますので、一般的には、こちらを使うのが良さそうです。ひとつアニメーションを追加してみるさて最後は、これまでの拡張です。アニメーションをもうひとつ追加してみましょう。アニメーションと同じ作り方で、x軸のかわりにy軸を伸ばしてみます。キーでオブジェクトの複製を実施して、名前とパラメーター設定を変更するのも手っ取り早いです。アニメーター上に追加して、それぞれのアニメーション間にさきほどと同様の遷移を設定します。この状態でシーンを再生すると、どうなるでしょうか?遷移で設定したとおり、二つのアニメーションが順に実行されましたね。アニメーションの根っこの部分を説明したい、とできる限りシンプルなサンプルを用意して記事を書いてみましたが如何でしょうか?どんな複雑なアニメーションも、結局は何かのパラメーターを時間で操作しているのです。それを理解して、そして、これだけ簡単なサンプルなら自分でもいろいろ試せそうだぞ?などと感じていただければ嬉しいです。この先、親子関係を使ったアニメーションなど幾つかネタはありますが、かなーり長くなってきたので、今回はこれまでとします。