9．ヘッドアップディスプレイの作成
HUDシーンの作成
ゲームのメイン部分は前回まででできています。ここではヘッドアップディスプレイ（Heads-Up display / Head-Up Display / HUD）を作成していきます。
ヘッドアップは注意喚起のような意味です。ヘッドアップディスプレイは、戦闘機などで視野に重ねた情報を指します。ゲームなら、体力ゲージやスコアなどが相当します。
ここでは、次のものを作成します。
- スコア
- ゲームオーバーのメッセージ
- リスタートボタン
こうした、ゲーム画面に被せて描画するノードに最適なのは「CanvasLayer」です。他の領域とレイヤーを分けた表示領域を作ってくれます。
新しいシーンを作り、「CanvasLayer」をルートノードにして、「HUD」という名前にします。
画面上部のタブから「2D」を選び、2Dビューにします。サイドバーの表示は「インスペクター」ドックにします。
トップメニューの「シーン」から「新規シーン」を選択します。
「シーン」ドックの「ルートノードを生成」から「その他のノード」をクリックします。「Node を新規作成」ダイアログが開きますので、検索に「CanvasLayer」と入力して、「CanvasLayer」を選択して「作成」ボタンを押します。
「シーン」ドックに「CanvasLayer」が現れますので「HUD」に名前を変えます。
シーンが未保存なので「Ctrl+S」で保存します。「名前を付けてシーンを保存」ダイアログが表示されます。ファイルの名前は、デフォルトのhud.tscnのままにします。
「ファイルシステム」ドックにhud.tscnが追加されました。
UI用のノードの作成
作成したHUDシーンに、UI用のノードを追加していきます。
UI部品の基本ノードは「Control」です。ボタンやラベル、メニューやパネルなど、各種のUI部品が子クラスに存在しています。
ここでは、次のような種類と名前のノードをHUDノードに追加します。
| 種類 | 名前 | 用途 |
|---|---|---|
| Label | ScoreLabel | 得点の表示 |
| Label | Message | ゲームオーバーのメッセージ |
| Button | StartButton | リスタートボタン |
| Timer | MessageTimer | メッセージ用のタイマー |
- Label — Godot Engine (4.x)の日本語のドキュメント
- Button — Godot Engine (4.x)の日本語のドキュメント
- Timer — Godot Engine (4.x)の日本語のドキュメント
「シーン」ドックの「HUD」を右クリックして「子ノードを追加」を選び、それぞれの種類のノードを追加して名前を変更します。
ScoreLabelの設定
それでは「ScoreLabel」の設定をおこないます。
「シーン」ドックの「ScoreLabel」を選択します。「インスペクター」ドックの「Label」＞「Text」に「0」という数字を入力します。
続いて、「インスペクター」ドックの「Control」＞「Theme Overrides」＞「Fonts」の「<空>」の部分に、「ファイルシステム」ドックのfonts/Xolonium-Regular.ttfをドロップします。そして「Ctrl+S」で変更を保存します。
さらに、「インスペクター」ドックの「Control」＞「Theme Overrides」＞「Font Sizes」に「64」という数値を入力します。
次はアンカーの設定です。「Control」ノードには位置とサイズとは別に、どこを基準にするかという「アンカー」の設定もあります。
アンカーの操作をおこなうと、「インスペクター」ドックの、「Control」＞「Layout」＞「Transform」＞「Position」の「x」と「y」が、指定した位置になるように変わります。
2Dビューの上部に並ぶボタンの中から、「ビュー」ボタンの横の「丸にプラスのボタン」をクリックします。「アンカーのプリセット」のリストが表示されるので「中央上」の項目をクリックして選択します。
「ScoreLabel」の表示位置が中央上に移動します。「Ctrl+S」で変更を保存します。
Messageの設定
操作は、基本的には「ScoreLabel」と同じです。ここでおこなう操作をまとめます。
- 「シーン」ドックの「Message」を選択します。
- 「インスペクター」ドックの「Label」＞「Text」に「Dodge the Creeps!」というテキストを入力します。
-
「インスペクター」ドックの「Control」＞「Theme Overrides」＞「Fonts」の「<空>」に、「ファイルシステム」ドックの
fonts/Xolonium-Regular.ttfをドロップします。 - 「インスペクター」ドックの「Control」＞「Theme Overrides」＞「Font Sizes」に「64」という数値を入力します。
続いて、次の操作もおこないます。「インスペクター」ドックでの作業です。
- 「Label」＞「Horizontal Alignment」を「Center」にします。
- 「Label」＞「Vertical Alignment」を「Center」にします。
- 「Label」＞「Autowrap Mode」を「Word」にします。
- 「Control」＞「Layout」＞「Transform」＞「Size」＞「x」を「480」（ビューポートの横幅）にします。
最後に「アンカーのプリセット」で「中央」を選択します。
StartButtonの設定
「StartButton」の操作も、「ScoreLabel」と似ています。ここでおこなう操作をまとめます。
- 「シーン」ドックの「StartButton」を選択します。
- 「インスペクター」ドックの「Button」＞「Text」に「Start」というテキストを入力します。
-
「インスペクター」ドックの「Control」＞「Theme Overrides」＞「Fonts」の「<空>」に、「ファイルシステム」ドックの
fonts/Xolonium-Regular.ttfをドロップします。 - 「インスペクター」ドックの「Control」＞「Theme Overrides」＞「Font Sizes」に「64」という数値を入力します。
続いて、次の操作もおこないます。
- 「インスペクター」ドックの「Control」＞「Layout」＞「Transform」＞「Size」＞「x」を「200」、「y」を「100」にします。
- 「アンカーのプリセット」で「中央下」を選択します。
- 「インスペクター」ドックの「Control」＞「Layout」＞「Transform」＞「Position」＞「y」を「580」にします。
MessageTimerの設定
「MessageTimer」の設定もおこないます。
- 「シーン」ドックの「MessageTimer」を選択します。
- 「インスペクター」ドックの「Timer」＞「Wait Time」を「2」にします。
- 「インスペクター」ドックの「Timer」＞「One Shot」を「オン」にします。
