Godot4 独自のダイアログにコンテナを使ってラベルなどを並べて配置する例

無料・軽快な 2D / 3D 用のゲームエンジン Godot Engine 4 で、ダイアログの基礎となるクラス AcceptDialog に、数値を指定する SpinBox や文字を表示する Label を Container の派生クラスを使って縦や横に並べて、スペース（マージン）を追加しながら、配置する例を紹介します。

※ GodotEngine 4.3 を使用しています。.NET 版ではありません。
※スクリプトは自己責任でご使用ください。

ダイアログの基礎となる AcceptDialog でシーンを作成

ダイアログの基礎となるクラス AcceptDialog をルートノードにして、独自のダイアログのシーンを作成します。

メニュー「シーン」→「新規シーン」を選択して、シーンドックで「その他のノード」を押すと開かれる「Node を新規作成」ダイアログで AcceptDialog を選択して「作成」ボタンを押します。
※「Node を新規作成」ダイアログの検索を用いると探しやすいです。

ウィンドウ上部の 2D ワークスペースを選択すると、作成直後の AcceptDialog ルートノードは非表示になっていて何も表示されません。

AcceptDialog ルートノードの右側のアイコンを切り替えて非表示から表示する状態に切り替えましょう。

例では、ルートノード・シーンをわかりやすくするためにノードの名前を ScFitFontSizeDialog にリネームしました。
※ノードを選択して F2 キーなどで名前を変更できます。

ダイアログの UI は Container を使って配置します

AcceptDialog ルートノードの子ノードに SpinBox コントロールを二つ追加しても、かぶってしまい、位置やサイズの変更もできません。
これは、 AcceptDialog がコンテナを用いてコントロール群を配置するためです。
# コンテナは、他の開発環境では Sizer と呼ぶ場合もあります。

以下は、コンテナを用いたコントロールの配置例です。
コンテナの下位にコントロールのノードを追加することで、そのコンテナに従って整列されます。

• AcceptDialog　：ダイアログの基礎
  • HBoxContainer　：下位のコントロールノード群を横に並べて配置するコンテナ
    • SpinBox　：数値を入力するボタン付きのコントロール
    • MarginContainer　：余白を作るコンテナ
    • Label　：文字を表示するコントロール
    • MarginContainer
    • SpinBox

先ほどはかぶっていた２個の SpinBox コントロールも、 HBoxContainer によって横に並べられて配置できました。
※ノードを追加するには、上位ノードを右クリックして表示される「子ノードを追加」を選択して、先ほどの「Node を新規作成」で各クラスを選択してから「作成」ボタンを押します。

ダイアログのタイトル、SpinBox の最大最小などの設定

AcceptDialog クラスで作った ScFitFontSizeDialog ルートノードをシーンドックで選択して、インスペクタードックの Window クラスの Title プロパティを編集することで、ダイアログのタイトルバーに表示する文字列を設定できます。

SpinBox クラスで追加した子ノードをシーンドックで選択して、インスペクタードックでいくつか設定を変更しました。

SpinBox クラスの Alignment プロパティは初期値は Left で数字が左寄せになっていますが、 Right に変えることで右寄せに変えました。

同じインスペクタードックの SpinBox の下側にある Range クラス（SpinBox の派生元）の Min Value, Max Value プロパティで、設定できる数値の最小と最大を設定できます。初期値は 0, 100 です。

Step プロパティで、増分値を設定できます。初期値の 1 では、右側の上下のボタンを押すことで ±１ずつ変化します。

Value プロパティでその SpinBox の初期値を設定できます。

SpinBox などのコントロールの派生元である Control クラスの部分（上図の右下）には、コンテナクラスの下位にノードを置くことで変換するプロパティがあります。

「このノードはコンテナの子です。」と表示され、 Transform セクションの Position, Size などが変更不可になった代わりに、 Custom Minimum Size プロパティでコントロールのサイズの最小値を設定できます。

余白の追加と、複数行へのコントロールの配置

HBoxContainer の下位に置いたコントロールのノードは、横に並びます。
空白をいれたい場合は、 MarginContainer をそのノード群の途中に追加します。
空白の幅はインスペクタードックで Control クラスの Custom Minimum Size プロパティで設定できます。

また、複数行にコントロールを配置したい場合は、下位のコントロール群を縦に並べる　VBoxContainer ノードを上位に追加して、その下位に、横に並べる HBoxContainer ノードを行数の分だけ（例で３個）配置して、各 HBoxContainer の下位にコントロールノードを置きます。

• AcceptDialog
  • VBoxContainer
    • HBoxContainer
      • Label
    • HBoxContainer
      • MarginContainer
    • HBoxContainer
      • SpinBox
      • MarginContainer
      • Label
      • MarginContainer
      • SpinBox

以上で、ダイアログにコントロール群を縦と横に並べて配置することができました。

まとめ

今回は、無料・軽快な 2D / 3D 用のゲームエンジン Godot Engine 4 で、ダイアログの基礎となるクラス AcceptDialog に、数値を指定する SpinBox や文字を表示する Label を Container の派生クラスを使って縦や横に並べて、スペース（マージン）を追加しながら、配置する例を紹介しました。

参照サイト Thank You!

• Godot Engine – Free and open source 2D and 3D game engine
• Control — Godot Engine (4.x)の日本語のドキュメント
• AcceptDialog — Godot Engine (4.x)の日本語のドキュメント
• SpinBox — Godot Engine (4.x)の日本語のドキュメント
• Label — Godot Engine (4.x)の日本語のドキュメント
• コンテナの使用 — Godot Engine (4.x)の日本語のドキュメント
• Container — Godot Engine (4.x)の日本語のドキュメント
• HBoxContainer — Godot Engine (4.x)の日本語のドキュメント
• VBoxContainer — Godot Engine (4.x)の日本語のドキュメント
• MarginContainer — Godot Engine (4.x)の日本語のドキュメント

記事一覧 → Compota-Soft-Press