HUD

如何制作 Roblox 任务追踪 HUD

任务追踪器是一个钉在屏幕角落的小面板,显示当前目标和一条随进度增长的进度条。它在游玩过程中一直可见,所以必须紧凑。本指南搭建这个 HUD、一条平滑的进度条,以及一个展开/收起详情的开关。

1. 一个紧凑的角落面板

用 AnchorPoint 加基于 scale 的 Position 把面板锚定在角落,这样在任何屏幕尺寸上都紧贴边缘。一个 TextLabel 放目标,一对嵌套 Frame(背景+填充)做进度条。

local panel = Instance.new("Frame")
panel.AnchorPoint = Vector2.new(1, 0)
panel.Position = UDim2.fromScale(0.97, 0.06)
panel.Size = UDim2.fromScale(0.3, 0.16)
panel.Parent = gui

2. 一条会补间的进度条

进度条是一个背景 Frame 加一个子填充 Frame。更新进度时,把填充的 Size 在 X 轴 scale 上从当前值补间到新比例 —— TweenService 让它滑过去而不是跳变。

local TweenService = game:GetService("TweenService")

local function setProgress(fill, current, goal)
	local ratio = math.clamp(current / goal, 0, 1)
	local info = TweenInfo.new(0.3, Enum.EasingStyle.Quad)
	TweenService:Create(fill, info, { Size = UDim2.fromScale(ratio, 1) }):Play()
end

提示: 保持 HUD 小巧且不挡游玩区域。锚定角落并用 scale 尺寸,这样手机和桌面落点一致。

3. 从游戏事件更新,并收起详情

用你的游戏事件(捡到物品、击败敌人)驱动 setProgress,让进度条实时动。加一个开关按钮,用显示/隐藏动作控制一个详情面板 —— 编辑器会替你生成那段 Luau,你还可以用 scale 过渡给它加动画。

常见问题

怎么让进度条平滑填充?

用 TweenService:Create 作用于填充 Frame 的 Size,从当前 X scale 补间到新比例。0.3 秒的 Quad 缓动看起来跟手又不抖。

怎么知道任务完成了?

进度到达目标时,触发一个 BindableEvent(服务端)或在客户端检查,然后发放奖励、标记任务完成,并隐藏或重新上色追踪器。