# 04 · 动物弯弯镇

设计 ID：`animals` · 渲染风格：`animals` · 英文名：PAW PARADE。卡通动物候选方案，可与其他方案同时保留。

[Agent 接入约定](../../shared.md) · [配色数据](tokens.json) · [完整设计稿](index.html) · [试玩与审核](../../../design-showcase.html?design=animals)

## 设计目标

猫、熊、兔与青蛙沿轨道出游。颜色来自毛色、草地、木棕和奶油色，保留自然感。表情用来增加性格；玩家通过独立箭头判断方向，不靠动物脸朝向猜规则。

## 棋盘与棋子怎么画

复用 [renderer.js](../../../src/renderer.js) 的非 paper 棋盘和 [token-art.js](../../../src/token-art.js) 的 animals 分支。r = 格半径 s × 0.985。

| 部件 | 当前实现 |
| --- | --- |
| 分格／轨道 | 分格 max(1, s × 0.024)，外缘 max(4, s × 0.16)，中心线 max(2.5, s × 0.10) |
| 六角底托 | 半径 r × 0.94，奶油白 #FFFCED，浅绿边 #526F5744、线宽 r × 0.035 |
| 动物种类 | 经主题映射后的色库索引 % 4：0 猫、1 熊、2 兔、3 蛙 |
| 脸部 | 圆脸半径 r × 0.51，中心上移 r × 0.04；耳朵用三角、圆或采样椭圆 |
| 表情 | 深色 #263A3A 眼睛与嘴，#EF958B 腮红；不增加数字或文字 |
| 方向底 | 下方 y + r × 0.43 的白圆，半径 r × 0.36 |
| 方向箭头 | #263A3A 实心箭头，尺度 r × 0.44，位于白圆内 |

动物轮廓和脸保持正立，方向箭头独立旋转。tokens.json 中 pigments.arrow 是共享颜色 token；**animals 分支的实际箭头固定为 #263A3A，底色是白圆**，不要用颜料色库的 arrow 覆盖脸下方向区。

角色种类是表现映射，不是游戏功能或阵营。初始棋子索引决定主题色，再决定种类；移除棋子后不可重排剩余动物。全部造型为多边形、线与圆，不需要另生成动物 PNG。

## 五种主题

| 主题 ID | 阶段 | 名称 | 独立用色方向 |
| --- | --- | --- | --- |
| lagoon | 轻松 | 青草野餐 | 草地绿、奶油底与动物毛色 |
| apricot | 进阶 | 橡果秋游 | 秋叶黄、橡果棕与麦芽金 |
| lavender | 烧脑 | 溪边捉迷藏 | 溪水青、苔绿与暖棕 |
| rose | 挑战 | 红土探险 | 红土环境与沙色小径 |
| midnight | 每周挑战 | 萤火森林 | 深森林绿与萤火浅黄 |

完整配色和每主题 4/7/9/12 色有序 palette 见 tokens.json，源为 [art-directions.js](../../../src/art-directions.js)。不要把原版粉紫糖果配色直接套在动物脸上。

## 控件与边界

顶部控件与通知延续绿、奶油色与圆润边界。底部道具为苔绿／木棕／黄的纯色底座，圆角比例 44% 44% 36% 36%，3px 奶油边；有轻微点线装饰，无投影或立体厚度。角标与通关星星规则见 shared.md。

## 验收与接入

使用 `artDirection('animals')` 和 `directionTheme(direction, themeId, colorCount)`。

- 在最小棋子尺寸检查耳朵、脸、白圆与箭头，不因表情抢走方向信息。
- 检查六个方向、转弯移动、撤销后的动物种类与配色稳定。
- 夜间主题中浅色角色与绿板面分离，方向仍靠箭头表达。
- 原生适配需核对 circle 与 polygon 的图层顺序；现有 Cocos 示例未完成此套角色的实机验收。