定位和大小 UI 对象

*此内容使用人工智能（Beta）翻译，可能包含错误。若要查看英文页面，请点按此处。

除非 UI 对象在布局结构或者大小修饰符/约束的控制下，否则您完全可以控制它们的位置和大小。您还可以设置 Z 轴索引图层的顺序，以确定对象的重叠关系。

核心属性

所有 GuiObjects 都共享一组核心属性，以定位、调整大小、锚点和图层它们在屏幕上或体验容器内。

位置

Position 属性是一个 UDim2 坐标集，该坐标集定位对象沿 X 和 Y 轴。UDim2 由每个轴的 Scale 和 Offset 值表示：

Scale 值代表容器沿相应轴的百分比大小，相加任何 Offset 值。
Offset 值代表在相应轴上移动对象的像素数量，相加任何 Scale 值。

要编辑选中 GuiObject 的位置，在属性窗口中点击 Position 字段并输入一个新的 UDim2 坐标集。

在 Studio 中输入 UDim2 时，括号和空格是可选的 — 您可以简单地输入用逗号分隔的四个值，例如 0.25,40,0.1,20，Studio 将推断出预期的值集。

当输入一个数字时，Studio 也会推断出预期的值集。例如，单纯输入 0.5 将被转换为 {0.5, 0},{0.5, 0}，因为 0.5 可能是 Scale 值 50%。相反，输入 20 将被转换为 {0, 20},{0, 20}，因为 20 可能是 Offset 值 20 像素，而不是 2000% 的缩放。

大小

Size 属性是一个 UDim2 坐标集，该坐标集调整对象沿 X 和 Y 轴的大小。UDim2 由每个轴的 Scale 和 Offset 值表示：

Scale — 表示容器沿相应轴的百分比大小的值，与任何 Offset 值相加。
Offset — 表示对象沿相应轴的像素大小的值，与任何 Scale 值相加。

要编辑选中 GuiObject 的大小，在属性窗口中点击 Size 字段并输入一个新的 UDim2 坐标集。

在 Studio 中输入 UDim2 时，括号和空格是可选的 — 您可以简单地输入用逗号分隔的四个值，例如 0.75,0,0.25,0，Studio 将推断出预期的值集。

当输入一个数字时，Studio 也会推断出预期的值集。例如，单纯输入 0.5 将被转换为 {0.5, 0},{0.5, 0}，因为 0.5 可能是 Scale 值 50%。相反，输入 20 将被转换为 {0, 20},{0, 20}，因为 20 可能是 Offset 值 20 像素，而不是 2000% 的缩放。

锚点

AnchorPoint 属性定义了对象变更位置和大小的原点。默认的 AnchorPoint 值为 (0, 0)，这会将锚点放置在对象的左上角。

AnchorPoint 值是从 0 到 1 的分数，相对于对象的大小，这意味着具有 AnchorPoint 值 (0.5, 0.5) 的对象将锚点放置在对象的横向和纵向中间（50%），对其位置或大小的任何更改都将从这个点向外移动和缩放。

要查看和编辑选中 GuiObject 的锚点：

在属性窗口中，点击 AnchorPoint 字段内。
输入一个新的 Vector2 坐标并按 Enter。

当输入一个数字时，Studio 会推断出预期的值对。例如，单纯输入 0.5 将被转换为 0.5, 0.5 用于中心锚点。

ZIndex

ZIndex 属性定义了 GuiObjects 渲染和重叠彼此的层级顺序。如果您想创建新的渲染层，必须将 ZIndex 属性设置为不同的正整数或负整数值，以便每个对象都有不同的层级。

对于像 ScreenGui 这样的 UI 容器，默认的 ZIndexBehavior 总是将子元素呈现在父元素之上，并且每个子元素的 ZIndex 用于决定其在其他元素之上的渲染顺序。

要编辑对象的 ZIndex，在属性窗口中找到 ZIndex 并输入一个新的整数值。

布局结构

布局结构使您能够快速组织和展示 GuiObjects，例如垂直或水平的列表、一个网格，以及更多的均匀大小的单元格。布局通常会覆盖或影响其控制下对象的位置/大小。

布局	描述
列表	UIListLayout 将同级 GuiObjects 置于其父容器内的水平行或垂直列中。
网格	UIGridLayout 将同级 GuiObjects 置于其父容器内的均匀大小的单元格网格中。
表格	UITableLayout 将同级 GuiObjects 及其子元素排列为表格格式。
页面	UIPageLayout 将其同级 GuiObjects 组织为独特的页面，您可以通过脚本进行切换。

跨平台因素

Roblox 本质上是跨平台的，玩家可以在手机或平板上发现和加入体验，然后在个人电脑或控制台上继续之前的游戏。您应该设计您的 Roblox 体验，以在您选择支持的所有平台上可访问和愉悦，而不是针对某个平台进行优化并忽视其他平台。

保留区域

在移动设备上，默认控件占据屏幕左下角和右下角的一部分。当您设计体验的 UI 时，避免将重要信息或虚拟按钮放置在这些区域内。

拇指区域

大多数移动玩家使用两根拇指 — 一根在虚拟摇杆上，一根在跳跃按钮上。根据设备的物理尺寸和玩家的手，距离屏幕底部角落太远会变得不舒服或不可能，因此您应该避免将常用的按钮放在不易够到的区域外。

按钮触手可及，玩家的右手拇指

按钮难以到达，除非玩家伸手或伸展拇指

请记住，舒适的拇指区域在手机和平板之间是不同的，因为平板有更大的屏幕。一个放置在屏幕顶边缘下方 40% 的按钮在手机上可以达到，但在平板上几乎无法触及。

按钮距离手机的顶部边缘 40%，触手可及

按钮距离平板的顶部边缘 40%，难以触及，需伸展

在手机和平板上可靠的方法是将自定义按钮相对的放置在常用控件附近，例如默认的跳跃按钮，将它们放在触手可及的范围内。

以下代码放置在 StarterPlayerScripts 的客户端脚本中，获取跳跃按钮的位置，并在其左侧创建一个占位符按钮，距离其 20 像素。

客户端脚本 - 跳跃按钮附近的自定义按钮
local Players = game:GetService("Players")
local UserInputService = game:GetService("UserInputService")

local player = Players.LocalPlayer
local playerGui = player:WaitForChild("PlayerGui")

if UserInputService.TouchEnabled then
	-- 等待跳跃按钮完全加载
	while not (playerGui:FindFirstChild("JumpButton", true) and playerGui:FindFirstChild("JumpButton", true).IsLoaded) do
		task.wait()
	end
	local jumpButton = playerGui:FindFirstChild("JumpButton", true)

	-- 将新的自定义按钮放置在跳跃按钮的左侧
	local customButton = Instance.new("ImageButton")
	customButton.AnchorPoint = Vector2.new(1, 1)
	customButton.Size = UDim2.fromOffset(jumpButton.Size.X.Offset * 0.8, jumpButton.Size.Y.Offset * 0.8)
	customButton.Position = jumpButton.Position + UDim2.fromOffset(-20, jumpButton.Size.Y.Offset)
	customButton.Parent = jumpButton.Parent
else
	warn("设备不支持触控，或 Studio 未模拟触控设备！")
end

基于上下文的 UI

在移动设备上，屏幕空间是有限的，因此您应该在主动游戏过程中仅显示最重要的信息。例如，如果您的体验包含一个特殊输入动作来打开门和宝藏箱，那么在屏幕上不断显示“打开”按钮就没有意义。相反，使用临近提示或类似的方法，仅当角色接近门或宝藏箱时接受输入。

中文(简体)