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/ フォルダには最終結果が含まれています。

注釈

このチュートリアルは、`YouTubeのビデオ<https://www.youtube.com/watch?v=y1E_y9AIqow> `_として見ることができます。

UIの分解

最後のUIを分解し、使用するコンテナを計画します。タイトル画面のデザイン と同様に MarginContainer から始まります。次に、最大3つの列を表示できます:

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

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

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

これにより、コンテナのネストが容易になります。 MarginContainer を使用して2つのカラムを管理するために HBoxContainer を使用して、画面の境界の周りにいくつかのマージンを持たせます。 2つのバーは(左側の) VBoxContainer 内で互いに積み重ねられます。そして、仕上げに爆弾とエメラルドカウンターを並べて配置するに、右側のカラムに HBoxContainer が必要です。

../../_images/ui_gui_step_tutorial_containers_structure.png

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

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

基本GUIの作成

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

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

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

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

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

MarginContainer を選択した状態で、インスペクタに移動し、下にスクロールしてカスタム定数のセクションを表示します。展開し、各 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

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

As they have a container as their direct parent, we cannot move them freely: the Count node will always reset their anchors, their size and position. Try to move and resize the nodes in the viewport. Then, select any of the three textures and press Ctrl + Up or Ctrl + Down to reorder them in the Scene dock. They'll snap back to their previous size and position.

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

../../_images/ui_gui_step_tutorial_bar_nesting_inside_background.png

バックグラウンドノードを2つのテクスチャの親として使用することで、Count MarginContainerから制御を取り除きます

Title を選択し、インスペクタで Stretch Mode プロパティを Keep Centered に変更します。次に、インスペクタで Rect``カテゴリを見つけ、 ``Size プロパティを(50,40)に変更して、背景の左半分のみを取得します。次に、 Number ノードを選択します。ビューポートで、 レイアウト メニューをクリックし、 Full 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 ノードのようなものです。なので、これを複製してテンプレートとして使用します。

Under the Bar node, select Count and press Ctrl + D to duplicate it. Drag and drop the new node under the Counters HBoxContainer at the bottom of the scene tree. You should see it resize automatically. Don't worry about this for now, we'll fix the size soon.

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

../../_images/ui_gui_step_tutorial_counter_design_1.png

ノード ツリーの外観を次に表示します

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

../../_images/ui_gui_step_tutorial_counter_design_2.png

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

Number の Align プロパティを変更して、Background``の左側と中央に移動します。 ``Number ノードを選択し、その Align プロパティを left に、 Valign プロパティを center に変更します。 次に、その左端を少しサイズ変更して、 Background の左端とテキストの間に余白を追加します。

../../_images/ui_gui_step_tutorial_counter_design_3.png

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

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

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

../../_images/ui_gui_step_tutorial_counter_design_4.png

爆弾アイコンがBackgroundの右端に固定されます。カウンターコンテナのサイズを変更して、Iconノードが右側に表示されます

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つ必要です。後でバーのデザインや機能を変更する必要があるかもしれません。 UI要素のテンプレートを格納するための単一のシーンと、バリエーションを処理するための子シーンがあるとしたら素晴らしいことです。Godotはこれを継承されたシーンで可能にしています。

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

ちなみに

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

次に、 Counter ノードを選択して同じ操作を行います。 ブランチをシーンとして保存 を右クリックし、 Counter.tscn として保存します。シーンツリーの Bar ノードの右側に、新しくシーン編集アイコンが表示されるので、それををクリックして対応するシーンを開きます。境界ボックスがコンテンツに合うように Bar ノードのサイズを変更します。コントロールノードに名前を付けて配置した方法で、このテンプレートを継承してライフバーを作成する準備ができました。 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 Meta + S 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を使って作業するのと同じ精神です。ベースクラスを作成し、修飾子クラスを使ってバリエーションを追加します。基本ボタン・クラスからは、ユーザーがプロンプトを受け入れたり拒否したりできるように、ボタン・グリーンとボタン・レッドのバリエーションができます。新しいクラスには、親要素の名前と、親要素の変更方法を説明する追加のキーワードが含まれます。継承されたシーンを作成して最上位ノードの名前を変更する場合も、同じことを行います。

エネルギーバーの設計

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 ノードを再度選択し、インスペクタの右上にあるレンチとドライバのアイコンをクリックします。ドロップダウンメニューから Make Sub-Resources Unique オプションを選択します。このノードが使用するすべてのリソースを検索し、固有のコピーを作成します。

../../_images/ui_gui_step_tutorial_design_EnergyBar_2.png

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

ちなみに

When you duplicate a node from the Scene tree, with Meta + D, 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ピクセル幅になり、両方のゲージが完全に位置合わせされます。

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

カウンターを片付けましょう。 Scene -> New Inherited Scene に移動し、 Counter.tscn をベースとして選択します。ルートノードの名前も BombCounter に変更します。新しいシーンを BombCounter.tscn として保存します。これですべてです。

../../_images/ui_gui_step_tutorial_design_counters_1.png

爆弾カウンターはオリジナルのカウンターシーンと同じです

もう一度 `` シーン->新しい継承したシーン`` に移動し、 Counter.tscn を再度選択します。ルートノードの名前を EmeraldCounter に変更し、シーンを EmeraldCounter.tscn として保存します。このシーンについては、主に爆弾アイコンをエメラルドアイコンに置き換える必要があります。「ファイルシステム」タブで、 emeralds_icon.png を Icon ノードの Texture スロットにドラッグします。 Icon はすでに Background ノードの右端に固定されているため、その位置を変更でき、 EmeraldCounter コンテナーでスケーリングおよび再配置できます。エメラルドアイコンを少しだけ右下に移動します。位置の微調整にはキーボードの矢印キーを使用して下さい。保存を行えば、これですべてのUI要素が完成しました。

../../_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 プロパティを変更して、カウンタの背景の高さを制御します。

We have one small issue left with the EP label on the EnergyBar: the 2 bars should align vertically. Click the icon next to the EnergyBar node to open its scene. Select the Count node and scroll down to the Custom Constants section. Add a Margin Left of 20. In the Rect section set the node's Min Size back to 100, the same value as on the LifeBar. The Count should now have some margin on the left. If you save and go back to the GUI scene, it will be aligned vertically with the LifeBar.

../../_images/ui_gui_step_tutorial_assemble_final_gui_4.png

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

注釈

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

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

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

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

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

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

../../_images/ui_gui_design_final_result.png

最終結果

注釈

レスポンシブデザインに関する最後の注意事項 。GUI のサイズを変更すると、ノードが移動しますが、テクスチャとテキストはスケーリングしません。GUIには、内部のテクスチャに基づいて最小サイズも使用されます。ゲームでは、Webサイトほど柔軟なインターフェイスは必要ありませんが、横向きと縦向きの両方をサポートすることはほとんどありません。横向きでは、最も一般的な比率の範囲は 4:3～16:9 です。彼らはお互いに近いため、GUI要素はウィンドウサイズを変更する場合にのみ水平方向に移動するだけで十分です。