※この記事は連載2回目になります!第1回の開発記はこちら!
![](https://i2.wp.com/eringilog.com/wp-content/uploads/2018/10/2ikfkWhLNKGMQMq1539407229_1539407384.png?resize=160%2C90&ssl=1)
どうもみなさんこんばんは。エリンギです。
前回でランゲームのベースを作ったのはいいんだけど、いきなりキャラクターが走り出すのは突然感を感じませんでしたか?
え?感じない?
ぼくはめちゃくちゃ気になったんで、今日はカウントダウンアニメーションを作ります!
ちなみに今回作るものがこちらです。
そうUnity、アニメーションも簡単に作れちゃうんですよ〜!(比較的)
アニメーションの基本はこの記事が参考になりますね!
![](https://i1.wp.com/eringilog.com/wp-content/uploads/cocoon-resources/blog-card-cache/6ba1807ffc39d0ba1522e489885d7655.jpg?resize=160%2C90&ssl=1)
それでは行きましょう!
Unityアニメーションの表示は基本的にcanvasの中で行う
まず画面に数字を表示するところから行きます!
画面上に表示されるアイコンやボタン、数字などはcanvasというものに追加して行きます!
画板にイラストを貼っていくイメージですね。ぼくの現在状況はこんな感じ。
すでにHPやボタンなどがペタペタ貼ってありますね。
ここに今回のカウントダウン用の数字オブジェクトをテキストで作りセットします。
数字はTextMeshProというアセットを使ってちょっとオシャレにしてます。
テキストにこだわりたい人には必須のアセットですね!
TextMeshProのダウンロードはこちら
![](https://i0.wp.com/eringilog.com/wp-content/uploads/cocoon-resources/blog-card-cache/9f878310caa75a43d439e4224388644b.jpg?resize=160%2C90&ssl=1)
使い方はこちらが参考になります。
![](https://i2.wp.com/qiita-user-contents.imgix.net/https%3A%2F%2Fcdn.qiita.com%2Fassets%2Fpublic%2Farticle-ogp-background-412672c5f0600ab9a64263b751f1bc81.png?resize=160%2C90&ssl=1)
オブジェクトの親子関係を作りアニメーションをまとめて管理する
さあて!
まずはプロジェクトビューからcreateを押し、そしてanimationを選択しましょう。
そして、作ったanimetionをヒエラルキー上に追加します。
今回動かしたい数字1、2、3をテキストオブジェクトとして作っておき、それぞれCountDown1〜3と名付けました。
CountDown1〜3を空のオブジェクト(ここではファイルみたいなもの)であるCountDownsに入れ、親子関係を作ります。
animetionをドラッグし、親であるCountDownsに追加します!
そうすると、勝手にアニメーションコントローラーなるものを作ってくれます。
AnimaterのControllerにCowntDownsアニメーションが入っているのが分かりますね。
親オブジェクトにアニメーションコントローラーを入れることで、全ての子オブジェクトのアニメーションをまとめて管理できます。
ここからはこのアニメーションコントローラーをいじっていきます。
Unityアニメーションコントローラーでスケールを操作する
CountDownsを選択しanimation画面を開きます。
Add Propertyのボタンが押せるようになっていますね。
数字の大きさを変えるアニメーションを作る為に、Scaleのプロパティを追加します。
Add Property→CountDown3→Scaleの順に押していきます。
ここでタイムラインを設定できます。白い線が見えますね。
この線が初期で0:00のところにあると思いますが、0:00秒にオブジェクトがどんな状態なのか、ということを表しています。
開始から1秒、2秒の時どんな状態なのかをそれぞれ設定できるわけです。
では0秒の時に3の数字が消えている状態にします。
タイムスケールを0:00にしてCountDown3のscale x, y, z の値を0にします。
スケールが0、これはつまり画面に表示されないということです。
さらに、1秒後に数字が表示されるようにます。
そのためには白線を1:00秒にもっていき、scale x, y, z の値を1にします。
その状態で再生すると、こんな感じになります。
カウントダウンっぽくなってきました。いい感じですね。
同じようにCountDown2、1についても設定します。
こうなります。この辺りは実際に触りながらの試行錯誤ですね。
このアニメーションは初期設定でループになっているのでチェックを外します。
Unityカウントダウンアニメーションの完成!
そしてカウントアニメーションが終わった後に走り始めるようにスクリプトで制御すると・・・
カウントダウンアニメーションの完成です!
やったー!!
初歩的なアニメーションですが、自分だけのアニメーションが作れるって楽しいものですよ!
あなたも是非Unityアニメーション作りにトライしてみてください!