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

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

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

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

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

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

Godot4 ダイアログにコンテナを用いてコントロールを配置1

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

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

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

Godot4 ダイアログにコンテナを用いてコントロールを配置2

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

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

Godot4 ダイアログにコンテナを用いてコントロールを配置4

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

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

Godot4 ダイアログにコンテナを用いてコントロールを配置5

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

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

Godot4 ダイアログにコンテナを用いてコントロールを配置6

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

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

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

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

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

Godot4 ダイアログにコンテナを用いてコントロールを配置7

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

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

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

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

Godot4 ダイアログにコンテナを用いてコントロールを配置8

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

Godot4 ダイアログにコンテナを用いてコントロールを配置9

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

まとめ

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

参照サイト Thank You!

記事一覧 → Compota-Soft-Press

コメント

Ads Blocker Image Powered by Code Help Pro

お願い - Ads Blocker Detected

このサイトは広告を掲載して運営しています。

ポップアップを閉じて閲覧できますが、よろしければ

このサイト内の広告を非表示にする拡張機能をオフにしていただけませんか?

━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

We have detected that you are using extensions to block ads. Please support us by disabling these ads blocker.

タイトルとURLをコピーしました