【超初心者向け】第2回: Unityでタイトル画面を作ってみよう!

【超初心者向け】第2回: Unityでタイトル画面を作ってみよう!
さて前回は「TitleScenes」を保存するところまでやりましたね。今回はタイトル画面の制作方法についてです。
イエモン「勉強させていただきます!」

キャンバスの作成


まずCanvas(キャンバス)というのを作成します。Canvasはボタンなどを配置するのに必要な土台です。 Unityでは制作時にすべてCanvasを作らなければいけません。 左上のCreateから「UI」「Canvas」を選択しましょう。
Canvas名を「CanvasTitle」に変更しましょう。

キャンバスのサイズを調整


続いてキャンバスのサイズを調整します。CanvasTitleを選択し、右側の「Inspector」より「Render Mode」から「Screen Space – Camera」を選択します。
次に左側の「Main Camera」を「Render Camera」にドラッグ&ドロップします。
次に「Ul Scale Mode」から「Scale with Screen Size」を選択し、「Reference Resolution」を[X:720、Y:1280]に設定。「Match」を「1」に設定します。
ここまで家田君ついてきてこれてるかな?
イエモン「寝てました!」

画像を配置


続いてキャンバスに画像を配置します。「CanvasTitle」を右クリックして「Ul」→「Image」を選択します。
続いて「Images」フォルダの中からタイトル画像を選択し、「Source Image」にドロップします。
このままだとサイズが合ってないので、「Set Native Size」をクリックします。そうするとサイズがぴったり合います。

ボタンを配置


次はボタンを配置してみましょう。「CanvasTitle」を右クリックして「Ul」→「Button」を選択します。
Button名を「ButtonStart」に変更しましょう。
ボタンの大きさと位置を変更しましょう。「Rect Transform」から[Pos Y:-450、Width:600、Height:120]と入力します。
続いてHierarchyの「ButtonStart」をクリックすると「Text」が出てくるのでそれを選択します。そしてInspectorの「Text」にボタン名を入力します。今回はお題の「こんなスマホは嫌だ」を入力します。続いて「Font Style」を「Bold」、「Font Size」を「60」と入力します。

スクリプトを作成


続いてボタンを押したら次の画面に遷移するスクリプト言語を作成しましょう。ProjectのAssetsフォルダから「Scripts」フォルダを選択し、「Create」をクリックして「C# Script」を選択しましょう。
作成したスクリプト名を「TitleManeger」とします。
スクリプトを開き、下記のようにコードを記述します。どのようなプログラムの意味があるのかは、また別の機会に。
はい。ここまで長くなりましたが、家田君大丈夫ですか?
イエモン「スクリプトは大事ってことが分かりました!」
次にCreateから「Create Empty」を選択し、「TitleManeger」と名前を記述します。
次に「Add Component」をクリックし、「Scripts」を選択します。
先ほど作成したスクリプトの「Title Maneger」がありますのでそれを選択します。

ボタンに関連付ける


次はスクリプトと作成したボタンを関連付けます。このあたりは特にややこしくなってきますので、家田君よく聞くように。
イエモン「zzz…」
ButtonStartを選択し、「On Click()」の「+」を選択します。「None」の部分にTitleManegerをドラッグ&ドロップします。
そして「Title Maneger」をクリックし「PushStartButton()」を選択します。これでボタンとの関連付けは完了です。

シーンをビルド設定


続いてボタンを押したあとの遷移先のシーンを作成します。Scenesフォルダを選択し、Createをクリックして「Scene」を選択します。
ファイル名を「FlipScene」に変更します。
次にビルド設定にシーンを登録します。「File」から「Build Settings」を選択します。
作成した2つのシーンを「Scenes In Build」にドラッグ&ドロップします。そして順番をTitleScenesが上にくるようにしてください。
これでボタンを押したら「FlipScene」に遷移すると思います。さて本日はここまでにしましょう。次回はフリップ画面の制作方法を解説します。家田君ここまで分かったかな?
イエモン「ビルドって名前が気に入りました!」
アプリ名:フリップ芸(めくり芸)
内容:芸人がよくやるフリップネタのやつです。
対象:Android
アプリダウンロードはこちら(androidのみ):
https://play.google.com/store/apps/details?id=com.hide.flip_show