Work in progress

The content of this page was not yet updated for Godot 4.2 and may be outdated. If you know how to improve this page or you can confirm that it's up to date, feel free to open a pull request.

Using Containers

Anchors are an efficient way to handle different aspect ratios for basic multiple resolution handling in GUIs.

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

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

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

コンテナのレイアウト

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

../../_images/godot_containers.png

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

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

../../_images/container_example.gif

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

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

Sizing options

When adding a node to a container, the way the container treats each child depends mainly on their container sizing options. These options can be found by inspecting the layout of any Control that is a child of a Container.

../../_images/container_sizing_options.webp

Sizing options are independent for vertical and horizontal sizing and not all containers make use of them (but most do):

  • 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 Stretch Ratio (see below). This option is only available when the parent Container is of the right type, for example the HBoxContainer has this option for horizontal sizing.

  • Shrink Begin When expanding, try to remain at the left or top of the expanded area.

  • Shrink Center When expanding, try to remain at the center of the expanded area.

  • Shrink End When expanding, try to remain at the right or bottom of the expanded area.

  • Stretch Ratio: The ratio of how much expanded controls take up the available space in relation to each other. A control with "2", will take up twice as much available space as one with "1".

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

コンテナの種類

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

パネルコンテナ

A container that draws a StyleBox, then expands children to cover its whole area (via PanelContainer, respecting the StyleBox margins). It respects both the horizontal and vertical sizing options.

../../_images/containers_panel.png

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

スクロールコンテナ

Accepts a single child node. If this node is bigger than the container, scrollbars will be added to allow panning the node around (via ScrollContainer). Both vertical and horizontal size options are respected, and the behavior can be turned on or off per axis in the properties.

../../_images/containers_scroll.png

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

../../_images/containers_center_pan.gif

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

AspectRatioContainer

A container type that arranges its child controls in a way that preserves their proportions automatically when the container is resized. (via AspectRatioContainer). It has multiple stretch modes, providing options for adjusting the child controls' sizes concerning the container: "fill," "width control height," "height control width," and "cover."

../../_images/containers_aspectratio.webp

useful when you have a container that needs to be dynamic and responsive to different screen sizes, and you want the child elements to scale proportionally without losing their intended shapes.

../../_images/containers_aspectratio_drag.webp

FlowContainer

FlowContainer is a container that arranges its child controls either horizontally or vertically, (via HFlowContainer and via VFlowContainer). and when the available space runs out, it wraps the children to the next line or column, similar to how text wraps in a book.

../../_images/containers_hflow.webp

useful for creating flexible layouts where the child controls adjust automatically to the available space without overlapping.

../../_images/containers_hflow_drag.webp

CenterContainer

CenterContainer is a container that automatically keeps all of its child controls centered within it at their minimum size. It ensures that the child controls are always aligned to the center, making it easier to create centered layouts without manual positioning. (via CenterContainer).

../../_images/containers_center.webp ../../_images/containers_center_drag.webp

SubViewportContainer

This is a special control that will only accept a single Viewport node as child, and it will display it as if it was an image (via SubViewportContainer).

カスタムコンテナの作成

It is possible to create a custom container using a script. Here is an example of a container that fits children to its rect size:

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()