编程学院

Roblox Studio · 第 15 课

屏幕界面：制作自己的探险 HUD

认识 StarterGui、ScreenGui 和 TextLabel，用 Scale、Offset 与 AnchorPoint 摆好信息面板。

开始第 15 课 返回 Roblox 课程
10–15 岁 60 分钟 ScreenGui / UDim2 动手实践 测试与保存

Course overview

把探险信息放到屏幕上，换个屏幕也不乱跑。

玩家不应该停下来打开 Output 才知道目标是什么。HUD 是游戏过程中一直能看见的信息，例如“寻找三颗晶石”。

这节课先用 Studio 的界面对象摆好版面，下一课再让按钮与脚本动起来。先看得清，再谈复杂功能。

01 · BEFORE

开始之前

能在 Explorer 插入对象并修改 Properties。使用 Lesson15 Baseplate。

02 · MAKE

你的作品

左上角的探险信息面板，包含标题和目标文字。

03 · CHECK

完成标志

Play 后显示在 PlayerGui；桌面和窄屏中不挡住主要操作区域。

ScreenGui 在游戏画面中的官方截图
图 15-1：官方 ScreenGui 效果参考：界面覆盖在游戏画面上，不跟着场景里的 Part 一起移动。Roblox Creator Documentation · CC BY 4.0 · 原图未修改 · 许可说明

Learning route

先准备，再动手；看到结果后，记得保存。

每完成一小步，就测试一次。先说出你预计会看到什么，再用 Play 和 Output 检查，不用急着一次写完所有代码。

1

01 · 在 StarterGui 中准备界面

StarterGui 存放界面模板。玩家加入后，相关内容复制到这个玩家自己的 PlayerGui。它不是场景中的 Part。

2

02 · Scale 和 Offset 各管什么

UDim2 有四个数字：X 的 Scale、Offset，以及 Y 的 Scale、Offset。Scale 按父容器比例计算，Offset 是像素偏移。

3

03 · 让文字先被读懂

标题短一点，目标具体一点。“寻找三颗晶石”比“任务进行中”更有用。文字要与背景保持明显对比。

4

04 · 观察模板怎样变成玩家界面

Play 后在 Explorer 展开 Players 下自己的 PlayerGui，应该看到 AdventureGui。运行中的 PlayerGui 是当前玩家看到的副本。

5

05 · 换一个屏幕看布局

使用 Studio 的 Device Emulator 检查窄屏。面板要避开底部移动摇杆和跳跃按钮，也不要挤占整个视野。

Step by step

01 · 在 StarterGui 中准备界面

StarterGui 存放界面模板。玩家加入后，相关内容复制到这个玩家自己的 PlayerGui。它不是场景中的 Part。

先准确建立层级。下一课会用 WaitForChild 查找这些名称，大小写最好从现在就保持一致。

  1. 在 StarterGui 创建 ScreenGui，命名 AdventureGui，ResetOnSpawn=false。
  2. 在 AdventureGui 中创建 Frame，命名 Panel。
  3. 在 Panel 中创建两个 TextLabel，分别命名 Title 和 Objective。
本课 Explorer 结构 · 不是 Luau 代码Explorer
StarterGui
└─ AdventureGui (ScreenGui)
   └─ Panel (Frame)
      ├─ Title (TextLabel)
      └─ Objective (TextLabel)

Step by step

02 · Scale 和 Offset 各管什么

UDim2 有四个数字：X 的 Scale、Offset，以及 Y 的 Scale、Offset。Scale 按父容器比例计算，Offset 是像素偏移。

Panel.Position 用 0,16,0,16 表示距左上角各 16 像素；Panel.Size 用 0,280,0,104，表示宽 280、高 104 像素。这里保留默认安全区域设置，避免内容贴进顶部系统栏。

  1. Panel.AnchorPoint 设为 0,0。
  2. Panel.Position 设为 {0,16},{0,16}；Size 设为 {0,280},{0,104}。
  3. BackgroundColor3 设为深蓝，BackgroundTransparency 设为 0.15。
  4. 给 Panel 插入 UICorner，CornerRadius 设为 {0,12}。
界面 Size 的 Scale 与 Offset 属性截图
图 15-2：官方 Size 属性截图：展开 X、Y，分别找到 Scale 与 Offset，对照本课数值输入。Roblox Creator Documentation · CC BY 4.0 · 原图未修改 · 许可说明

Step by step

03 · 让文字先被读懂

标题短一点，目标具体一点。“寻找三颗晶石”比“任务进行中”更有用。文字要与背景保持明显对比。

本课使用固定 TextSize 和 TextWrapped，不把所有文字一律 TextScaled=true。自动缩小过度时，界面虽然没溢出，却已经难以阅读。

  1. Title：Position={0,12},{0,10}，Size={1,-24},{0,30}，Text=能量岛探险，TextSize=22。
  2. Objective：Position={0,12},{0,46}，Size={1,-24},{0,46}，Text=目标：找到 3 颗晶石，TextSize=18，TextWrapped=true。
  3. 两个标签都设置 BackgroundTransparency=1、TextColor3=浅色、TextXAlignment=Left。

Step by step

04 · 观察模板怎样变成玩家界面

Play 后在 Explorer 展开 Players 下自己的 PlayerGui，应该看到 AdventureGui。运行中的 PlayerGui 是当前玩家看到的副本。

Stop 后回到 StarterGui 修改模板。不要只修改测试时 PlayerGui 的副本，然后以为保存后也会保留。ResetOnSpawn=false 让这份 ScreenGui 在角色重生时不重新创建。

  1. Play 后找到 PlayerGui > AdventureGui > Panel。
  2. 重置角色，观察面板仍然存在。
  3. Stop 后把模板中的目标改为“先去营地”，重新 Play 验证。

Step by step

05 · 换一个屏幕看布局

使用 Studio 的 Device Emulator 检查窄屏。面板要避开底部移动摇杆和跳跃按钮，也不要挤占整个视野。

如果你后来把面板放到右侧，AnchorPoint=(1,0) 配合 Position.X.Scale=1 更合适：固定的是右边缘，屏幕变宽后不会漂到外面。

  1. 用桌面和一种手机尺寸各测试一次。
  2. 确认文字完整、面板不超出屏幕、下方操作区留空。
  3. 返回正常测试尺寸，保存 Lesson15。

Homework

轮到你来改一改，做出自己的版本。

1 自己的探险目标

写一个清楚的标题和目标，目标尽量在两行内读完。

2 窄屏检查

保存一张手机预览截图，指出面板为什么不会挡住跳跃按钮。

3 选做：右上角版本

在副本中使用 AnchorPoint=(1,0)，把面板固定到右上角。

完成标准：先在 Playtest 中验证作品，再点击 Stop，保存为“姓名缩写_Lesson15”或对应 Homework 副本；不要覆盖上一课的可运行版本。

Exit questions

先自己回答，再展开看看。

StarterGui 与 PlayerGui 有什么关系？

前者是模板，后者是玩家运行时实际使用的界面副本。

Size 中 Scale=1 是一个像素吗？

不是，它表示父容器该方向尺寸的 100%。

为什么不要只改运行中的 PlayerGui？

Stop 后测试副本会被还原，长期修改应落在模板中。

TextWrapped 有什么用？

允许文字在可用宽度内换行，但仍要检查高度是否足够。

Explore further

需要查资料时，从这里出发。

正文代码可以直接复制。先确认脚本类型、放置位置，以及这段代码是完整版本还是小实验；不要把同一脚本的多个版本叠加运行。界面参考图已标注来源，图中的对象名可能与本课不同，请以操作步骤为准。