大小和锚点

如果一个游戏总是用同一分辨率在同样的设备上运行, 摆放控件将是一个简单的事, 只要逐个设置它们的位置属性和大小属性即可. 不幸的是, 能像这样处理的情况很少.

如今只有电视机有标准分辨率和纵横比. 而其他所有设备, 从计算机显示器到平板电脑, 便携游戏主机和手机等等, 都有不同的分辨率和纵横比.

有几种方法来处理这个问题, 但现在, 让我们想象一下, 屏幕分辨率已经改变, 控件需要重新定位. 有的需要跟随屏幕的底部, 有的需要跟随屏幕的顶部, 也有的需要跟随左右边距.

../../_images/anchors.png

这是通过编辑控件的 margin 属性来实现的. 每个控件都有四个边距: 左, 右, 底和顶. 默认情况下, 它们都表示相对于父控件的左上角或在没有父控件的情况下视窗的像素距离.

../../_images/margin.png

当水平(左, 右)和/或 垂直(上, 下)锚点被改为1时, 边距值就会变成相对于父控件或视窗的右下角.

../../_images/marginend.png

在这里, 控件被设置为与父级的右下角一起展开, 所以当调整父级的大小时, 控件将始终覆盖它, 并留下20像素的空白:

../../_images/marginaround.png

使控件居中

要将控件集中到其父控件中, 其锚定值为0.5, 每个边距为其相关尺寸的一半. 例如, 下面的代码显示了如何将纹理矩形居中到它的父节点:

  1. var rect = TextureRect.new()
  2. rect.texture = load("res://icon.png")
  3. rect.anchor_left = 0.5
  4. rect.anchor_right = 0.5
  5. rect.anchor_top = 0.5
  6. rect.anchor_bottom = 0.5
  7. var texture_size = rect.texture.get_size()
  8. rect.margin_left = -texture_size.x / 2
  9. rect.margin_right = -texture_size.x / 2
  10. rect.margin_top = -texture_size.y / 2
  11. rect.margin_bottom = -texture_size.y / 2
  12. add_child(rect)

将每个锚定值设置为0.5, 将边缘的参考点移动到父锚点的中心. 在此基础上, 我们设置了负边距, 以便控件获得其自然大小.

布局预设

除了手动调整边距和锚点的值之外，你还可以使用视窗上方工具栏中的“布局”菜单。其中有居中等诸多选项，可以用来对齐并调整节点的大小。

../../_images/layout_dropdown_menu.png