GodotでゲームUIを作ってみた｜アンカー配置とボタンによるPanel開閉を実演

Godot 4.7.2で、ゲーム画面にスコア、攻撃表示、スタートボタン、メッセージ画面を配置してみました。

今回の目的は、横長画面でも縦長画面でも、UIを画面の中央や四隅へ配置できるようになることです。さらに、Buttonのpressedシグナルを利用し、スクリプトを書かずにメッセージPanelを表示・非表示にするところまで試しました。

実際の操作は約11分10秒の動画に収録しています。

今回作ったUI

今回の練習では、次のUIを一つのシーンに配置しました。

• 画面全体の背景となるColorRect
• 右上のスコア表示
• 右下の攻撃表示
• 画面中央のスタート表示
• 中央に置いたButton
• 「Buttonが押されました」と表示するMessagePanel
• MessagePanelを閉じるButton

使用した主な用語や機能は、Control、Anchor Preset、オフセット、Full Rect、Label、Button、Panel、シグナルです。

User InterfaceからControlを作る

最初にプロジェクトを開き、「ユーザーインターフェース」を選択しました。

すると、シーンの土台としてControlノードが追加されます。Controlは、画面上に文字、ボタン、PanelなどのUIを配置する際の基準になります。

今回はこのControlの子として、必要なUIノードを追加していきました。

ColorRectをFull Rectで画面全体に広げる

Controlの子としてColorRectを追加しました。

ColorRectを選択し、上部ツールバーのレイアウト設定からFull Rectを選ぶと、ColorRectがControl全体へ広がりました。

今回は、このColorRectをメニュー画面の背景として使うイメージで「メニュー画面」という名前に変更しました。インスペクターのColorから色も変更できます。

Full Rectを使うと、Controlの大きさに合わせて背景を全面へ広げられるため、手作業で四隅を合わせるより簡単でした。

Labelで右上にスコアを表示する

次に、Controlの子としてLabelを追加しました。

Labelは文字を表示するためのノードです。今回は名前を「スコア」とし、表示文字を「スコア：0」にしました。

Anchor Presetを使って右上へ配置すると、単に座標を右へ動かすのではなく、Controlの右上を基準に配置できます。

動画ではゲーム画面を縦長へ変更したあとも、このスコアが右上に配置されることを確認できました。

インスペクター検索でフォント設定を探す

スコアの文字が小さかったため、フォントサイズを変更しました。

ただ、インスペクターには多くの設定があります。目的の項目が見つからないときは、検索欄へ「フォント」と入力すると、フォントサイズや色に関する項目を絞り込めました。

フォントサイズを大きくし、フォントカラーも変更すると、スコアが見やすくなりました。

項目名が分からない状態で一覧を探すのは大変だったため、インスペクター検索は今後もよく使いそうです。

Theme Overridesで文字の縁を太くする

文字のアウトラインも変更してみました。

最初はフォントカラー周辺を探しましたが、アウトラインの太さを変更する項目がすぐには見つかりませんでした。

検索を解除し、Theme Overridesの中を確認すると、Constants内にOutlineに関する設定がありました。この値を大きくすると、文字の縁が太くなりました。

背景色と文字色が近い場合でも、アウトラインを付けることで読みやすさを調整できます。

一方で、このような設定を探すのは、Godotに慣れていない段階では少し大変だと感じました。

右下へ攻撃表示を置く

もう一つLabelを作り、「Attack」という名前にしました。表示文字は「アタック」です。

スマートフォン向けゲームなどでは攻撃ボタンが右下にあることが多いため、その配置をイメージして右下へ置きました。

今回はLabelなので、実際に攻撃できるボタンではありません。画面の端を基準にUIを置く練習として作っています。

文字サイズも変更し、右上のスコアとは別の位置へ配置できることを確認しました。

Anchor Presetで中央へ配置する

続いて、画面中央へ置くLabelを作成しました。名前を「Start」とし、スタートボタンをイメージした文字を表示します。

上部ツールバーのAnchor Presetから中央を選ぶと、Labelがゲーム画面の中央へ自動的に配置されました。

中央、左上、右下などのPresetを使うと、画面サイズが変わっても、指定した基準位置にUIを配置しやすくなります。

操作中には表示文字を間違えてしまい、一度修正しました。UIを作るときは配置だけでなく、Label名と実際の表示文字を分けて確認する必要がありそうです。

本物のButtonを中央へ置く

Labelで配置を練習したあと、Controlの子としてButtonノードを追加しました。

Buttonを画面中央へ配置し、Buttonそのものと文字を見やすい大きさへ調整しました。

小さいUIは選択しにくく、拡大しながら位置やサイズを変更しました。このあたりのエディター操作は、慣れるまで少し時間がかかりそうです。

F6で現在のシーンだけを実行する

作成したUIを確認するため、F6を使って現在のシーンだけを実行しました。

ゲーム全体を実行するのではなく、作業中のUIシーンだけを確認できます。実行すると、中央にButtonが表示されました。

ゲーム内のシーンが増えてくると、修正したシーンだけをすぐ確認できるF6は便利そうです。

MessagePanelを作る

次に、Controlの子としてPanelを追加しました。

ゲーム内の短い会話やメニューの説明欄をイメージし、名前をMessagePanelに変更しました。

Panelのサイズと位置を調整し、その子としてLabelを追加します。Labelには「Buttonが押されました」と表示しました。

さらに、MessagePanelの右上へ、ウィンドウを閉じるためのButtonを配置しました。

通常時はMessagePanelを隠しておきたいため、シーンツリー右側の目のようなアイコンを使って非表示にしました。

pressedシグナルとshowでPanelを表示する

中央に置いたButtonを選び、右側の「シグナル」タブを開きました。

シグナル一覧からpressedを選択し、接続先としてMessagePanelを指定します。接続時のメソッドにはshowを設定しました。

F6で実行して中央のButtonを押すと、非表示にしていたMessagePanelが表示されました。

今回はスクリプトを自分で書かず、Buttonのシグナルをノードのshowへ接続することで表示できました。

pressedシグナルとhideでPanelを閉じる

次に、MessagePanel内の閉じるButtonにも動作を設定しました。

同じようにpressedシグナルを選び、MessagePanelのhideへ接続します。

接続されたノードには、シーンツリー上で電波のようなアイコンが表示されました。これにより、何らかのシグナルが設定されていることを確認できます。

F6で実行すると、次の動作になりました。

1. 中央のButtonを押す
2. MessagePanelが表示される
3. Panel右上のButtonを押す
4. MessagePanelが非表示になる

ボタンを押して画面を開き、別のボタンで閉じるという基本的なUI動作を、プログラムを書かずに作成できました。

横長から縦長へ変更して配置を確認する

最後に、前回確認したプロジェクト設定からウィンドウサイズを変更しました。

横長だったゲーム画面を縦長にし、F6でUIシーンを実行します。

すると、次の配置が保たれていました。

• スコアは右上
• アタックは右下
• Buttonは中央
• MessagePanelは設定した位置

中央のButtonを押すとMessagePanelが表示され、閉じるButtonを押すと非表示になります。

画面を縦長へ変えても、アンカーを基準にしたUIとButtonの機能が動作することを確認できました。

実際に作った構成と結果

ノード・機能	今回の用途	確認できた結果
Control	UI全体の基準	子のUIをまとめて配置できた
ColorRect	メニュー背景	Full Rectで全画面へ広がった
Label	スコア・攻撃・開始表示	フォントサイズ、色、縁を変更できた
Anchor Preset	右上・右下・中央配置	縦長画面でも基準位置を保った
Button	MessagePanelを開閉	pressedシグナルを利用できた
Panel	メッセージ画面	Labelと閉じるButtonを内包できた
show	Panelの表示	中央Buttonで非表示Panelが現れた
hide	Panelの非表示	閉じるButtonでPanelが消えた
F6	シーン単体実行	UIシーンだけを素早く確認できた

実際の操作を動画で確認する

動画では、Controlの作成からAnchor Presetによる配置、Theme Overridesの設定探し、ButtonとMessagePanelの作成、シグナル接続、縦長画面での確認までを実際に操作しています。

設定項目を探して迷う部分や、表示文字を修正する部分も含めた実録です。

まとめ

今回はGodot 4.7.2で、ゲームUIの基本的な配置とButtonによるPanelの開閉を試しました。

特に理解が進んだのは、単にUIを座標で置くのではなく、Controlとアンカーを基準にして配置する考え方です。横長から縦長へ変更しても、スコア、攻撃表示、中央Buttonが想定した位置に残りました。

また、Buttonのpressedシグナルをshowとhideへ接続することで、自分でスクリプトを書かなくても画面を開閉できました。

私自身もまだGodotを学習中です。項目を探すだけでも迷うことがありますが、同じ操作を何度か繰り返し、実行結果を確認しながら覚えていきたいと思います。

関連ノード

この記事で使用した主なノードの詳しい使い方は、以下の記事で解説しています。

• Controlの使い方と活用法
• ColorRectの使い方と活用法
• Labelの使い方と活用法
• Buttonの使い方と活用法
• Panelの使い方と活用法