使用锚根据不同的高宽比将 UI 控件保持显示在固定位置。

Choose your operating system:

Windows

macOS

Linux

用来定义 UI 控件在 画布面板 上的预期位置,并在不同的屏幕尺寸下维持这一位置。锚在正常情况下以 Min(0,0) Max(0,0) 表示左上角,以 Min(1,1) Max(1,1) 表示右下角。

创建画布面板并向其中添加其他 UI 控件后,您既可以从一系列预设的锚位置中进行选择(通常情况下,这些选择足以使控件保持在某一特定位置),也可以手动设置锚位置和 Min/Max 设置以及应用偏移。

锚的工作原理

下面的黄框内就是 锚图案 ,它表示画布面板上锚的位置。

AnchorMedallion.png

在下图中,我们在画布面板上放置了一个按钮,并将锚放在默认位置(左上角)。

Button1.png

上面的垂直黄线表示按钮基于画布尺寸而沿 Y 轴从锚移动的距离(起始点为窗口左上角)。同样,上面的水平黄线表示按钮基于画布尺寸沿 X 轴从锚移动的距离(起始点为窗口左上角)。在窗口的左下角(黄框内)可以看到当前画布的 屏幕尺寸

单击图表中的 屏幕尺寸 按钮以更改当前使用的尺寸。最好检查 UI 控件在不同屏幕尺寸或高宽比之下的显示情况,并相应地进行调整。

根据窗口尺寸,在游戏中可能会看到类似下图中的情况(黄框表示锚点):

InGameButton1.png

在该窗口尺寸下,按钮偏离了屏幕。

如果把锚移动到右下角...

Button2.png

并且在同样的窗口尺寸下进行游戏...

InGameButton2.png

由于锚位于右下角(黄框),按钮的位置发生变化以避免被屏幕割裂的情况。

本示例展示了如何定义锚位置,以及锚位置如何根据屏幕尺寸来影响控件的位置。您也可以"分开"锚图案,以设置控件如何针对不同的屏幕尺寸做出反应(有关详细信息,请参阅 手动锚 部分)。

预设锚

画布面板 中放有 UI 控件时,可以从控件的 细节 面板中选择一个预设锚。

PresetAnchor.png

这可能是为控件设置锚点的最常用的方法,并且应该能够满足大多数需求。银色框表示锚点,选择后,将会使锚图案移动到该位置。举例来说,如果您想使某物始终保持在屏幕中央,则可以将控件放置在画布面板的中央然后选择"中央/中央"预设选项。

CenterCenter.png

也可以从预设拉伸方案中进行选择:

HorizontalStretch.png

VerticalStretch.png

StretchBoth.png

水平拉伸

垂直拉伸

双向拉伸

这些有助于将某物随窗口尺寸进行拉伸(见下)

在此,我们选择将锚沿画布的底部进行水平拉伸。

ProgressBar3.png

原来完整的锚图案将分成两部分,表示已拉伸。

可以通过拉动针脚使图案分开。

如果现在测试游戏,进度条可能会是这样(通常情况下):

ProgressBar4.png

使用不同的窗口尺寸,则可能是这样:

ProgressBar5.png

再使用不同的窗口尺寸,还可能是这样:

ProgressBar6.png

手动锚

除了使用预设,也可以手动任意放置锚图案以锚定控件。尤其是这可以用来将一个控件根据另一个控件的位置进行锚定,下图给出了示例。

Manual1.png

在上图中,画布面板中有一个进度条控件和一个图像控件,而该画布面板放置在另一个画布面板上面。包含图像/进度条的画布面板锚定在屏幕的左上角。举例来说,这可以表示一个玩家角色图像和旁边的一个体力条。

在下面,进度条锚定在了它所处的画布面板的左上角(图像也一样,但是未显示出来)。

Manual2.png

假设我们想要拉伸进度条,同时使其与右侧保持一个固定的距离,并且向外延展一段。为此,可以拉动锚图案的左半部分使其分开,如下图所示。

Manual3.png

现在可以在下图中观察到,当我们拉伸画布面板的右侧时,进度条也会拉伸,但与右侧保持一定的距离,同时会向中央延展。

Manual4.png

现在的问题是当我们调整画布面板的尺寸时,图像控件不会保持在最初设置的位置(也不会像预期一样随进度条移动)。

我们可以将图像的锚手动移动到新的锚点,而不是使其保持在画布面板的左上角。

Manual5.png

上图中,我们将图像锚移动到了进度条本身的左上角。如果我们现在调整包含这两个控件的画布面板的尺寸…

Manual6.png

图像控件将与进度条保持一个固定的距离。这里出现了另一个问题,如果我们将画布面板向左移动…

Manual7.png

由于我们没有设置使图像与左侧保持固定的距离,图像会伸出屏幕从而被切断,可以通过分开锚图案解决这一问题。

Manual8.png

在上图中,我们设定了锚点、图像与进度条的距离和左侧的边距,因此如果调整尺寸…

Manual9.png

图像左侧/右侧的空间将保持不变。但顶部和底部呢?向下拉伸画布面板时,图像将不会与进度条对齐。

Manual9b.png

可以对锚图案再进行一个调整以解决该问题。我们在此设置想要使图像根据进度条的位置在顶部和底部缩进多少距离。

Manual10.png

现在我们随意在任何方向调整画布面板的尺寸,则进度条会拉伸,并且图像会在调整尺寸的同时保持与进度条的相对位置。

欢迎帮助改进虚幻引擎文档!请告诉我们该如何更好地为您服务。
填写问卷调查
取消