正确定位和缩放 UI 对象

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

除非控制 布局结构 或 大小调整器 ，否则您可以完全控制其 位置 和 2>大小2> 。您还可以设置 Z 5>索引5> 层以在对象交叉时显示层次。

核心属性

所有 GuiObjects 共享一个核心集合的属性到 位置、大小、1>锚定1> 和 4>层4> 它们在屏幕上或体验中。

位置

Class.GuiObject.Position|Position 属性是一个 UDim2 坐标集，该对象沿 X 和 1>Y1> 轴位置。4>Datatype.UDim24> 由两个 7>Dat

  • 缩放 — 代表容器容量的 百分比 值的值，添加任何 抵消 值。
  • 抵消 — 代表在相应轴上移动对象的多少 像素 的抵消值，添加任何 缩放值 的抵消值。

要编辑选择 GuiObject 的位置，请单击 位置 字段在 属性 窗口中，然后输入一个新的 1> Datatype.UDim21> 坐标设置。

大小

Class.GuiObject.Size|Size 属性是一个 UDim2 坐标集，该对象沿 X 和 1>Y1> 轴缩放。一个 4>Datatype.UDim24> 由两个 7>Datatype

  • 缩放 — 代表容器容量的 百分比 值的值，可以在任何 抵消 值上添加。
  • 抵消 — 代表对象的 像素 大小沿相应轴向， 添加到任何 缩放值 。

要编辑选择的 GuiObject 的大小，请单击 大小 字段在 属性 窗口中，然后输入一个新的 1> Datatype.UDim21> 坐标设置。

锚定点

Class.GuiObject.AnchorPoint|AnchorPoint 属性定义了从哪里变更对象的 位置 和 大小 的原始点。默认值 1>Class.GuiObject.AnchorPoint1> 为 4> 5> Class.GuiObject.AnchorPoint5> ，其中 8> <

AnchorPoint 值是一个 几率 从 0</

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

  1. 在 属性 窗口中，单击 锚定点 字段。

  2. 输入一个新的 Vector2 坐标，然后按下 输入 。

Z 索引

Class.GuiObject.ZIndex|ZIndex 属性定义了 GuiObjects 渲染和交叉的层级顺序。如果您想要创建新的渲染层，您必须将 ZIndex 属性设置为正向或负向的整数值。

对于像 ScreenGui 这样的 UI 容器，默认 ZIndexBehavior 总是会在孩子上面的父级上渲染，每个孩子的 ZIndex 用于决定它在其他人上面的排序。

要编辑对象的 ZIndex，请在 Property 窗口中找到 ZIndex 并输入新的整数值。

布局结构

布局结构可以让您快速组织和显示GuiObjects，例如在横向或垂直向列表列表、格子网格的对称方格、1>页面顺序1>和更多。布局通常覆盖或影响4>位置4> / 7>大小7> 的对象在其控制下。

布局描述
列表UIListLayout 将兄弟位置设置在 GuiObjects 内的横向或纵向栏位上。
网格UIGridLayout 位置在同一大小的子容器内的子容器中的位置姐妹 GuiObjects 在同一个网格中。
桌子UITableLayout 位置的兄弟姐妹 GuiObjects 和他们的子女以表格式输入。
页面UIPageLayout 组织其兄弟 GuiObjects 成独特页面，您可以通过脚本进行转换。

跨平台因素

Roblox 是基于平台的交叉平台，因为玩家可以在 PC 或控制台上发现并加入体验，然后稍后从手机中拾取它们并继续前关闭。您应该设计您的 Roblox 体验以便于在 所有 个平台上访问和享协助，而不是优化为一个平台而忽略其他平台。

保留区域

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

大拇指区域

大多数移动玩家使用两个大拇指 - 一个在虚拟拇指杆上，一个在跳跃按钮上。 根据设备的物理大小和玩家的手，从设备的底部角落太远就会不舒服或不可能，所以你应该避免在易于达到的区域放置频繁使用的按钮。


请记住，柄键区在电话和平板电脑之间有很大的不同，因为平板电脑的屏幕尺寸更大。放置在屏幕顶部40％处的按钮在电话上可以达到，但在平板上几乎不可以达到。

在 both 电话和平板上的可靠方法是 相对 位置的放置自定义按钮，将它们放置在易于使用的控件附近，例如默认跳跃按钮，将它们放置在容易使用的位置。

下面的代验证码，放置在 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("Device is not touch-enabled or Studio is not emulating a touch-enabled device!")

end

基于上下文的用户界面

移动设备上的屏幕空间有限，因此您在活跃游戏期间显示的信息应该仅包含最重要的信息。例如，如果您的体验包括特殊的输入操作来打开门和宝箱，那么显示“打开”按钮在屏幕上不会有任何意义。相反，使用邻近提示或类似方法来接受输入仅当角色接近门或宝箱时使用。

角色靠近门或箱子时显示的自定义按钮