可编辑 Luau 仅 UI 安全导出

Roblox Shop GUI Maker

制作带商品卡片、分类和响应式预览的 Roblox 商店,并导出清晰的 Luau UI 代码。不需要注册或下载即可开始。

交互式预览

打开、关闭并筛选商店

1280 × 720
升级商店
12,450 金币
速
速度加成
下一回合移动速度提高 20%。
350 金币
金
金币磁铁
自动收集附近的金币。
650 金币
幸
幸运护符
每次挑战保留少量奖励加成。
900 金币
3 个可见物品 · 3 个标签 响应式布局预览

商店物品

在 1–6 张商品卡片中测试短文本和长文本。

物品 1
物品 2
物品 3

导出结构

真实的商店层级,而不是扁平 mockup

生成器会创建命名清楚的 Roblox UI 实例,包括响应式商店面板、分类控件、可滚动商品列表和明确的按钮状态。复制到 Roblox Studio 后每个部分仍可继续编辑。

  • 带重生和安全区设置的 ScreenGui
  • 使用 Activated 的打开和关闭控件
  • 可实际筛选商品的分类标签
  • 自动计算画布高度的 ScrollingFrame
  • 命名清楚的商品卡片和购买按钮
  • 结合 Scale 与尺寸约束的布局
Explorer 层级可编辑实例
ScreenGui
├── OpenShopButton
└── ShopFrame
    ├── Header
    │   ├── TitleLabel
    │   ├── CurrencyLabel
    │   └── CloseButton
    ├── CategoryTabs
    └── ItemScroll
        ├── UIListLayout
        ├── UIPadding
        └── ItemCard × 1–6
            ├── ItemImagePlaceholder
            ├── ItemName
            ├── PriceLabel
            └── BuyButton

Studio 交接

在玩家遇到之前测试尴尬场景

商店布局可能在某个桌面分辨率正常,但长标签或小视口会让它出问题。导出前检查这些情况。

  • 检查最长物品名称,而不只是最短示例。
  • 让价格清楚可读,不要抢过购买按钮。
  • 用可见的禁用或已拥有状态,不要只依靠颜色。
  • 测试 1 件和 6 件商品的滚动行为。
  • 在试玩中多次打开和关闭商店。
  • 在 Studio 中检查手机横屏、平板和桌面模拟。
  1. 步骤 1

    复制生成的 Luau

    选择商店类型,替换示例商品,并在复制文件前检查桌面和移动端预览。

  2. 步骤 2

    创建 LocalScript

    在 Roblox Studio 的 StarterPlayerScripts 下添加 LocalScript,再粘贴导出的代码。

  3. 步骤 3

    替换视觉占位内容

    把物品首字母替换为自己的 ImageLabel 或资源 ID,再调整导出的颜色和文字。

  4. 步骤 4

    连接经过验证的购买流程

    将命名好的 BuyButton 连接到自己的 RemoteEvent 或 MarketplaceService 流程,并在服务器验证结果。

响应式检查

从浏览器预览到 Roblox Studio

导出结果可以节省搭建时间,但不会假装知道你的游戏经济系统。把可见界面作为可靠起点,再连接属于你游戏的数据和购买规则。

导出内容不会做什么

生成的文件不会发放物品、扣除货币、保存拥有状态或确认 Robux 购买。这些操作必须由服务器代码验证,客户端只能发起请求,不能决定购买是否成功。

常见问题

Roblox Shop GUI FAQ

这个工具会创建可用的 Roblox 商店吗?+

它会创建可见的 ScreenGui、商品卡片、分类筛选以及打开/关闭行为。你仍需把购买按钮连接到自己的服务器验证购买流程。

不安装插件也能使用代码吗?+

可以。把 Luau 复制到 Roblox Studio 的 LocalScript 中即可。导出不依赖外部 require、loadstring 或运行库。

商店能适配手机屏幕吗?+

生成的面板使用 Scale 尺寸和约束,商品列表会随内容滚动。仍要在 Studio 设备模拟器中用自己的文字和图片测试最终结果。

它能直接卖 Gamepass 或开发者产品吗?+

你可以生成界面和 Robux 价格占位内容。实际购买提示、收据验证和奖励发放必须使用 Roblox 服务并在服务器端实现。

Game UI Maker 隶属于 Roblox 吗?+

不是。Game UI Maker 是独立的创作者工具,不隶属于 Roblox Corporation,也未获得其背书。

使用方式

不用注册

打开就能编辑,复制或下载 Luau 代码都不需要账号。

手机上能用

编辑器在手机浏览器里可以直接跑,预览能切换成手机布局,导出前就能确认缩放。

Beta 期间免费

生成器在 Beta 阶段保持免费,不绑卡,没有试用倒计时。