Godot GUI探讨

响应式GUI

在设计界面时仅使用Control节点。 它们具有独特的属性，可以让它们彼此协同工作。 其他节点，如Node2D，Sprite等将无法正常工作。 您仍然可以使用一些与其他节点一起工作的节点，例如AnimationPlayer，Tween或StreamPlayer。 Control节点是CanvasItems，像Node2D，因此您可以将着色器应用于它们。
所有Control节点都具有相同的主要属性:

1. Anchor锚
2. Bounding rectangle边界矩形
3. Focus and focus neighbor 焦点和焦点邻居
4. Size flags 大小标识
5. Margin边距
6. The optional UI theme可选UI主题

5种常见UI元素

对于大多数游戏，您只需要五种类型的UI元素和一些容器。 这五个Control节点是：

Label：用于显示文字
TextureRect：主要用于背景或所有应该是静态图像的东西
TextureProgress：用于生命条 ,加载进度条，水平，垂直或径向
NinePatchRect：用于可伸缩面板
TextureButton：用于创建按钮

有两个工作流程可以构建响应性UI

在Godot中，有两个工作流程可以构建可伸缩和灵活的界面:

1.您有许多容器节点可供使用，这些节点可伸缩和放置UI元素。他们控制他们的子节点。
2.另一方面，您有布局菜单。 它可以帮助您在其父级中锚定，放置和调整UI元素的大小。

这两种方法并不总是兼容的。 由于容器控制其子级，因此无法在其子级使用布局菜单。 每个容器都有特定的效果，因此您可能需要嵌套其中的几个以获得工作界面。 通过布局方法，您可以自下而上地对子级进行工作。 由于您没有在场景中插入额外的容器，因此可以实现更清晰的层次结构，但是在行，列，网格等中排列项目会更加困难。

使用锚点精确放置UI元素

控制节点具有位置和大小，但它们也具有锚点和边距。 锚定义节点的左边，顶边，右边和底边的原点或参考点。 更改4个锚点中的任何一个以更改边距的参考点。

如何更改锚点

与任何属性一样，您可以在Inspector中编辑4个锚点，但这不是最方便的方法。 选择控制节点时，布局菜单将显示在视口上方的工具栏中。 它为您提供了一个图标列表，只需单击一下即可设置所有4个锚点，而不是使用检查器的4个属性。 只有在选择控制节点时才会显示布局菜单。

锚是相对于父容器的

每个锚的值介于0和1之间。对于左侧和顶部锚，值为0表示没有任何边距情况下，节点的边缘将与其父级的左边缘和上边缘对齐。 对于右边和底边，值为1意味着它们将与父容器的右边和底边对齐。 另一方面，边距表示到锚位置的距离（以像素为单位），而锚则相对于父容器的大小。

边距随锚点而变化

移动控件节点或调整控件节点大小时，边距会自动更新。 它们表示从控制节点的边缘到相对于父控制节点或容器的锚的距离。 这就是为什么你的控制节点应该总是在容器内，我们马上就会看到。 如果没有父级，则边距将相对于节点自己的矩形边界（在检查器中Rect分段设置）。

尝试更改锚或在容器中嵌套Control节点：边距将更新。 您很少需要手动编辑边距。 总是试着找一个容器来帮助你; Godot带有许多节点，可以为您解决所有常见情况。 需要在生命条和屏幕边框之间添加空间？ 使用MarginContainer。 想要建立一个纵向菜单？ 使用VBoxContainer。 更多信息请参见下文。