Unity初心者がランゲームを作る 2#アニメーションでカウントダウン

Unity

※この記事は連載2回目になります!第1回の開発記はこちら!

Unity初心者がランゲームを作る 1#そうだ、クソゲーを作ろう
皆さんはゲームを作りたいと思ったことありますか? unityはゲームやVRを作れるめっちゃ便利なツールです。 unityって何?って人はこちら。 僕はITフリーランスを目指していて、このunityを勉強中です。 そして今、ち...

 

どうもみなさんこんばんは。エリンギです。

 

前回でランゲームのベースを作ったのはいいんだけど、いきなりキャラクターが走り出すのは突然感を感じませんでしたか?

え?感じない?

 

ぼくはめちゃくちゃ気になったんで、今日はカウントダウンアニメーションを作ります!

ちなみに今回作るものがこちらです。

 

 

そうUnity、アニメーションも簡単に作れちゃうんですよ〜!(比較的)

アニメーションの基本はこの記事が参考になりますね!

簡単に作成できる!Unityでアニメーションを作る方法 | TechAcademyマガジン
初心者向けにUnityでアニメーションを作る方法について解説。3DのSphereを実際にアニメーションで動かしながら方法を説明しているので、Unityを使ったことがない人でも理解できるでしょう。ゲーム開発をしたい人はぜひご覧ください。

それでは行きましょう!

 

Unityアニメーションの表示は基本的にcanvasの中で行う

まず画面に数字を表示するところから行きます!

画面上に表示されるアイコンやボタン、数字などはcanvasというものに追加して行きます!

画板にイラストを貼っていくイメージですね。ぼくの現在状況はこんな感じ。

 

 

すでにHPやボタンなどがペタペタ貼ってありますね。

ここに今回のカウントダウン用の数字オブジェクトをテキストで作りセットします。

 

 

数字はTextMeshProというアセットを使ってちょっとオシャレにしてます。

テキストにこだわりたい人には必須のアセットですね!

 

TextMeshProのダウンロードはこちら

TextMesh Pro | Beta Projects | Unity Asset Store
Get the TextMesh Pro package from Unity Technologies and speed up your game development process. Find this & other Beta Projects options on the Unity Asset Stor...

 

使い方はこちらが参考になります。

TextMeshProの使い方 - Qiita
TextMeshProの使い方AssetStoreで無料で手に入るようになった、TextをよりリッチにText演出が扱えるAssetですUnity2017に導入されることも決まっており、現在そこ…

 

オブジェクトの親子関係を作りアニメーションをまとめて管理する

さあて!

まずはプロジェクトビューから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アニメーション作りにトライしてみてください!