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.
58 lines
3.9 KiB
Markdown
58 lines
3.9 KiB
Markdown
# 05 · 轻线纸境
|
||
|
||
设计 ID：`paper` · 渲染风格：`paper` · 英文名：PAPER ROUTES。最新新增的候选方案，可与其他方案同时保留。
|
||
|
||
[Agent 接入约定](../../shared.md) · [配色数据](tokens.json) · [完整设计稿](index.html) · [试玩与审核](../../../design-showcase.html?design=paper)
|
||
|
||
## 来源与设计目标
|
||
|
||
用户认可 [玩法变种实验页](../../../labs/variants/index.html) 的棋盘和棋子画法，要求整理成独立设计。提取暖白格面、浅蓝灰细轨道、陶橙／雾蓝纯色六角、细白边和线条箭头。五主题是这套画法的延展。
|
||
|
||
独立设计稿里的「双色试航」只保留初始布局作视觉对照；**不绘制棋盘外围彩色标记，不绘制棋子编号**。实验页的出口颜色匹配规则及外围色标不属于本设计，也不改变主游戏玩法。
|
||
|
||
## 棋盘与棋子怎么画
|
||
|
||
以格半径 s 为单位，复用 [renderer.js](../../../src/renderer.js) 的 paper 分支和 [token-art.js](../../../src/token-art.js) 的 paper 分支。
|
||
|
||
| 部件 | 当前实现 |
|
||
| --- | --- |
|
||
| 底格 | 正六角，半径 s × 0.97，保留细小格缝 |
|
||
| 分格线 | max(0.4, s × 0.025)，使用主题 boardGrid |
|
||
| 轨道 | 单层细线 max(0.7, s × 0.055)，不画粗 trackHalo、不做其他方案的端点内收 |
|
||
| 棋子 | 正六角纯色面，半径 s × 0.88，不能换成原版大圆角轮廓 |
|
||
| 白边 | #FFFFFFCC，线宽 s × 0.035 |
|
||
| 箭杆 | 局部坐标 (-0.30s, 0) → (0.30s, 0) |
|
||
| 箭头头部 | (0.08s, -0.17s) → (0.30s, 0) → (0.08s, 0.17s) |
|
||
| 箭头线条 | 白色、圆头圆接，线宽 s × 0.09；两段开放折线，不是实心三角 |
|
||
|
||
头部与箭杆一起按棋子方向或运动切线旋转。绘制分支内部 r = s × 0.88，再用 r / 0.88 还原单位，所以运动缩放时白边和箭头一起缩放。无棋子投影、高光、渐变；不用 PNG 冒充细线箭头。
|
||
|
||
## 五种主题
|
||
|
||
| 主题 ID | 阶段 | 名称 | 用色方向 |
|
||
| --- | --- | --- | --- |
|
||
| lagoon | 轻松 | 雾蓝信纸 | 实验页雾蓝环境、暖白格面、陶橙与雾蓝棋子 |
|
||
| apricot | 进阶 | 暖砂手札 | 暖砂纸底、灰棕细线 |
|
||
| lavender | 烧脑 | 鼠尾草页 | 浅灰绿纸底、蓝与苔绿棋子 |
|
||
| rose | 挑战 | 石墨练习 | 灰白图纸、石墨蓝细线 |
|
||
| midnight | 每周挑战 | 夜航图纸 | 深蓝灰板面、浅灰蓝轨道与暖色棋子 |
|
||
|
||
完整色值和每主题 4/7/9/12 色有序 palette 见 tokens.json，源为 [art-directions.js](../../../src/art-directions.js)。轻松主题关键参考色：环境 #EAF0F3、格面 #FAFBF7、分格 #D3DFE3、轨道 #B2C4CE、陶橙 #D66C4D、雾蓝 #477FC0。全部十二色固定白色箭头，其对比度至少 3:1。
|
||
|
||
浅色细轨道低于基础轨道的 3:1 目标，这是保留参考观感的已知取舍，不能为了套用原版指标而擅自加粗、加深或加轮廓。tokens 中的 contrast 是实测比值，不是合规认证。
|
||
|
||
## 控件与边界
|
||
|
||
顶部使用紧凑蓝灰控件，通知暖白、浅灰蓝边线，均无阴影。底部道具为圆形：撤销雾蓝、重来陶橙、提示赭金，1px 细白边，无阴影。旋转图标在浅主题为蓝灰，midnight 恢复白色；同时设置 body.dataset.design 和 body.dataset.theme。
|
||
|
||
通知位置、棋盘居中、大道具、金色发光星星以及示意角标都继承 shared.md。这里的“无阴影”不取消用户要求的奖励星星光感。
|
||
|
||
## 验收与接入
|
||
|
||
使用 `artDirection('paper')` 和 `directionTheme(direction, themeId, colorCount)`；禁止只换背景而继续使用 classic 的棋子和轨道画法。
|
||
|
||
- 对照实验页的细线与六角比例；参考布局没有外围色标与编号。
|
||
- 检查每个主题的长弯路，移动中仍为开放线条箭头、细白边棋子。
|
||
- 检查手机小图上的细线不断裂，以及午夜主题的旋转按钮颜色。
|
||
- 原生适配需检查圆头线端、透明细白边与格缝；尚未完成原生实机验收。
|