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:
cabinw
co-authored by
Claude Fable 5.1
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 格半径可读。
|
||||
- 检查旋转按钮落点：斜边中点与道具上缘的中点；换关、旋转、窗口尺寸变化后位置稳定。
|
||||
- 检查提示路线画在棋子之上、被挡路线只到接触点。
|
||||
- 原生端需实现两次偏移绘制的压痕与白色精灵着色；尚未完成原生实机验收。
|
||||
File diff suppressed because one or more lines are too long
@@ -0,0 +1,469 @@
|
||||
{
|
||||
"schemaVersion": 1,
|
||||
"generated": true,
|
||||
"generatedBy": "scripts/build-art-directions.mjs",
|
||||
"pathBase": "repository-root",
|
||||
"designId": "signpost",
|
||||
"artStyle": "signpost",
|
||||
"sources": {
|
||||
"directions": "src/art-directions.js",
|
||||
"baseTokens": "src/design-tokens.js",
|
||||
"renderer": "src/renderer.js",
|
||||
"tokenDrawing": "src/token-art.js",
|
||||
"componentStyles": "design/art-directions.css",
|
||||
"itemStyles": "design/game-tools.css"
|
||||
},
|
||||
"accent": "#2F5FBF",
|
||||
"documentBackground": "#F6F2E9",
|
||||
"sharedSemanticColors": {
|
||||
"background": "#A8BECF",
|
||||
"board": "#F2EEE5",
|
||||
"boardGrid": "#89867D",
|
||||
"track": "#435F78",
|
||||
"trackHalo": "#F2EEE5",
|
||||
"surface": "#F7F6F2",
|
||||
"textPrimary": "#273B50",
|
||||
"textSecondary": "#314A5F",
|
||||
"primary": "#6652B8",
|
||||
"onPrimary": "#FFFFFF",
|
||||
"secondary": "#E4EAF0",
|
||||
"utility": "#52697E",
|
||||
"onUtility": "#FFFFFF",
|
||||
"selection": "#DFD9F3",
|
||||
"onSelection": "#3F327A",
|
||||
"disabled": "#CBD4DD",
|
||||
"onDisabled": "#526579",
|
||||
"input": "#FFFFFF",
|
||||
"reward": "#B9760C",
|
||||
"warning": "#A44825",
|
||||
"warningSurface": "#F9E3D2",
|
||||
"scrim": "#273B507A",
|
||||
"focus": "#3F327A",
|
||||
"tileBlue": "#2392FD",
|
||||
"tilePink": "#FC3E80",
|
||||
"tileYellow": "#FDBC28",
|
||||
"tilePurple": "#874FFD",
|
||||
"arrowLight": "#FFFFFF",
|
||||
"arrowDark": "#273B50"
|
||||
},
|
||||
"assets": {
|
||||
"tileAtlas": null,
|
||||
"uiIconAtlas": "assets/ui-icons-generated.png"
|
||||
},
|
||||
"pigments": [
|
||||
{
|
||||
"index": 0,
|
||||
"name": "靛蓝",
|
||||
"color": "#2F5FBF",
|
||||
"arrow": "#FFFFFF"
|
||||
},
|
||||
{
|
||||
"index": 1,
|
||||
"name": "朱砂",
|
||||
"color": "#C4432F",
|
||||
"arrow": "#FFFFFF"
|
||||
},
|
||||
{
|
||||
"index": 2,
|
||||
"name": "松石",
|
||||
"color": "#1C8378",
|
||||
"arrow": "#FFFFFF"
|
||||
},
|
||||
{
|
||||
"index": 3,
|
||||
"name": "紫藤",
|
||||
"color": "#7A4EB8",
|
||||
"arrow": "#FFFFFF"
|
||||
},
|
||||
{
|
||||
"index": 4,
|
||||
"name": "苔绿",
|
||||
"color": "#4A8235",
|
||||
"arrow": "#FFFFFF"
|
||||
},
|
||||
{
|
||||
"index": 5,
|
||||
"name": "琥珀",
|
||||
"color": "#A8690C",
|
||||
"arrow": "#FFFFFF"
|
||||
},
|
||||
{
|
||||
"index": 6,
|
||||
"name": "玫红",
|
||||
"color": "#BF3A6B",
|
||||
"arrow": "#FFFFFF"
|
||||
},
|
||||
{
|
||||
"index": 7,
|
||||
"name": "钢蓝",
|
||||
"color": "#4A6B8A",
|
||||
"arrow": "#FFFFFF"
|
||||
},
|
||||
{
|
||||
"index": 8,
|
||||
"name": "赤陶",
|
||||
"color": "#B0572F",
|
||||
"arrow": "#FFFFFF"
|
||||
},
|
||||
{
|
||||
"index": 9,
|
||||
"name": "墨绿",
|
||||
"color": "#357358",
|
||||
"arrow": "#FFFFFF"
|
||||
},
|
||||
{
|
||||
"index": 10,
|
||||
"name": "藕紫",
|
||||
"color": "#8A5C92",
|
||||
"arrow": "#FFFFFF"
|
||||
},
|
||||
{
|
||||
"index": 11,
|
||||
"name": "铁灰",
|
||||
"color": "#5A6D7C",
|
||||
"arrow": "#FFFFFF"
|
||||
}
|
||||
],
|
||||
"themes": [
|
||||
{
|
||||
"id": "lagoon",
|
||||
"label": "轻松",
|
||||
"name": "晨雾",
|
||||
"background": "#B7CBD3",
|
||||
"ink": "#12202A",
|
||||
"materials": {
|
||||
"board": "#F5F2EA",
|
||||
"boardGrid": "#E9E3D6",
|
||||
"track": "#3A5068",
|
||||
"trackHalo": "#E2DBCC"
|
||||
},
|
||||
"anchorPalette": [
|
||||
0,
|
||||
2,
|
||||
5,
|
||||
3,
|
||||
1,
|
||||
8,
|
||||
6
|
||||
],
|
||||
"palettes": {
|
||||
"4": [
|
||||
0,
|
||||
2,
|
||||
5,
|
||||
3
|
||||
],
|
||||
"7": [
|
||||
0,
|
||||
2,
|
||||
5,
|
||||
3,
|
||||
1,
|
||||
8,
|
||||
6
|
||||
],
|
||||
"9": [
|
||||
0,
|
||||
2,
|
||||
5,
|
||||
3,
|
||||
1,
|
||||
8,
|
||||
6,
|
||||
4,
|
||||
7
|
||||
],
|
||||
"12": [
|
||||
0,
|
||||
2,
|
||||
5,
|
||||
3,
|
||||
1,
|
||||
8,
|
||||
6,
|
||||
4,
|
||||
7,
|
||||
9,
|
||||
10,
|
||||
11
|
||||
]
|
||||
},
|
||||
"contrast": {
|
||||
"sceneText": 9.872709985958306,
|
||||
"trackOnBoard": 7.427567140854274
|
||||
}
|
||||
},
|
||||
{
|
||||
"id": "apricot",
|
||||
"label": "进阶",
|
||||
"name": "杏仁",
|
||||
"background": "#DBC4A6",
|
||||
"ink": "#12202A",
|
||||
"materials": {
|
||||
"board": "#F7F2E7",
|
||||
"boardGrid": "#EAE3D3",
|
||||
"track": "#3A5068",
|
||||
"trackHalo": "#E4DCCA"
|
||||
},
|
||||
"anchorPalette": [
|
||||
1,
|
||||
0,
|
||||
2,
|
||||
6,
|
||||
3,
|
||||
9,
|
||||
7
|
||||
],
|
||||
"palettes": {
|
||||
"4": [
|
||||
1,
|
||||
0,
|
||||
2,
|
||||
6
|
||||
],
|
||||
"7": [
|
||||
1,
|
||||
0,
|
||||
2,
|
||||
6,
|
||||
3,
|
||||
9,
|
||||
7
|
||||
],
|
||||
"9": [
|
||||
1,
|
||||
0,
|
||||
2,
|
||||
6,
|
||||
3,
|
||||
9,
|
||||
7,
|
||||
4,
|
||||
5
|
||||
],
|
||||
"12": [
|
||||
1,
|
||||
0,
|
||||
2,
|
||||
6,
|
||||
3,
|
||||
9,
|
||||
7,
|
||||
4,
|
||||
5,
|
||||
8,
|
||||
10,
|
||||
11
|
||||
]
|
||||
},
|
||||
"contrast": {
|
||||
"sceneText": 9.84281455268355,
|
||||
"trackOnBoard": 7.442657598835995
|
||||
}
|
||||
},
|
||||
{
|
||||
"id": "lavender",
|
||||
"label": "烧脑",
|
||||
"name": "苔原",
|
||||
"background": "#BBCBB1",
|
||||
"ink": "#12202A",
|
||||
"materials": {
|
||||
"board": "#F5F3E9",
|
||||
"boardGrid": "#E8E4D6",
|
||||
"track": "#3A5068",
|
||||
"trackHalo": "#E1DCCC"
|
||||
},
|
||||
"anchorPalette": [
|
||||
3,
|
||||
6,
|
||||
1,
|
||||
0,
|
||||
4,
|
||||
10,
|
||||
2
|
||||
],
|
||||
"palettes": {
|
||||
"4": [
|
||||
3,
|
||||
6,
|
||||
1,
|
||||
0
|
||||
],
|
||||
"7": [
|
||||
3,
|
||||
6,
|
||||
1,
|
||||
0,
|
||||
4,
|
||||
10,
|
||||
2
|
||||
],
|
||||
"9": [
|
||||
3,
|
||||
6,
|
||||
1,
|
||||
0,
|
||||
4,
|
||||
10,
|
||||
2,
|
||||
5,
|
||||
7
|
||||
],
|
||||
"12": [
|
||||
3,
|
||||
6,
|
||||
1,
|
||||
0,
|
||||
4,
|
||||
10,
|
||||
2,
|
||||
5,
|
||||
7,
|
||||
8,
|
||||
9,
|
||||
11
|
||||
]
|
||||
},
|
||||
"contrast": {
|
||||
"sceneText": 9.709754954665774,
|
||||
"trackOnBoard": 7.470269532165791
|
||||
}
|
||||
},
|
||||
{
|
||||
"id": "rose",
|
||||
"label": "挑战",
|
||||
"name": "暮砂",
|
||||
"background": "#D7BAB5",
|
||||
"ink": "#12202A",
|
||||
"materials": {
|
||||
"board": "#F7F1EA",
|
||||
"boardGrid": "#EAE2D8",
|
||||
"track": "#3A5068",
|
||||
"trackHalo": "#E4DBCF"
|
||||
},
|
||||
"anchorPalette": [
|
||||
6,
|
||||
0,
|
||||
3,
|
||||
5,
|
||||
2,
|
||||
11,
|
||||
8
|
||||
],
|
||||
"palettes": {
|
||||
"4": [
|
||||
6,
|
||||
0,
|
||||
3,
|
||||
5
|
||||
],
|
||||
"7": [
|
||||
6,
|
||||
0,
|
||||
3,
|
||||
5,
|
||||
2,
|
||||
11,
|
||||
8
|
||||
],
|
||||
"9": [
|
||||
6,
|
||||
0,
|
||||
3,
|
||||
5,
|
||||
2,
|
||||
11,
|
||||
8,
|
||||
1,
|
||||
4
|
||||
],
|
||||
"12": [
|
||||
6,
|
||||
0,
|
||||
3,
|
||||
5,
|
||||
2,
|
||||
11,
|
||||
8,
|
||||
1,
|
||||
4,
|
||||
7,
|
||||
9,
|
||||
10
|
||||
]
|
||||
},
|
||||
"contrast": {
|
||||
"sceneText": 9.148840055226982,
|
||||
"trackOnBoard": 7.409208337359319
|
||||
}
|
||||
},
|
||||
{
|
||||
"id": "midnight",
|
||||
"label": "每周挑战",
|
||||
"name": "夜航",
|
||||
"background": "#1F2C3B",
|
||||
"ink": "#FFFFFF",
|
||||
"materials": {
|
||||
"board": "#F6F2E9",
|
||||
"boardGrid": "#E9E3D6",
|
||||
"track": "#3A5068",
|
||||
"trackHalo": "#E2DBCC"
|
||||
},
|
||||
"anchorPalette": [
|
||||
2,
|
||||
5,
|
||||
0,
|
||||
6,
|
||||
1,
|
||||
9,
|
||||
3
|
||||
],
|
||||
"palettes": {
|
||||
"4": [
|
||||
2,
|
||||
5,
|
||||
0,
|
||||
6
|
||||
],
|
||||
"7": [
|
||||
2,
|
||||
5,
|
||||
0,
|
||||
6,
|
||||
1,
|
||||
9,
|
||||
3
|
||||
],
|
||||
"9": [
|
||||
2,
|
||||
5,
|
||||
0,
|
||||
6,
|
||||
1,
|
||||
9,
|
||||
3,
|
||||
4,
|
||||
7
|
||||
],
|
||||
"12": [
|
||||
2,
|
||||
5,
|
||||
0,
|
||||
6,
|
||||
1,
|
||||
9,
|
||||
3,
|
||||
4,
|
||||
7,
|
||||
8,
|
||||
10,
|
||||
11
|
||||
]
|
||||
},
|
||||
"contrast": {
|
||||
"sceneText": 14.173029259487338,
|
||||
"trackOnBoard": 7.437303508154617
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
Reference in New Issue
Block a user