【超初心者向け】Unityで脱出ゲームを作ろう!第2回「タイトル画面作成」

【超初心者向け】Unityで脱出ゲームを作ろう!第2回「タイトル画面作成」
さて前回の第1回では「ビルド設定、シーン保存」で、シーンを保存するところまでやりましたね。今回はタイトル画面の制作方法についてご説明します。
動画でも制作方法を公開していますので是非ご覧ください。
アプリ名:地下31階からの謎解き脱出ゲーム
対象:Android
アプリダウンロードはこちら(Androidのみ):
https://play.google.com/store/apps/details?id=com.hide.Escape_Game2


イエモン「おねげーします。」

キャンバス作成


まずはCanvas(キャンバス)を作成しましょう。「Create」から「UI」→「Canvas」を選択し、Canvas名を「Canvastitle」に変更しましょう。
続いてキャンバスのサイズを調整します。「Canvastitle」を選択し、右側の「Inspector」より「Render Mode」→「Screen Space – Camera」を選択します。
次に「Hierarchy」から「Main Camera」を「Render Camera」にドラッグ&ドロップします。
そして「Ul Scale Mode」から「Scale with Screen Size」を選択し、「Reference Resolution」を[X:720、Y:1280]に設定し、「Match」を「1」に設定します。

タイトル画像配置


続いてタイトル画面となる画像をキャンバスに配置しましょう。「Canvastitle」を右クリックして「Ul」→「Image」を選択します。
「Images」を選択し、右側の「Inspector」より「Source Image」に作成したタイトル画面を選択します。選択したら「Set Native Size」をクリックして、サイズを画面に合わせましょう。

スタートボタン配置


次はボタンを押してゲームが始まる「スタートボタン」を作成しましょう。「Canvastitle」を右クリックして「Ul」→「Button」を選択し、Button名を「Buttonstart」に変更しましょう。
続いてボタンの大きさと位置を変更しましょう。「Inspector」より「Rect Transform」から[Pos Y:-300、Width:600、Height:120]と入力します。(※作成したタイトル画面によって場所はそれぞれ異なります)
次に「Hierarchy」より「Buttonstart」をクリックし「Text」を選択します。そして「Inspector」より「Text」に「START」と入力します。文字の大きさを「Font Size」→「60」とし、「Font Style」を「Bold」に設定しましょう。

スクリプト作成


続いてスタートボタンを押したら次のシーン画面に遷移するスクリプト言語を作成しましょう。「Project」のAssetsフォルダより「Scripts」フォルダを選択し、「Create」をクリックして「C# Script」を選択し、スクリプト名を「TitleManeger」に変更しましょう。
作成した「Titlemaneger」をダブルクリックで開き、下記のようにスクリプトコードを記述します。
続いて「Hierarchy」より「Create」から「Create Empty」を選択し、「TitleManeger」と名前を変更します。
「TitleManeger」を選択し、「Inspector」より「Add Component」をクリックし、「Scripts」を選択して、先ほど作成した「Title Maneger」を選択します。

ボタンと関連付ける


次に「Buttonstart」を選択し、「Inspector」より「On Click()」の「+」を選択します。「None」の部分にTitleManegerをドラッグ&ドロップします。
続いて「Title Maneger」をクリックし「PushStartButton()」を選択します。これでスタートボタンを押すと次の画面へと遷移するようになります。

シーン作成


続いてスタートボタンを押したあとの遷移先のシーンを作成します。「Project」のScenesフォルダを選択し、Createをクリックして「Scene」を選択し、ファイル名を「GameScene」に変更します。

シーンをビルド設定


次に作成したシーンをビルド設定に設定します。「File」から「Build Settings」を選択します。作成した2つのシーンを「Scenes In Build」にドラッグ&ドロップします。そして順番をTitlescenesが上にくるようにしてください。
さて本日はここまでにしましょう。次回は部屋の画像の配置方法をご説明します。家田君ここまで分かったかな?
イエモン「はい。わかりまちたー。」
【脱出ゲームを作ろう! 目次】