cabinw
10cf93a324
Add the paper direction with thin tracks, outlined hexagons and line arrows, without exterior color markers or piece numbers. Add a unified catalog for five designs and their 25 themes, with direct review links. Organize each design into an authored design.md, generated tokens.json and preview. Add Agent routing, shared integration guidance, a machine-readable manifest and an executable rendering example. Preserve legacy preview and document links. Validation: 16 focused design, theme and package tests passed; npm run design and static build passed. Confirmed all eight authored documents survive generation unchanged. Browser checks covered mobile, tablet and desktop layouts, theme links and migrated previews. Native engine integration and visual verification remain pending.
53 lines
3.2 KiB
Markdown
53 lines
3.2 KiB
Markdown
# 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 示例未完成此套角色的实机验收。
|