前回の記事では、モグラ叩きゲームのメインシーンの見た目を作ることができましたね。
今回の記事では、モグラを上下に動かすアニメーションを作成していきます。
アニメーションが加わるとさらに、ゲーム感が増して楽しくなってきますよ。
アニメーションの特徴や基本的な使い方もこの記事を通じて、学習してみてください。
Table of Contents
筆者はテックアカデミー でUnityを勉強しました！
この記事をご覧になっている方の中には、プログラミング初心者でUnityがまだまだわからないという方が多いのではないでしょうか？
筆者は、元々ITとは無縁の仕事をしており、Unityどころかプログラミング自体が初めてでした。
独学で頑張っていましたが、些細なことでつまづいてしまい…。それが、積み重なり疲れ切ってしまいました。
そして、悩んだ末にプログラミングスクール「テックアカデミー 」を受講することにしました。
テックアカデミー で、Unityの基礎を習得できたので、現在ゲームの作り方やUnityに関する情報を発信できています。
もし、「テックアカデミー って実際どうなんだろう？」と気になっている方がいれば、ぜひこちらの記事もご覧になってください。
筆者がプログラミングスクール「テックアカデミー 」を受講するに至った経緯や受講した感想を詳しく紹介しています。
そもそも、Unityのアニメーションでどんなことができる？
Unityでは、誰でもキャラクターに思い通りのアニメーションをつけることができます。Unityのアニメーション機能でできることは、以下の３つです。
- ゲームオブジェクトの位置や大きさなどの値を徐々に変更させるパラメータアニメーション
- スプライト画像を切り替えてパラパラ漫画のようなアニメーション（例：走るアニメーション）
- ３Dモデルを関節部分で動かして、ジャンプしたり走ったりするアニメーション
この記事で、使うアニメーションは１番目に当たります。ゲームオブジェクトの位置を徐々に変更するアニメーションを使用しますよ。
アニメーションについて、詳しく理解したい方はこちらの記事でも紹介しています。基本的な操作は、この記事を読めば把握できるはずなので、ぜひ参考にしてみてください。
Unityのアニメーションを作る手順①モグラのゲームオブジェクトを作る
ここからは、アニメーションを作る手順を6つの見出しに分けて紹介していきます。まず、アニメーションをつけるモグラのゲームオブジェクトを作成しましょう。
ヒエラルキーから、「Create」→「UI」→「Image」でゲームオブジェクトを生成。その後、「Rename」で「Mogura」に変更しましょう。
モグラのオブジェクトは、穴と草の間に置きます。ヒエラルキーにある「Mogura」を、「Area1」の「Hole」と「Glass」の間に移動させてください。
この順番が、実はとても大切。Unityの仕組み上、上にあるオブジェクトから、シーンビューとゲームビューでは奥の方に配置されているのです。
Unityのアニメーションを作る手順②モグラの位置と大きさを微調整
次に、モグラの大きさと位置を微調整しましょう。Unityの参考書の多くには、インスペクターから数値を入力して、設定することがあります。
しかし、それは参考書だからであって、個人でゲームをなんとか作っていこうとすれば、細かい大きさまで設定する必要はありません。ゲームとして成立していれば細かい大きさと位置は、多少見逃しても大丈夫です。
そのため、シーンビューからモグラの大きさと位置を微調整してください。
シーンビューにすると、左上にいろんなアイコンがあります。上画像で言うと、左から2番目を押すと、マウス操作でゲームオブジェクトの位置を微調整できます。
また、右から3番目であれば、ゲームオブジェクトの大きさを変えることが可能。このように、感覚的にマウス操作でちょうどよく設定できます。
今回は、モグラを適度な大きさまで小さくしてから、草の下からはみ出さない程度に位置を下げておきましょう。
Unityのアニメーションを作る手順③アニメーションウィンドウを開く
次に、アニメーションを実際に作っていきますが、そのためのウィンドウを開いておく必要があります。
Unityエディターの上の方に、「Window」のタブがあるので、ここをクリック。そして、「Animation」を選択すると、アニメーションウィンドウが開きます。
もし開かない場合は、下の画像のように、シーンビューのタブをコントロールキーを押しながら、右クリック。
すると、「Add Tab」→「Animation」を選択すると、アニメーションウィンドウが作られます。
続いて、タブの位置を下の方に移動させておきましょう。実際のオブジェクトのアニメーションの動きをリアルタイムで確認するためにも、シーンビューとアニメーションビューは別々にしておきました。
上記の画像のように、アニメーションタブは、タブをクリックしたまま移動させることができるので、プロジェクトビューの隣に移動させておいてください。
Unityのアニメーションを作る手順④アニメーターを作成する
次に、アニメーターとアニメータークリップを作成しましょう。
下の画像のように、ヒエラルキーでアニメーションを作りたいオブジェクトを選択した状態することで、アニメーションウィンドウで「Create」ボタンが押せるようになります。
「Create」ボタンを押したら、アニメーションの名前を付けて保存します。以下のように、「float@mogura」と名前をつけておきましょう。
前もってプロジェクトビューに「Animation」という名前のフォルダを作り、そこに保存しておけば、整理しやすいでしょう。
Unityでアニメーションを作る手順⑤プロパティを追加する
次に、プロパティを追加します。「Add Property」を押すと、いろんな項目が出てきますが、これらの項目をプロパティと呼び、ポジション（位置）やスケール（大きさ）を時間の経過に応じて、変化させることができます。
今回は、モグラの位置を変更したいので、以下の画像のように、「Add Property」→「Rect Transform」→「Position(Z)」を押します。
すると、下記の画像のように、アニメーションクリップに、位置に関するプロパティが生成されました。
Unityでアニメーションを作る手順⑥キーフレームを調整する
次に、キーフレームを調整します。キーフレームとは、何秒後に、どんな動きをするのかを値を入力することで調整するものです。
今回のモグラのアニメーションは、3.3秒の中で、「0秒〜1.3秒で上昇、1.3秒〜2.3秒で停止、2.3秒〜3.3秒で下降」という流れで繰り返し再生されるように作っていきます。
まずは、横の時間軸（タイムライン）を上の画像のように、広くしましょう。マウスのスクロール機能で縮小と拡大ができます。
次に、キーフレームを追加します。まず、上の画像にあるように、①レコーディングボタンを押しましょう。すると、タイムラインが赤くなります。②白い縦線をつまんで、1:30(1.3秒)の位置に移動。
そこで、インスペクターを見ると、ポジションの位置も赤くなっていることがわかりますね。そこに、③PosYを「-20」（※画像では「20」tとなっていますが、間違いです）と入力してください。すると、キーフレームが生成されます。
なお、PosYの数値は「-20」としましたが、実際は、再生ボタンを押して実際のオブジェクトの動きを確認しながら進めることになります。
他のキーフレームも位置を調整して、生成します。左から3番目のキーフレームは、2:30でPosYを−20に設定。4番目のキーフレームは、3:30 でPosYを-67にしましょう。
ついでに、1番目のキーフレームの位置も、4番目のキーフレームのPosYと同じ数値になっているかを確認してください。
最終的に、以下のような挙動になっていれば完成です。アニメーションクリップとシーンビューを照らし合わせながら、適切なPosYの数値を決定してください。
まとめ
今回の記事では、Unityでモグラを上下に動かすアニメーションの作り方について説明しました。アニメーションが加わってくると、だんだんゲームっぽくなってきて嬉しくなりますよね。
アニメーション作成は、慣れたらとても簡単に大体のアニメーションを作ることができます。ただし、初心者だと使い方を理解するのに、少々時間がかかるので、挫折しやすいポイントなのではないのではないかと感じます。
「アニメーションの作り方がいまいちわかりにくかったな…」と感じた方は、別の記事でアニメーションの使い方について詳しく紹介した記事もありますので、そちらもご覧になってください。
おつると申します。２児の息子の専業主婦です。長男は、ややADHD気質がありますが、毎日子育て奮闘中。夫が、発達支援の仕事をしていたこともあり、いつも勉強になります。日々感じたことを子育てで役に立つノウハウとして記事でアウトプットしています。デザインが得意！ブログのサムネイル、アイコンなど、すべて手作りです！よろしくお願いします！
