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

最終結果
また、次の方法についても学習します:
- 柔軟なUIコンポーネントの作成
- シーンの継承を使用する
- 複雑なUIを構築する
プロジェクトファイルui_gui_design.zip
をダウンロードし、アーカイブを解凍します。このチュートリアルに沿っていくには、Godotに start/ プロジェクトをインポートしてください。 end/ フォルダには最終結果が含まれています。
注釈
このチュートリアルは、YouTubeのビデオとして見ることができます (英語)。
UIの分析¶
最終UIを分析し、どのコンテナを使用するか計画します。タイトル画面のデザイン と同様に MarginContainer
から始まります。すると、3つの列に分けられます:
- 左側にはライフとエネルギーのカウンター
- ライフとエネルギーのバー
- 右側の爆弾とエメラルドのカウンター
しかし、バーのラベルとゲージは同じUI要素の2つの部分です。このように考えると、2つの列が残ります:
- 左側にライフとエネルギーバー
- 右側の爆弾とエメラルドのカウンター
これにより、コンテナのネストが容易になります。画面の縁からの余白を入れるために MarginContainer
を使い、そこに HBoxContainer
で2つの列を調整します。(左側の) 2つのバーは VBoxContainer
内で上下に重ねます。そして、仕上げに爆弾とエメラルドのカウンターを並べて配置するため、右側のカラムに HBoxContainer
が必要です。

たった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シーンのベースができました。

このようにコンテナが4つあるはずです。
注釈
最初にUIデザインを分解し、使うコンテナについて少し考えたので、このように作ることができます。チュートリアルでは奇妙に思えるかもしれません。しかし実際のゲームで作業してみると、効率的なワークフローであることがわかります。
バーのベースを作成する¶
各バーは、水平方向に整列する2つのサブ要素に分割されます。左側が体力・カウントのラベル、右側がゲージです。繰り返しになりますが、 HBoxContainer
はこの作業に最適なツールです。 Bars
ノードを選択し、その中に新しい HBoxContainer
を追加します。 Bar
という名前を付けます。
ラベル自体には少なくとも3つのノードが必要です。 NinePatchRect
は背景用で、その上に HP
または EP
のテクスチャを追加し、値用に Label
を右側に追加します。 Control
ノードであれば好きなようにネストできます。この NinePatchRect
は他の2つの要素を囲んでいるので、親として使用することもできます。しかし通常は、代わりにコンテナを使用します。UIコンポーネントの編成を助けることが、コンテナの役割だからです。ライフカウントとゲージの間にスペースを入れるため、いずれにせよ後で MarginContainer
が必要になります。 Bar
を選択し、 MarginContainer
を追加してください。それに Count
という名前を付けます。その中に、次の3つのノードを追加してください:
Background
という名前のNinePatchRect
Title
という名前のTextureRect
Number
という名前のLabel
ノードを兄弟として追加するには、必ず最初に Count
ノードを選択します。

シーンツリーは次のようになります。いくつかのテクスチャを追加する準備ができました
シーンはまだ空です。テクスチャをいくつか投入します。テクスチャをロードするには、ビューポートの左側にあるファイルシステムドックに移動します。「res://assets/GUI」フォルダに移動します。

インターフェースのスキンに使用するテクスチャのリストが表示されます。
シーンDockで背景を選択します。インスペクタに Texture
プロパティが表示されます。タブで、 label_HP_bg.png
をクリックし、テクスチャスロットにドラッグします。つぶれたままです。親の MarginContainer
は、コンテナ内の要素が最小サイズになるまで、サイズを0にします。 Background
ノードを選択します。インスペクタで、矩形セクションまでスクロールします。 Min Size
を(100、40)に設定します。親コンテナとともに Background
のサイズが変更されます。
次に、 Title
を選択し、 label_HP.png
を Texture
スロットにドラッグ&ドロップします。 Number
ノードを選択し、 Text
プロパティの横のフィールドをクリックして 10
と入力します。これで、ビューポートに両方のノードが表示されます。これらのコンテナは、親の MarginContainer
の左上隅に積み重ねられます。

両方のノードを選択すると、次のように表示されます
これらは直接の親としてコンテナを持つため、自由に移動することはできません。Count
ノードは常にアンカー、サイズ、位置をリセットします。ビューポート内のノードを移動およびサイズ変更してみてください。次に、3つのテクスチャのいずれかを選択し、Ctrl + Up または Ctrl + Down を押して、シーンドックでそれらの順序を変更します。元のサイズと位置に戻ります。
親コンテナは、直接の子のサイズ、スケール、マージン、アンカーを制御します。ノードを変更するには、通常のControlまたは別のUI要素内にノードをネストする必要があります。 Title
とナンバーの親として Background
を使用します。 Title
と Number
の両方を選択し、 Background
にドラッグ&ドロップします。

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

ビューポートでノードのバウンディングボックスがどのように表示されるかを次に示します。今の段階では正確に配置する必要はありません。
ラベルのフォントを置き換える¶
ラベルのフォントが小さすぎます。変更する必要があります。 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
ピクセルの値を使用しました。

下の値を2ピクセルに設定すると、 NumberはTitleに揃えて配置されます
これで、GUIの最も難しい部分が完成しました。おめでとう!それではもっと単純なノードに移りましょう。
プログレスバーを追加する¶
ライフ・バーを完成させるには、ゲージそのものという最後の要素が必要です。Godotには、必要なものがすべて含まれた TextureProgress
ノードが付属しています。
Barノードを選択し、その中に TextureProgress
を追加します。 Gauge
と名前を付けます。インスペクタで、 Textures
セクションを展開します。ファイルシステムドックに移動し、 lifebar_bg.png
テクスチャを Under
スロットにドラッグ&ドロップします。 lifebar_fill.png
イメージについても同じ操作を行い、 Progress
スロットにドロップします。インスペクタの Range
クラスで Value
プロパティを 50
に変更してゲージがいっぱいになったことを確認します。
5つの Control
ノードだけで、最初のバーを使用する準備が整いました。

これで、ライフバーの準備は整いました。 この最後の部分は速かったですよね。 これは、厳密にコンテナ設定をしたおかげです。
爆弾とエメラルドのカウンターをデザインする¶
爆弾とエメラルドのカウンターは、バーの Count
ノードのようなものです。なので、これを複製してテンプレートとして使用します。
Bar
ノードの Count
を選択し、Ctrl + D を押して複製します。シーンツリーの一番下にある Counters
HBoxContainer
の下に、新しいノードをドラッグ&ドロップします。自動的にサイズが変更されます。今のところこれについて心配しないでください。サイズはすぐに修正します。
Count2
ノードの名前を Counter
に変更します。バーとは異なり、番号を左側に、アイコンを右側に配置します。設定には同様の、背景(NinePatchRect
)、タイトル、および数字ノードが必要です。 Title
ノードは TextureRect
なので、アイコンを表示する必要があります。シーンツリーで、 Title
ノードを選択し、名前を Icon
に変更します。

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

ノードはBackground全体に固定されていますが、位置がずれています
Number
の Align
プロパティを変更して、Background
の左側と中央に移動します。Number
ノードを選択し、その Align
プロパティを left に、Valign
プロパティを center に変更します。 次に、その左端を少しサイズ変更して、Background
の左端とテキストの間に少し余白を追加します。

左中央に揃えられたNumberノード
アイコンとBackgroundを重ねるには、いくつかの微調整が必要です。まず、私たちのBackgroundは少し高すぎます。これは、最上位のGUIノードによって制御されるマージン・コンテナ内にあるためです。シーンツリーの一番上にあるGUIノードを選択し、できるだけ細くなるように垂直方向に縮小します。 表示されるゲージを確認して小さくなりすぎないようにします。コンテナは、その最小サイズよりも小さくすることはできません。 コンテナの余白も考慮に入れます。
アイコンを選択し、レイアウトメニューをクリックして、 Rect全面
を選択して中央に戻します。 Background
の右端に固定するために必要です。 もう一度レイアウトメニューを開き、 中央右
を選択します。アイコンを Background
と垂直になるように上に動かします。

爆弾アイコンがBackgroundの右端に固定されます。Iconノードを右側に表示させるには、Counterコンテナのサイズを変更してください
Barの Count
から Counter
を複製したため、 Number
ノードのフォントはオフになっています。 Number
ノードを再度選択し、 Font
プロパティに移動してクリックし、 DynamicFont
リソースにアクセスします。 Extra Spacing
セクションで、 Bottom
値を 0
に変更してフォントのベースラインをリセットします。カウンターは正常に作動します。
ビューポートの右端に Counters
アンカーを配置してみましょう。これを行うには、 Bars
コンテナがすべての利用可能な水平スペースを確保するように設定する必要があります。 Bars
ノードを選択し、 Size Flags
カテゴリまで下にスクロールします。 Horizontal
カテゴリで、 Expand
の値を確認します。 Bars
ノードのサイズを変更し、カウンターを画面の右側に押し付ける必要があります。

膨張するコンテナは親からできる限りのスペースを食いつぶし、他のすべてを押しのけていく
バーとカウンタを再利用可能な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
も同様にしてください。

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

継承されたシーンは、GUIシーンをきれいに保つのに役立ちます。最終的に各UIコンポーネントは、いくつかのコンテナと1つのノードだけ持つことになります。
継承シーン内ではすべてのノードで、名前以外にもあらゆるプロパティをインスペクタで変更できます。親シーンを変更して保存すると、すべての継承シーンが更新され、変更が反映されます。継承シーンでプロパティの値を変更すると、親から継承した値は常に上書きされます(ユニーク化する)。UIは同じ要素で複数のバリエーションを必要とすることが多いため、これは役に立ちます。一般的にUIデザインでは、ボタンやパネルなどは共通した基本スタイルと操作性を持ちます。手動ですべてのバリエーションにコピーしていくのは大変なことです。
上書きしたプロパティの横にはリロードアイコンが表示されます。クリックすると、値が親シーンのデフォルトにリセットされます。
注釈
シーンの継承は、ノードツリーや、あるいはGDScriptの extends
キーワードのようなものと考えてください。継承されたシーンは親とまったく同じように実行されますが、しかしプロパティやリソースを上書きしたり、ノードやスクリプトを追加したりして機能を拡張できます。
Barシーンを継承してライフバーを構築する¶
シーン → 新しい継承シーン
に移動して、新しいタイプの Bar
を作成します。Bar
シーンを選択して開きます。新しい[未保存]タブが表示されるはずです。これは Bar
と似ていますが、ルート以外のすべてのノードがグレーで表示されています。Ctrl + S (macOSでは Cmd + S) を押して、継承された新しいシーンを保存し、LifeBar
という名前を付けます。

グレーアウトしているノードの名前は変更できません。これは、親シーンがあることを示しています
まず、ルートまたは最上位ノードの名前を 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
のシーンに戻ってみてください。テキストのサイズが大きくなっています。

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

このオプションを使用すると、1つのノードのためにリソースをコピーしてその固有版を作成します
ちなみに
Ctrl + D (macOSでは Cmd + D), を使用してシーンツリーにあるノードを複製するときは、新しいノードはリソースを元のノードと共有します。元ノードに影響を与えずにリソースを微調整するには、サブリソースをユニーク化する
を使用しなければなりません。
Custom Font
セクションまでスクロールして Font
を開きます。 Size
を 20
または 22
のような小さい値に下げます。テキストのベースラインを左側のEPラベルに合わせるために、 Bottom
の間隔値を調整する必要があるかもしれません。

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
ノードも再配置されます。

Countは少し小さくなり、見た目が良くなりました
ちなみに
Countノードのサイズは、TextureProgressの位置に影響します。これからバーを縦に並べるので、Counterの左マージンを使用してEPラベルのサイズを変更した方がよいでしょう。これにより、EnergyBarのCountノードとLifeBarのCountノードの両方が100ピクセル幅になり、両方のゲージが完全に位置合わせされます。
爆弾とエメラルドのカウンターを準備する¶
カウンターを片付けましょう。 シーン → 新しい継承したシーン
にて、ベースとして Counter.tscn
を選択します。ルートノードの名前も BombCounter
に変更します。新しいシーンを BombCounter.tscn
として保存します。このシーンは、これですべてです。

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

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

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

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

両方のカウンタが適切なサイズになりました
ちなみに
Counters
コンテナの Min Size
プロパティを変更して、カウンタの背景の高さを制御します。
EnergyBarのEPラベルにはまだ小さな問題が1つ残っています。2本のバーは垂直に整列させる必要があります。 EnergyBar
ノードの横にあるアイコンをクリックして、そのシーンを開きます。 Count
ノードを選択し、Custom Constants
セクションまで下にスクロールして、 Margin Left
に 20
を追加します。 Rect
セクションでは、ノードの Min Size
を100に戻します。これは、LifeBarと同じ値です。 Count
の左側にいくらかの余白ができているはずです。保存してGUIシーンに戻ると、 LifeBar
と垂直に整列しています。

2本のバーがぴったり揃います
注釈
先ほどは、この方法で EnergyBar
を設定することもできました。しかし、いつでも任意のシーンに戻って、微調整し、変更をプロジェクト全体に反映できることを示すために、このようにしました!
GUIをゲームのモックアップに配置する¶
チュートリアルを締めくくるために、ゲームのモックアップシーンにGUIを挿入します。
ファイルシステムドックに進み、 LevelMockup.tscn
を開きます。
GUI.tscn
シーンを bg
ノードのすぐ下、 Characters
の上にドラッグ&ドロップします。GUIはビューポート全体に合うように拡大縮小されます。レイアウトメニューに進み、 中央上
オプションを選択して、ゲームウィンドウの上端に固定します。 次にGUIを、垂直方向にできるだけ小さくなるようサイズ変更します。これで、ゲーム中にインターフェイスがどのように見えるかを確認できます。
おめでとうございます。この長いチュートリアルも終わりに近づきました。こちらが最終プロジェクトです。ui_gui_design.zip
.

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