※本記事にはアフィリエイト広告（Udemy）を含みます。
前回のおさらい
前回①では、STATION OPSの企画内容を紹介し、Godotプロジェクトの作成と、資源を管理するオートロード「GameManager」の用意までを行いました。ただし画面にはまだ何も表示されていません。
今回は、実際に画面に表示するUIを組み立てていきます。
今回作るUIの全体像
STATION OPSの画面は、上から下に向かって次の要素が縦に並ぶ構成にします。
- ヘッダー（タイトル表示）
- 資源表示エリア（電力・酸素・部品）
- ECHOのセリフエリア
- アップグレード一覧エリア
- クリックボタン（発電する）
このように要素を縦一列に並べるとき、GodotではVBoxContainerというノードを使います。VBoxContainerとは、内側に置いた子要素を自動的に縦方向へ並べてくれるコンテナ（部品を整列させるための入れ物）です。子要素の位置やサイズを自分で計算する必要がなく、画面サイズが変わっても崩れにくいのが利点です。
MarginContainerで画面の余白を作る
なぜ余白が必要なのか
UIの要素を画面の端ぎりぎりに配置すると、ウィンドウの角で窮屈に見えたり、見切れて操作しづらくなったりします。画面全体と実際のUIの間に余白を作っておくことで、見た目にも操作性にも余裕ができます。
MarginContainerを配置する手順
- シーンツリーのルート（Controlノード）を右クリックし、「子ノードを追加」を選択する
- 検索欄に「MarginContainer」と入力し、選択して追加する
- インスペクタの「レイアウト」→「アンカープリセット」から「Full Rect」を選ぶ
- なぜ：画面いっぱいに広がるように配置しておくことで、内側の余白設定が画面全体に効くようになります
- インスペクタの「Theme Overrides」→「Constants」から、
margin_left・margin_top・margin_right・margin_bottomをそれぞれ28に設定する
- なぜ：この4方向の余白が、画面端とUIの間の隙間になります
VBoxContainerで要素を縦に並べる
MarginContainerの子として、VBoxContainerを1つ追加します。手順はMarginContainerの追加と同じく「子ノードを追加」から行います。以降の要素は、すべてこのVBoxContainerの子として追加していきます。
ヘッダーを追加する
- VBoxContainerの子として「Label」を追加する
- テキストを「STATION OPS」に設定する
- 「Theme Overrides」→「Font Sizes」から
font_sizeを28程度に設定する - 「レイアウト」→「Horizontal Alignment」を「Center」に設定する
- なぜ：タイトルは中央揃えの方が見栄えが安定します
資源表示エリアを追加する
- VBoxContainerの子として、さらに「VBoxContainer」を追加する（名前は「ResourceDisplay」などに変更）
- なぜ：電力・酸素・部品の3行を、ヘッダーやクリックボタンとは別のまとまりとして扱うためです
- ResourceDisplayの子として「Label」を3つ追加し、それぞれ「電力: 0」「酸素: 0」「部品: 0」というテキストにする
- 酸素・部品のLabelは、インスペクタの「Visibility」→「Visible」のチェックを外しておく
- なぜ：STATION OPSでは、酸素・部品はゲームが進行して該当設備を購入するまで登場しない資源です。最初から表示しておくと情報が多すぎて分かりづらいため、非表示スタートにしておき、後の記事で条件を満たしたときに表示する処理を追加します
ECHOエリアを追加する
- VBoxContainerの子として「HBoxContainer」を追加する（名前は「EchoArea」などに変更）
- なぜ：ここだけはアイコンとセリフを横に並べたいので、縦並びのVBoxContainerではなく横並びのHBoxContainerを使います
- EchoAreaの子として「ColorRect」を追加し、サイズを48×48程度にする
- なぜ：この時点ではECHOの画像素材がまだ用意できていないため、色付きの四角形を仮のアイコンとして使います。後の記事で実際の画像に差し替えます
- EchoAreaの子として「Label」を追加し、テキストを「ECHO: ようこそ、STATION OPSへ。」などの仮のセリフにする
- このLabelの「レイアウト」→「Horizontal Size Flags」で「Fill」と「Expand」にチェックを入れる
- なぜ：セリフが長くなっても横幅いっぱいに広がり、折り返し表示できるようにするためです
アップグレード一覧エリアを追加する
- VBoxContainerの子として「VBoxContainer」を追加する（名前は「UpgradeList」などに変更）
- 中身は空のままにしておく
- なぜ：発電パネルなどのアップグレード購入ボタンは、Signalの仕組みを学ぶ③・④の記事でまとめて追加します。今回はUI全体の骨組みを作ることが目的なので、後で要素を追加できる入れ物だけを用意しておきます
クリックボタンを追加する
- VBoxContainerの子として「Button」を追加する
- テキストを「発電する」にする
- 「レイアウト」→「Custom Minimum Size」の高さを
60程度にする
- なぜ：クリックボタンはこのゲームで一番押す頻度が高い要素なので、他のボタンより大きめにしてタップ・クリックしやすくしています
今回の時点で確認できること
ここまでできたら、一度ゲームを実行してみてください。ヘッダー・資源表示・ECHOエリア・アップグレード一覧（空）・クリックボタンが、上から順に縦に並んで表示されるはずです。ボタンを押してもまだ何も起こりませんが、それは想定通りです。クリックへの反応は次回③で実装します。
次回予告
次回③では、今回配置した「発電する」ボタンにSignal（イベント通知の仕組み）を接続し、実際に押すと電力が増えるようにします。
Godot学習におすすめのオンライン講座
UIの組み方は最初とっつきにくく感じる部分ですが、体系的に学んでおくと今後のGodot制作でも迷わなくなります。
コメント