第 13 课:我的第一个 UI 菜单 (Chest GUI) —— 交互界面设计师

课程时长:120 分钟技...

课程时长:120 分钟
技术栈:IntelliJ IDEA + Spigot API 1.21.1 + AI 助手
核心目标:掌握虚拟库存(Inventory)的创建与管理,学习通过 GUI 实现可视化交互,深度理解“事件拦截”在保护系统安全中的作用,利用 AI 快速生成繁琐的界面布局代码。


一、 任务背景 (Mission Background)

在现代化的 Minecraft 服务器中,玩家很少再去记忆复杂的斜杠指令(如 /heal)。取而代之的是,输入 /menu 就会跳出一个像箱子一样的彩色菜单,通过点击里面的图标即可执行功能。今天,你将化身为**“前端 UI 工程师”**,为你的服务器设计一个直观、美观且安全的“快捷控制中心”。


二、 学习路线图 (Technical Map)

  • 编程技能Bukkit.createInventory、物品栏点击事件 (InventoryClickEvent)、物品位置(Slot)索引概念、图标防盗逻辑。

  • 工程思维状态管理 —— 界面打开时,哪些操作是被允许的?交互闭环 —— 点击图标后,菜单应该关闭还是跳转?

  • AI 素养:利用 AI 快速生成“九宫格”布局代码(避免手写 27 行类似的 setItem)。


三、 核心项目:快捷菜单框架 (Sprint 1: 45 min)

1. 创建虚拟箱子

我们要定义一个 3 行(27 格)的菜单,并在中间放一个代表“回血”的苹果。

推荐 Prompt(提示词):

“我正在使用 Spigot 1.21.1。请帮我写一个指令 /menu

  1. 打开一个标题为‘§l超级控制中心’、大小为 27 格的虚拟箱子界面。

  2. 在第 13 格(中间)放置一个名为‘§a即时回血’的苹果,Lore 为‘点击恢复满状态’。

  3. 在两侧的角落放置一些灰色染色玻璃板作为装饰。

  4. 确保代码结构清晰,方便我后续添加更多图标。”

2. 代码解析:Slot(槽位)系统

  • 关键代码Inventory inv = Bukkit.createInventory(null, 27, “Title”);

  • 坐标系:Minecraft 的 UI 是从左上角 0 开始编号的。

  • Vibe Check:问问 AI,为什么箱子界面的大小必须是 9 的倍数?(提示:这是 Minecraft 客户端的硬性规定)。


四、 多任务挑战:交互逻辑与美化 (Sprint 2: 45 min)

菜单不仅要好看,更要“能动”,且不能让玩家把菜单里的苹果“偷走”。

任务等级 任务名称 功能描述 AI 协助方向
基础版 图标保护 监听点击事件,禁止玩家从菜单中拿走任何物品。 “如何监听 InventoryClickEvent 并判断点击的是否为我创建的菜单,然后 setCancelled(true)?”
进阶版 指令触发 点击‘苹果’图标时,关闭菜单并执行 /heal 指令。 “如何判断点击的 Slot ID 是 13,然后调用玩家的 setHealth 方法并关闭 UI?”
专家版 动态边框 使用 AI 生成代码,用不同颜色的玻璃板围成一个动态变色的“闪烁边框”。 “请帮我写一个逻辑:用彩色玻璃板填充 27 格菜单的边缘位置(0-8, 18-26, 9, 17)。”

五、 工程思维:防作弊与边界检查 (Engineering Logic: 15 min)

工程师的深度思考:

  1. “幽灵物品”漏洞:玩家如果使用快捷键(如数字键或 Shift+点击),能把图标偷走吗?

    • 解决方案:在点击事件中,必须检查 ClickType

    • AI 任务:询问 AI “在自定义 GUI 中,如何通过一行代码拦截所有类型的非法移动(包括键盘数字键交换)?”

  2. 身份识别:如果两个插件都叫‘菜单’,你的代码会搞混吗?

    • 建议:不要只靠标题判断,检查 Inventory 的持有者(Holder)。


六、 联机调试与 Debug (Testing: 15 min)

  1. 交互测试:点击苹果,血量恢复了吗?菜单关闭了吗?

  2. 压力测试:疯狂点击图标并尝试用 Shift+左键,看看能不能把苹果弄进自己的背包。

  3. 视觉测试:UI 标题的颜色代码是否生效?

  4. AI 纠错:如果点击背包里的物品也被拦截了(无法整理自己的背包),请问 AI:“如何限制只拦截‘自定义菜单’内的点击,而不影响玩家操作自己的下半部分背包?”


七、 自学习与探究 (Self-Learning)

拓展思考:

  • 多级菜单:点击菜单里的一个“指南针”,能否打开第二个“子菜单”(例如:传送菜单)?

  • 权限菜单:能否让 AI 修改代码,使得普通玩家看不到某些“高级图标”,只有管理员能看到?


八、 成果交付 (Deliverables)

  1. 演示:展示你优雅的弹出式菜单,点击不同图标触发不同功能(如:回血、飞行、变身),并证明图标无法被偷走。

  2. 代码截图:展示你处理 InventoryClickEvent 的逻辑部分。

  3. Prompt 记录:记录你如何让 AI 生成繁琐的“界面填充逻辑”的提示词。


九、 老师的 Vibe Tips (结语)

“今天你完成了从‘黑框指令’到‘图形界面’的跨越。在软件工程中,UI 是用户与逻辑之间的桥梁。利用 AI 帮你处理那些枯燥的 Slot 计算,你就能像搭积木一样设计出精美的控制面板。记住,一个好的 UI 应该是:一眼就能看懂,且绝对安全。”