从 2D 编辑器添加不同的布局选项

Question

我想为纵向和横向模式制作以下视图：

在纵向中，将视图垂直显示为

一个
B
C

（看起来他们在 VBox 中）

在横向中，将视图显示为

A C
B

（看起来像 HBox(VBox(A, B), C)）

我可以使用自定义容器来做到这一点，但这意味着我自己测量尺寸，并要求所有 3 个节点都由我的容器中的直系子节点提供。

我想知道是否有不同的方法可以在编辑器中定义两个完全独立的布局，并将某些节点与我们想要的节点相关联；这是我通过 android dev 更熟悉的一种模式，我们可以在其中创建两个完全不同的布局并通过具有相同的 id 来关联某些视图。

对于这种情况，我可以使用现有的 VBox 和 HBox 创建上面提到的布局，并告诉根注释将 A、B、C 放在它们应该在的位置。子节点不再需要是根容器的直接子节点，我可以将其他节点添加到其中一个布局而不是另一个布局。如果用户在这两种布局之间切换，我希望保留共享节点（A、B、C）中的内容。

有没有办法在 Godot 中做这样的事情？

Answer 1

您可以通过在编辑器中创建两个单独的布局并在需要时实例化 + 替换来完成您所描述的操作。

extends Control
        
const LANDSCAPE_LAYOUT = preload("res://Landscape.tscn")
const PORTRAIT_LAYOUT = preload("res://Portrait.tscn")
var orientation = 0
onready var layout = $Layout // root node of UI you will replace

func _process(delta):
    if orientation != OS.screen_orientation:
        _change_layout()


func _change_layout():
    orientation = OS.screen_orientation
    var new_layout = null
    match orientation:
        0:
            new_layout = LANDSCAPE_LAYOUT.instance()
        1:
            new_layout = PORTRAIT_LAYOUT.instance()
        _:
            return  // feel free to include the other cases in ScreenOrientation enum.

    var layout_position = layout.get_position_in_parent()
    remove_child(layout)
    add_child(new_layout)
    move_child(new_layout, layout_position)
    layout = new_layout

类似于 Android activity 生命周期，只要方向发生变化，您就会破坏并重新创建 UI 的一部分。

我正在手动检查方向，因为目前无法获得回调。如果您要让多个节点检查方向，那么设置一个单例并在检测到变化时发出信号可能会很有用。

从 2D 编辑器添加不同的布局选项

Adding different layout options from the 2D editor

godot