大小和锚点

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

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

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

../../_images/anchors.png

This is done by editing the margin properties of controls. Each control has four margins: left, right, bottom, and top, which correspond to the respective edges of the control. By default, all of them represent a distance in pixels relative to the top-left corner of the parent control or (in case there is no parent control) the viewport.

../../_images/margin.png

因此，要使控件变宽，可以增大右边距和/或减小左边距。这使你可以设置控件的精确位置和形状。

锚点 属性调整边距距离相对于的位置。每个边距都有一个单独的锚点，可以从父节点的开始调整到结束。因此，垂直（上、下）锚点从 0（父节点顶部）调整到 1.0（父节点底部），0.5 为中心点，控件边距将相对于该点放置。水平（左、右）锚点同样从父节点的左侧调整到右侧。

请注意，当你希望控件的边缘位于锚点的上方或左侧时，必须将边距值更改为负数。

For example: when horizontal anchors are changed to 1, the margin values become relative to the top-right corner of the parent control or viewport.

../../_images/marginend.png

调整两个水平或两个垂直锚点到不同的值，将使控件在父控件改变大小时也随之改变。在这里，控件的右下角锚定到父控件的右下角，而左上角的控件边距仍然锚定到父控件的左上角，因此在调整父控件大小时，控件将始终覆盖父控件，并留有 20 像素的边距：

../../_images/marginaround.png

使控件居中

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

GDScriptC#

  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.offset_left = -texture_size.x / 2
  9. rect.offset_right = texture_size.x / 2
  10. rect.offset_top = -texture_size.y / 2
  11. rect.offset_bottom = texture_size.y / 2
  12. add_child(rect)
  1. var rect = new TextureRect();
  3. rect.Texture = ResourceLoader.Load<Texture>("res://icon.png");
  4. rect.AnchorLeft = 0.5f;
  5. rect.AnchorRight = 0.5f;
  6. rect.AnchorTop = 0.5f;
  7. rect.AnchorBottom = 0.5f;
  9. var textureSize = rect.Texture.GetSize();
  11. rect.OffsetLeft = -textureSize.X / 2;
  12. rect.OffsetRight = textureSize.X / 2;
  13. rect.OffsetTop = -textureSize.Y / 2;
  14. rect.OffsetBottom = textureSize.Y / 2;
  15. AddChild(rect);

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

布局预设

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

../../_images/layout_dropdown_menu.png