115 lines
7.6 KiB
Markdown
115 lines
7.6 KiB
Markdown
# HEROLL 关卡内 UE/UI 复刻设计包
|
||
|
||
> 版本：1.0 · 目标画布：750 × 1334（9:16 竖屏） · 范围：进入关卡后至结算离开
|
||
> 版权边界：本包仅用于本地研究、验证与开发。所有位图均从用户提供的 HEROLL 原作包中逆向导出，不得公开发布、转售或并入无授权产品。
|
||
|
||
## 交付概览
|
||
|
||
- `prototype/`：覆盖 23 个关卡内状态的可交互高保真 HTML 样稿；桌面端左侧切屏，移动端全屏呈现，支持键盘左右键切换。
|
||
- `assets/original/`：196 张从原作 Unity 资源导出的 Texture2D，按棋盘、HUD、战斗、装备、商店、事件、结算分类；新增 1–4 骷髅战斗、小 Boss 与污染 Boss 专用资源，`manifest.json` 保留源包、PathID、尺寸与导出状态。
|
||
- `screen-specs.csv`：逐屏用途、入口、出口、固定锚点、主要操作与验收条件。
|
||
- `preview/`：关键界面的 750 × 1334 实际浏览器渲染截图。
|
||
- `qa-results.json`：自动化渲染、资源加载、画布尺寸和界面覆盖校验结果。
|
||
|
||
## 1. 复刻依据
|
||
|
||
设计依据来自三组相互校验的资料：
|
||
|
||
1. 「逆向分析游戏并输出完整 GDD」会话与 `design/gameplay-validation/Heroll_Gameplay_Validation_GDD.md`：确定 10 层验证局、双 D6、固定棋盘顺时针移动、全自动战斗、四装备槽、商店层 3/6/9、事件与结算规则。
|
||
2. `参考资料/功能浏览与关卡流程.mp4`：确认真实关卡内构图、交互锚点、界面覆盖关系和事件节奏。
|
||
3. `参考资料/截图说明.jpg` 与逆向 Texture2D：确认像素厚描边、暗紫灰面板、暖黄主操作、火山棋盘、精灵商店与事件小游戏的原作视觉。
|
||
|
||
关键视频样本：约 02:12 棋盘；04:24 自动战斗；06:37 商店；07:21/09:14 装备比较；11:02 挖掘；14:42 泡泡射手。样稿不是依靠截图贴图，而是用逆向出的原作分层资源重新搭建，因此各状态可交互、可适配。
|
||
|
||
## 2. 关卡内体验架构
|
||
|
||
```mermaid
|
||
flowchart TD
|
||
A["关卡棋盘：ROLL"] --> B["骰子结算：移动预告"]
|
||
B --> C{"落点类型"}
|
||
C -->|战斗| D["自动战斗"]
|
||
D --> E{"装备掉落"}
|
||
E -->|有| F["装备比较 / 装备或分解"]
|
||
E -->|无| G["返回棋盘"]
|
||
F --> G
|
||
C -->|事件| H["商店 / 宝箱 / 篝火 / 铁匠 / 祝福 / 小游戏"]
|
||
H --> G
|
||
C -->|完成一圈| I["回复 30% + 安装 2 个增益地块"]
|
||
I --> G
|
||
D -->|生命归零| J{"源码复生祝福可用"}
|
||
J -->|是| K["按祝福规则复生"]
|
||
K --> D
|
||
J -->|否| L["失败结算"]
|
||
G -->|第 10 层首领击败| M["胜利结算"]
|
||
```
|
||
|
||
体验节奏采用「教—测—奖」：前两层让玩家理解掷骰、自动战斗和装备；中段用商店与事件测试资源分配；每圈回复和增益地块构成阶段奖励；最终层以首领、源码复生祝福和结算收束。
|
||
|
||
## 3. 竖屏布局规范
|
||
|
||
### 3.1 基准与安全区
|
||
|
||
- 逻辑画布：750 × 1334；浏览器等比缩放，不拉伸。
|
||
- 推荐安全区：左右 24 px、顶部 22 px、底部 22 px；接入原生端时外加 `safe-area-inset-*`。
|
||
- 核心交互全部位于下方 42% 的单手可达区；顶部仅放状态与暂停。
|
||
- 最小视觉点击尺寸：92 × 92 px；主操作 710 × 66 px；任何关键操作不依赖悬停。
|
||
|
||
### 3.2 五个固定锚点
|
||
|
||
| 区域 | 位置 | 内容 | 状态规则 |
|
||
|---|---|---|---|
|
||
| 积分 | 左上 | 菱形积分图标＋数值 | 棋盘、战斗、事件均保留 |
|
||
| 系统 | 右上 | AUTO＋暂停 | AUTO 只改变战斗/事件演算；暂停永远可见 |
|
||
| 层数 | 右侧 | 当前层/10、进度柱、首领标记 | 大型模态可遮暗但不重排 |
|
||
| 局内资产 | 底部上排 | 等级、生命、四装备槽 | 战斗掉落比较时仍能直接对照 |
|
||
| 当前动词 | 底部 | ROLL / FIGHTING / EXIT / 事件动作 | 一屏只保留一个主操作 |
|
||
|
||
### 3.3 覆盖关系
|
||
|
||
- 棋盘、战斗是两个基础场景层；顶部与底部 HUD 使用同一锚点，切换时不跳动。
|
||
- 商店、挖掘、泡泡射手等是中部场景替换：保留积分、AUTO/暂停、层数和底部局内资产。
|
||
- 骰子结果、第三骰、装备比较、复活、暂停是叠层：原场景继续提供上下文，使用半透明暗幕。
|
||
- 胜利/失败为全屏终态，才允许移除局内 HUD。
|
||
|
||
## 4. 视觉语言
|
||
|
||
- 轮廓：重要容器 6–8 px 深蓝黑描边；按钮和卡片保留 6–12 px 底部像素压边。
|
||
- 色彩：深蓝黑 `#11162C`；暗紫灰面板 `#343754`；暖黄主操作 `#FFD34A`；危险红 `#D9483F`；确认绿 `#58C561`。
|
||
- 层次：交互按钮 > 事件容器 > 角色与棋盘 > 场景前后景；不用现代玻璃拟态或无描边扁平控件。
|
||
- 图像：启用 nearest/pixelated 采样；禁止 AI 重绘、第三方占位图或与原作风格不一致的矢量图标。
|
||
- 动效：位移使用阶梯式缓动；按钮按下压缩 4–6 px；奖励只在焦点周围使用 2–4 帧闪光，不做全屏粒子污染。
|
||
|
||
## 5. 关键交互说明
|
||
|
||
### 棋盘与投掷
|
||
|
||
点击 `ROLL` 后锁定主按钮，双骰在中部展示 0.7–1.0 秒；同时给出总点数和落点类型。棋盘固定不旋转，40 个画面格全部是独立实际地块；棋子从底部起点沿左侧、顶部、右侧顺时针移动，1 点严格对应 1 个地块，最终落点才进入战斗/事件。1–4 骷髅、两类小 Boss、商店及 12 类事件格必须显示各自原作图标。第三骰祝福生效时，先选骰再投掷，不在结果后追加选择。
|
||
|
||
### 自动战斗与装备
|
||
|
||
战斗默认 1× 全自动。玩家唯一即时干预是右下药水；AUTO 关闭只暂停自动施放，不将系统改为手操战斗。装备掉落以右下发光卡提示，打开比较后上方为新装备、下方为当前装备；主按钮执行“装备并自动分解旧物品”，退出则保留当前装备并分解新掉落。
|
||
|
||
### 事件
|
||
|
||
商店固定为三普通＋三特殊商品，购买后原位显示 `SOLD`；商店层为 3/6/9。宝箱、篝火、铁匠、祝福、挖掘和小游戏按各自基础收益与基础次数结算；不显示广告、即时增强、广告重抽或补次数按钮。事件结束统一通过底部 `EXIT` 或结果领取按钮回到棋盘。
|
||
|
||
### 复活与结算
|
||
|
||
仅保留源码 `Revive` 祝福的复生规则。祝福不可用或结算后仍死亡时，完整播放 `DEFEAT` 动画并进入失败页；不显示广告复活或放弃广告按钮。第 10 层首领击败进入全屏胜利；胜利与失败终态都不再保留局内 HUD。
|
||
|
||
## 6. 实现建议
|
||
|
||
- Unity/UE 实现都应以 750 × 1334 逻辑坐标搭建锚点。若这里的 “UE” 指 User Experience，本样稿已给出完整交互流；若落地 Unreal Engine，可将五个固定锚点拆成 CommonUI Layer。
|
||
- 位图按原生尺寸整数倍放大；Texture Filter 使用 Point/Nearest，关闭 Mipmap，UI Atlas 禁止有损压缩。
|
||
- 棋盘格、装备槽、商品卡、祝福卡应做成数据驱动复用组件，不为单个事件复制 HUD。
|
||
- 模态出现时不销毁战斗/棋盘状态；源码祝福复生和装备比较必须返回同一帧上下文。
|
||
- 文案长度以简中两行上限验收；原作英文动词 `ROLL / FIGHTING / EXIT` 保留作为高识别动作标签。
|
||
|
||
## 7. 验收基线
|
||
|
||
- 23 个 `UI-002`–`UI-025` 关卡内状态均可直接打开；不含登录、大厅、抽卡、局外养成。
|
||
- 所有 `<img>` 均来自 `assets/original/manifest.json`，加载失败数必须为 0。
|
||
- 每张关键预览严格为 750 × 1334；顶部、右侧与底部锚点在所有非终态界面不漂移。
|
||
- 主按钮可见且唯一；战斗中药水不被主操作遮挡；装备比较仍能看到四装备槽。
|
||
- 商店、挖掘、泡泡射手分别保持原作的精灵摊位、5×5 网格、森林泡泡场景识别物。
|