Agent Skills
返回列表
🎨

游戏界面架构

设计多媒体 更新于 2026.08.30

将以下提示词粘贴到你的 AI 对话框中：

请根据 https://skillhub.cn/install/skillhub.md 的指南，把 @user_3c6cb52e/game-ui-ux-sh-hqeb4n 这个技能安装到当前 AI 助手中，安装完成后我就能直接用它处理游戏 UI 布局、焦点导航和屏幕流相关任务。

技能介绍

问题背景：跨设备游戏UI的三大痛点

  • 分辨率碎片化：手机竖屏、超宽屏、电视过扫描导致UI元素错位、裁剪或留白失衡
  • 输入割裂：手柄无焦点导航、鼠标与手柄焦点冲突，控制器下菜单「无法操作」
  • 状态耦合：HUD逐帧轮询游戏状态，既浪费性能又绑定内部逻辑，屏幕流用布尔标志管理导致逻辑膨胀

核心能力：引擎中立的UI架构实践

布局与缩放：锚点+容器的响应式骨架

  • 锚定边缘/中心+容器流式布局，告别绝对像素坐标
  • 参考分辨率缩放+宽高比策略（letterbox/expand/锚点外扩），一套UI适配多屏
  • 安全区内边距：避开刘海屏、圆角与电视过扫描，关键UI不被裁剪

输入与导航：全设备焦点体系

  • 每屏初始焦点+焦点顺序定义，手柄/鼠标焦点共存
  • 焦点高亮清晰可见，切换输入设备不丢失导航路径
  • 解决「菜单无选中项」的手柄不可用问题

状态与屏幕流：事件驱动+屏幕栈

  • HUD订阅事件（如health_changed/score_changed），仅在触发时更新，解耦游戏逻辑
  • 屏幕栈管理（push/pop）：暂停界面覆盖游戏，返回即恢复，替代isPaused/inSettings布尔标志
  • 清晰屏幕流：title → game → pause → settings，逻辑可维护

验证与适配：跨设备实测

  • 窗口缩放、宽高比切换、手柄-only导航测试
  • 报告具体分辨率下的焦点、缩放、安全区表现，而非「应该没问题」

适用边界：与生态技能协作

  • 不处理引擎具体UI组件：需结合godot-ui-control/Unity UI（UGUI/UI Toolkit）实现具体控件
  • 视觉反馈（按钮弹跳、伤害数字）：交给game-feel
  • 分支对话UI：使用dialogue-systems
  • 字符串翻译：参考input-systems的本地化方案
  • 卡牌/棋盘布局：card-game技能可组合使用

使用场景

  • 开发跨平台游戏的HUD系统，需适配手机竖屏、超宽屏和电视，且手柄与鼠标都能正常导航
  • 修复手柄玩家无法操作菜单的问题：设置初始焦点、焦点顺序，并确认焦点高亮在电视过扫描下可见
  • 将暂停界面、设置界面的切换逻辑从布尔标志重构为屏幕栈，使返回操作逻辑更清晰可维护
  • 开发库存或商店界面，要求不同分辨率下按钮和文字不被裁剪，且支持安全区避让

适合人员

  • 独立游戏开发者，需要一套UI架构让HUD和菜单在多分辨率设备上保持一致
  • 游戏UI工程师，负责修复手柄焦点丢失、菜单无法导航的问题
  • 技术美术或UI程序，需要在引擎UI之上搭建事件驱动、响应式的屏幕流系统