Unity本の作例改造-Chapter3-6:ゲームオーバー画面をつくる

こんにちは！Unityの入門書で通称”ヒヨコ本”として親しまれている”Unity5入門 最新開発環境による簡単3D&2Dゲーム制作 “の作例に色々とゲーム要素を追加してオリジナルゲームに仕上げる内容を連載をしています。

ゲームオーバーロゴ画面を追加する

前回は”ボール残数を設定して画面に表示する“を行いました。今回はゲームオーバー画面のUIオブジェクトを作成してみます。
背景画面とロゴ”Game Over”ロゴを別々のオブジェクトとして作成することにしました。まずはロゴの作成から始めてみましょう。

ゲームオーバーロゴ画像を作成する

ヒヨコ本のChapter6でUIオブジェクトのテキストを使用したゲームオーバー表示作成手順が紹介されていますが、今回はゲームオーバーのロゴ画像を作成してみたいと思います。
ロゴを作る方法はグラフィックソフトやオフィスソフトを含め沢山有りますが、今回はロゴを作ることができるWebサイトを利用してみます。
ロゴ及び画像ジェネレーター

ゲームオーバーっぽい感じのスタイルとしてこんな感じのものを選んでみました。テキストサイズの設定は、後で画像を2のべき乗に調整するので大きめに設定（180）にしておきました。

画像はPNG背景が透明なPNGファイルでダウンロードできます。

画像編集ソフトで画像サイズを幅1024 x 高さ256ピクセルに調整したら完成です。

ゲームオーバーロゴ画像をUnityにインポートする

作成したゲームオーバーロゴ画像ファイルをUnityの[Project]ウィンドウにドラッグ&ドロップでインポート。
[Project]ウィンドウ > ロゴ画像”GameOverLogo”を選択。[Inspector]ウィンドウ > Texture Type > [Sprite (2D and UI)]に変更。[Apply]ボタンをクリック。

ゲームオーバーロゴ画像を割り当てるUIオブジェクトを作成する

[Hierarchy]ウィンドウ > [Create]ボタン > UI > Panel を選択。作成したPanelオブジェクトの名前を”Panel GameOverLogo”に変更。
[Inspector]ウィンドウ > Panel GameOverLogo > Image(Script) > Color スロットをクリック。
カラー設定パレットが開いたらA 255に設定します。

UIオブジェクトにゲームオーバーロゴ画像を割り当てる

[Hierarchy]ウィンドウ > Canvas > Panel GameOverLogo を選択。[Inspector]ウィンドウ > Image (Script) > Source Imageスロットの右側にある◎をクリック。
ファイル選択ウィンドウが開いたら”Panel GameOverLogo”をダブルクリックで割り当て。
[Inspector]ウィンドウ > Image (Script) > Image Type > [Simple] に変更。
画像の縦横比を保持するために Image Type > Preserve Aspect のチェックを入れます。

ゲームオーバーロゴUIオブジェクトの位置とサイズを調整

[Hierarchy]ウィンドウ > Canvas > Panel GameOverLogo を選択。[Inspector]ウィンドウ > Rect Transformの数値を必要に合わせて下記のように調整しました。
Left 50 / Top 0 / Right 50 / Bottom 200

シーンに配置したゲームオーバーロゴを[Game]ビューでみるとこんな感じになっています。

ゲームオーバー背景画面を追加する

ゲームオーバーロゴだけでは物足りなので背景をUIオブジェクトで追加してみます。

背景画像の作成

画像を作成できるWebサービスを利用して背景のパターン画像を作成してみました。
Patterninja – pattern making application

ページにはじめてアクセスするとパターン画像作成のチュートリアルモードになります。

パターン素材を選択して配置してから…

背景とパターンの色を変更して…

パターンサイズを調整すれば出来上がり。画像のサイズはwidth 256px / height 256pxに設定しておきます

ファイル形式はPNGを選択してダウンロードします。完成したパターン画像はこんな感じです。ファイル名を”GameOverBG.png”に変更しておきます。

ゲームオーバー背景画像をUnityにインポート

作成した背景画像ファイル”GameOverBG.png”をUnityの[Project]ウィンドウにドラッグ&ドロップでインポート。[Project]ウィンドウ > 画像”GameOverBG”を選択。[Inspector]ウィンドウ > Texture Type > [Sprite (2D and UI)]に変更。
Advanced > Wrap Mode > [Repeat]に変更。[Apply]ボタンをクリック。

ゲームオーバー背景のUIオブジェクトの作成

[Hierarchy]ウィンドウ > [Create]ボタン > UI > Panel を選択。作成したPanelオブジェクトの名前を”Panel GameOver”に変更。[Hierarchy]ウィンドウ > Canvas > Panel GameOver を選択。
[Inspector]ウィンドウ > Panel GameOver > Image(Script) > Color スロットをクリック。カラー設定パレットが開いたらA 255に設定します。

ゲームオーバー背景画像をゲームオーバー背景のUIオブジェクトに割り当て

[Hierarchy]ウィンドウ > Canvas > Panel GameOver を選択。[Inspector]ウィンドウ > Image (Script) > Source Imageスロットの右側にある◎をクリック。
ファイル選択ウィンドウが開いたら”GameOverBG”をダブルクリックで割り当てましょう。
[Inspector]ウィンドウ > Image (Script) > Image Type > [Tiled] に変更します。

リトライボタンを追加する

ゲームオーバー画面が用意出来たので、最後にゲームをもう一度始めるためのリトライボタンを追加します。

リトライボタン画像を作成する

ボタン画像もWebサイトのサービスを使って作成してみます。
WEBボタン素材自動生成サイト – ButtonMakerアフラット

作成パラメータが細かく用意されているのでかなり幅広いデザインのボタンを作成することができます。今回はこんな感じにシンプルなボタンにしました。（画像拡大 ）

作成するボタン画像のサイズ縦64 横256に設定。作成した画像をダウンロードするには画像を右クリック > “名前を付けて画像を保存”を選択します。

画像を保存したらファイル名を”ButtonRetry”に変更しておきます。

リトライボタン画像をUnityにインポート

ボタン画像ファイル”ButtonRetry”をUnityの[Project]ウィンドウにドラッグ&ドロップでインポート。
[Project]ウィンドウ > ロゴ画像”ButtonRetry”を選択。[Inspector]ウィンドウ > Texture Type > [Sprite (2D and UI)]に変更して[Apply]ボタンをクリック。

リトライボタンのUIオブジェクトを作成

[Hierarchy]ウィンドウ > [Create]ボタン > UI > Button を選択。
作成したボタンオブジェクトの名前を”Button Retry”に変更。[Inspector]ウィンドウ > Rect Transformの数値を下記ように変更します。
Pos X 0 / Pos Y -150 / Width 200 / Height 50

リトライボタンのUIオブジェクトに画像を割り当てる

[Hierarchy]ウィンドウ > Canvas > Button Retry を選択。[Inspector]ウィンドウ > Image (Script) > Source Imageスロットの右側にある◎をクリック。
ファイル選択ウィンドウが開いたら”Button Retry”をダブルクリックで割り当て。
[Inspector]ウィンドウ > Image (Script) > Image Type > Preserve Aspect のチェックを入れて縦横比を保持します。

ボタンのテキストオブジェクトを削除

ボタンに標準で用意されているボタン名表記のテキストUIオブジェクトは削除しておきましょう。[Hierarchy]ウィンドウ > Canvas > Button Retry > Text を選択して削除。

UIオブジェクトの階層化

ゲームオーバーロゴ”Panel GameOverLogo”、ゲームオーバー背景”Panel GameOver”、リトライボタン”Button Retry”を階層化しておきましょう。階層構造は下記のようになります。
Canvas
　┗ Panel GameOver
　　┣ Panel GameOverLogo
　　┗ Button Retry

ゲームオーバー画面が完成！

とりあえずこれでゲームオーバー画面ができました。