Using Containers

アンカー は、GUIでの基本的な複数解像度処理に対して異なるアスペクト比を処理する効率的な方法ですが、

より複雑なユーザーインターフェイスの場合、使いにくい可能性があります。

これは、RPG、オンラインチャット、経営/戦略シミュレーションなどのゲームによく見られます。高度なレイアウト機能が必要になる可能性があるもう 1つの一般的なケースは、ゲーム内ツール(または単にツール)です。

このような状況では、高度なレイアウトと書式設定を備えた、より高い機能を持つOSのようなユーザー インターフェイスが必要です。そのためには、Containers の方が便利です。

コンテナのレイアウト

コンテナは、膨大な量のレイアウト機能を提供します(例として、Godotエディタのユーザーインターフェイスはそれを使って完全に仕上がっています):

../../_images/godot_containers.png

Container 派生ノードを使用すると、すべての子 Control ノードは独自のポジショニング機能を放棄します。つまり、これらのノードを手動で変更しようとしても、コンテナ がその位置を制御しているので、次に親がサイズ変更されたときに変更が無視または無効化されることを意味します。

同様に、コンテナ 派生ノードのサイズが変更されると、そのすべての子がそれに応じて再配置され、使用されるコンテナのタイプに基づいた動作が行われます:

../../_images/container_example.gif

子ボタンのサイズを変更する HBoxContainer の例。

コンテナの本当の長所は、コンテナを(ノードとして)ネストできることです。これにより、簡単にサイズ変更できる非常に複雑なレイアウトを作成できます。

サイズフラグ

コンテナにノードを追加する場合、コンテナが各子ノードを扱う方法は、主に Size Flags に依存します。これらのフラグは、コンテナ の子であるコントロールを調べることで見つけることができます。

../../_images/container_size_flags.png

サイズフラグは垂直および水平のサイズ設定に依存せず、すべてのコンテナがそれらを使用するわけではありません(ただし、ほとんどの場合は使用します):

  • Fill: コントロールがコンテナ内の指定された領域を 塗りつぶす ようにします。コントロールが Expand かどうかに関係なく(下記参照)、これがオンに切り替えられると、指定された領域が 塗りつぶされ ます(これがデフォルトです)。

  • Expand: Attempts to use as much space as possible in the parent container (in each axis). Controls that don't expand will be pushed away by those that do. Between expanding controls, the amount of space they take from each other is determined by the Ratio (see below).

  • Shrink Center 拡大する場合(および塗りつぶさない場合)は、拡大された領域の中心に留まるよう試みます(デフォルトでは、左または上に留まります)。

  • Stretch Ratio 拡大されたコントロールが、相互に関連して使用可能なスペースを占める割合の単純比率。"2"を持つコントロールは、"1"を持つコントロールの2倍の使用可能なスペースを占有します。

これらのフラグとさまざまなコンテナを試して、それらがどのように機能するかをよりよく把握することをお勧めします。

コンテナの種類

Godotはさまざまな目的に役立てるため、すぐに使用できるいくつかのコンテナタイプを提供します:

ボックスコンテナ

Arranges child controls vertically or horizontally (via HBoxContainer and VBoxContainer). In the opposite of the designated direction (as in, vertical for an horizontal container), it just expands the children.

../../_images/containers_box.png

これらのコンテナは、Expand フラグが設定されている子に対して Ratio プロパティを使用します。

グリッドコンテナ

グリッドレイアウトに子コントロールを配置します(GridContainer を介して、列の数量を指定する必要があります)。垂直および水平の両方の展開フラグを使用します。

../../_images/containers_grid.png

マージンコンテナ

子コントロールは、このコントロールの境界に向かって展開されます(MarginContainer を使用)。テーマの設定に応じて余白にパディングが追加されます。

../../_images/containers_margin.png

Again, keep in mind that the margins are a Theme value, so they need to be edited from the constants overrides section of each control:

../../_images/containers_margin_constants.png

タブコンテナ

複数の子コントロールを (TabContainer を使用して) 積み重ねて、current コントロールのみが見える状態で表示します。

../../_images/containers_tab.png

current を変更するには、コンテナの上部にあるタブをクリックします:

../../_images/containers_tab_click.gif

タイトルはデフォルトでノード名から生成されます(ただし、TabContainer APIを使用してオーバーライドできます)。

タブの配置や StyleBox などの設定は、TabContainer テーマのオーバーライドで変更できます。

分割コンテナ

1つまたは2つの子コントロールのみを受け入れ、分割線と並べて配置します(HSplitContainer および VSplitContainer を使用)。Ratio と同様に、水平フラグと垂直フラグの両方を考慮します。

../../_images/containers_split.png

分割線をドラッグして、両方の子のサイズ関係を変更できます:

../../_images/containers_split_drag.gif

パネルコンテナ

StyleBox を描画するシンプルなコンテナは、その領域全体をカバーするように子を展開します(PanelContainer を介し、StyleBox マージンを考慮して)。これは、水平方向と垂直方向の両方のサイズのフラグを考慮します。

../../_images/containers_panel.png

このコンテナは、トップレベルとして、またはレイアウトのセクションにカスタムの背景を追加する場合に便利です。

スクロールコンテナ

単一の子ノードを受け入れます。このノードがコンテナよりも大きい場合、スクロールバーが追加され、ノードをパンできます(ScrollContainer を使用)。垂直と水平の両方のサイズフラグが考慮され、プロパティの軸ごとに動作をオンまたはオフにできます。

../../_images/containers_scroll.png

マウスホイールとタッチドラッグ(タッチが使用可能な場合)も、子コントロールをパンするための有効な方法です。

../../_images/containers_center_pan.gif

上記の例のように、このコンテナを使用する最も一般的な方法の1つは、VBoxContainer を子として使用することです。

ビューポートコンテナ

これは、子として単一の Viewport ノードのみを受け入れる特別なコントロールで、それをイメージであるかのように表示します(ViewportContainer を使用)。

カスタムコンテナの作成

スクリプトを使用してカスタムコンテナを簡単に作成することができます。以下は、子をその長方形サイズに合わせる単純なコンテナの例です:

extends Container

func _notification(what):
    if what == NOTIFICATION_SORT_CHILDREN:
        # Must re-sort the children
        for c in get_children():
            # Fit to own size
            fit_child_in_rect( c, Rect2( Vector2(), rect_size ) )

func set_some_setting():
    # Some setting changed, ask for children re-sort
    queue_sort()