cabinwandClaude Fable 5.1
e447d1f807
- 07 macaron, referenced from Meowdoku: cream worlds, a white tray with gutters, candy tokens with white arrows, two-column 关卡/待解 HUD, white elevated tool discs (macaron-only exception to the flat rule), full-screen dark result overlay, a brick ripple on board clear, an eased glide-out and dot-lattice dissolve on exit; Resource Han Rounded subset fonts (SIL OFL) in assets/fonts with the charset and regeneration note - 06 signpost: the design.md, tokens and preview directory that earlier commits left untracked - design docs, catalog, manifest, showcase and base spec updated to seven directions; the analysis and proposal live in docs/art-proposal-macaron.html - the renderer, app, geometry and CSS sources for both directions were already carried by the level commits made from this working tree Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>
60 lines
4.4 KiB
Markdown
60 lines
4.4 KiB
Markdown
# 06 · 路标
|
||
|
||
设计 ID：`signpost` · 渲染风格：`signpost` · 英文名：SIGNPOST。2026-09-14 由美术评审后的设计提案接入，可与其他方案同时保留。提案与实机对照见 [docs/art-proposal-signpost.html](../../../docs/art-proposal-signpost.html)。
|
||
|
||
[Agent 接入约定](../../shared.md) · [配色数据](tokens.json) · [完整设计稿](index.html) · [试玩与审核](../../../design-showcase.html?design=signpost)
|
||
|
||
## 设计目标
|
||
|
||
棋盘是一张线路图：奶白卡片托在世界色上，带一圈边框和一层向下偏移的平面底板；浅色路基先铺，墨蓝钢轨再压上去，端点在板边收口。棋子是路标：内缩露出脚下端口，一圈细描边，十二色统一白箭头。控件退到纸面里，一眼看过去重心只在棋盘。
|
||
|
||
## 棋盘与棋子怎么画
|
||
|
||
以格半径 s 为单位，复用 [renderer.js](../../../src/renderer.js) 的 signpost 分支和 [token-art.js](../../../src/token-art.js) 的 signpost 分支。
|
||
|
||
| 部件 | 当前实现 |
|
||
| --- | --- |
|
||
| 底板 | 全部格面放大 s + 0.2 + 边框宽，向下偏移 0.12s，纯色 `base`；偏移在屏幕坐标里施加，旋转时保持向下 |
|
||
| 边框 | 同样放大的格面，纯色 `rim`，内部被格面覆盖只剩外缘；宽 max(1.5, 0.06s) |
|
||
| 格面 | 正六角 s + 0.2，各主题奶白 `board` |
|
||
| 格线 | max(0.6, 0.02s)，`boardGrid`，约 1.14 : 1，只在旋转时对位 |
|
||
| 路基 | `trackHalo`，宽 clamp(0.30s, 5, 18) |
|
||
| 钢轨 | `track` #3A5068，宽 clamp(0.105s, 2.5, 7)，圆头圆接；板边端点按路基宽内收，不外伸 |
|
||
| 棋子 | 圆角六角，半径 0.90s，纯色面，描边 #2E4256 38%、宽 max(1.5, 0.05s) |
|
||
| 箭头 | 白色七点形，尺度 0.66 × 棋子半径，十二色统一 |
|
||
| 预览路线 | 画在棋子之上：光晕 1.05 × 路基宽 + 主线 1.5 × 钢轨宽；可出 #2F5FBF / #C9D7F3，被挡 #C4432F / #F3D3CB，末端小叉 |
|
||
| 提示环 | 单环 #D9A227，半径 1.1s，宽 max(2.5, 0.08s) |
|
||
|
||
不使用棋子图集，不使用滤镜调色。全部造型由多边形、折线与圆组成。
|
||
|
||
## 五种主题
|
||
|
||
| 主题 ID | 阶段 | 名称 | 用色方向 |
|
||
| --- | --- | --- | --- |
|
||
| lagoon | 轻松 | 晨雾 | 蓝灰世界色，靛蓝、松石与琥珀领色 |
|
||
| apricot | 进阶 | 杏仁 | 暖砂世界色，朱砂与靛蓝领色 |
|
||
| lavender | 烧脑 | 苔原 | 灰绿世界色，紫藤与玫红提亮 |
|
||
| rose | 挑战 | 暮砂 | 玫瑰灰世界色，玫红与靛蓝对照 |
|
||
| midnight | 每周挑战 | 夜航 | 深蓝灰世界色，奶白卡片像被灯照亮的图 |
|
||
|
||
完整色值、边框与底板色、每主题 4/7/9/12 色有序 palette 见 tokens.json 与 [art-directions.js](../../../src/art-directions.js)。世界色压低明度，棋盘对世界色 1.50–1.62 : 1，边界靠边框与底板而不是色相差；场景文字对世界色 7 : 1 以上；十二色白箭头最低 4.48 : 1。
|
||
|
||
主游戏中本方案的主题按旅程切换：五个世界平均铺在整条主线上，最后一段为夜航；`?theme=` 参数仍可强制指定。
|
||
|
||
## 控件与边界
|
||
|
||
- 顶部选关、设置：底板只比世界色深一档（`--signpost-plate`），图标用场景文字色；图标通过遮罩着色，不用滤镜。
|
||
- 旋转按钮：无底座，图标 64px，用世界色深一档着色，上 1px 暗、下 1px 亮形成压痕；标签 12px 同色系。位置由 [app.js](../../../src/app.js) 的 `placeRotation` 按棋盘几何计算：取下方斜边中点（棋盘轮廓宽 25% / 75%、高 87.5%），向下作垂线到道具上缘，按钮中心放在垂线中点。旋转不再占独立布局行，这是与 shared.md 的一处出入。
|
||
- 撤销、重来、提示：沿用原版蓝、紫、金圆底与白边；标签用场景文字色。
|
||
- 通知位置、棋盘居中、金色奖励继承 shared.md。
|
||
|
||
## 验收与接入
|
||
|
||
使用 `artDirection('signpost')` 和 `directionTheme(direction, themeId, colorCount)`；主游戏 `?design=signpost`。
|
||
|
||
- 检查五个世界的棋盘边框、底板与格线；夜航下棋盘保持奶白。
|
||
- 检查 37 / 61 / 91 格下钢轨宽度上限与棋子描边，箭头在 19px 格半径可读。
|
||
- 检查旋转按钮落点：斜边中点与道具上缘的中点；换关、旋转、窗口尺寸变化后位置稳定。
|
||
- 检查提示路线画在棋子之上、被挡路线只到接触点。
|
||
- 原生端需实现两次偏移绘制的压痕与白色精灵着色；尚未完成原生实机验收。
|