Sketch 001: Mobile HUD

Design Question

在不遮挡 Godot 游戏世界的前提下，如何用暗黑系 ARPG 的横屏战斗框架，让移动、普通攻击、技能、物品、拾取/对话、任务、地图、聊天、队伍、公会以及背包等系统保持易达？本轮重点比较圆形战斗控件、深色金属边框、职业资源条与低频功能收纳方式。

How to View

直接打开：

open .planning/sketches/001-mobile-hud/index.html

也可以使用文件链接打开 index.html。

页面无需构建工具。草图以横屏为基准：手机为 844×390，平板和桌面为 16:9。右下角工具栏切换手机/平板/桌面预览和标注模式；首页下方的“全量 UI 移动端交互图”支持按模块筛选，点击节点可查看入口、触控方式、页面形态和返回路径。

Single Direction

暗黑 ARPG 横屏 HUD — 左上按“名称→头像→HP/MP/资源短条”纵向排列，顶部中央目标条，右上按“背包→小地图→菜单”排列，地图通过点击小地图进入；左下摇杆、右下环形技能盘，底部中央不放功能栏。角色、装备、技能、坐骑和表情只通过左上头像进入；菜单仅保留“社交、成长、活动、商业、系统”五个一级入口。

Covered Functions

移动摇杆、相机/地图入口、玩家状态、目标、普攻、技能、药水/物品、拾取、对话、钓鱼、副本入口、任务、背包、角色、技能、地图、队伍、公会、好友、聊天、情侣/爱意、商店、商城、仓库、私人商店、交易、兑换、Cube 制作、精炼、龙魂、坐骑、观战、表情、系统、帮助、登出、角色切换、死亡复活、加载和断线重连。

Interaction Maps

进入游戏：登录 → 服务器/频道 → 角色列表 → 加载 → 首页 HUD。
战斗：移动摇杆 → 目标选择 → 普攻/技能 → 掉落/场景交互 → 死亡/复活。
任务：任务栏 → 任务日志 → 小地图/大地图 → 自动寻路 → NPC 对话 → 副本结算。
角色与物品：头像/菜单 → 角色/装备/技能，以及背包 → 物品详情 → 使用/装备/出售 → 仓库。
社交：右上菜单 → 社交 → 聊天/好友/情侣/公会；组队后队员状态固定在左上头像下方，点击队员查看资料或定位。
经济：NPC/玩家 → 商店/商城/交易/私人商店 → Cube 制作 → 精炼/龙魂。
系统状态：右上菜单 → 设置/帮助/角色切换/登出，以及死亡、加载、断线重连等状态流程。

What to Look For

暗黑系圆形战斗盘是否能让右手拇指快速区分普攻、技能和药水。
战斗控件是否遮挡角色、敌人、掉落物或任务目标。
当前任务条是否足够醒目，点击任务条能否直接进入任务面板。
低频功能是否通过菜单一跳到达，同时不让战斗 HUD 变得拥挤。
名称是否位于头像正上方，HP/MP/资源短条是否位于头像下方且不抢占战斗画面。
右上菜单是否位于最外侧，小地图是否紧挨菜单，背包是否替代原地图按钮。
横屏手机布局在平板/桌面预览下是否有足够的延展空间。
技能冷却、按钮按压、抽屉打开、聊天发送和摇杆复位反馈是否足够明确。

Next Decision

当前方向已确定为单一方案，交互图已补齐全部功能入口。下一步可按交互图逐条映射到 Godot Control 节点，并优先实现首页 HUD、任务、背包、菜单和战斗操作。草图只借鉴暗黑系 ARPG 的布局语言，不复用参考图中的原始素材。