# 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 格半径可读。 - 检查旋转按钮落点:斜边中点与道具上缘的中点;换关、旋转、窗口尺寸变化后位置稳定。 - 检查提示路线画在棋子之上、被挡路线只到接触点。 - 原生端需实现两次偏移绘制的压痕与白色精灵着色;尚未完成原生实机验收。