UE5 - 控件蓝图使用详解7（锚点对齐点方式详解、全屏背景实现）
作者：hangge | 2025-12-19 08:39
1，16 种锚点对齐点方案介绍
当我们单击“锚点”右边的下拉框，就会出现锚点和对齐的选择面板。UE5 的 UMG 中一共预设了 16 种最常用的锚点对齐点方案，这 16 个方案从左到右，从上到下分别如下：
（1）居左上角对齐，锚点和对齐点都是（0,0），是控件刚被创建出来时的默认方案。
（2）居顶端中间对齐，锚点和对齐点都是（0.5,0）。
（3）居右上角对齐，锚点和对齐点都是（1,0）。
（4）对齐左侧、右侧和顶端三个边缘，锚点的最小和最大值分别是（0,0）和（1,0），我们可以用它来使控件占满整个顶端。
- 选中这个方案后，有参数 OffsetLeft、OffsetRight、 PositionY 和 SizeY，分别代表与左侧、右侧的偏移量，纵坐标以及垂直方向上的大小。
（5）居左侧边缘的中间对齐，锚点和对齐点都是（0,0.5）。
（6）居中对齐，锚点和对齐点都是（0.5,0.5），可以用来将控件放置在父控件的中间， 是经常用的一个方案。
（7）居右侧边缘的中间对齐，锚点和对齐点都是（1,0.5）。
（8）对齐左侧、右侧和中间对齐。锚点最小和最大值分别是（0,0.5）和（1,0.5）。
- 选中这个方案后，有参数 OffsetLeft、OffsetRight、PositionY 和 SizeY，分别代表与左侧、右侧的偏移量，纵坐标以及垂直方向上的大小。常用来将控件保持在父控件垂直方向上中间的同时，对齐父控件的左右边缘。
（9）居左下角对齐，锚点和对齐点都是（0,1）。
（10）居底部中间对齐，锚点和对齐点都是（0.5,1）。
（11）居右下角对齐，锚点和对齐点都是（1,1）。
（12）居底部与左右两侧对齐，锚点最小和最大值分别是（0,1）和（1,1）。
（13）居左侧与上下边缘对齐，锚点最小和最大值分别是（0,1）和（0,1）。
（14）居水平中间与上下边缘对齐，锚点最小和最大值分别是（0.5,1）和（0.5,1）。
（15）居右侧与上下边缘对齐，锚点最小和最大值分别是（0,1）和（1,1）。
（16）居上下左右四个边缘对齐，锚点最小和最大值分别是（0,0）和（1,1），常用来将子控件覆盖整个父控件。
2，6 个关键参数
不同的模式可能会让 Slot 中有不同的参数，但是万变不离其宗，我们要关注的只有六个参数：
- PositionX 对于锚点的水平相对位置；
- PositionY 对于锚点的垂直相对位置；
- OffsetLeft 相对于锚点矩形最左侧的偏移量；
- OffsetRight 相对于锚点矩形最右侧的偏移量；
- OffsetTop 相对于锚点矩形顶端的偏移量；
- OffsetBottom 相对于锚点矩形底部的偏移量。
附一：实现全屏覆盖的背景图
1，实现步骤
（1）添加一个图像控件到“画布面板”下，设置图像控件的颜色改为纯黑，透明度改为 0.3。
（2）单击“锚点”的下拉框，按住 Shif 键，选择最右下角的这个选项。 可以看到这个选项与别的选项不同，它的白色区域（表示子控件）占满了整个选项（表示父控件）。此时，最小和最大两个锚点会变成（0,0）和（1,1），分别代表父控件的左上角和右下角。
（3）当锚定了左上角和右下角之后，“位置 X”和“位置 Y”选项就会消失，因为我们需要同时锚定四条边，取而代之的选项是“偏移左侧”、“偏移顶部”、“偏移右侧”、“偏移底部”，分别代表子控件与父控件最左、最上、最右、最下方四个边缘的偏移量（也就是距离）。 如果我们想要让图片一直覆盖整个屏幕，其实就相当于“图片与屏幕的四周距离都是 0”。所以，将四个偏移值都改成 0 即可。
2，运行测试
编译保存 UI 蓝图，在 Viewport 中运行游戏，可以发现整个游戏屏幕已经覆盖上一层黑色半透明的背景。可以拖动 Viewport 的边缘来改变它的分辨率，不管分辨率如何变化， 这张背景图会一直全屏覆盖，看起来就像是整个游戏的亮度被降低了一样。
附二：让背景图只占据左半边屏幕
1，实现步骤
（1）想要让背景图占据左半边屏幕，与上面样例区别只有一个-：要锚定的边缘从屏幕最右边的线，变成了屏幕的中间那条线。所以，我们还是先单击 Anchors 的下拉框， 按住 Shift 键选择最右下角的选项来锚定屏幕的四周。
（2）接下来，将锚点中的“最大”从（1, 1）改成（0.5,1），这时候锚定的右边线就变成了屏幕的中间。这时，我们只需要重新将四个 Offset 参数都设置成 0 即可。
2，运行测试
运行游戏，可以发现半透明的背景图片只会占据屏幕的左侧。
全部评论（0）