尺寸和锚

如果一个游戏总是在同一个设备上以相同的分辨率运行,那么定位控制将是设置每个设备的位置和大小的简单问题。不幸的是,这种情况很少发生。

现在只有电视有标准的分辨率和纵横比。从计算机显示器到平板电脑、便携式控制台和移动电话,其他一切都有不同的分辨率和纵横比。

有几种方法可以处理这个问题,但现在,让我们假设屏幕分辨率已经改变,需要重新定位控件。有些需要跟随屏幕的底部,另一些需要跟随屏幕的顶部,或者可能是右边或左边距。

../../_images/anchors.png

这是通过编辑 边缘 控件的属性。每个控件有四个页边距:左、右、下和上。默认情况下,所有这些都表示相对于父控件或(如果没有父控件)视区左上角的距离(以像素为单位)。

../../_images/margin.png

当水平(左、右)和/或垂直(上、下)定位点更改为1时,边距值将相对于父控件或视区的右下角。

../../_images/marginend.png

这里,控件设置为与父控件的右下角展开,因此当重新调整父控件的大小时,控件将始终覆盖它,留下20像素的边距:

../../_images/marginaround.png

使控件居中

若要使控件在其父级中居中,请将其定位点设置为0.5,并将每个边距设置为其相关维度的一半。例如,下面的代码显示了纹理直立如何在其父级中居中:

var rect = TextureRect.new()
rect.texture = load("res://icon.png")
rect.anchor_left = 0.5
rect.anchor_right = 0.5
rect.anchor_top = 0.5
rect.anchor_bottom = 0.5
var texture_size = rect.texture.get_size()
rect.margin_left = -texture_size.x / 2
rect.margin_right = -texture_size.x / 2
rect.margin_top = -texture_size.y / 2
rect.margin_bottom = -texture_size.y / 2
add_child(rect)

将每个定位点设置为0.5会将页边距的参考点移动到其父级的中心。从这里,我们设置负的利润率,以便控件获得其自然大小。