無料・軽快な 2D / 3D 用のゲームエンジン Godot Engine 4 で、ボタンなどの Control 派生ノードを配置するために用いるアンカーとコンテナについて、それぞれの特徴について調べたことを紹介し、どのように使い分けるかについて所感を述べます。
簡単にダイアログを表示できる AcceptDialog クラスが内部でコンテナを使用していることの確認結果についても紹介します。
※ GodotEngine 4.3 を使用しています。.NET 版ではありません。
※スクリプトは自己責任でご使用ください。
アンカー配置の特徴
Control 派生クラスは、四隅のそれぞれの角の位置をアンカーで指定して、そのアンカーを基準にした位置、大きさでボタンなどの UI 用の ノードを画面に配置できます。
Base class for all UI-related nodes. Control features a bounding rectangle that defines its extents, an anchor position relative to its parent control or the current viewport, and offsets relative to the anchor. The offsets update automatically when the node, any of its parents, or the screen size change.
For more information on Godot’s UI system, anchors, offsets, and containers, see the related tutorials in the manual. To build flexible UIs, you’ll need a mix of UI elements that inherit from Control and Container nodes.
すべての UI 関連ノードの基本クラス。コントロールには、その範囲、親コントロールまたは現在のビューポートを基準としたアンカーの位置、およびアンカーを基準としたオフセットを定義する境界四角形が含まれます。ノード、その親、または画面サイズが変更されると、オフセットは自動的に更新されます。
Godot の UI システム、アンカー、オフセット、コンテナの詳細については、マニュアルの関連チュートリアルを参照してください。柔軟な UI を構築するには、コントロール ノードとコンテナ ノードから継承する UI 要素を組み合わせる必要があります。
Control — Godot Engine (4.3)の日本語のドキュメントと Google 翻訳
Unity などでもなじみのあるアンカーによる指定は、直感的に UI を配置することができます。
ゲームが常に同じデバイスの同じ解像度で実行される場合には、位置の制御は、それぞれの位置とサイズを設定するだけの簡単な問題です。ですが残念ながら、それはめった当てはまりません。
The anchor properties adjust where the offsets are relative to. Each offset has an individual anchor that can be adjusted from the beginning to the end of the parent. So the vertical (top, bottom) anchors adjust from
0.0(top of parent) to1.0(bottom of parent) with0.5being the center, and the control offsets will be placed relative to that point. The horizontal (left, right) anchors similarly adjust from left to right of the parent.アンカーのプロパティは、オフセットの相対位置を調整します。各オフセットには、親の最初から最後まで調整できる個別のアンカーがあります。したがって、垂直 (上、下) アンカーは 0.5 を中心として 0.0 (親の上) から 1.0 (親の下) まで調整され、コントロールのオフセットはその点を基準にして配置されます。水平（左、右）アンカーも同様に、親の左から右に調整されます。
サイズとアンカー — Godot Engine (4.x)の日本語のドキュメントと Google 翻訳
Container のほうがより細かな調整ができる
Control の派生クラスの１つが Container です。
# GoF の Composite デザインパターンに似ているのかなと思いました。
Container クラスには、その下位のノード群を縦・横に並べられる VBoxContainer・HBoxContainer などがあり、それらを組み合わせることで、Container 派生のノードに子ノードとして配置したボタンなどのノード群を整列させて配置できます。
Base class for all GUI containers. A Container automatically arranges its child controls in a certain way. This class can be inherited to make custom container types.
すべての GUI コンテナの基本クラス。コンテナーは、その子コントロールを特定の方法で自動的に配置します。このクラスを継承してカスタム コンテナ タイプを作成できます。
Container — Godot Engine (4.3)の日本語のドキュメントと Google翻訳
先ほどのようにボタンなどの UI をマウス操作で直感的に配置することはできませんが、整列を行う Container 派生ノードを組み合わせることで、厳密な UI の配置が行えます。
コンテナの使用
アンカー は、GUIでの基本的な複数解像度処理に対して異なるアスペクト比を処理する効率的な方法です。
より複雑なユーザーインターフェイスの場合、使いにくい可能性があります。
これは、RPG、オンラインチャット、経営/戦略シミュレーションなどのゲームによく見られます。高度なレイアウト機能が必要になる可能性があるもう 1つの一般的なケースは、ゲーム内ツール(または単にツール)です。
このような状況では、高度なレイアウトと書式設定を備えた、より高い機能を持つOSのようなユーザー インターフェイスが必要です。そのためには、Containers の方が便利です。
コンテナの使用 — Godot Engine (4.3)の日本語のドキュメント
Container 派生ノードの配下にボタンなどのノードを配置した場合、それらの子ノードのサイズや位置は、上位の Container 派生ノードが管理します。
そのため、Container 派生ノードの下位に置かれたボタンなどの UI 用ノードのサイズや位置を変更できなくなります。
コンテナのレイアウト
（中略）
コンテナの使用 — Godot Engine (4.3)の日本語のドキュメント
Container 派生ノードを使用すると、すべての子 Control ノードは独自のポジショニング機能を放棄します。つまり、これらのノードを手動で変更しようとしても、コンテナ がその位置を制御しているので、次に親がサイズ変更されたときに変更が無視または無効化されることを意味します。
AcceptDialog でコントロールを配置する際は Container が必要
AcceptDialog は、 OK・キャンセルボタンなどを最初から持っている便利なダイアログです。
このダイアログクラスをシーンのルートノードにして、Control 派生ノードを追加することもできますが、コントロールの位置やサイズを直接指定できず、 Container 派生ノードによって下位のコントロール群を整列させる必要があります。
※AcceptDialog をルートノードにして新たなシーンを作成すること自体が、想定されていないのかもしれません。Window クラスをルートノードにした方が良いかもしれません。
The default use of AcceptDialog is to allow it to only be accepted or closed, with the same result. However, the confirmed and canceled signals allow to make the two actions different, and the add_button method allows to add custom buttons and actions.
AcceptDialog のデフォルトの使用法では、受け入れられるか閉じられるだけで、結果は同じになります。ただし、確認済みシグナルとキャンセル済みシグナルを使用すると、2 つのアクションを異なるものにすることができ、add_button メソッドを使用してカスタム ボタンとアクションを追加できます。
AcceptDialog — Godot Engine (4.3)の日本語のドキュメントと Google 翻訳
その制限は、AcceptDialog が最初から持つ OK ボタンが Container で管理されているためです。
そのため、AcceptDialog ルートノードの下位に配置するボタンなどの Control 派生ノードも、 Container によって位置やサイズを整える必要があります。
以下は、それを確認するために作成した、AcceptDialog ルートノードに割り当てる gd スクリプトです。
extends AcceptDialog
# Called when the node enters the scene tree for the first time.
func _ready():
var ok_button = self.get_ok_button()
print(ok_button.get_parent()) # Container であることを確認
returnAcceptDialog ルートノードにスクリプトを割り当てて、 F6 キーでそのシーンを実行すると、 _ready イベント関数が呼び出され、 HBoxContainer が OK ボタンの上位ノードで位置やサイズを管理していることがわかりました。
※インスペクタードックで OK Button のテキストを「わかった」に変更しています。
@HBoxContainer@4:<HBoxContainer#24779949322>このことから、おそらく、継承元の Window クラスでも、タイトルバーや×ボタンの配置に Container を使っていると推測できます。
アンカーとコンテナの使い分けの所感
今回はまとめの代わりに、アンカーとコンテナの使い分けの所感について書きます。
- 直感的に配置させたい場合は、アンカーを使う。
- 複数の UI を厳密に配置したい場合はコンテナを使う。
- AcceptDialog など内部でコンテナを使用している UI を拡張する場合は、それに合わせる。
参照サイト Thank You!
- Godot Engine – Free and open source 2D and 3D game engine
- Control — Godot Engine (4.3)の日本語のドキュメント
- Window — Godot Engine (4.3)の日本語のドキュメント
- Container — Godot Engine (4.3)の日本語のドキュメント
- コンテナの使用 — Godot Engine (4.3)の日本語のドキュメント
- AcceptDialog — Godot Engine (4.3)の日本語のドキュメント
- Composite パターン – Wikipedia
- サイズとアンカー — Godot Engine (4.x)の日本語のドキュメント
記事一覧 → Compota-Soft-Press
コメント