3-1タイトル画面を作る【Unityゲーム開発の基礎】作って学ぶブロック崩し
ブロック崩しを作りながらUnityを学んでいこう！
フェーズ１で「ブロック崩しの骨格」を作り、
フェーズ２ではその「見た目をかっこよくする」ことができました。
フェーズ３の目標は「タイトルやゲームオーバー・ゲームクリアの画面を作る」です。これらを追加することでかなりゲームっぽい雰囲気になるのではないでしょうか。
Phase3の目標 #unity #indiedev #indiegame pic.twitter.com/gksTTXTZvZ
— をりはぅ@indiedev (@worihau__) November 6, 2023
まずはタイトル画面を作っていきます。
ゲームがスタートするとまずはじめに表示される画面。そこでボタンを押したらゲームがスタートするという仕組みです。
タイトル画面に必要ないオブジェクトを非表示
タイトル画面が出ているときには、プレイヤーやボールや敵は見えていない方がよさそうですね。
オブジェクトを非表示にするには Inspector ウィンドウの一番上にあるチェックを外せばOKです。
タイトル画面を作る
キャンバス (Canvas) を作成
Unityではボタンや入力ボックスなど UI(User Interface) 用のコンポーネントがいろいろ用意されています。それらの土台となるのが Canvas コンポーネントになります。
Hierarchyを右クリックして UI → Canvas を選択します。
Canvas を追加すると自動的に EventSystem というオブジェクトも生成されました。これはUIコンポーネントがクリックされたなどとイベントを適切に制御するためのものなようです。
追加した Canvas オブジェクトは「GameTitle」と名付けました。
追加した Canvas の Inspector ウィンドウをみてみると、Transform ではなく Rect Transform になっていて UI に適した設定項目になっているようです。
そして Canvas だけでなく Canvas Scaler や Graphic Raycaster というコンポーネントも同時に追加されています。
【!】Rect Transform
Transform が一点を表すのに対し Rect Transform は内側に UI が配置できる四角を表します。子要素は親の四隅のどこかを基準に配置することができます。
【!】Canvas コンポーネント
Canvas コンポーネントは UI が配置、描画される抽象的な領域です。
【!】Canvas Scaler コンポーネント
Canvas 内の UI 要素の全体的なスケールとピクセル密度を制御するために使用されます。
【!】Graphic Raycaster コンポーネント
UIをクリックしてイベントを発生させるために使われます。
Graphic Raycaster - Unityマニュアル
Canvasの配置方法
Canvasの Inspector には Render Mode という項目があり、どのような基準でUIを配置するかというモードが選択できます。
Screen Spaceモードを選択すると、Screen基準つまりカメラで見えてる範囲を基準にするので、カメラの位置は向きを気にせず配置できます。
World Spaceモードを選択すると、他のオブジェクトの同じ座標系に配置することになります。
今回はWorld Space を使って配置してみました。
Render Modeの項目で World Space を選んだら、その下の Event Camera で基準とする Camera オブジェクトを選びます。
ちなみにVertex Color Always In Gamma Color Space という項目に警告が出ているのでチェックを付けておきました。チェックするとUI の色の精度が向上するっぽい？です。
Panelを追加
CanvasにいろいろなUIパーツを追加してタイトル画面を作っていきます。
まずはタイトル画面の背景とする部分を Panel で作成します。
Canvasオブジェクトを右クリックして UI → Panel 選択で追加します。
Inspectorウィンドウから色や位置・サイズを調整しておきます。
画像を追加
Canvasオブジェクトを右クリックして UI → Image 選択で画像を追加できます。仕組み的には Panel と同じみたいですね。
Inspectorウィンドウには Image コンポーネントがあり、Source Image 項目へ画像をドラッグすれば目当ての画像を表示できます。
文字を追加
Canvasオブジェクトを右クリックして UI → Text - TextMeshPro 選択すると文字を追加することができます。
追加すると最初の１回だけ「TMP Importer」というウィンドウが現れます。
どうやら TextMeshPro というのは比較的新しい機能なようで、必要なファイルを別途インポートする必要があるようです。
といっても「Import TMP Essentials」ボタンをクリックするだけ。
インポートが完了すると Assets フォルダに TextMeshPro フォルダが作られて必要なファイルが格納されます。
ボタンを追加
Canvasオブジェクトを右クリックして UI → Button - TextMeshPro 選択するとボタンを追加することができます。
Buttonオブジェクトが作られ、さらにその中にTextオブジェクトも作られます。
これが今回の成果です。
つづく