如何给 Roblox GUI 写脚本(点击、开关与缓动)

1. GUI 脚本放哪:StarterGui 下的 LocalScript

每个玩家各自看到的 GUI 属于客户端。把一个 LocalScript 放进 StarterGui(或直接放进 ScreenGui),玩家加入时 Roblox 会把它克隆进每个人的 PlayerGui。普通的 Script(服务端脚本)在 PlayerGui 里不会运行。

如果 GUI 是在 Studio 里搭的,脚本可以通过 player 对象访问它;如果你改用代码创建 GUI,脚本也可以自己 Instance.new 出每个实例 —— 本编辑器导出的代码用的就是这种做法。

-- LocalScript under StarterGui
local player = game:GetService("Players").LocalPlayer
local playerGui = player:WaitForChild("PlayerGui")

local screenGui = Instance.new("ScreenGui")
screenGui.Name = "SettingsGui"
screenGui.ResetOnSpawn = false
screenGui.Parent = playerGui

2. 连接按钮点击(所有按钮背后的同一个模式)

每个可交互元素的接线方式都一样:拿到实例引用,把一个函数连接到它的 Activated 事件(鼠标和触摸都适用),在函数里做具体的事。选 Activated 而不是 MouseButton1Click,是因为它同时支持手机点按。

local button = screenGui:WaitForChild("Panel"):WaitForChild("CloseButton")

button.Activated:Connect(function()
    screenGui.Enabled = false
end)

3. 用一个按钮开关 GUI

商店和设置面板通常由 HUD 按钮打开、右上角的 X 关闭。干净的做法是翻转 ScreenGui.Enabled —— 为 false 时 Roblox 直接不再渲染整棵树,隐藏是白送的。

local toggleButton = playerGui:WaitForChild("Hud"):WaitForChild("OpenShop")
local shopGui = playerGui:WaitForChild("ShopGui")

toggleButton.Activated:Connect(function()
    shopGui.Enabled = not shopGui.Enabled
end)

4. 用 TweenService 给面板加动画

淡入或滑入的 GUI 观感立刻上一个档次,而 TweenService 几行就能做到:创建一个 Tween,给它目标属性表、时长和缓动样式,然后 :Play()。位置补间可以直接插值 UDim2。

local TweenService = game:GetService("TweenService")

local panel = screenGui:WaitForChild("Panel")
panel.AnchorPoint = Vector2.new(0.5, 0.5)
panel.Position = UDim2.fromScale(0.5, 0.6) -- start slightly low

local open = TweenService:Create(
    panel,
    TweenInfo.new(0.25, Enum.EasingStyle.Quint, Enum.EasingDirection.Out),
    { Position = UDim2.fromScale(0.5, 0.5) }
)

open:Play()

5. 客户端和服务端的唯一铁律

点击发生在客户端,但游戏必须强制执行的一切 —— 货币、购买、发放物品、权限 —— 发生在服务端。模式是:LocalScript 触发 RemoteEvent,ServerScriptService 里的 Script 监听、校验、然后应用结果。

如果这个变化纯粹是视觉上的(打开面板、高亮一个标签),它可以永远留在客户端。

6. 在这里写脚本,或在那里写脚本

可视化编辑器生成的正是这种形状的代码:一个在 ScreenGui 下搭层级、为可见性动作接好 Activated 处理器的 LocalScript,加上一个处理 Fire RemoteEvent 动作的可选服务端 Script。可视化搭好布局、导出,再对照本指南读生成的 Luau —— 结构会一节一节对上。