Files

T

cabinwandClaude Fable 5.1 e447d1f807 feat(design): add the Macaron (07) art direction and land the Signpost (06) package files

- 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>

2026-09-15 15:43:25 +08:00

4.4 KiB

Raw Blame History

06 · 路标

设计 ID：signpost · 渲染风格：signpost · 英文名：SIGNPOST。2026-09-14 由美术评审后的设计提案接入，可与其他方案同时保留。提案与实机对照见 docs/art-proposal-signpost.html。

Agent 接入约定 · 配色数据 · 完整设计稿 · 试玩与审核

设计目标

棋盘是一张线路图：奶白卡片托在世界色上，带一圈边框和一层向下偏移的平面底板；浅色路基先铺，墨蓝钢轨再压上去，端点在板边收口。棋子是路标：内缩露出脚下端口，一圈细描边，十二色统一白箭头。控件退到纸面里，一眼看过去重心只在棋盘。

棋盘与棋子怎么画

以格半径 s 为单位，复用 renderer.js 的 signpost 分支和 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。世界色压低明度，棋盘对世界色 1.50–1.62 : 1，边界靠边框与底板而不是色相差；场景文字对世界色 7 : 1 以上；十二色白箭头最低 4.48 : 1。

主游戏中本方案的主题按旅程切换：五个世界平均铺在整条主线上，最后一段为夜航；?theme= 参数仍可强制指定。

控件与边界

顶部选关、设置：底板只比世界色深一档（--signpost-plate），图标用场景文字色；图标通过遮罩着色，不用滤镜。
旋转按钮：无底座，图标 64px，用世界色深一档着色，上 1px 暗、下 1px 亮形成压痕；标签 12px 同色系。位置由 app.js 的 placeRotation 按棋盘几何计算：取下方斜边中点（棋盘轮廓宽 25% / 75%、高 87.5%），向下作垂线到道具上缘，按钮中心放在垂线中点。旋转不再占独立布局行，这是与 shared.md 的一处出入。
撤销、重来、提示：沿用原版蓝、紫、金圆底与白边；标签用场景文字色。
通知位置、棋盘居中、金色奖励继承 shared.md。

验收与接入

使用 artDirection('signpost') 和 directionTheme(direction, themeId, colorCount)；主游戏 ?design=signpost。

检查五个世界的棋盘边框、底板与格线；夜航下棋盘保持奶白。
检查 37 / 61 / 91 格下钢轨宽度上限与棋子描边，箭头在 19px 格半径可读。
检查旋转按钮落点：斜边中点与道具上缘的中点；换关、旋转、窗口尺寸变化后位置稳定。
检查提示路线画在棋子之上、被挡路线只到接触点。
原生端需实现两次偏移绘制的压痕与白色精灵着色；尚未完成原生实机验收。

4.4 KiB Raw Blame History Unescape Escape