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>
This commit is contained in:
co-authored by
Claude Fable 5.1
parent
7607f48cb1
commit
e447d1f807
@@ -0,0 +1,59 @@
|
||||
# 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 格半径可读。
|
||||
- 检查旋转按钮落点:斜边中点与道具上缘的中点;换关、旋转、窗口尺寸变化后位置稳定。
|
||||
- 检查提示路线画在棋子之上、被挡路线只到接触点。
|
||||
- 原生端需实现两次偏移绘制的压痕与白色精灵着色;尚未完成原生实机验收。
|
||||
Reference in New Issue
Block a user