GUIの設計

これで基本を確認できたので、再利用可能なUIコンポーネント(ライフバー、エネルギーバー、爆弾とエメラルドカウンターなど)を使用してゲームのグラフィカルユーザーインターフェイス(GUI)を構築する方法を見ていきます。このチュートリアルの終わりまでには、GDscriptまたはVisualScriptで制御する準備ができたゲームGUIが完成します。

../../_images/ui_gui_design_final_result.png

最終結果

また、次の方法についても学習します:

  1. 柔軟なUIコンポーネントの作成
  2. シーンの継承を使用する
  3. 複雑なUIを構築する

プロジェクトファイルui_gui_design.zipをダウンロードし、アーカイブを解凍します。このチュートリアルに沿っていくには、Godotに start/ プロジェクトをインポートしてください。 end/ フォルダには最終結果が含まれています。

注釈

You can watch this tutorial as a video on YouTube.

UIの分析

最終UIを分析し、どのコンテナを使用するか計画します。タイトル画面のデザイン と同様に MarginContainer から始まります。すると、3つの列に分けられます:

  1. 左側にはライフとエネルギーのカウンター
  2. ライフとエネルギーのバー
  3. 右側の爆弾とエメラルドのカウンター

しかし、バーのラベルとゲージは同じUI要素の2つの部分です。このように考えると、2つの列が残ります:

  1. 左側にライフとエネルギーバー
  2. 右側の爆弾とエメラルドのカウンター

これにより、コンテナのネストが容易になります。画面の縁からの余白を入れるために MarginContainer を使い、そこに HBoxContainer で2つの列を調整します。(左側の) 2つのバーは VBoxContainer 内で上下に重ねます。そして、仕上げに爆弾とエメラルドのカウンターを並べて配置するため、右側のカラムに HBoxContainer が必要です。

../../_images/ui_gui_step_tutorial_containers_structure.png

たった4つのコンテナできれいなUIレイアウトが得られました

個々のUIコンポーネント内に追加のコンテナが必要になりますが、これによってメインのGUIシーンの構造がわかります。この計画が整ったら、いよいよGodotでGUIを作成できます。

基本GUIの作成

GUI の設計には、別々のシーンで要素を設計して組み合わせるか、単一のシーンですべてをプロトタイプ化して後で分解するか、という 2 つの方法があります。UI の配置と大きさ変更をより速く実行できるため、単一のシーンで作業する方をおすすめします。デザインの見栄えが良くなったら、ノード ツリーのセクション全体を再利用可能なサブシーンとして保存できます。詳しくは、このすぐ後に説明します。

では、いくつかのコンテナから始めましょう。

新しいシーンを作成し、 MarginContainer を追加します。そのノードを選択し、 GUI という名前を付けます。

インターフェイスを画面の上部に固定する必要があります。GUI ノードを選択し、ビューポートの上部にある「レイアウト」ボタンをクリックして 上伸長 オプションを選択します。GUI ノードは、その親(デフォルトではビューポート)の上端に固定されます。子UIコンポーネント用のスペースを作るために、サイズは垂直軸上で自動的に変更されます。

シーンを GUI.tscn として保存します。 GUI全体をその中に配置します。

MarginContainer を選択した状態で、インスペクタに移動し、カスタム定数(Custom Constants)のセクションまで下にスクロールします。これを展開し、各 Margin プロパティの横のフィールドをクリックします。すべてを 20 ピクセルに設定します。次に、 HBoxContainer ノードを追加します。これは、左側に2本のバーがあり、右側の2つのカウンターと分けてあります。

まずは HBoxContainer 内にバーを垂直に積み重ねたいと思います。 HBoxContainer の子として VBoxContainer を追加し、それに Bars という名前を付けます。次に、親になった HBoxContainer を再度選択し、その子として別の HBoxContainer を追加します。それを Counters と呼びます。これらの4つのコンテナにより、GUIシーンのベースができました。

../../_images/ui_gui_containers_structure_in_godot.png

このようにコンテナが4つあるはずです。

注釈

最初にUIデザインを分解し、使うコンテナについて少し考えたので、このように作ることができます。チュートリアルでは奇妙に思えるかもしれません。しかし実際のゲームで作業してみると、効率的なワークフローであることがわかります。

バーのベースを作成する

各バーは、水平方向に整列する2つのサブ要素に分割されます。左側が体力・カウントのラベル、右側がゲージです。繰り返しになりますが、 HBoxContainer はこの作業に最適なツールです。 Bars ノードを選択し、その中に新しい HBoxContainer を追加します。 Bar という名前を付けます。

ラベル自体には少なくとも3つのノードが必要です。 NinePatchRect は背景用で、その上に HP または EP のテクスチャを追加し、値用に Label を右側に追加します。 Control ノードであれば好きなようにネストできます。この NinePatchRect は他の2つの要素を囲んでいるので、親として使用することもできます。しかし通常は、代わりにコンテナを使用します。UIコンポーネントの編成を助けることが、コンテナの役割だからです。ライフカウントとゲージの間にスペースを入れるため、いずれにせよ後で MarginContainer が必要になります。 Bar を選択し、 MarginContainer を追加してください。それに Count という名前を付けます。その中に、次の3つのノードを追加してください:

  1. Background という名前の NinePatchRect
  2. Title という名前の TextureRect
  3. Number という名前の Label

ノードを兄弟として追加するには、必ず最初に Count ノードを選択します。

../../_images/ui_gui_step_tutorial_bar_template_1.png

シーンツリーは次のようになります。いくつかのテクスチャを追加する準備ができました

シーンはまだ空です。テクスチャをいくつか投入します。テクスチャをロードするには、ビューポートの左側にあるファイルシステムドックに移動します。「res://assets/GUI」フォルダに移動します。

../../_images/ui_gui_step_tutorial_textures_in_FileSystem_tab.png

インターフェースのスキンに使用するテクスチャのリストが表示されます。

シーンDockで背景を選択します。インスペクタに Texture プロパティが表示されます。タブで、 label_HP_bg.png をクリックし、テクスチャスロットにドラッグします。つぶれたままです。親の MarginContainer は、コンテナ内の要素が最小サイズになるまで、サイズを0にします。 Background ノードを選択します。インスペクタで、矩形セクションまでスクロールします。 Min Size を(100、40)に設定します。親コンテナとともに Background のサイズが変更されます。

次に、 Title を選択し、 label_HP.png を Texture スロットにドラッグ&ドロップします。 Number ノードを選択し、 Text プロパティの横のフィールドをクリックして 10 と入力します。これで、ビューポートに両方のノードが表示されます。これらのコンテナは、親の MarginContainer の左上隅に積み重ねられます。

../../_images/ui_gui_step_tutorial_bar_label_stacked.png

両方のノードを選択すると、次のように表示されます

これらは直接の親としてコンテナを持つため、自由に移動することはできません。Count ノードは常にアンカー、サイズ、位置をリセットします。ビューポート内のノードを移動およびサイズ変更してみてください。次に、3つのテクスチャのいずれかを選択し、Ctrl + Up または Ctrl + Down を押して、シーンドックでそれらの順序を変更します。元のサイズと位置に戻ります。

親コンテナは、直接の子のサイズ、スケール、マージン、アンカーを制御します。ノードを変更するには、通常のControlまたは別のUI要素内にノードをネストする必要があります。 Title とナンバーの親として Background を使用します。 Title と Number の両方を選択し、 Background にドラッグ&ドロップします。

../../_images/ui_gui_step_tutorial_bar_nesting_inside_background.png

Backgroundノードを2つのテクスチャの親として使用することで、Count (MarginContainer)による制御を取り除きます

Title を選択し、インスペクタで Stretch Mode プロパティを Keep Centered に変更します。次に、インスペクタで Rect カテゴリを見つけ、 Size プロパティを(50,40)に変更して、背景の左半分のみを取るようにします。次に、 Number ノードを選択します。ビューポートで、 レイアウト メニューをクリックし、 Rect全面 をクリックします。ノードは Background に合うようにサイズ変更されます。インスペクタに移動し、その Align プロパティを Right に変更し、 Valign プロパティを Center に変更します。テキストは ``Background``の右端の中央にスナップするはずです。ノードを水平方向にサイズ変更して、 ``Background``の右半分を取り、右端に少しパディングを追加します。

../../_images/ui_gui_step_tutorial_bar_placed_title_and_label.png

ビューポートでノードのバウンディングボックスがどのように表示されるかを次に示します。今の段階では正確に配置する必要はありません。

ラベルのフォントを置き換える

ラベルのフォントが小さすぎます。変更する必要があります。 Number ノードを選択し、インスペクタで Control クラスまでスクロールして、 Custom Font カテゴリを見つけます。 Font プロパティの横にあるフィールドをクリックして、 New Dynamic Font をクリックします。フィールドをもう一度クリックして編集を選択します。

Dynamic Font リソースを入力します。 Font カテゴリを展開し、 Font Data の横のフィールドをクリックします。 Load ボタンをクリックしてください。ファイルブラウザで、 assets/font フォルダに移動し、 Comfortaa-Bold.ttf をダブルクリックして開きます。ビューポートにフォントの更新が表示されます。フォントサイズを変更するには、設定カテゴリを開きます。 Size プロパティを 24 または 28 のように高い値に設定します。

ここで、テキストのベースライン、つまり数字の下端を、左側のHPテクスチャに揃える必要があります。これを行うには、 DynamicFont リソースの Extra Spacing カテゴリで Bottom プロパティを調整します。テキストに下のパディングを追加します。シーンタブの Number ノードをクリックしてノードのプロパティに戻り、 Valign を Bottom に変更します。テキストのベースラインを調整するには、もう一度 Custom Font カテゴリの下のフォントフィールドをクリックし、テキストが Title ノードに揃うまで Bottom プロパティを微調整します。今回は 2 ピクセルの値を使用しました。

../../_images/ui_gui_step_tutorial_number_baseline.png

下の値を2ピクセルに設定すると、 NumberはTitleに揃えて配置されます

これで、GUIの最も難しい部分が完成しました。おめでとう！それではもっと単純なノードに移りましょう。

プログレスバーを追加する

ライフ・バーを完成させるには、ゲージそのものという最後の要素が必要です。Godotには、必要なものがすべて含まれた TextureProgress ノードが付属しています。

Barノードを選択し、その中に TextureProgress を追加します。 Gauge と名前を付けます。インスペクタで、 Textures セクションを展開します。ファイルシステムドックに移動し、 lifebar_bg.png テクスチャを Under スロットにドラッグ&ドロップします。 lifebar_fill.png イメージについても同じ操作を行い、 Progress スロットにドロップします。インスペクタの Range クラスで Value プロパティを 50 に変更してゲージがいっぱいになったことを確認します。

5つの Control ノードだけで、最初のバーを使用する準備が整いました。

../../_images/ui_gui_step_tutorial_bar_final.png

これで、ライフバーの準備は整いました。 この最後の部分は速かったですよね。 これは、厳密にコンテナ設定をしたおかげです。

爆弾とエメラルドのカウンターをデザインする

爆弾とエメラルドのカウンターは、バーの Count ノードのようなものです。なので、これを複製してテンプレートとして使用します。

Bar ノードの Count を選択し、Ctrl + D を押して複製します。シーンツリーの一番下にある Counters HBoxContainer の下に、新しいノードをドラッグ&ドロップします。自動的にサイズが変更されます。今のところこれについて心配しないでください。サイズはすぐに修正します。

Count2 ノードの名前を Counter に変更します。バーとは異なり、番号を左側に、アイコンを右側に配置します。設定には同様の、背景(NinePatchRect)、タイトル、および数字ノードが必要です。 Title ノードは TextureRect なので、アイコンを表示する必要があります。シーンツリーで、 Title ノードを選択し、名前を Icon に変更します。

../../_images/ui_gui_step_tutorial_counter_design_1.png

今のノードツリーはこのようになっているはずです

Icon ノードを選択した状態で、インスペクタで一番上までスクロールして Texture スロットを表示します。左側のファイルシステム ドックに移動し、 bombs_icon.png を選択します。これを Texture スロットにドラッグ&ドロップします。シーンタブで、 Icon ノードと Number ノードの両方を選択します。ビューポート上部のツールバーにあるレイアウトメニューをクリックし、 Rect全面 を選択します。両方のノードが Background のサイズに合わせて更新されます。

../../_images/ui_gui_step_tutorial_counter_design_2.png

ノードはBackground全体に固定されていますが、位置がずれています

Let's change the Number's align properties to move it to the left and center of the Background. Select the Number node, change its Align property to left and the Valign property to centre. Then resize its left edge a bit to add some padding between the left edge of the Background and the text.

../../_images/ui_gui_step_tutorial_counter_design_3.png

左中央に揃えられたNumberノード

アイコンとBackgroundを重ねるには、いくつかの微調整が必要です。まず、私たちのBackgroundは少し高すぎます。これは、最上位のGUIノードによって制御されるマージン・コンテナ内にあるためです。シーンツリーの一番上にあるGUIノードを選択し、できるだけ細くなるように垂直方向に縮小します。 表示されるゲージを確認して小さくなりすぎないようにします。コンテナは、その最小サイズよりも小さくすることはできません。 コンテナの余白も考慮に入れます。

アイコンを選択し、レイアウトメニューをクリックして、 Rect全面 を選択して中央に戻します。 Background の右端に固定するために必要です。 もう一度レイアウトメニューを開き、 中央右 を選択します。アイコンを Background と垂直になるように上に動かします。

../../_images/ui_gui_step_tutorial_counter_design_4.png

爆弾アイコンがBackgroundの右端に固定されます。Iconノードを右側に表示させるには、Counterコンテナのサイズを変更してください

Barの Count から Counter を複製したため、 Number ノードのフォントはオフになっています。 Number ノードを再度選択し、 Font プロパティに移動してクリックし、 DynamicFont リソースにアクセスします。 Extra Spacing セクションで、 Bottom 値を 0 に変更してフォントのベースラインをリセットします。カウンターは正常に作動します。

ビューポートの右端に Counters アンカーを配置してみましょう。これを行うには、 Bars コンテナがすべての利用可能な水平スペースを確保するように設定する必要があります。 Bars ノードを選択し、 Size Flags カテゴリまで下にスクロールします。 Horizontal カテゴリで、 Expand の値を確認します。 Bars ノードのサイズを変更し、カウンターを画面の右側に押し付ける必要があります。

../../_images/ui_gui_step_tutorial_counter_design_5.png

膨張するコンテナは親からできる限りのスペースを食いつぶし、他のすべてを押しのけていく

バーとカウンタを再利用可能なUIコンポーネントに変える

バーが1つとカウンターウィジェットが1つあります。しかし、それぞれ2つずつ必要です。後でバーのデザインや機能の変更が必要になるかもしれません。1つのシーンをUI要素のテンプレート用にして、そこから作業用に複数の子シーンを派生できれば便利です。Godotはこれを、シーン継承で可能にしています。

LifeBar 、 EnergyBar 、 BombCounter および EmeraldCounter に分類するためにまず、 Counter と Bar ブランチの両方を別々のシーンとして保存します。 Bar (HBoxContainer)を選択し、それを右クリックして ブランチをシーンとして保存 をクリックします。シーン名を Bar.tscn として保存してください。するとノードブランチが単一の Bar ノードに変わるはずです。

ちなみに

シーンとは、ノードのツリーです。(樹木にたとえるなら)最上位のノードはツリーの ルート=根 であり、階層内において最下部の子は 葉 になります。ルート以外のノードと1つ以上の子は、 ブランチ=枝 です。ノード ブランチは、別のシーンとしてカプセル化したり、他のシーンからアクティブなシーンに読み込んでマージすることができます。シーン ドックにある任意のノードを右クリックし、 ブランチをシーンとして保存 または シーンからマージ を選択します。

次に、 Counter ノードを選択して同じ操作を行います。 ブランチをシーンとして保存 を右クリックし、 Counter.tscn として保存します。シーンツリーの Bar ノードの右側に、新しくシーン編集アイコンが表示されるので、それをクリックして対応するシーンを開きます。境界ボックスがコンテンツに合うように Bar ノードのサイズを変更します。コントロールノードに名前を付けて配置した方法で、こうしてControlノードに名前を付けて配置したので、このテンプレートを継承してライフバーを作成する準備ができました。 Counter も同様にしてください。

../../_images/ui_gui_step_tutorial_bar_template_scene.png

追加の変更なしで、私たちのバーは使用する準備ができました

シーンの継承を使用して残りの要素を作成する

同じように機能するバーが2本必要です。どちらも、左側にラベルと数字、右側に水平ゲージがなければなりません。違いは、ひとつはHPラベルを付けて緑色であり、もうひとつはEPと呼ばれて黄色であるものです。Godotには、このゲームで使うすべてのバーの共通基盤を作れる、継承されたシーンという強力な道具があります。

../../_images/gui_step_tutorial_gui_scene_hierarchy.png

継承されたシーンは、GUIシーンをきれいに保つのに役立ちます。最終的に各UIコンポーネントは、いくつかのコンテナと1つのノードだけ持つことになります。

継承シーン内ではすべてのノードで、名前以外にもあらゆるプロパティをインスペクタで変更できます。親シーンを変更して保存すると、すべての継承シーンが更新され、変更が反映されます。継承シーンでプロパティの値を変更すると、親から継承した値は常に上書きされます(ユニーク化する)。UIは同じ要素で複数のバリエーションを必要とすることが多いため、これは役に立ちます。一般的にUIデザインでは、ボタンやパネルなどは共通した基本スタイルと操作性を持ちます。手動ですべてのバリエーションにコピーしていくのは大変なことです。

上書きしたプロパティの横にはリロードアイコンが表示されます。クリックすると、値が親シーンのデフォルトにリセットされます。

注釈

シーンの継承は、ノードツリーや、あるいはGDScriptの extends キーワードのようなものと考えてください。継承されたシーンは親とまったく同じように実行されますが、しかしプロパティやリソースを上書きしたり、ノードやスクリプトを追加したりして機能を拡張できます。

Barシーンを継承してライフバーを構築する

Go to Scene -> New Inherited Scene to create a new type of Bar. Select the Bar scene and open it. You should see a new [unsaved] tab, that's like your Bar, but with all nodes except the root in grey. Press Ctrl + S (Cmd + S on macOS) to save the new inherited scene and name it LifeBar.

../../_images/ui_gui_step_tutorial_inherited_scene_parent.png

グレーアウトしているノードの名前は変更できません。これは、親シーンがあることを示しています

まず、ルートまたは最上位ノードの名前を LifeBar に変更します。ルート名は常に、UIコンポーネントについて正確に説明するようなものにしましょう。この名前によって、次に作成する EnergyBar と区別されます。シーン内のノードについては、すべての継承シーンでも機能するよう、コンポーネント構造を大まかに説明するものにします。TextureProgress ノードや Number ノードもそうなっています。

注釈

Webデザインをしたことがある人なら、CSSを使って作業するのと同じ精神です: 基底クラスを作成してから、それを変更したクラスによってバリエーションを追加します。基本ボタン クラスから派生させて、確認ダイアログ用のButtonGreenとButtonRedを作ります。そしてその新しいクラスには、親の要素と、変更内容を含んだ名前をつけます。継承シーンを作る際には、同じように最上位ノードの名前を変えましょう。

エネルギーバーの設計

LifeBar のデザインは、Bar シーンをメインにして完了しました。今度は EnergyBar が必要です。

新しい継承シーンを作成して、もう一度 Bar.tscn シーンを選択して開きます。 Bar ルートノードをダブルクリックして EnergyBar に名前を変更してください。 新しいシーンを EnergyBar.tscn という名前で保存します。次に必要なのは、HPのテクスチャをEPに置き換えることと、ゲージのテクスチャを変更することです。

左側のファイルシステム ドックに進み、シーンツリーの Title ノードを選択して、 label_EP.png ファイルをテクスチャ スロットにドラッグ＆ドロップします。 Number ノードを選択し、 Text プロパティを 14 のような別の値に変更します。

EPテクスチャがHPテクスチャよりも小さいことがわかります。 Number のフォントサイズを適切なサイズに更新する必要があります。フォントはリソースです。このリソースを使用する、プロジェクト内にあるすべてのノードは、あらゆるプロパティ変更による影響を受けます。フォントサイズを 40 などの大きな値に変更してから、 LifeBar または Bar のシーンに戻ってみてください。テキストのサイズが大きくなっています。

../../_images/ui_gui_step_tutorial_design_EnergyBar_1.png

フォントリソースを変更すると、それを使用するすべてのノードが影響を受けます

このノードのフォントサイズだけを変更するには、フォントリソースのコピーを作成する必要があります。 Number ノードを再度選択し、インスペクタの右上にあるレンチとドライバのアイコンをクリックします。ドロップダウンメニューから サブリソースをユニーク化する を選択します。このノードが使用するすべてのリソースを検索し、固有のコピーを作成します。

../../_images/ui_gui_step_tutorial_design_EnergyBar_2.png

このオプションを使用すると、1つのノードのためにリソースをコピーしてその固有版を作成します

ちなみに

When you duplicate a node from the Scene tree, with Ctrl + D (Cmd + D on macOS), it shares its resources with the original node. You need to use Make Sub-Resources Unique before you can tweak the resources without affecting the source node.

Custom Font セクションまでスクロールして Font を開きます。 Size を 20 または 22 のような小さい値に下げます。テキストのベースラインを左側のEPラベルに合わせるために、 Bottom の間隔値を調整する必要があるかもしれません。

../../_images/ui_gui_step_tutorial_design_EnergyBar_3.png

HPのものよりも小さなフォントを持つEP Countウィジェット

ここで、 TextureProgress ノードを選択します。 energy_bar_bg.png ファイルを Under スロットにドラッグして、同様に energy_bar_fill.png も Progress テクスチャスロットにドロップします。

境界の長方形がゲージに合うように、ノードのサイズを垂直方向に変更できます。 Count ノードについても、サイズがバーのサイズに合うまで同じ操作を繰り返します。 TextureProgress の最小サイズはそのテクスチャに基づいて設定されるため、それより下に Count ノードは縮小できません。これは Bar コンテナのサイズにもなります。こちらも縮小して構いません。

最後に、 Background コンテナの最小サイズが少し大きめになっています。選択してから、 Rect セクションで Min Size プロパティを 80 ピクセルに変更します。自動的にサイズが変更され、 Title ノードと Number ノードも再配置されます。

../../_images/ui_gui_step_tutorial_design_EnergyBar_4.png

Countは少し小さくなり、見た目が良くなりました

ちなみに

Countノードのサイズは、TextureProgressの位置に影響します。これからバーを縦に並べるので、Counterの左マージンを使用してEPラベルのサイズを変更した方がよいでしょう。これにより、EnergyBarのCountノードとLifeBarのCountノードの両方が100ピクセル幅になり、両方のゲージが完全に位置合わせされます。

爆弾とエメラルドのカウンターを準備する

カウンターを片付けましょう。 シーン → 新しい継承したシーン にて、ベースとして Counter.tscn を選択します。ルートノードの名前も BombCounter に変更します。新しいシーンを BombCounter.tscn として保存します。このシーンは、これですべてです。

../../_images/ui_gui_step_tutorial_design_counters_1.png

爆弾カウンターは元のCounterシーンと同じです

Go to Scene -> New Inherited Scene again and select Counter.tscn once more. Rename the root node EmeraldCounter and save the scene as EmeraldCounter.tscn. For this one, we mainly need to replace the bomb icon with the emerald icon. In the FileSystem tab, drag the emeralds_icon.png onto the Icon node's Texture slot. Icon already anchors to the right edge of the Background node so we can change its position and it will scale and reposition with the EmeraldCounter container. Shift the emerald icon a bit to the right and down. Use the Arrow Keys on the keyboard to nudge its position. Save, and we're done with all the UI elements.

../../_images/ui_gui_step_tutorial_design_counters_2.png

エメラルドのカウンターはこのようになります

最終的なGUIにUIコンポーネントを追加する

すべてのUI要素をメインGUIシーンに追加します。 GUI.tscn シーンを再度開き、 Bar ノードと Counter ノードを削除します。ファイルシステムドックで LifeBar.tscn を見つけて、シーンツリー内の Bars コンテナにドラッグアンドドロップします。 EnergyBar についても同じ操作を行います。縦に並んでいるのが見えるはずです。

../../_images/ui_gui_step_tutorial_assemble_final_gui_1.png

LifeBarとEnergyBarは自動的に配置されます

次に、 BombCounter.tscn と EmeraldCounter.tscn シーンを Counters ノードにドラッグ&ドロップします。サイズは自動的に変更されます。

../../_images/ui_gui_step_tutorial_assemble_final_gui_2.png

ノードのサイズが変更され、使用可能なすべての垂直スペースが使用されます

EmeraldCounter と BombCounter が Counter.tscn で定義したサイズを使用できるようにするには、 Counters コンテナの Size Flags を変更する必要があります。 Counters ノードを選択し、インスペクタの Size Flags セクションを展開します。 Vertical プロパティの Fill タグのチェックを外し、 Shrink Center をチェックして、コンテナが HBoxContainer の内側にくるようにします。

../../_images/ui_gui_step_tutorial_assemble_final_gui_3.png

両方のカウンタが適切なサイズになりました

ちなみに

Counters コンテナの Min Size プロパティを変更して、カウンタの背景の高さを制御します。

EnergyBarのEPラベルにはまだ小さな問題が1つ残っています。2本のバーは垂直に整列させる必要があります。 EnergyBar ノードの横にあるアイコンをクリックして、そのシーンを開きます。 Count ノードを選択し、Custom Constants セクションまで下にスクロールして、 Margin Left に 20 を追加します。 Rect セクションでは、ノードの Min Size を100に戻します。これは、LifeBarと同じ値です。 Count の左側にいくらかの余白ができているはずです。保存してGUIシーンに戻ると、 LifeBar と垂直に整列しています。

../../_images/ui_gui_step_tutorial_assemble_final_gui_4.png

2本のバーがぴったり揃います

注釈

先ほどは、この方法で EnergyBar を設定することもできました。しかし、いつでも任意のシーンに戻って、微調整し、変更をプロジェクト全体に反映できることを示すために、このようにしました！

GUIをゲームのモックアップに配置する

チュートリアルを締めくくるために、ゲームのモックアップシーンにGUIを挿入します。

ファイルシステムドックに進み、 LevelMockup.tscn を開きます。

GUI.tscn シーンを bg ノードのすぐ下、 Characters の上にドラッグ＆ドロップします。GUIはビューポート全体に合うように拡大縮小されます。レイアウトメニューに進み、 中央上 オプションを選択して、ゲームウィンドウの上端に固定します。 次にGUIを、垂直方向にできるだけ小さくなるようサイズ変更します。これで、ゲーム中にインターフェイスがどのように見えるかを確認できます。

おめでとうございます。この長いチュートリアルも終わりに近づきました。こちらが最終プロジェクトです。ui_gui_design.zip.

../../_images/ui_gui_design_final_result.png

最終結果

注釈

A final note about Responsive Design. If you resize the GUI, you'll see the nodes move, but the textures and text won't scale. The GUI also has a minimum size, based on the textures inside of it. In games, we don't need the interface to be as flexible as that of a website. You almost never want to support both landscape and portrait screen orientations. It's one or the other. In landscape orientation, the most common ratios range from 4:3 to 16:9. They are close to one another. That's why it's enough for the GUI elements to only move horizontally when we change the window size.