# Case 01 - Buildable AI Game UI Reference

## 案例定位

本案例是补充性的布局合同示例，不作为免费 Sample Pack 的主视觉证据。主视觉证据请先阅读 `visual_evidence_manifest_20260502.md` 和 `case_02_match3_visual_trial_before_after.md`。

本案例用于展示如何把一个塔防画面需求拆成玩法状态、布局合同、审查分数、返修指令和开发交付说明。它不是最终图片，也不是可直接投喂模型的单段 prompt。

案例选择：手机竖屏塔防关卡中画面。原因是塔防画面天然包含地图、敌人路径、防御塔、资源、波次、建造操作和压力反馈，容易暴露 AI 生图的常见问题：画面像海报、UI 堆叠、看不出下一步、按钮无法实现。

## SCREEN_BRIEF

### 基本信息

- 项目名：Lantern Line Defense
- 游戏类型 / genre：塔防，引用 `genres/tower_defense.md`
- 界面类型 / screen type：HUD + 游戏演示图，引用 `screen-types/hud.md`
- 平台：手机竖屏
- 输入方式：触屏
- 画面比例：9:16
- 图片类型：Hybrid Shot
- 目标用户：熟悉移动塔防但不接受重度商业入口干扰的玩家
- 这张图给谁看：开发、美术、关卡设计、制作人

### 一句话任务

这张图的任务是：展示玩家在第 7 波中期，敌人即将突破右侧路径，玩家正准备在空地建造冰塔来减速敌群。

### 当前玩法状态

- 玩家正在做什么：选择底部建造栏中的冰塔，并准备点选地图右下侧空格。
- 当前阶段：第 7 / 10 波进行中。
- 当前目标：守住核心灯塔，防止敌人进入终点。
- 当前压力来源：右侧路径有 6 个快速敌人接近防线缺口，生命只剩 3。
- 当前可操作项：建造冰塔、升级左侧弓塔、释放一次范围技能。
- 系统刚反馈了什么：冰塔按钮被选中，地图上显示 3 个可建造格，其中右下格被高亮。
- 下一步最可能发生什么：玩家放置冰塔，敌人被减速，右侧防线获得缓冲。
- 当前局面为什么值得截图：同时验证塔防路径压力、可建造格、资源是否足够、选中态和下一步操作。

### 必须出现

#### UI

- P0：核心灯塔生命 `3`、波次 `7/10`、金币 `120`、右侧敌群、冰塔选中态、右下可建造格高亮。
- P1：底部 3 个建造按钮：弓塔、冰塔、炮塔；其中冰塔 selected，炮塔 disabled 因金币不足。
- P1：一个技能按钮处于 cooldown。
- P2：暂停按钮、倍速按钮、轻量关卡名。

#### 玩法元素

- 可读的 S 形敌人路径。
- 终点核心灯塔。
- 至少 2 座已有防御塔。
- 6 个敌人集中在右侧压力点。
- 3 个可建造格，其中 1 个高亮。

#### 状态反馈

- selected：冰塔按钮和右下建造格。
- disabled：炮塔按钮显示金币不足原因。
- danger：核心生命为 3，右侧敌群接近终点。
- cooldown：范围技能按钮显示冷却环。

### 必须避免

- 不出现商店、充值、VIP、抽卡、活动、红点。
- 不出现海报式大标题。
- 不把地图做成网页后台仪表盘。
- 不让 UI 遮挡敌人路径或建造格。
- 不让图像模型生成长说明文字。
- 不把所有塔和敌人画成无法区分的装饰点。

### 文本策略

- P0 运行时文本：生命、波次、金币、建造费用、冷却秒数。
- P1 可后期覆盖文本：塔名短标签、技能名短标签。
- P2 可弱化文本：关卡名。
- 需要本地化的区域：塔名、技能名、波次标签。
- 禁止由图像模型直接生成的长文本：教程说明、弹窗文案、升级说明。

### 成功标准

- 3 秒内能看懂：右侧敌人快突破，玩家要放冰塔。
- 主操作清楚：选择冰塔并放到高亮格。
- 当前目标清楚：保护核心灯塔。
- 当前压力清楚：生命低、敌人接近终点。
- 可转成开发任务：地图层、路径层、单位层、HUD、建造栏、状态绑定清楚。
- 不触发硬失败：无商业化入口、无海报构图、无假长文本。

## LAYOUT_CONTRACT

### 输出与平台

- 输出比例：9:16
- 目标分辨率：1080x1920
- 平台：手机
- 输入方式：触屏
- 横竖屏适配：本案例只锁竖屏。

### 安全区

- 顶部 HUD 避让：上方保留 5% 安全区。
- 底部手势区避让：建造栏底部距离手势区至少 56px。
- 左右边距：关键按钮和数值距离屏幕边缘至少 40px。
- 右手触控：底部建造按钮可单手触达，但不得覆盖地图 P0 压力点。

### 区域占比

- 顶部 HUD：10%
- 核心地图 / 玩法区：68%
- 底部建造 / 技能操作区：18%
- 辅助信息区：4%
- 弹窗 / 浮层：无
- 背景：只作为地图底层，不单独抢占视觉。

### UI 层级

- P0 第一眼：右侧敌群、路径终点、核心生命、冰塔选中态、高亮建造格。
- P1 第二眼：金币、波次、3 个塔按钮、技能冷却。
- P2 第三眼：暂停、倍速、关卡名。

### 视线顺序

1. 右侧敌群压力点。
2. 终点核心灯塔和生命数。
3. 右下高亮建造格。
4. 底部冰塔选中按钮。
5. 金币和波次。

### 组件数量锁定

- 顶部状态组：3 个，分别是生命、波次、金币。
- 地图路径：1 条 S 形主路径。
- 已有防御塔：2 座。
- 可建造格：3 个。
- 敌人数量：6 个快速敌人。
- 底部建造按钮：3 个。
- 技能按钮：1 个。
- 系统按钮：暂停 1 个、倍速 1 个。
- 弹窗按钮：0 个。

### 不允许遮挡

- 右侧敌群和路径缺口。
- 核心灯塔生命数。
- 右下高亮建造格。
- 冰塔按钮 selected 状态。
- 炮塔金币不足状态。
- 技能 cooldown 环。

### 禁止添加

- 商店入口。
- 红点和活动角标。
- VIP / 充值 / 抽卡。
- 战力榜、任务墙、签到。
- 大面积角色立绘。
- 网页后台卡片、表格、指标面板。

## IMAGE_REVIEW

### Review Context

本节是合同审查演示，不是 Sample Pack 的真实图片证据。真实 pass / revise / after-pass 图片证据见 `case_02_match3_visual_trial_before_after.md`。这里假设首轮生成图大方向正确，但出现了两个典型问题：底部操作区过重，右侧敌人路径被装饰特效部分遮挡。

### Score

| 项目 | 满分 | 得分 | 问题 |
|---|---:|---:|---|
| 玩法清晰度 | 20 | 15 | 能看出塔防和敌人接近终点，但冰塔放置意图不够强 |
| UI 信息层级 | 15 | 10 | 底部按钮过大，抢走右侧压力点注意力 |
| 真实游戏截图感 | 15 | 12 | 基本像实机，但地图装饰略像宣传图 |
| 视觉风格一致性 | 15 | 12 | 灯塔和塔风格统一，敌人识别度偏低 |
| 可读性与可访问性 | 10 | 7 | 金币不足只靠变暗表达，需要费用原因 |
| 技术可落地性 | 10 | 8 | 能拆组件，但敌人路径遮挡会影响实现参考 |
| 构图与镜头合理性 | 10 | 7 | 核心玩法区被底部栏压缩 |
| 反模式规避 | 5 | 5 | 未出现商店、VIP、红点、抽卡 |
| 总分 | 100 | 76 | 必须返修 |

### 结论

- 需要返修。
- 理由：总分 76，低于 80；主问题是 P0 压力点和建造意图不够清楚，但没有严重到需要重做 `SCREEN_BRIEF` 或 `LAYOUT_CONTRACT`。

### 合同对照

- `SCREEN_BRIEF` 是否满足：部分满足。敌人压力和守塔目标存在，但冰塔放置意图不足。
- `LAYOUT_CONTRACT` 是否满足：部分违反。底部操作区视觉重量超过 18%，右侧路径存在遮挡。
- `IMAGE_PROMPT_LOCKED` 是否被遵守：部分遵守。未添加商业化入口，但地图装饰偏多。

### 主要问题

1. 底部建造栏过高，削弱核心地图区。
2. 右侧敌群附近特效过亮，遮挡敌人轮廓和路径方向。
3. 炮塔 disabled 状态只靠灰色，不说明金币不足。
4. 右下可建造格高亮不够明确，玩家下一步操作不够清楚。

### 返修决策

- 保留：9:16 竖屏、塔防地图、S 形路径、生命 3、波次 7/10、金币 120、冰塔 selected、无商业入口。
- 只修改：底部栏高度、右侧敌群可读性、可建造格高亮、炮塔金币不足原因。
- 删除：右侧路径上的多余装饰特效。
- 禁止改变：敌人数量、核心灯塔位置、底部 3 个塔按钮、无弹窗状态。
- 是否需要重做 `SCREEN_BRIEF`：否。
- 是否需要重做 `LAYOUT_CONTRACT`：否。

## REVISION_PROMPT

```text
Keep the 9:16 mobile tower defense gameplay screenshot, the S-shaped enemy path, the lighthouse core with 3 health, wave 7/10, 120 gold, exactly six fast enemies near the right-side pressure point, two existing towers, three buildable cells, and the bottom build bar with exactly three tower buttons plus one skill button. Refine only gameplay readability and layout compliance: reduce the bottom build bar to about 18% screen height, make the right-side enemy group and path direction clearly visible, remove decorative effects that cover enemies or the path, make the bottom ice tower button clearly selected, make the lower-right buildable cell strongly highlighted as the next placement target, and show the cannon tower as disabled because its cost is higher than current gold using both dimming and a small cost marker. Do not add shop icons, VIP badges, gacha buttons, red notification dots, event banners, quest panels, large character portraits, web dashboard cards, fake long text, or poster-style titles.
```

## IMPLEMENTATION_NOTES

### UI 层级树

```text
Root
  MapBackground
    TerrainLayer
    PathLayer(S_curve_path)
    BuildSlotLayer
      BuildSlot_available_01
      BuildSlot_available_02
      BuildSlot_selected_target
    TowerLayer
      ArcherTower_left
      SparkTower_mid
    EnemyLayer
      FastEnemy_01..06
    CoreLayer
      LighthouseCore
      CoreDangerPulse
  TopHUD
    CoreHealthCounter(runtime number = 3)
    WaveCounter(runtime text = 7/10)
    GoldCounter(runtime number = 120)
    PauseButton
    SpeedToggle
  BottomControls
    TowerButton_archer(default)
    TowerButton_ice(selected)
    TowerButton_cannon(disabled_insufficient_gold)
    SkillButton_area_slow(cooldown)
  FeedbackLayer
    PlacementPreview
    EnemyPathWarning
```

### 结构 / 样式 / 逻辑拆分

- 结构层：地图、路径、敌人、塔、建造格、顶部 HUD、底部操作区、反馈层。
- 视觉样式层：灯塔核心、塔图标、敌人轮廓、路径描边、按钮状态、冷却环。
- 逻辑 / 数据层：生命、波次、金币、塔费用、选中塔、可建造格、敌人路径进度、技能冷却。

### 状态绑定点

- `core_health = 3`
- `wave_current = 7`
- `wave_total = 10`
- `gold = 120`
- `selected_tower_type = ice`
- `cannon_cost > gold`
- `skill_area_slow_cooldown_remaining > 0`
- `build_slots_available = [slot_01, slot_02, slot_03]`
- `placement_preview_slot = slot_03`
- `enemy_cluster_pressure_side = right`

### 切图建议

- 可切图：灯塔核心、塔底座、塔图标、敌人 sprite、按钮面板、技能图标、金币图标。
- 建议代码绘制：路径高亮、建造格轮廓、selected 描边、cooldown 环、生命 / 金币 / 波次数值。
- 必须运行时覆盖：全部数字、塔费用、波次、冷却秒数、按钮短标签。

### 开发实现风险

- 生图可能无法精确保持敌人数量，正式实现必须由关卡数据生成敌人。
- 路径方向不能只靠背景美术，建议用轻量 path marker 或敌人朝向表达。
- disabled 状态不能只靠颜色，必须同时有费用差异或锁定原因。
- 底部操作区在不同手机比例下容易挤压地图，需要按安全区和百分比布局。
- 文本不要烘焙在图像里，避免本地化和可读性失败。

### 可交付给开发的任务清单

1. 实现 `TopHUD`：生命、波次、金币、暂停、倍速。
2. 实现 `BuildBar`：3 个塔按钮和 1 个技能按钮，支持 default / selected / disabled / cooldown。
3. 实现 `BuildSlotLayer`：显示可建造格和当前 placement preview。
4. 实现 `EnemyPathWarning`：右侧压力点的路径提示，不遮挡敌人。
5. 实现运行时文本覆盖：所有 P0 / P1 数值用代码渲染。
