コンテナ
この記事は Godot 3から Godot 4 へ内容の書き換え中です。 Godot4では存在しない変数、関数が含まれている場合があります。もしその場合はリポジトリのIssuesまでご報告ください。
課題
ユーザーインターフェースに問題があります。複雑になりすぎている、サイズ変更がうまく機能しない、コンポーネントの配置が把握しづらい、といった点が考えられます。
解決策
多くの開発者にとって、UI開発は最も苦手な作業です。複雑なUIは制御不能に陥りやすく、修正や変更が極めて困難な状況に陥ることがあります。Godotには優れたUI構築ツールが揃っていますが、これらを適切に使いこなすための時間を投資すれば、そうした苦労を大幅に軽減できることに気付くでしょう。
解決策は Container コンポーネントです。コンテナを活用することで、UIのレイアウト構築が大幅に効率化できます。
Control をContainerに追加すると、コンテナが当該コントロールの位置指定情報をすべて継承します。これにより、子要素のサイズや位置、その他のレイアウトプロパティを個別に設定することはできなくなります。
コンテナに関する最も重要なポイントは以下の通りです。
コンテナ ノードは 子要素を自動的に配置します。直接的に特定の子UIノードの位置を制御することはできません。
以下によく使われる代表的なコンテナをご紹介します。
CenterContainerこのコンテナは子要素を中央に配置します。
MarginContainerこのコンテナはマージンを保持しており、子要素がコンテナの端に近づきすぎるのを防ぎます。マージン値はプロパティの「カスタム定数」セクションで設定できます。
VBoxContainer/HBoxContainerこれらのコンテナは、内容物を垂直または水平方向に整列させます。「カスタム定数」セクションでは、要素間の間隔を広げるための分離プロパティも設定できます。
GridContainerこのコンテナは子要素をグリッド状に配置します。
サイズ指定フラグ
コンテナが子要素をどのように扱うかは、主に「サイズフラグ」プロパティによって制御されます。
Fill
このオプションをチェックすると、コントロールはコンテナ内で指定された位置に適切に配置されます。デフォルトではこの機能が有効になっています。
Expand
このオプションが有効になっている場合、コントロールはできるだけ多くのスペースを使用しようとします。「展開」機能が選択されていないノードは、それが有効になっているノードによって押し出されます。
Shrink Center
Fill が無効で Expand が有効になっている場合、コントロールはエリアの先頭ではなく、中央に配置されたままになります。
Shrink End
上記と同様ですが、制御は開始位置ではなく終了位置に設定されます。
Stretch Ratio
この比率設定により、拡張コントロールの相対的な占有量が決定されます。
これらの設定を試すには、以下のようなテストシーンを設定する方法が有効です。
異なるボタンの「サイズフラグ」プロパティを調整してみて、それが HBoxContainer 内での配置にどのように影響するか確認してください。
ネストされたコンテナ
より複雑なUI構成の場合は、他のコンテナを保持するコンテナを使用が必要です。例えばGridContainer内の各アイテム自体がVBoxContainerであり、その全てがMarginContainer内に配置されている、といった構造になります。
これらのコンテナをネストした構造は、シーンツリーが非常に複雑になり、管理が困難になる原因となります。特にボタンやラベルなど繰り返し使用する要素が多い場合に顕著です。UIは適切な単位で分割し、各部分を個別のシーンとして保存することをオススメします。これにより、必要に応じて大規模なシーン内でインスタンス化できるようになります。