Unity公式チュートリアルSurvival Shooter日本語実践Chapter.10

10.GameOver

とうとう最終章。今回はプレイヤーの体力が0になった時のゲームオーバー処理を実装してする。
画面UIをアニメーションさせる方法が今回のキモ。

ゲームオーバー画面の下準備

ゲームオーバー画面背景

HUDCanvas下にImageオブジェクトを作成、名前をScreenFaderとする。
Anchor:Altをクリックしながら一番右下を選択する。これによってCanvas領域全体に画像を引き延ばす。
Color;いい感じの水色に設定する。これがゲームオーバー画面の背景となる。

ゲームオーバー画面テキスト

HUDCanvas下にTextオブジェクトを作成、名前をGameOverTextとする。設定は下記の通り。
Anchor:中央
Width,Height:300,50
Text:Game Over!
Font:LuckiestGuy
FontSize:50
Allignment:中央真ん中
Color:白
Shadowコンポーネントを追加し、EffectDistance(2,-2)

HUDCanvas内の配置順整理

Scene内のオブジェクトは、Hierarchy画面で上にあるものから順に重ねて描画される。一番上のものが一番奥に、一番下のものが一番手前に描画されることになる。オブジェクト内の子オブジェクトも同様だ。HUDCanvas内には、ゲームオーバー画面に表示したいものとそうでないものがあるため、配置順を下記の通りに整理する。 
(上から)
HealthUI
DamageImange
-ここから下がゲームオーバー画面に表示したいもの-
ScreenFader
GameOverText
ScoreText

ゲームオーバー画面のアルファ値をゼロに

ゲームオーバー画面にかかわるパーツ(ScreenFaderとGameOverText)のColorからアルファ値をゼロにして透明にしておく。

ゲームオーバー画面のアニメーション作成

Animation作成

なんと!UnityのAnimationはキャラクターのモーションだけでなくUIその他なんでもアニメにできるのだ!今回はUIのアニメを作成するぞ。
HUDCanvasを選択した状態でメニューバーからWindow>Animation>Animationを選択する。このAnimationはGameビューの表示位置にドッキングさせておくと便利らしい。Unity2018ではAddCurveのボタンがAddPropertyになっているので注意。RecordModeをオンにしておくとSceneビューで直接動きをチェックしながら作れて便利っぽい、が今回は特に利用しないっぽい。

AddPropertyからアニメさせる要素を追加していく。今回は下記の4つ。
GameOverText.Text.Color:30フレーム目でアルファ値を1に設定
GameOverText.RectTransform.Scale:0フレーム目で(0,0,0)、20フレーム目で(1.2,1.2,1.2)、30フレーム目で(1,1,1)に設定
ScreenFader.Image.Color:30フレーム目でアルファ値を1に設定
ScoreText.RectTransform.Scale:30フレーム目で(0.8,0.8,0.8)に設定

ゲームオーバー画面表示処理に移行してから全体で30フレームですべてのアニメが終了するのは早すぎるので、アニメの開始タイミングを1秒と30フレーム後に変更。

Animationウィンドウの要素の意味は大体こんな感じ

なんてこった……!たったこれだけで、「90フレームかけて透明から水色の背景に遷移しつつ、白のゲームオーバーテキストを色・大きさ共にフェードインさせ、ついでにScoreTextの大きさもちょっぴり小さくして動きのメリハリをつける」アニメーションが完成しちまったぜ!あとはこのアニメを再生するタイミングを制御するだけだな!
オッといけない、このAnimationはLoop設定がOnになっているから、GameOverClipからLoopTimeのチェックを外すのを忘れないようにしないといけない。

AnimatorControlleのHUDCanvasをダブルクリックで開き、空のStateを作成したらそれがデフォルトStateとなるよう設定。そこからGameOverClipへのTransitionをつなぎ、遷移条件のParameterとしてTriggerのGameOverを作成、設定しておく。

GameOverManagerスクリプト

HUDCanvasオブジェクトに、GameOverManagerスクリプトをアタッチしたら実装はほぼおしまいだ!GameOverスクリプトの中身を確認するぜ!あ、あとBGMのPlayOnAwakeをオンに戻しておくのを忘れずにな!

実装確認

無事に動けばおめでとう!これでこのチュートリアルはおしまいだ!
ここでやめてしまってもいいんだが、少しいじってこのゲームをもっと面白くしたいと思う!のでもうちょっとだけ続くんじゃ!

第11回はコチラ

第9回はコチラ

2件のコメントがあります

コメントを残す

メニューを閉じる