Unity本の作例改造-Chapter3-3:タイトル画面をつくる

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

タイトルロゴを作成する

今回はゲームのタイトル画面を作っていきます。

ゲーム画面サイズの設定

ゲーム画面で表示されるUIオブジェクトが画面の解像度や縦横比にかかわらずちゃんとレイアウトされるように設定を行います。
Unityの画面中央上部にある[Game]ビュータブをクリック。ビューの左上にある画面サイズ設定ボタン[Free Aspect]をクリックして[16:9]に変更します。

[Hierarchy]ウィンドウ > Canvasオブジェクトを選択。[Inspector]ウィンドウ > Canvas Scaler > UI Scale Mode > [Scale With Screen Size]を選択。
Reference Resolution X [1280] Y[720]に変更します。

タイトルロゴ画像を作成する

ゲームのタイトルロゴをWebサービスを利用して作ってみることにしました。
ロゴ及び画像ジェネレーター

まずはサイトのトップページからロゴのスタイルをクリックして選択します。

スタイルをクリックするとページが切り替わり、ロゴテキストの入力画面になります。ちなみに、ゲームタイトルは”Rolling Ball”にしました。フォントやテキストサイズだけでなく、色や影も変更可能です。設定を変更するとプレビュー画像が更新されてリアルタイムに確認することができます。

テキストサイズは大きめに”180″を指定しました。デザインができたら[Create Logo]ボタンをクリックします。

[画像をダウンロード]をクリックするとPNG形式のファイルがダウンロードできます。

ダウンロードしたファイルは名前を”TitleLogo.png”に変更しておきます。

タイトルロゴ画像のリサイズ

Unityに画像をインポートする前にあらかじめ画像の縦横サイズを2のべき乗に変更しておきます。
Photoshopを使用してリサイズを行いました。まずは横幅を1024ピクセルに揃えます。
メニュー：イメージ > 画像解像度 を選択。[画像解像度]ウィンドウ > 幅: 1024 に変更。

次に高さを揃えます。
メニュー：イメージ > カンバスサイズ を選択。高さ: 256 に変更。

リサイズが完了したら画像を保存。メニュー：ファイル > 保存 を選択します。これでタイトルロゴの画像が完成です。

タイトルロゴ画像をUnityにインポートする

画像サイズを調整したらファイルをUnityの[Project]ウィンドウにドラッグ&ドロップでインポート。設定を行います。
[Project]ウィンドウ > ロゴ画像”TitleLogo”を選択。
[Inspector]ウィンドウ > Texture Type > [Sprite (2D and UI)]に変更。[Apply]ボタンをクリック。

タイトルロゴUIオブジェクトを作成する

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

タイトルロゴ画像をタイトルロゴのUIオブジェクトに割り当てる

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

タイトルロゴのUIオブジェクトの位置とサイズを調整

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

ゲームビューではこんな感じに表示されています。

タイトル背景を作成する

次にタイトル画面の背景を作っていきます。

タイトル背景画像を作成する

背景が増もWebサービスを利用してタイトルロゴ画像を作成することにしました。
Free Seamless Pattern Backgrounds _ Patterncooler.com

このサイトの利用についてはフリーと有償のライセンス形態が明記されていました。作成した画像はフリーライセンスでは商用使用はNGとなっています。

画面の上部でプリセットを選択し、中央のアイコンをクリックしてパラメータを調整します。

画面下側にあるスライダーでパターンサイズを調整します。サイズを2のべき乗の256に調整します。ただしプリセットパターンによっては縦横サイズが異なるものがあるので、その場合は後で調整が必要ですね。

画面右下の[Download option]ボタンをクリック。ファイルをダウンロードしたらファイル名を”TitleBG”に変更します。

タイトル背景画像をUnityにインポートする

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

タイトル背景UIオブジェクトを作成する

作成したタイトル背景画像を割り当てるUIオブジェクトを作成します。
[Hierarchy]ウィンドウ > [Create]ボタン > UI > Panel を選択。
作成したPanelオブジェクトの名前を”Panel Title”に変更。
[Hierarchy]ウィンドウ > Canvas > Panel Title を選択。
[Inspector]ウィンドウ > Panel Title > Image(Script) > Colorフィールドをクリック。カラー設定パレットが開いたらA 255に設定します。

タイトル背景画像をタイトル背景UIオブジェクトに割り当てる

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

スタートボタンを作成する

では最後にゲームのスタートボタンを作成します。

スタートボタンのUIオブジェクトを作成

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

スタートボタン画像を作成する

標準のボタンデザインは物足りないのでWebサイトのサービスを使って作成してみます。
WEBボタン素材自動生成サイト – ButtonMakerアフラット

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

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

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

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

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

スタートボタン画像をボタンUIオブジェクトに割り当てる

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

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

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

UIオブジェクトの階層化

タイトルロゴ”Panel TitleLogo”、タイトル背景”Panel Title”、スタートボタン”Button Start”を階層化しておきましょう。階層構造は下記のようになります。
Canvas
　┗ Panel Title
　　┣ Panel TitleLogo
　　┗ Button Start

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

とりあえずこれでタイトル画面ができました。