feat: add Paper Routes and package five design systems
Add the paper direction with thin tracks, outlined hexagons and line arrows, without exterior color markers or piece numbers. Add a unified catalog for five designs and their 25 themes, with direct review links. Organize each design into an authored design.md, generated tokens.json and preview. Add Agent routing, shared integration guidance, a machine-readable manifest and an executable rendering example. Preserve legacy preview and document links. Validation: 16 focused design, theme and package tests passed; npm run design and static build passed. Confirmed all eight authored documents survive generation unchanged. Browser checks covered mobile, tablet and desktop layouts, theme links and migrated previews. Native engine integration and visual verification remain pending.
This commit is contained in:
cabinw
File diff suppressed because one or more lines are too long
@@ -1,27 +1,5 @@
|
||||
# 动物弯弯镇
|
||||
# 04 · 动物弯弯镇
|
||||
|
||||
猫咪、小熊、兔子与青蛙沿轨道出游。用表情与耳朵增加性格，方向箭头独立保留。
|
||||
本文件为旧入口。完整、人工维护的 Agent 规范已迁移到 [animals/design.md](animals/design.md)。
|
||||
|
||||
## 设计规则
|
||||
|
||||
- 圆脸、短耳与小表情，外形保持在六角范围内
|
||||
- 箭头留在脸部下方，不靠动物朝向猜方向
|
||||
- 草地、木棕与奶油毛色，搭配森林小径
|
||||
|
||||
## 五种主题
|
||||
|
||||
| 难度 | 名称 | 环境色 |
|
||||
| --- | --- | --- |
|
||||
| 轻松 | 青草野餐 | #A9CD69 |
|
||||
| 进阶 | 橡果秋游 | #E7B947 |
|
||||
| 烧脑 | 溪边捉迷藏 | #72BEB2 |
|
||||
| 挑战 | 红土探险 | #C67B47 |
|
||||
| 每周挑战 | 萤火森林 | #183F36 |
|
||||
|
||||
## 游戏道具与布局
|
||||
|
||||
- 撤销、重来、提示使用独立彩色底座，64–68px，图标 32px，标签 13px。顶部导航保持紧凑。道具使用纯色平面，不使用阴影、立体底边或渐变高光。
|
||||
- 右上角预留次数或“▶ AD”角标。设计稿展示“撤销 3 次”和“广告获取提示”，仅为样式，不启用真实库存或广告逻辑。
|
||||
- 棋盘在通知区与独立旋转区之间垂直居中。旋转区和道具区占据真实布局行，不覆盖棋盘。
|
||||
|
||||
此方案使用独立的棋子造型、轨道材质和控件样式，共用现有弯曲轨道玩法。审核页支持同时保留多套方案。
|
||||
[设计稿](animals/index.html) · [配色数据](animals/tokens.json) · [Agent 接入说明](../README.md)
|
||||
|
||||
@@ -0,0 +1,52 @@
|
||||
# 04 · 动物弯弯镇
|
||||
|
||||
设计 ID：`animals` · 渲染风格：`animals` · 英文名：PAW PARADE。卡通动物候选方案，可与其他方案同时保留。
|
||||
|
||||
[Agent 接入约定](../../shared.md) · [配色数据](tokens.json) · [完整设计稿](index.html) · [试玩与审核](../../../design-showcase.html?design=animals)
|
||||
|
||||
## 设计目标
|
||||
|
||||
猫、熊、兔与青蛙沿轨道出游。颜色来自毛色、草地、木棕和奶油色，保留自然感。表情用来增加性格；玩家通过独立箭头判断方向，不靠动物脸朝向猜规则。
|
||||
|
||||
## 棋盘与棋子怎么画
|
||||
|
||||
复用 [renderer.js](../../../src/renderer.js) 的非 paper 棋盘和 [token-art.js](../../../src/token-art.js) 的 animals 分支。r = 格半径 s × 0.985。
|
||||
|
||||
| 部件 | 当前实现 |
|
||||
| --- | --- |
|
||||
| 分格／轨道 | 分格 max(1, s × 0.024)，外缘 max(4, s × 0.16)，中心线 max(2.5, s × 0.10) |
|
||||
| 六角底托 | 半径 r × 0.94，奶油白 #FFFCED，浅绿边 #526F5744、线宽 r × 0.035 |
|
||||
| 动物种类 | 经主题映射后的色库索引 % 4：0 猫、1 熊、2 兔、3 蛙 |
|
||||
| 脸部 | 圆脸半径 r × 0.51，中心上移 r × 0.04；耳朵用三角、圆或采样椭圆 |
|
||||
| 表情 | 深色 #263A3A 眼睛与嘴，#EF958B 腮红；不增加数字或文字 |
|
||||
| 方向底 | 下方 y + r × 0.43 的白圆，半径 r × 0.36 |
|
||||
| 方向箭头 | #263A3A 实心箭头，尺度 r × 0.44，位于白圆内 |
|
||||
|
||||
动物轮廓和脸保持正立，方向箭头独立旋转。tokens.json 中 pigments.arrow 是共享颜色 token；**animals 分支的实际箭头固定为 #263A3A，底色是白圆**，不要用颜料色库的 arrow 覆盖脸下方向区。
|
||||
|
||||
角色种类是表现映射，不是游戏功能或阵营。初始棋子索引决定主题色，再决定种类；移除棋子后不可重排剩余动物。全部造型为多边形、线与圆，不需要另生成动物 PNG。
|
||||
|
||||
## 五种主题
|
||||
|
||||
| 主题 ID | 阶段 | 名称 | 独立用色方向 |
|
||||
| --- | --- | --- | --- |
|
||||
| lagoon | 轻松 | 青草野餐 | 草地绿、奶油底与动物毛色 |
|
||||
| apricot | 进阶 | 橡果秋游 | 秋叶黄、橡果棕与麦芽金 |
|
||||
| lavender | 烧脑 | 溪边捉迷藏 | 溪水青、苔绿与暖棕 |
|
||||
| rose | 挑战 | 红土探险 | 红土环境与沙色小径 |
|
||||
| midnight | 每周挑战 | 萤火森林 | 深森林绿与萤火浅黄 |
|
||||
|
||||
完整配色和每主题 4/7/9/12 色有序 palette 见 tokens.json，源为 [art-directions.js](../../../src/art-directions.js)。不要把原版粉紫糖果配色直接套在动物脸上。
|
||||
|
||||
## 控件与边界
|
||||
|
||||
顶部控件与通知延续绿、奶油色与圆润边界。底部道具为苔绿／木棕／黄的纯色底座，圆角比例 44% 44% 36% 36%，3px 奶油边；有轻微点线装饰，无投影或立体厚度。角标与通关星星规则见 shared.md。
|
||||
|
||||
## 验收与接入
|
||||
|
||||
使用 `artDirection('animals')` 和 `directionTheme(direction, themeId, colorCount)`。
|
||||
|
||||
- 在最小棋子尺寸检查耳朵、脸、白圆与箭头，不因表情抢走方向信息。
|
||||
- 检查六个方向、转弯移动、撤销后的动物种类与配色稳定。
|
||||
- 夜间主题中浅色角色与绿板面分离，方向仍靠箭头表达。
|
||||
- 原生适配需核对 circle 与 polygon 的图层顺序；现有 Cocos 示例未完成此套角色的实机验收。
|
||||
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": "animals",
|
||||
"artStyle": "animals",
|
||||
"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": "#396D51",
|
||||
"documentBackground": "#FFFCF1",
|
||||
"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": "#D9934F",
|
||||
"arrow": "#172D39"
|
||||
},
|
||||
{
|
||||
"index": 1,
|
||||
"name": "栗棕熊",
|
||||
"color": "#A4683B",
|
||||
"arrow": "#FFFFFF"
|
||||
},
|
||||
{
|
||||
"index": 2,
|
||||
"name": "麦芽兔",
|
||||
"color": "#E1C58B",
|
||||
"arrow": "#172D39"
|
||||
},
|
||||
{
|
||||
"index": 3,
|
||||
"name": "苔绿蛙",
|
||||
"color": "#6C9D40",
|
||||
"arrow": "#172D39"
|
||||
},
|
||||
{
|
||||
"index": 4,
|
||||
"name": "奶橘猫",
|
||||
"color": "#F1B869",
|
||||
"arrow": "#172D39"
|
||||
},
|
||||
{
|
||||
"index": 5,
|
||||
"name": "可可熊",
|
||||
"color": "#73503F",
|
||||
"arrow": "#FFFFFF"
|
||||
},
|
||||
{
|
||||
"index": 6,
|
||||
"name": "奶油兔",
|
||||
"color": "#F1DCC1",
|
||||
"arrow": "#172D39"
|
||||
},
|
||||
{
|
||||
"index": 7,
|
||||
"name": "溪绿蛙",
|
||||
"color": "#448A67",
|
||||
"arrow": "#172D39"
|
||||
},
|
||||
{
|
||||
"index": 8,
|
||||
"name": "榛果猫",
|
||||
"color": "#B78157",
|
||||
"arrow": "#172D39"
|
||||
},
|
||||
{
|
||||
"index": 9,
|
||||
"name": "赤陶熊",
|
||||
"color": "#BD784F",
|
||||
"arrow": "#172D39"
|
||||
},
|
||||
{
|
||||
"index": 10,
|
||||
"name": "雪白兔",
|
||||
"color": "#F4E5CF",
|
||||
"arrow": "#172D39"
|
||||
},
|
||||
{
|
||||
"index": 11,
|
||||
"name": "嫩叶蛙",
|
||||
"color": "#87B76B",
|
||||
"arrow": "#172D39"
|
||||
}
|
||||
],
|
||||
"themes": [
|
||||
{
|
||||
"id": "lagoon",
|
||||
"label": "轻松",
|
||||
"name": "青草野餐",
|
||||
"background": "#A9CD69",
|
||||
"ink": "#12202A",
|
||||
"materials": {
|
||||
"board": "#FFF2D2",
|
||||
"boardGrid": "#A9AC80",
|
||||
"track": "#527345",
|
||||
"trackHalo": "#FFF2D2"
|
||||
},
|
||||
"anchorPalette": [
|
||||
0,
|
||||
1,
|
||||
2,
|
||||
3,
|
||||
6,
|
||||
7,
|
||||
10
|
||||
],
|
||||
"palettes": {
|
||||
"4": [
|
||||
0,
|
||||
1,
|
||||
2,
|
||||
3
|
||||
],
|
||||
"7": [
|
||||
0,
|
||||
1,
|
||||
2,
|
||||
3,
|
||||
6,
|
||||
7,
|
||||
10
|
||||
],
|
||||
"9": [
|
||||
0,
|
||||
1,
|
||||
2,
|
||||
3,
|
||||
6,
|
||||
7,
|
||||
10,
|
||||
4,
|
||||
5
|
||||
],
|
||||
"12": [
|
||||
0,
|
||||
1,
|
||||
2,
|
||||
3,
|
||||
6,
|
||||
7,
|
||||
10,
|
||||
4,
|
||||
5,
|
||||
8,
|
||||
9,
|
||||
11
|
||||
]
|
||||
},
|
||||
"contrast": {
|
||||
"sceneText": 9.183048868633442,
|
||||
"trackOnBoard": 4.8456513485094925
|
||||
}
|
||||
},
|
||||
{
|
||||
"id": "apricot",
|
||||
"label": "进阶",
|
||||
"name": "橡果秋游",
|
||||
"background": "#E7B947",
|
||||
"ink": "#12202A",
|
||||
"materials": {
|
||||
"board": "#FFEDB5",
|
||||
"boardGrid": "#B6A076",
|
||||
"track": "#79572E",
|
||||
"trackHalo": "#FFEDB5"
|
||||
},
|
||||
"anchorPalette": [
|
||||
1,
|
||||
4,
|
||||
8,
|
||||
5,
|
||||
2,
|
||||
6,
|
||||
11
|
||||
],
|
||||
"palettes": {
|
||||
"4": [
|
||||
1,
|
||||
4,
|
||||
8,
|
||||
5
|
||||
],
|
||||
"7": [
|
||||
1,
|
||||
4,
|
||||
8,
|
||||
5,
|
||||
2,
|
||||
6,
|
||||
11
|
||||
],
|
||||
"9": [
|
||||
1,
|
||||
4,
|
||||
8,
|
||||
5,
|
||||
2,
|
||||
6,
|
||||
11,
|
||||
0,
|
||||
3
|
||||
],
|
||||
"12": [
|
||||
1,
|
||||
4,
|
||||
8,
|
||||
5,
|
||||
2,
|
||||
6,
|
||||
11,
|
||||
0,
|
||||
3,
|
||||
7,
|
||||
9,
|
||||
10
|
||||
]
|
||||
},
|
||||
"contrast": {
|
||||
"sceneText": 9.028864535418991,
|
||||
"trackOnBoard": 5.607739454320704
|
||||
}
|
||||
},
|
||||
{
|
||||
"id": "lavender",
|
||||
"label": "烧脑",
|
||||
"name": "溪边捉迷藏",
|
||||
"background": "#72BEB2",
|
||||
"ink": "#12202A",
|
||||
"materials": {
|
||||
"board": "#ECF1D8",
|
||||
"boardGrid": "#9CA987",
|
||||
"track": "#3B7262",
|
||||
"trackHalo": "#ECF1D8"
|
||||
},
|
||||
"anchorPalette": [
|
||||
7,
|
||||
3,
|
||||
6,
|
||||
10,
|
||||
0,
|
||||
4,
|
||||
9
|
||||
],
|
||||
"palettes": {
|
||||
"4": [
|
||||
7,
|
||||
3,
|
||||
6,
|
||||
10
|
||||
],
|
||||
"7": [
|
||||
7,
|
||||
3,
|
||||
6,
|
||||
10,
|
||||
0,
|
||||
4,
|
||||
9
|
||||
],
|
||||
"9": [
|
||||
7,
|
||||
3,
|
||||
6,
|
||||
10,
|
||||
0,
|
||||
4,
|
||||
9,
|
||||
1,
|
||||
2
|
||||
],
|
||||
"12": [
|
||||
7,
|
||||
3,
|
||||
6,
|
||||
10,
|
||||
0,
|
||||
4,
|
||||
9,
|
||||
1,
|
||||
2,
|
||||
5,
|
||||
8,
|
||||
11
|
||||
]
|
||||
},
|
||||
"contrast": {
|
||||
"sceneText": 7.6821442549225605,
|
||||
"trackOnBoard": 4.812692332706211
|
||||
}
|
||||
},
|
||||
{
|
||||
"id": "rose",
|
||||
"label": "挑战",
|
||||
"name": "红土探险",
|
||||
"background": "#C67B47",
|
||||
"ink": "#12202A",
|
||||
"materials": {
|
||||
"board": "#F6DCB2",
|
||||
"boardGrid": "#B19169",
|
||||
"track": "#684835",
|
||||
"trackHalo": "#F6DCB2"
|
||||
},
|
||||
"anchorPalette": [
|
||||
8,
|
||||
5,
|
||||
4,
|
||||
2,
|
||||
7,
|
||||
10,
|
||||
1
|
||||
],
|
||||
"palettes": {
|
||||
"4": [
|
||||
8,
|
||||
5,
|
||||
4,
|
||||
2
|
||||
],
|
||||
"7": [
|
||||
8,
|
||||
5,
|
||||
4,
|
||||
2,
|
||||
7,
|
||||
10,
|
||||
1
|
||||
],
|
||||
"9": [
|
||||
8,
|
||||
5,
|
||||
4,
|
||||
2,
|
||||
7,
|
||||
10,
|
||||
1,
|
||||
0,
|
||||
3
|
||||
],
|
||||
"12": [
|
||||
8,
|
||||
5,
|
||||
4,
|
||||
2,
|
||||
7,
|
||||
10,
|
||||
1,
|
||||
0,
|
||||
3,
|
||||
6,
|
||||
9,
|
||||
11
|
||||
]
|
||||
},
|
||||
"contrast": {
|
||||
"sceneText": 4.997261835536376,
|
||||
"trackOnBoard": 6.154627594688633
|
||||
}
|
||||
},
|
||||
{
|
||||
"id": "midnight",
|
||||
"label": "每周挑战",
|
||||
"name": "萤火森林",
|
||||
"background": "#183F36",
|
||||
"ink": "#FFFFFF",
|
||||
"materials": {
|
||||
"board": "#355C43",
|
||||
"boardGrid": "#879969",
|
||||
"track": "#E6E9AE",
|
||||
"trackHalo": "#355C43"
|
||||
},
|
||||
"anchorPalette": [
|
||||
6,
|
||||
10,
|
||||
2,
|
||||
4,
|
||||
11,
|
||||
0,
|
||||
9
|
||||
],
|
||||
"palettes": {
|
||||
"4": [
|
||||
6,
|
||||
10,
|
||||
2,
|
||||
4
|
||||
],
|
||||
"7": [
|
||||
6,
|
||||
10,
|
||||
2,
|
||||
4,
|
||||
11,
|
||||
0,
|
||||
9
|
||||
],
|
||||
"9": [
|
||||
6,
|
||||
10,
|
||||
2,
|
||||
4,
|
||||
11,
|
||||
0,
|
||||
9,
|
||||
1,
|
||||
3
|
||||
],
|
||||
"12": [
|
||||
6,
|
||||
10,
|
||||
2,
|
||||
4,
|
||||
11,
|
||||
0,
|
||||
9,
|
||||
1,
|
||||
3,
|
||||
5,
|
||||
7,
|
||||
8
|
||||
]
|
||||
},
|
||||
"contrast": {
|
||||
"sceneText": 11.64654981527941,
|
||||
"trackOnBoard": 6.018692953375532
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
File diff suppressed because one or more lines are too long
@@ -1,27 +1,5 @@
|
||||
# 柔和原色
|
||||
# 01 · 柔和原色
|
||||
|
||||
低饱和环境与平面六角棋子，让注意力留在轨道和方向。
|
||||
本文件为旧入口。完整、人工维护的 Agent 规范已迁移到 [calm/design.md](calm/design.md)。
|
||||
|
||||
## 设计规则
|
||||
|
||||
- 哑光色块，克制装饰
|
||||
- 蓝灰细轨道，保持视觉留白
|
||||
- 金色奖励，柔和浮现
|
||||
|
||||
## 五种主题
|
||||
|
||||
| 难度 | 名称 | 环境色 |
|
||||
| --- | --- | --- |
|
||||
| 轻松 | 薄荷浅湾 | #C5E4DF |
|
||||
| 进阶 | 杏色午后 | #F1D7B8 |
|
||||
| 烧脑 | 鸢尾花园 | #D8D0EB |
|
||||
| 挑战 | 玫瑰暮色 | #E7C3CE |
|
||||
| 每周挑战 | 午夜极光 | #293956 |
|
||||
|
||||
## 游戏道具与布局
|
||||
|
||||
- 撤销、重来、提示使用独立彩色底座，64–68px，图标 32px，标签 13px。顶部导航保持紧凑。道具使用纯色平面，不使用阴影、立体底边或渐变高光。
|
||||
- 右上角预留次数或“▶ AD”角标。设计稿展示“撤销 3 次”和“广告获取提示”，仅为样式，不启用真实库存或广告逻辑。
|
||||
- 棋盘在通知区与独立旋转区之间垂直居中。旋转区和道具区占据真实布局行，不覆盖棋盘。
|
||||
|
||||
此方案使用独立的棋子造型、轨道材质和控件样式，共用现有弯曲轨道玩法。审核页支持同时保留多套方案。
|
||||
[设计稿](calm/index.html) · [配色数据](calm/tokens.json) · [Agent 接入说明](../README.md)
|
||||
|
||||
@@ -0,0 +1,51 @@
|
||||
# 01 · 柔和原色
|
||||
|
||||
设计 ID：`calm` · 渲染风格：`classic` · 英文名：QUIET TRAILS。这是当前默认的基础方案，可与其他候选方案同时保留。
|
||||
|
||||
[Agent 接入约定](../../shared.md) · [配色数据](tokens.json) · [完整设计稿](index.html) · [试玩与审核](../../../design-showcase.html?design=calm)
|
||||
|
||||
## 设计目标
|
||||
|
||||
低饱和环境、暖白底盘和哑光六角棋子，让注意力集中在弯曲轨道与方向。原有棋子是较鲜明的颜色；“柔和”主要指背景和整体气氛，不代表把全部棋子调成灰色。
|
||||
|
||||
## 棋盘与棋子怎么画
|
||||
|
||||
以格半径 s 为单位。复用 [renderer.js](../../../src/renderer.js) 的 classic 回退分支和 [tile-shape.js](../../../src/tile-shape.js)，不要用 paper 的细线比例替换。
|
||||
|
||||
| 部件 | 当前实现 |
|
||||
| --- | --- |
|
||||
| 底格 | 正六角面，半径 s + 0.2；轻微重叠消除抗锯齿接缝 |
|
||||
| 分格线 | 半径 s，线宽 max(1, s × 0.024) |
|
||||
| 轨道外缘 | max(4, s × 0.16)，颜色为当前 trackHalo |
|
||||
| 轨道中心线 | max(2.5, s × 0.10)，边界端点内收；中间轨道保持连接 |
|
||||
| 棋子 | 半径 s × 0.985 的圆角六边形，rounding 由 roundedHex 实现 |
|
||||
| 箭头 | 实心七点形状，尺度为棋子半径 × 0.58；不新增编号 |
|
||||
|
||||
前四个色库索引可使用 [tiles-matte-clean-v8.png](../../../assets/tiles-matte-clean-v8.png) 的原图中心采样，由 [sprites.js](../../../src/sprites.js) 提供裁切框。其余八色或图集未就绪时用纯色回退。保留共享箭头，不把方向烘焙进图集。
|
||||
|
||||
## 五种主题
|
||||
|
||||
| 主题 ID | 阶段 | 名称 | 氛围 |
|
||||
| --- | --- | --- | --- |
|
||||
| lagoon | 轻松 | 薄荷浅湾 | 浅湾背景，蓝青与日光黄 |
|
||||
| apricot | 进阶 | 杏色午后 | 杏底配珊瑚、鸢尾蓝 |
|
||||
| lavender | 烧脑 | 鸢尾花园 | 柔紫背景，绿与冰川青 |
|
||||
| rose | 挑战 | 玫瑰暮色 | 玫瑰背景与明亮暖色 |
|
||||
| midnight | 每周挑战 | 午夜极光 | 深靛蓝环境，棋盘仍是暖白 |
|
||||
|
||||
完整环境色、文字色、棋盘材质与 4/7/9/12 色有序 palette 见 tokens.json。源为 [design-tokens.js](../../../src/design-tokens.js) 的 LEVEL_THEMES / PIGMENTS。五主题共享基础棋盘材质；不能因为 midnight 是夜间环境就擅自把它的棋盘变深色。箭头按该色库的 3:1 对比度门槛选白色或深蓝灰。
|
||||
|
||||
## 控件与边界
|
||||
|
||||
底部道具保持圆形纯色底座：撤销蓝、重来紫、提示黄，均无阴影。顶部是紧凑的蓝灰导航控件。尺寸、通知位置、居中棋盘及金色奖励按 shared.md；角标只在设计示例出现。
|
||||
|
||||
修改此方案的基础语义色可能影响其他设计继承的面板、奖励与组件，需要检查全部五套。不要替换已接受图集，也不要把新增设计的颜料库复制到 PIGMENTS。
|
||||
|
||||
## 验收与接入
|
||||
|
||||
使用 `artDirection('calm')` → `directionTheme(direction, themeId, colorCount)` → `drawScene(..., {theme})`。详细代码和验证命令见 shared.md。
|
||||
|
||||
- 对比前四色的图集版本与纯色回退，确认方向一致且形状没有脏边。
|
||||
- 检查移除、撤销、离场后颜色稳定；白／深箭头按对应色库切换。
|
||||
- 检查五主题文字与轨道识别度，尤其深背景中的暖白棋盘。
|
||||
- 现有 Cocos 示例可参考图集适配，但五套设计切换与当前动画尚未完成原生验收。
|
||||
File diff suppressed because one or more lines are too long
@@ -0,0 +1,453 @@
|
||||
{
|
||||
"schemaVersion": 1,
|
||||
"generated": true,
|
||||
"generatedBy": "scripts/build-art-directions.mjs",
|
||||
"pathBase": "repository-root",
|
||||
"designId": "calm",
|
||||
"artStyle": "classic",
|
||||
"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": "#6652B8",
|
||||
"documentBackground": "#F7F6F2",
|
||||
"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": "assets/tiles-matte-clean-v8.png",
|
||||
"uiIconAtlas": "assets/ui-icons-generated.png"
|
||||
},
|
||||
"pigments": [
|
||||
{
|
||||
"index": 0,
|
||||
"name": "晴空蓝",
|
||||
"color": "#2392FD",
|
||||
"arrow": "#FFFFFF"
|
||||
},
|
||||
{
|
||||
"index": 1,
|
||||
"name": "莓果粉",
|
||||
"color": "#FC3E80",
|
||||
"arrow": "#FFFFFF"
|
||||
},
|
||||
{
|
||||
"index": 2,
|
||||
"name": "日光黄",
|
||||
"color": "#FDBC28",
|
||||
"arrow": "#273B50"
|
||||
},
|
||||
{
|
||||
"index": 3,
|
||||
"name": "葡萄紫",
|
||||
"color": "#874FFD",
|
||||
"arrow": "#FFFFFF"
|
||||
},
|
||||
{
|
||||
"index": 4,
|
||||
"name": "湖水青",
|
||||
"color": "#008B83",
|
||||
"arrow": "#FFFFFF"
|
||||
},
|
||||
{
|
||||
"index": 5,
|
||||
"name": "珊瑚橙",
|
||||
"color": "#EF704F",
|
||||
"arrow": "#273B50"
|
||||
},
|
||||
{
|
||||
"index": 6,
|
||||
"name": "嫩芽绿",
|
||||
"color": "#91C95B",
|
||||
"arrow": "#273B50"
|
||||
},
|
||||
{
|
||||
"index": 7,
|
||||
"name": "鸢尾蓝",
|
||||
"color": "#5267CF",
|
||||
"arrow": "#FFFFFF"
|
||||
},
|
||||
{
|
||||
"index": 8,
|
||||
"name": "玫瑰红",
|
||||
"color": "#C83F66",
|
||||
"arrow": "#FFFFFF"
|
||||
},
|
||||
{
|
||||
"index": 9,
|
||||
"name": "蜜桃杏",
|
||||
"color": "#F5AA83",
|
||||
"arrow": "#273B50"
|
||||
},
|
||||
{
|
||||
"index": 10,
|
||||
"name": "冰川青",
|
||||
"color": "#58C9D5",
|
||||
"arrow": "#273B50"
|
||||
},
|
||||
{
|
||||
"index": 11,
|
||||
"name": "兰花紫",
|
||||
"color": "#AE64C7",
|
||||
"arrow": "#FFFFFF"
|
||||
}
|
||||
],
|
||||
"themes": [
|
||||
{
|
||||
"id": "lagoon",
|
||||
"label": "轻松",
|
||||
"name": "薄荷浅湾",
|
||||
"background": "#C5E4DF",
|
||||
"ink": "#273B50",
|
||||
"materials": {
|
||||
"board": "#F2EEE5",
|
||||
"boardGrid": "#89867D",
|
||||
"track": "#435F78",
|
||||
"trackHalo": "#F2EEE5"
|
||||
},
|
||||
"anchorPalette": [
|
||||
0,
|
||||
4,
|
||||
2
|
||||
],
|
||||
"palettes": {
|
||||
"4": [
|
||||
0,
|
||||
4,
|
||||
2,
|
||||
1
|
||||
],
|
||||
"7": [
|
||||
0,
|
||||
4,
|
||||
2,
|
||||
1,
|
||||
3,
|
||||
5,
|
||||
6
|
||||
],
|
||||
"9": [
|
||||
0,
|
||||
4,
|
||||
2,
|
||||
1,
|
||||
3,
|
||||
5,
|
||||
6,
|
||||
7,
|
||||
8
|
||||
],
|
||||
"12": [
|
||||
0,
|
||||
4,
|
||||
2,
|
||||
1,
|
||||
3,
|
||||
5,
|
||||
6,
|
||||
7,
|
||||
8,
|
||||
9,
|
||||
10,
|
||||
11
|
||||
]
|
||||
},
|
||||
"contrast": {
|
||||
"sceneText": 8.500875345312332,
|
||||
"trackOnBoard": 5.763617196441413
|
||||
}
|
||||
},
|
||||
{
|
||||
"id": "apricot",
|
||||
"label": "进阶",
|
||||
"name": "杏色午后",
|
||||
"background": "#F1D7B8",
|
||||
"ink": "#273B50",
|
||||
"materials": {
|
||||
"board": "#F2EEE5",
|
||||
"boardGrid": "#89867D",
|
||||
"track": "#435F78",
|
||||
"trackHalo": "#F2EEE5"
|
||||
},
|
||||
"anchorPalette": [
|
||||
5,
|
||||
7,
|
||||
4,
|
||||
9
|
||||
],
|
||||
"palettes": {
|
||||
"4": [
|
||||
5,
|
||||
7,
|
||||
4,
|
||||
9
|
||||
],
|
||||
"7": [
|
||||
5,
|
||||
7,
|
||||
4,
|
||||
9,
|
||||
0,
|
||||
1,
|
||||
2
|
||||
],
|
||||
"9": [
|
||||
5,
|
||||
7,
|
||||
4,
|
||||
9,
|
||||
0,
|
||||
1,
|
||||
2,
|
||||
3,
|
||||
6
|
||||
],
|
||||
"12": [
|
||||
5,
|
||||
7,
|
||||
4,
|
||||
9,
|
||||
0,
|
||||
1,
|
||||
2,
|
||||
3,
|
||||
6,
|
||||
8,
|
||||
10,
|
||||
11
|
||||
]
|
||||
},
|
||||
"contrast": {
|
||||
"sceneText": 8.290501231652167,
|
||||
"trackOnBoard": 5.763617196441413
|
||||
}
|
||||
},
|
||||
{
|
||||
"id": "lavender",
|
||||
"label": "烧脑",
|
||||
"name": "鸢尾花园",
|
||||
"background": "#D8D0EB",
|
||||
"ink": "#273B50",
|
||||
"materials": {
|
||||
"board": "#F2EEE5",
|
||||
"boardGrid": "#89867D",
|
||||
"track": "#435F78",
|
||||
"trackHalo": "#F2EEE5"
|
||||
},
|
||||
"anchorPalette": [
|
||||
3,
|
||||
6,
|
||||
8,
|
||||
10
|
||||
],
|
||||
"palettes": {
|
||||
"4": [
|
||||
3,
|
||||
6,
|
||||
8,
|
||||
10
|
||||
],
|
||||
"7": [
|
||||
3,
|
||||
6,
|
||||
8,
|
||||
10,
|
||||
0,
|
||||
1,
|
||||
2
|
||||
],
|
||||
"9": [
|
||||
3,
|
||||
6,
|
||||
8,
|
||||
10,
|
||||
0,
|
||||
1,
|
||||
2,
|
||||
4,
|
||||
5
|
||||
],
|
||||
"12": [
|
||||
3,
|
||||
6,
|
||||
8,
|
||||
10,
|
||||
0,
|
||||
1,
|
||||
2,
|
||||
4,
|
||||
5,
|
||||
7,
|
||||
9,
|
||||
11
|
||||
]
|
||||
},
|
||||
"contrast": {
|
||||
"sceneText": 7.737507893072143,
|
||||
"trackOnBoard": 5.763617196441413
|
||||
}
|
||||
},
|
||||
{
|
||||
"id": "rose",
|
||||
"label": "挑战",
|
||||
"name": "玫瑰暮色",
|
||||
"background": "#E7C3CE",
|
||||
"ink": "#273B50",
|
||||
"materials": {
|
||||
"board": "#F2EEE5",
|
||||
"boardGrid": "#89867D",
|
||||
"track": "#435F78",
|
||||
"trackHalo": "#F2EEE5"
|
||||
},
|
||||
"anchorPalette": [
|
||||
8,
|
||||
7,
|
||||
2,
|
||||
11
|
||||
],
|
||||
"palettes": {
|
||||
"4": [
|
||||
8,
|
||||
7,
|
||||
2,
|
||||
11
|
||||
],
|
||||
"7": [
|
||||
8,
|
||||
7,
|
||||
2,
|
||||
11,
|
||||
0,
|
||||
1,
|
||||
3
|
||||
],
|
||||
"9": [
|
||||
8,
|
||||
7,
|
||||
2,
|
||||
11,
|
||||
0,
|
||||
1,
|
||||
3,
|
||||
4,
|
||||
5
|
||||
],
|
||||
"12": [
|
||||
8,
|
||||
7,
|
||||
2,
|
||||
11,
|
||||
0,
|
||||
1,
|
||||
3,
|
||||
4,
|
||||
5,
|
||||
6,
|
||||
9,
|
||||
10
|
||||
]
|
||||
},
|
||||
"contrast": {
|
||||
"sceneText": 7.164821183322833,
|
||||
"trackOnBoard": 5.763617196441413
|
||||
}
|
||||
},
|
||||
{
|
||||
"id": "midnight",
|
||||
"label": "每周挑战",
|
||||
"name": "午夜极光",
|
||||
"background": "#293956",
|
||||
"ink": "#F7F6F2",
|
||||
"materials": {
|
||||
"board": "#F2EEE5",
|
||||
"boardGrid": "#89867D",
|
||||
"track": "#435F78",
|
||||
"trackHalo": "#F2EEE5"
|
||||
},
|
||||
"anchorPalette": [
|
||||
10,
|
||||
11,
|
||||
2,
|
||||
1
|
||||
],
|
||||
"palettes": {
|
||||
"4": [
|
||||
10,
|
||||
11,
|
||||
2,
|
||||
1
|
||||
],
|
||||
"7": [
|
||||
10,
|
||||
11,
|
||||
2,
|
||||
1,
|
||||
0,
|
||||
3,
|
||||
4
|
||||
],
|
||||
"9": [
|
||||
10,
|
||||
11,
|
||||
2,
|
||||
1,
|
||||
0,
|
||||
3,
|
||||
4,
|
||||
5,
|
||||
6
|
||||
],
|
||||
"12": [
|
||||
10,
|
||||
11,
|
||||
2,
|
||||
1,
|
||||
0,
|
||||
3,
|
||||
4,
|
||||
5,
|
||||
6,
|
||||
7,
|
||||
8,
|
||||
9
|
||||
]
|
||||
},
|
||||
"contrast": {
|
||||
"sceneText": 10.705759057123668,
|
||||
"trackOnBoard": 5.763617196441413
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
@@ -0,0 +1 @@
|
||||
<!doctype html><html lang="zh-CN"><head><meta charset="utf-8"><meta http-equiv="refresh" content="0;url=paper/index.html"><title>轻线纸境 · 设计稿已迁移</title></head><body><p>设计稿已整理到独立目录：<a href="paper/index.html">05 · 轻线纸境</a></p></body></html>
|
||||
@@ -0,0 +1,5 @@
|
||||
# 05 · 轻线纸境
|
||||
|
||||
本文件为旧入口。完整、人工维护的 Agent 规范已迁移到 [paper/design.md](paper/design.md)。
|
||||
|
||||
[设计稿](paper/index.html) · [配色数据](paper/tokens.json) · [Agent 接入说明](../README.md)
|
||||
@@ -0,0 +1,57 @@
|
||||
# 05 · 轻线纸境
|
||||
|
||||
设计 ID：`paper` · 渲染风格：`paper` · 英文名：PAPER ROUTES。最新新增的候选方案，可与其他方案同时保留。
|
||||
|
||||
[Agent 接入约定](../../shared.md) · [配色数据](tokens.json) · [完整设计稿](index.html) · [试玩与审核](../../../design-showcase.html?design=paper)
|
||||
|
||||
## 来源与设计目标
|
||||
|
||||
用户认可 [玩法变种实验页](../../../labs/variants/index.html) 的棋盘和棋子画法，要求整理成独立设计。提取暖白格面、浅蓝灰细轨道、陶橙／雾蓝纯色六角、细白边和线条箭头。五主题是这套画法的延展。
|
||||
|
||||
独立设计稿里的「双色试航」只保留初始布局作视觉对照；**不绘制棋盘外围彩色标记，不绘制棋子编号**。实验页的出口颜色匹配规则及外围色标不属于本设计，也不改变主游戏玩法。
|
||||
|
||||
## 棋盘与棋子怎么画
|
||||
|
||||
以格半径 s 为单位，复用 [renderer.js](../../../src/renderer.js) 的 paper 分支和 [token-art.js](../../../src/token-art.js) 的 paper 分支。
|
||||
|
||||
| 部件 | 当前实现 |
|
||||
| --- | --- |
|
||||
| 底格 | 正六角，半径 s × 0.97，保留细小格缝 |
|
||||
| 分格线 | max(0.4, s × 0.025)，使用主题 boardGrid |
|
||||
| 轨道 | 单层细线 max(0.7, s × 0.055)，不画粗 trackHalo、不做其他方案的端点内收 |
|
||||
| 棋子 | 正六角纯色面，半径 s × 0.88，不能换成原版大圆角轮廓 |
|
||||
| 白边 | #FFFFFFCC，线宽 s × 0.035 |
|
||||
| 箭杆 | 局部坐标 (-0.30s, 0) → (0.30s, 0) |
|
||||
| 箭头头部 | (0.08s, -0.17s) → (0.30s, 0) → (0.08s, 0.17s) |
|
||||
| 箭头线条 | 白色、圆头圆接，线宽 s × 0.09；两段开放折线，不是实心三角 |
|
||||
|
||||
头部与箭杆一起按棋子方向或运动切线旋转。绘制分支内部 r = s × 0.88，再用 r / 0.88 还原单位，所以运动缩放时白边和箭头一起缩放。无棋子投影、高光、渐变；不用 PNG 冒充细线箭头。
|
||||
|
||||
## 五种主题
|
||||
|
||||
| 主题 ID | 阶段 | 名称 | 用色方向 |
|
||||
| --- | --- | --- | --- |
|
||||
| lagoon | 轻松 | 雾蓝信纸 | 实验页雾蓝环境、暖白格面、陶橙与雾蓝棋子 |
|
||||
| apricot | 进阶 | 暖砂手札 | 暖砂纸底、灰棕细线 |
|
||||
| lavender | 烧脑 | 鼠尾草页 | 浅灰绿纸底、蓝与苔绿棋子 |
|
||||
| rose | 挑战 | 石墨练习 | 灰白图纸、石墨蓝细线 |
|
||||
| midnight | 每周挑战 | 夜航图纸 | 深蓝灰板面、浅灰蓝轨道与暖色棋子 |
|
||||
|
||||
完整色值和每主题 4/7/9/12 色有序 palette 见 tokens.json，源为 [art-directions.js](../../../src/art-directions.js)。轻松主题关键参考色：环境 #EAF0F3、格面 #FAFBF7、分格 #D3DFE3、轨道 #B2C4CE、陶橙 #D66C4D、雾蓝 #477FC0。全部十二色固定白色箭头，其对比度至少 3:1。
|
||||
|
||||
浅色细轨道低于基础轨道的 3:1 目标，这是保留参考观感的已知取舍，不能为了套用原版指标而擅自加粗、加深或加轮廓。tokens 中的 contrast 是实测比值，不是合规认证。
|
||||
|
||||
## 控件与边界
|
||||
|
||||
顶部使用紧凑蓝灰控件，通知暖白、浅灰蓝边线，均无阴影。底部道具为圆形：撤销雾蓝、重来陶橙、提示赭金，1px 细白边，无阴影。旋转图标在浅主题为蓝灰，midnight 恢复白色；同时设置 body.dataset.design 和 body.dataset.theme。
|
||||
|
||||
通知位置、棋盘居中、大道具、金色发光星星以及示意角标都继承 shared.md。这里的“无阴影”不取消用户要求的奖励星星光感。
|
||||
|
||||
## 验收与接入
|
||||
|
||||
使用 `artDirection('paper')` 和 `directionTheme(direction, themeId, colorCount)`；禁止只换背景而继续使用 classic 的棋子和轨道画法。
|
||||
|
||||
- 对照实验页的细线与六角比例；参考布局没有外围色标与编号。
|
||||
- 检查每个主题的长弯路，移动中仍为开放线条箭头、细白边棋子。
|
||||
- 检查手机小图上的细线不断裂，以及午夜主题的旋转按钮颜色。
|
||||
- 原生适配需检查圆头线端、透明细白边与格缝；尚未完成原生实机验收。
|
||||
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": "paper",
|
||||
"artStyle": "paper",
|
||||
"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": "#294D60",
|
||||
"documentBackground": "#F7F9F8",
|
||||
"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": "#D66C4D",
|
||||
"arrow": "#FFFFFF"
|
||||
},
|
||||
{
|
||||
"index": 1,
|
||||
"name": "雾蓝",
|
||||
"color": "#477FC0",
|
||||
"arrow": "#FFFFFF"
|
||||
},
|
||||
{
|
||||
"index": 2,
|
||||
"name": "鼠尾草",
|
||||
"color": "#668877",
|
||||
"arrow": "#FFFFFF"
|
||||
},
|
||||
{
|
||||
"index": 3,
|
||||
"name": "赭金",
|
||||
"color": "#B58943",
|
||||
"arrow": "#FFFFFF"
|
||||
},
|
||||
{
|
||||
"index": 4,
|
||||
"name": "雾紫",
|
||||
"color": "#8B7297",
|
||||
"arrow": "#FFFFFF"
|
||||
},
|
||||
{
|
||||
"index": 5,
|
||||
"name": "湖青",
|
||||
"color": "#45868C",
|
||||
"arrow": "#FFFFFF"
|
||||
},
|
||||
{
|
||||
"index": 6,
|
||||
"name": "陶红",
|
||||
"color": "#B76260",
|
||||
"arrow": "#FFFFFF"
|
||||
},
|
||||
{
|
||||
"index": 7,
|
||||
"name": "钢蓝",
|
||||
"color": "#607B90",
|
||||
"arrow": "#FFFFFF"
|
||||
},
|
||||
{
|
||||
"index": 8,
|
||||
"name": "暖木",
|
||||
"color": "#B28168",
|
||||
"arrow": "#FFFFFF"
|
||||
},
|
||||
{
|
||||
"index": 9,
|
||||
"name": "松绿",
|
||||
"color": "#46765F",
|
||||
"arrow": "#FFFFFF"
|
||||
},
|
||||
{
|
||||
"index": 10,
|
||||
"name": "烟蓝",
|
||||
"color": "#6B8AAB",
|
||||
"arrow": "#FFFFFF"
|
||||
},
|
||||
{
|
||||
"index": 11,
|
||||
"name": "藕灰",
|
||||
"color": "#9C7284",
|
||||
"arrow": "#FFFFFF"
|
||||
}
|
||||
],
|
||||
"themes": [
|
||||
{
|
||||
"id": "lagoon",
|
||||
"label": "轻松",
|
||||
"name": "雾蓝信纸",
|
||||
"background": "#EAF0F3",
|
||||
"ink": "#12202A",
|
||||
"materials": {
|
||||
"board": "#FAFBF7",
|
||||
"boardGrid": "#D3DFE3",
|
||||
"track": "#B2C4CE",
|
||||
"trackHalo": "#FAFBF7"
|
||||
},
|
||||
"anchorPalette": [
|
||||
0,
|
||||
1,
|
||||
2,
|
||||
3,
|
||||
4,
|
||||
5,
|
||||
7
|
||||
],
|
||||
"palettes": {
|
||||
"4": [
|
||||
0,
|
||||
1,
|
||||
2,
|
||||
3
|
||||
],
|
||||
"7": [
|
||||
0,
|
||||
1,
|
||||
2,
|
||||
3,
|
||||
4,
|
||||
5,
|
||||
7
|
||||
],
|
||||
"9": [
|
||||
0,
|
||||
1,
|
||||
2,
|
||||
3,
|
||||
4,
|
||||
5,
|
||||
7,
|
||||
6,
|
||||
8
|
||||
],
|
||||
"12": [
|
||||
0,
|
||||
1,
|
||||
2,
|
||||
3,
|
||||
4,
|
||||
5,
|
||||
7,
|
||||
6,
|
||||
8,
|
||||
9,
|
||||
10,
|
||||
11
|
||||
]
|
||||
},
|
||||
"contrast": {
|
||||
"sceneText": 14.423559313677755,
|
||||
"trackOnBoard": 1.7299985145787213
|
||||
}
|
||||
},
|
||||
{
|
||||
"id": "apricot",
|
||||
"label": "进阶",
|
||||
"name": "暖砂手札",
|
||||
"background": "#F3EEE5",
|
||||
"ink": "#12202A",
|
||||
"materials": {
|
||||
"board": "#FFFCF5",
|
||||
"boardGrid": "#E3DCD0",
|
||||
"track": "#C4B8A4",
|
||||
"trackHalo": "#FFFCF5"
|
||||
},
|
||||
"anchorPalette": [
|
||||
0,
|
||||
1,
|
||||
3,
|
||||
6,
|
||||
8,
|
||||
9,
|
||||
4
|
||||
],
|
||||
"palettes": {
|
||||
"4": [
|
||||
0,
|
||||
1,
|
||||
3,
|
||||
6
|
||||
],
|
||||
"7": [
|
||||
0,
|
||||
1,
|
||||
3,
|
||||
6,
|
||||
8,
|
||||
9,
|
||||
4
|
||||
],
|
||||
"9": [
|
||||
0,
|
||||
1,
|
||||
3,
|
||||
6,
|
||||
8,
|
||||
9,
|
||||
4,
|
||||
2,
|
||||
5
|
||||
],
|
||||
"12": [
|
||||
0,
|
||||
1,
|
||||
3,
|
||||
6,
|
||||
8,
|
||||
9,
|
||||
4,
|
||||
2,
|
||||
5,
|
||||
7,
|
||||
10,
|
||||
11
|
||||
]
|
||||
},
|
||||
"contrast": {
|
||||
"sceneText": 14.35675892235889,
|
||||
"trackOnBoard": 1.90836044264981
|
||||
}
|
||||
},
|
||||
{
|
||||
"id": "lavender",
|
||||
"label": "烧脑",
|
||||
"name": "鼠尾草页",
|
||||
"background": "#E8EFEB",
|
||||
"ink": "#12202A",
|
||||
"materials": {
|
||||
"board": "#FAFCF8",
|
||||
"boardGrid": "#D3DFD7",
|
||||
"track": "#ADBCB2",
|
||||
"trackHalo": "#FAFCF8"
|
||||
},
|
||||
"anchorPalette": [
|
||||
1,
|
||||
2,
|
||||
3,
|
||||
5,
|
||||
9,
|
||||
10,
|
||||
0
|
||||
],
|
||||
"palettes": {
|
||||
"4": [
|
||||
1,
|
||||
2,
|
||||
3,
|
||||
5
|
||||
],
|
||||
"7": [
|
||||
1,
|
||||
2,
|
||||
3,
|
||||
5,
|
||||
9,
|
||||
10,
|
||||
0
|
||||
],
|
||||
"9": [
|
||||
1,
|
||||
2,
|
||||
3,
|
||||
5,
|
||||
9,
|
||||
10,
|
||||
0,
|
||||
4,
|
||||
6
|
||||
],
|
||||
"12": [
|
||||
1,
|
||||
2,
|
||||
3,
|
||||
5,
|
||||
9,
|
||||
10,
|
||||
0,
|
||||
4,
|
||||
6,
|
||||
7,
|
||||
8,
|
||||
11
|
||||
]
|
||||
},
|
||||
"contrast": {
|
||||
"sceneText": 14.202869576847103,
|
||||
"trackOnBoard": 1.916933130789821
|
||||
}
|
||||
},
|
||||
{
|
||||
"id": "rose",
|
||||
"label": "挑战",
|
||||
"name": "石墨练习",
|
||||
"background": "#E7EBEE",
|
||||
"ink": "#12202A",
|
||||
"materials": {
|
||||
"board": "#F8FAFB",
|
||||
"boardGrid": "#D1DBE1",
|
||||
"track": "#A5B6C1",
|
||||
"trackHalo": "#F8FAFB"
|
||||
},
|
||||
"anchorPalette": [
|
||||
0,
|
||||
1,
|
||||
4,
|
||||
6,
|
||||
7,
|
||||
10,
|
||||
11
|
||||
],
|
||||
"palettes": {
|
||||
"4": [
|
||||
0,
|
||||
1,
|
||||
4,
|
||||
6
|
||||
],
|
||||
"7": [
|
||||
0,
|
||||
1,
|
||||
4,
|
||||
6,
|
||||
7,
|
||||
10,
|
||||
11
|
||||
],
|
||||
"9": [
|
||||
0,
|
||||
1,
|
||||
4,
|
||||
6,
|
||||
7,
|
||||
10,
|
||||
11,
|
||||
2,
|
||||
3
|
||||
],
|
||||
"12": [
|
||||
0,
|
||||
1,
|
||||
4,
|
||||
6,
|
||||
7,
|
||||
10,
|
||||
11,
|
||||
2,
|
||||
3,
|
||||
5,
|
||||
8,
|
||||
9
|
||||
]
|
||||
},
|
||||
"contrast": {
|
||||
"sceneText": 13.838133934955545,
|
||||
"trackOnBoard": 1.9936733854132391
|
||||
}
|
||||
},
|
||||
{
|
||||
"id": "midnight",
|
||||
"label": "每周挑战",
|
||||
"name": "夜航图纸",
|
||||
"background": "#253B4A",
|
||||
"ink": "#FFFFFF",
|
||||
"materials": {
|
||||
"board": "#304A59",
|
||||
"boardGrid": "#435E6C",
|
||||
"track": "#849FAE",
|
||||
"trackHalo": "#304A59"
|
||||
},
|
||||
"anchorPalette": [
|
||||
0,
|
||||
2,
|
||||
3,
|
||||
4,
|
||||
5,
|
||||
8,
|
||||
10
|
||||
],
|
||||
"palettes": {
|
||||
"4": [
|
||||
0,
|
||||
2,
|
||||
3,
|
||||
4
|
||||
],
|
||||
"7": [
|
||||
0,
|
||||
2,
|
||||
3,
|
||||
4,
|
||||
5,
|
||||
8,
|
||||
10
|
||||
],
|
||||
"9": [
|
||||
0,
|
||||
2,
|
||||
3,
|
||||
4,
|
||||
5,
|
||||
8,
|
||||
10,
|
||||
1,
|
||||
6
|
||||
],
|
||||
"12": [
|
||||
0,
|
||||
2,
|
||||
3,
|
||||
4,
|
||||
5,
|
||||
8,
|
||||
10,
|
||||
1,
|
||||
6,
|
||||
7,
|
||||
9,
|
||||
11
|
||||
]
|
||||
},
|
||||
"contrast": {
|
||||
"sceneText": 11.646406631180858,
|
||||
"trackOnBoard": 3.357082701757936
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
File diff suppressed because one or more lines are too long
@@ -1,27 +1,5 @@
|
||||
# 积木轨道屋
|
||||
# 03 · 积木轨道屋
|
||||
|
||||
圆润积木、原色塑胶与压下去有回弹的按钮。棋子像可以拿在手里的小零件。
|
||||
本文件为旧入口。完整、人工维护的 Agent 规范已迁移到 [toy/design.md](toy/design.md)。
|
||||
|
||||
## 设计规则
|
||||
|
||||
- 同色深浅叠层，形成柔软厚度
|
||||
- 红黄蓝绿积木配木色底板
|
||||
- 圆角控件、凸起边缘与轻微高光
|
||||
|
||||
## 五种主题
|
||||
|
||||
| 难度 | 名称 | 环境色 |
|
||||
| --- | --- | --- |
|
||||
| 轻松 | 积木黄盒 | #F4C548 |
|
||||
| 进阶 | 蓝色装配台 | #56AFE0 |
|
||||
| 烧脑 | 橘红工坊 | #EA743E |
|
||||
| 挑战 | 绿毯小城 | #439A73 |
|
||||
| 每周挑战 | 太空玩具柜 | #244584 |
|
||||
|
||||
## 游戏道具与布局
|
||||
|
||||
- 撤销、重来、提示使用独立彩色底座，64–68px，图标 32px，标签 13px。顶部导航保持紧凑。道具使用纯色平面，不使用阴影、立体底边或渐变高光。
|
||||
- 右上角预留次数或“▶ AD”角标。设计稿展示“撤销 3 次”和“广告获取提示”，仅为样式，不启用真实库存或广告逻辑。
|
||||
- 棋盘在通知区与独立旋转区之间垂直居中。旋转区和道具区占据真实布局行，不覆盖棋盘。
|
||||
|
||||
此方案使用独立的棋子造型、轨道材质和控件样式，共用现有弯曲轨道玩法。审核页支持同时保留多套方案。
|
||||
[设计稿](toy/index.html) · [配色数据](toy/tokens.json) · [Agent 接入说明](../README.md)
|
||||
|
||||
@@ -0,0 +1,50 @@
|
||||
# 03 · 积木轨道屋
|
||||
|
||||
设计 ID：`toy` · 渲染风格：`toy` · 英文名：LITTLE PLAYWORKS。玩具质感候选方案，可与其他方案同时保留。
|
||||
|
||||
[Agent 接入约定](../../shared.md) · [配色数据](tokens.json) · [完整设计稿](index.html) · [试玩与审核](../../../design-showcase.html?design=toy)
|
||||
|
||||
## 设计目标
|
||||
|
||||
圆润积木、红黄蓝绿塑胶零件与原木色轨道板。厚度来自少量同色分层，棋子看起来可以拿在手里；不把整套方案做成灰雾或原版柔紫色系。
|
||||
|
||||
## 棋盘与棋子怎么画
|
||||
|
||||
复用 [renderer.js](../../../src/renderer.js) 的非 paper 棋盘、[token-art.js](../../../src/token-art.js) 的 toy 分支。r = 格半径 s × 0.985；tint 在 RGB 通道上按比例向白或黑混合。
|
||||
|
||||
| 部件 | 当前实现 |
|
||||
| --- | --- |
|
||||
| 轨道 | 分格 max(1, s × 0.024)，外缘 max(4, s × 0.16)，中心线 max(2.5, s × 0.10) |
|
||||
| 下层厚度 | 半径 r × 0.94，向下偏移 r × 0.09，fill 暗化 30% |
|
||||
| 中间层 | 半径 r × 0.94，fill 暗化 8% |
|
||||
| 顶面 | 半径 r × 0.83，向上偏移 r × 0.06，原始 fill |
|
||||
| 边缘高光 | 半径 r × 0.75 的局部边线，fill 提亮 50%，线宽 r × 0.045 |
|
||||
| 中央压面 | 半径 r × 0.50 的圆，向上偏移 r × 0.04，fill 提亮 11% |
|
||||
| 箭头 | 实心七点箭头，尺度 r × 0.58，保持清楚独立的方向 |
|
||||
|
||||
这套不依赖棋子图集，也不是物理材质或三维光照；所有效果由共享多边形、线与圆组成。移动和碰撞仍复用同一分层画法。
|
||||
|
||||
## 五种主题
|
||||
|
||||
| 主题 ID | 阶段 | 名称 | 独立用色方向 |
|
||||
| --- | --- | --- | --- |
|
||||
| lagoon | 轻松 | 积木黄盒 | 暖黄玩具盒、奶油板面、原色积木 |
|
||||
| apricot | 进阶 | 蓝色装配台 | 亮蓝台面与原木色插板 |
|
||||
| lavender | 烧脑 | 橘红工坊 | 橘红环境、木糖底板、绿蓝零件 |
|
||||
| rose | 挑战 | 绿毯小城 | 绿垫与木色道路 |
|
||||
| midnight | 每周挑战 | 太空玩具柜 | 太空蓝柜体、浅灰塑胶板 |
|
||||
|
||||
完整色值及每主题 4/7/9/12 色搭配见 tokens.json，源为 [art-directions.js](../../../src/art-directions.js)。配色要保留原色塑胶与暖木关系。箭头按 4.5:1 门槛选白或 #172D39，不能给所有黄色积木统一加白箭头。
|
||||
|
||||
## 控件与边界
|
||||
|
||||
现有顶部控件保留玩具边缘和圆润感。底部道具单独使用 24px 圆角、蓝／红／黄底色与奶油色 3px 边框；**没有**棋子的厚度、投影或高光。不要因名称里有“玩具”就重新给底部道具加阴影。尺寸、位置和未来角标按 shared.md。
|
||||
|
||||
## 验收与接入
|
||||
|
||||
使用 `artDirection('toy')` 和 `directionTheme(direction, themeId, colorCount)`，不要用 CSS 滤镜把 calm 染成玩具配色。
|
||||
|
||||
- 缩小到手机尺寸后，分层仍清楚且不遮住箭头。
|
||||
- 蓝色和太空主题保持木色／浅灰板面，不能五套都用同一个奶油背景。
|
||||
- 静态、运动与撤销造型一致；底部道具保持平面。
|
||||
- 原生几何可复用绘制命令，原生控件和实机效果尚未验收。
|
||||
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": "toy",
|
||||
"artStyle": "toy",
|
||||
"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": "#245EAF",
|
||||
"documentBackground": "#FFFAEE",
|
||||
"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": "#DF4033",
|
||||
"arrow": "#172D39"
|
||||
},
|
||||
{
|
||||
"index": 1,
|
||||
"name": "积木黄",
|
||||
"color": "#F2C52E",
|
||||
"arrow": "#172D39"
|
||||
},
|
||||
{
|
||||
"index": 2,
|
||||
"name": "积木蓝",
|
||||
"color": "#2478C5",
|
||||
"arrow": "#FFFFFF"
|
||||
},
|
||||
{
|
||||
"index": 3,
|
||||
"name": "积木绿",
|
||||
"color": "#32945C",
|
||||
"arrow": "#172D39"
|
||||
},
|
||||
{
|
||||
"index": 4,
|
||||
"name": "零件橙",
|
||||
"color": "#EF862D",
|
||||
"arrow": "#172D39"
|
||||
},
|
||||
{
|
||||
"index": 5,
|
||||
"name": "拼装紫",
|
||||
"color": "#7652B2",
|
||||
"arrow": "#FFFFFF"
|
||||
},
|
||||
{
|
||||
"index": 6,
|
||||
"name": "奶油白",
|
||||
"color": "#EFE4C4",
|
||||
"arrow": "#172D39"
|
||||
},
|
||||
{
|
||||
"index": 7,
|
||||
"name": "工具青",
|
||||
"color": "#227B87",
|
||||
"arrow": "#FFFFFF"
|
||||
},
|
||||
{
|
||||
"index": 8,
|
||||
"name": "砖红",
|
||||
"color": "#B63845",
|
||||
"arrow": "#FFFFFF"
|
||||
},
|
||||
{
|
||||
"index": 9,
|
||||
"name": "木棕",
|
||||
"color": "#745B40",
|
||||
"arrow": "#FFFFFF"
|
||||
},
|
||||
{
|
||||
"index": 10,
|
||||
"name": "玻璃蓝",
|
||||
"color": "#73BFDC",
|
||||
"arrow": "#172D39"
|
||||
},
|
||||
{
|
||||
"index": 11,
|
||||
"name": "草绿",
|
||||
"color": "#A7BA56",
|
||||
"arrow": "#172D39"
|
||||
}
|
||||
],
|
||||
"themes": [
|
||||
{
|
||||
"id": "lagoon",
|
||||
"label": "轻松",
|
||||
"name": "积木黄盒",
|
||||
"background": "#F4C548",
|
||||
"ink": "#12202A",
|
||||
"materials": {
|
||||
"board": "#FFF7DE",
|
||||
"boardGrid": "#B5A184",
|
||||
"track": "#765238",
|
||||
"trackHalo": "#FFF7DE"
|
||||
},
|
||||
"anchorPalette": [
|
||||
0,
|
||||
2,
|
||||
3,
|
||||
5,
|
||||
4,
|
||||
8,
|
||||
10
|
||||
],
|
||||
"palettes": {
|
||||
"4": [
|
||||
0,
|
||||
2,
|
||||
3,
|
||||
5
|
||||
],
|
||||
"7": [
|
||||
0,
|
||||
2,
|
||||
3,
|
||||
5,
|
||||
4,
|
||||
8,
|
||||
10
|
||||
],
|
||||
"9": [
|
||||
0,
|
||||
2,
|
||||
3,
|
||||
5,
|
||||
4,
|
||||
8,
|
||||
10,
|
||||
1,
|
||||
6
|
||||
],
|
||||
"12": [
|
||||
0,
|
||||
2,
|
||||
3,
|
||||
5,
|
||||
4,
|
||||
8,
|
||||
10,
|
||||
1,
|
||||
6,
|
||||
7,
|
||||
9,
|
||||
11
|
||||
]
|
||||
},
|
||||
"contrast": {
|
||||
"sceneText": 10.212613961554808,
|
||||
"trackOnBoard": 6.463066023255321
|
||||
}
|
||||
},
|
||||
{
|
||||
"id": "apricot",
|
||||
"label": "进阶",
|
||||
"name": "蓝色装配台",
|
||||
"background": "#56AFE0",
|
||||
"ink": "#12202A",
|
||||
"materials": {
|
||||
"board": "#F5DFB6",
|
||||
"boardGrid": "#B09C7C",
|
||||
"track": "#386A8D",
|
||||
"trackHalo": "#F5DFB6"
|
||||
},
|
||||
"anchorPalette": [
|
||||
1,
|
||||
0,
|
||||
4,
|
||||
3,
|
||||
9,
|
||||
6,
|
||||
11
|
||||
],
|
||||
"palettes": {
|
||||
"4": [
|
||||
1,
|
||||
0,
|
||||
4,
|
||||
3
|
||||
],
|
||||
"7": [
|
||||
1,
|
||||
0,
|
||||
4,
|
||||
3,
|
||||
9,
|
||||
6,
|
||||
11
|
||||
],
|
||||
"9": [
|
||||
1,
|
||||
0,
|
||||
4,
|
||||
3,
|
||||
9,
|
||||
6,
|
||||
11,
|
||||
2,
|
||||
5
|
||||
],
|
||||
"12": [
|
||||
1,
|
||||
0,
|
||||
4,
|
||||
3,
|
||||
9,
|
||||
6,
|
||||
11,
|
||||
2,
|
||||
5,
|
||||
7,
|
||||
8,
|
||||
10
|
||||
]
|
||||
},
|
||||
"contrast": {
|
||||
"sceneText": 6.797539779539623,
|
||||
"trackOnBoard": 4.458036518249096
|
||||
}
|
||||
},
|
||||
{
|
||||
"id": "lavender",
|
||||
"label": "烧脑",
|
||||
"name": "橘红工坊",
|
||||
"background": "#EA743E",
|
||||
"ink": "#12202A",
|
||||
"materials": {
|
||||
"board": "#FFEFCB",
|
||||
"boardGrid": "#BBA27B",
|
||||
"track": "#695037",
|
||||
"trackHalo": "#FFEFCB"
|
||||
},
|
||||
"anchorPalette": [
|
||||
2,
|
||||
3,
|
||||
1,
|
||||
7,
|
||||
10,
|
||||
5,
|
||||
8
|
||||
],
|
||||
"palettes": {
|
||||
"4": [
|
||||
2,
|
||||
3,
|
||||
1,
|
||||
7
|
||||
],
|
||||
"7": [
|
||||
2,
|
||||
3,
|
||||
1,
|
||||
7,
|
||||
10,
|
||||
5,
|
||||
8
|
||||
],
|
||||
"9": [
|
||||
2,
|
||||
3,
|
||||
1,
|
||||
7,
|
||||
10,
|
||||
5,
|
||||
8,
|
||||
0,
|
||||
4
|
||||
],
|
||||
"12": [
|
||||
2,
|
||||
3,
|
||||
1,
|
||||
7,
|
||||
10,
|
||||
5,
|
||||
8,
|
||||
0,
|
||||
4,
|
||||
6,
|
||||
9,
|
||||
11
|
||||
]
|
||||
},
|
||||
"contrast": {
|
||||
"sceneText": 5.582585700054348,
|
||||
"trackOnBoard": 6.585478734470914
|
||||
}
|
||||
},
|
||||
{
|
||||
"id": "rose",
|
||||
"label": "挑战",
|
||||
"name": "绿毯小城",
|
||||
"background": "#439A73",
|
||||
"ink": "#12202A",
|
||||
"materials": {
|
||||
"board": "#F2D6A6",
|
||||
"boardGrid": "#AC987A",
|
||||
"track": "#476556",
|
||||
"trackHalo": "#F2D6A6"
|
||||
},
|
||||
"anchorPalette": [
|
||||
0,
|
||||
1,
|
||||
2,
|
||||
4,
|
||||
6,
|
||||
9,
|
||||
11
|
||||
],
|
||||
"palettes": {
|
||||
"4": [
|
||||
0,
|
||||
1,
|
||||
2,
|
||||
4
|
||||
],
|
||||
"7": [
|
||||
0,
|
||||
1,
|
||||
2,
|
||||
4,
|
||||
6,
|
||||
9,
|
||||
11
|
||||
],
|
||||
"9": [
|
||||
0,
|
||||
1,
|
||||
2,
|
||||
4,
|
||||
6,
|
||||
9,
|
||||
11,
|
||||
3,
|
||||
5
|
||||
],
|
||||
"12": [
|
||||
0,
|
||||
1,
|
||||
2,
|
||||
4,
|
||||
6,
|
||||
9,
|
||||
11,
|
||||
3,
|
||||
5,
|
||||
7,
|
||||
8,
|
||||
10
|
||||
]
|
||||
},
|
||||
"contrast": {
|
||||
"sceneText": 4.82593081470767,
|
||||
"trackOnBoard": 4.578974741098264
|
||||
}
|
||||
},
|
||||
{
|
||||
"id": "midnight",
|
||||
"label": "每周挑战",
|
||||
"name": "太空玩具柜",
|
||||
"background": "#244584",
|
||||
"ink": "#FFFFFF",
|
||||
"materials": {
|
||||
"board": "#D4E4E6",
|
||||
"boardGrid": "#8DA4B2",
|
||||
"track": "#35516F",
|
||||
"trackHalo": "#D4E4E6"
|
||||
},
|
||||
"anchorPalette": [
|
||||
1,
|
||||
4,
|
||||
0,
|
||||
6,
|
||||
10,
|
||||
3,
|
||||
8
|
||||
],
|
||||
"palettes": {
|
||||
"4": [
|
||||
1,
|
||||
4,
|
||||
0,
|
||||
6
|
||||
],
|
||||
"7": [
|
||||
1,
|
||||
4,
|
||||
0,
|
||||
6,
|
||||
10,
|
||||
3,
|
||||
8
|
||||
],
|
||||
"9": [
|
||||
1,
|
||||
4,
|
||||
0,
|
||||
6,
|
||||
10,
|
||||
3,
|
||||
8,
|
||||
2,
|
||||
5
|
||||
],
|
||||
"12": [
|
||||
1,
|
||||
4,
|
||||
0,
|
||||
6,
|
||||
10,
|
||||
3,
|
||||
8,
|
||||
2,
|
||||
5,
|
||||
7,
|
||||
9,
|
||||
11
|
||||
]
|
||||
},
|
||||
"contrast": {
|
||||
"sceneText": 9.29429328953417,
|
||||
"trackOnBoard": 6.2705655843638315
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
File diff suppressed because one or more lines are too long
@@ -1,27 +1,5 @@
|
||||
# 高彩游乐场
|
||||
# 02 · 高彩游乐场
|
||||
|
||||
鲜明撞色、粗线条与贴纸式棋子。像一张能玩的彩色海报，明快、有力量。
|
||||
本文件为旧入口。完整、人工维护的 Agent 规范已迁移到 [vivid/design.md](vivid/design.md)。
|
||||
|
||||
## 设计规则
|
||||
|
||||
- 高纯度主色，深色轮廓统一画面
|
||||
- 轨道像印刷线，棋子像立起的贴纸
|
||||
- 方圆按钮与错位硬阴影
|
||||
|
||||
## 五种主题
|
||||
|
||||
| 难度 | 名称 | 环境色 |
|
||||
| --- | --- | --- |
|
||||
| 轻松 | 青柠派对 | #B8F34A |
|
||||
| 进阶 | 爆橙热浪 | #FF771B |
|
||||
| 烧脑 | 钴蓝电场 | #3E42EE |
|
||||
| 挑战 | 荧粉冲刺 | #FF3588 |
|
||||
| 每周挑战 | 黑光嘉年华 | #1B104D |
|
||||
|
||||
## 游戏道具与布局
|
||||
|
||||
- 撤销、重来、提示使用独立彩色底座，64–68px，图标 32px，标签 13px。顶部导航保持紧凑。道具使用纯色平面，不使用阴影、立体底边或渐变高光。
|
||||
- 右上角预留次数或“▶ AD”角标。设计稿展示“撤销 3 次”和“广告获取提示”，仅为样式，不启用真实库存或广告逻辑。
|
||||
- 棋盘在通知区与独立旋转区之间垂直居中。旋转区和道具区占据真实布局行，不覆盖棋盘。
|
||||
|
||||
此方案使用独立的棋子造型、轨道材质和控件样式，共用现有弯曲轨道玩法。审核页支持同时保留多套方案。
|
||||
[设计稿](vivid/index.html) · [配色数据](vivid/tokens.json) · [Agent 接入说明](../README.md)
|
||||
|
||||
@@ -0,0 +1,49 @@
|
||||
# 02 · 高彩游乐场
|
||||
|
||||
设计 ID：`vivid` · 渲染风格：`vivid` · 英文名：CHROMA CLUB。高饱和候选方案，可与其他方案同时保留。
|
||||
|
||||
[Agent 接入约定](../../shared.md) · [配色数据](tokens.json) · [完整设计稿](index.html) · [试玩与审核](../../../design-showcase.html?design=vivid)
|
||||
|
||||
## 设计目标
|
||||
|
||||
鲜明撞色、深色轮廓与贴纸棋子，像可操作的彩色海报。用户明确要求五个主题都有高饱和感，不能只有轻松主题鲜艳，其余退回原版蓝紫粉背景。
|
||||
|
||||
## 棋盘与棋子怎么画
|
||||
|
||||
复用 [renderer.js](../../../src/renderer.js) 的非 paper 棋盘和 [token-art.js](../../../src/token-art.js) 的 vivid 分支。以格半径 s、棋子基准半径 r = s × 0.985 为单位。
|
||||
|
||||
| 部件 | 当前实现 |
|
||||
| --- | --- |
|
||||
| 分格／轨道 | 分格 max(1, s × 0.024)，轨道外缘 max(4, s × 0.16)，中心线 max(2.5, s × 0.10) |
|
||||
| 棋子正面 | 半径 r × 0.94 的圆角六边形，独立颜料色纯色填充 |
|
||||
| 硬边底层 | 同形向右 r × 0.04、向下 r × 0.07 偏移，颜色 #30264C |
|
||||
| 深色描边 | #30264C，线宽 r × 0.065 |
|
||||
| 白色短划 | 左上方短线，线宽 r × 0.055；用于贴纸感 |
|
||||
| 箭头 | 实心七点箭头，尺度 r × 0.58，颜色取本套 pigments.arrow |
|
||||
|
||||
棋子全部由多边形和线绘制，不使用 calm 的棋子 PNG。轨道几何与主玩法一致，颜色取该主题展开后的 materials，不能把装饰短线当作新路径。
|
||||
|
||||
## 五种主题
|
||||
|
||||
| 主题 ID | 阶段 | 名称 | 独立用色方向 |
|
||||
| --- | --- | --- | --- |
|
||||
| lagoon | 轻松 | 青柠派对 | 青柠大背景与奶油棋盘 |
|
||||
| apricot | 进阶 | 爆橙热浪 | 亮橙环境、明黄棋盘与冷色棋子 |
|
||||
| lavender | 烧脑 | 钴蓝电场 | 纯钴蓝环境、荧光青柠棋盘 |
|
||||
| rose | 挑战 | 荧粉冲刺 | 荧光粉舞台与明黄、蓝绿 |
|
||||
| midnight | 每周挑战 | 黑光嘉年华 | 深紫黑底、荧光绿轨道 |
|
||||
|
||||
完整色值和每个主题的 4/7/9/12 色有序 palette 见 tokens.json；源为 [art-directions.js](../../../src/art-directions.js)。12 色独立于原版。主题背景保留较高 HSL 饱和度；当前测试要求至少 0.65。箭头按 4.5:1 门槛在白与 #172D39 中选取。
|
||||
|
||||
## 控件与边界
|
||||
|
||||
顶部控件与通知沿用深轮廓和贴纸风格。底部道具服从共用的扁平要求：撤销电青、重来亮粉、提示明黄，3px 深色边线，不加棋子的偏移硬阴影。顶部风格不能覆盖 game-tools.css 的最后加载规则。
|
||||
|
||||
## 验收与接入
|
||||
|
||||
使用 `artDirection('vivid')` 和 `directionTheme(direction, themeId, colorCount)`；完整流程见 shared.md。
|
||||
|
||||
- 五主题都应与原版明显不同，保持高纯度用色，棋子与底盘容易分离。
|
||||
- 黑光主题检查浅色轨道和深色板面，其他主题检查深线与亮板面的关系。
|
||||
- 静态、移动、碰撞时都使用同一贴纸轮廓和箭头。
|
||||
- 底部道具无阴影；原生端尚未接入并实机验收此套风格。
|
||||
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": "vivid",
|
||||
"artStyle": "vivid",
|
||||
"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": "#4A24E8",
|
||||
"documentBackground": "#FFFCF0",
|
||||
"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": "#2455E8",
|
||||
"arrow": "#FFFFFF"
|
||||
},
|
||||
{
|
||||
"index": 1,
|
||||
"name": "热粉",
|
||||
"color": "#E52879",
|
||||
"arrow": "#172D39"
|
||||
},
|
||||
{
|
||||
"index": 2,
|
||||
"name": "柠檬黄",
|
||||
"color": "#FFE13E",
|
||||
"arrow": "#172D39"
|
||||
},
|
||||
{
|
||||
"index": 3,
|
||||
"name": "电紫",
|
||||
"color": "#7136D8",
|
||||
"arrow": "#FFFFFF"
|
||||
},
|
||||
{
|
||||
"index": 4,
|
||||
"name": "深青",
|
||||
"color": "#007C70",
|
||||
"arrow": "#FFFFFF"
|
||||
},
|
||||
{
|
||||
"index": 5,
|
||||
"name": "火橙",
|
||||
"color": "#FF622C",
|
||||
"arrow": "#172D39"
|
||||
},
|
||||
{
|
||||
"index": 6,
|
||||
"name": "荧光绿",
|
||||
"color": "#BBE929",
|
||||
"arrow": "#172D39"
|
||||
},
|
||||
{
|
||||
"index": 7,
|
||||
"name": "钴蓝",
|
||||
"color": "#074DFF",
|
||||
"arrow": "#FFFFFF"
|
||||
},
|
||||
{
|
||||
"index": 8,
|
||||
"name": "警示红",
|
||||
"color": "#EB174E",
|
||||
"arrow": "#172D39"
|
||||
},
|
||||
{
|
||||
"index": 9,
|
||||
"name": "亮橘",
|
||||
"color": "#FF9500",
|
||||
"arrow": "#172D39"
|
||||
},
|
||||
{
|
||||
"index": 10,
|
||||
"name": "电光青",
|
||||
"color": "#08E8E1",
|
||||
"arrow": "#172D39"
|
||||
},
|
||||
{
|
||||
"index": 11,
|
||||
"name": "激光紫",
|
||||
"color": "#A92BFF",
|
||||
"arrow": "#FFFFFF"
|
||||
}
|
||||
],
|
||||
"themes": [
|
||||
{
|
||||
"id": "lagoon",
|
||||
"label": "轻松",
|
||||
"name": "青柠派对",
|
||||
"background": "#B8F34A",
|
||||
"ink": "#12202A",
|
||||
"materials": {
|
||||
"board": "#FFFBE7",
|
||||
"boardGrid": "#AB9C82",
|
||||
"track": "#30264C",
|
||||
"trackHalo": "#FFFBE7"
|
||||
},
|
||||
"anchorPalette": [
|
||||
0,
|
||||
4,
|
||||
2,
|
||||
1,
|
||||
3,
|
||||
5,
|
||||
6
|
||||
],
|
||||
"palettes": {
|
||||
"4": [
|
||||
0,
|
||||
4,
|
||||
2,
|
||||
1
|
||||
],
|
||||
"7": [
|
||||
0,
|
||||
4,
|
||||
2,
|
||||
1,
|
||||
3,
|
||||
5,
|
||||
6
|
||||
],
|
||||
"9": [
|
||||
0,
|
||||
4,
|
||||
2,
|
||||
1,
|
||||
3,
|
||||
5,
|
||||
6,
|
||||
7,
|
||||
8
|
||||
],
|
||||
"12": [
|
||||
0,
|
||||
4,
|
||||
2,
|
||||
1,
|
||||
3,
|
||||
5,
|
||||
6,
|
||||
7,
|
||||
8,
|
||||
9,
|
||||
10,
|
||||
11
|
||||
]
|
||||
},
|
||||
"contrast": {
|
||||
"sceneText": 12.60682592893418,
|
||||
"trackOnBoard": 13.40477966198369
|
||||
}
|
||||
},
|
||||
{
|
||||
"id": "apricot",
|
||||
"label": "进阶",
|
||||
"name": "爆橙热浪",
|
||||
"background": "#FF771B",
|
||||
"ink": "#12202A",
|
||||
"materials": {
|
||||
"board": "#FFEF45",
|
||||
"boardGrid": "#B78335",
|
||||
"track": "#462654",
|
||||
"trackHalo": "#FFEF45"
|
||||
},
|
||||
"anchorPalette": [
|
||||
7,
|
||||
3,
|
||||
10,
|
||||
8,
|
||||
2,
|
||||
0,
|
||||
11
|
||||
],
|
||||
"palettes": {
|
||||
"4": [
|
||||
7,
|
||||
3,
|
||||
10,
|
||||
8
|
||||
],
|
||||
"7": [
|
||||
7,
|
||||
3,
|
||||
10,
|
||||
8,
|
||||
2,
|
||||
0,
|
||||
11
|
||||
],
|
||||
"9": [
|
||||
7,
|
||||
3,
|
||||
10,
|
||||
8,
|
||||
2,
|
||||
0,
|
||||
11,
|
||||
1,
|
||||
4
|
||||
],
|
||||
"12": [
|
||||
7,
|
||||
3,
|
||||
10,
|
||||
8,
|
||||
2,
|
||||
0,
|
||||
11,
|
||||
1,
|
||||
4,
|
||||
5,
|
||||
6,
|
||||
9
|
||||
]
|
||||
},
|
||||
"contrast": {
|
||||
"sceneText": 6.246500288112486,
|
||||
"trackOnBoard": 10.616992375930863
|
||||
}
|
||||
},
|
||||
{
|
||||
"id": "lavender",
|
||||
"label": "烧脑",
|
||||
"name": "钴蓝电场",
|
||||
"background": "#3E42EE",
|
||||
"ink": "#FFFFFF",
|
||||
"materials": {
|
||||
"board": "#C9F849",
|
||||
"boardGrid": "#789344",
|
||||
"track": "#252269",
|
||||
"trackHalo": "#C9F849"
|
||||
},
|
||||
"anchorPalette": [
|
||||
2,
|
||||
9,
|
||||
1,
|
||||
10,
|
||||
6,
|
||||
5,
|
||||
8
|
||||
],
|
||||
"palettes": {
|
||||
"4": [
|
||||
2,
|
||||
9,
|
||||
1,
|
||||
10
|
||||
],
|
||||
"7": [
|
||||
2,
|
||||
9,
|
||||
1,
|
||||
10,
|
||||
6,
|
||||
5,
|
||||
8
|
||||
],
|
||||
"9": [
|
||||
2,
|
||||
9,
|
||||
1,
|
||||
10,
|
||||
6,
|
||||
5,
|
||||
8,
|
||||
0,
|
||||
3
|
||||
],
|
||||
"12": [
|
||||
2,
|
||||
9,
|
||||
1,
|
||||
10,
|
||||
6,
|
||||
5,
|
||||
8,
|
||||
0,
|
||||
3,
|
||||
4,
|
||||
7,
|
||||
11
|
||||
]
|
||||
},
|
||||
"contrast": {
|
||||
"sceneText": 6.524329011511401,
|
||||
"trackOnBoard": 11.251830170037788
|
||||
}
|
||||
},
|
||||
{
|
||||
"id": "rose",
|
||||
"label": "挑战",
|
||||
"name": "荧粉冲刺",
|
||||
"background": "#FF3588",
|
||||
"ink": "#12202A",
|
||||
"materials": {
|
||||
"board": "#FFF4CE",
|
||||
"boardGrid": "#C491A1",
|
||||
"track": "#502369",
|
||||
"trackHalo": "#FFF4CE"
|
||||
},
|
||||
"anchorPalette": [
|
||||
0,
|
||||
6,
|
||||
10,
|
||||
2,
|
||||
7,
|
||||
4,
|
||||
9
|
||||
],
|
||||
"palettes": {
|
||||
"4": [
|
||||
0,
|
||||
6,
|
||||
10,
|
||||
2
|
||||
],
|
||||
"7": [
|
||||
0,
|
||||
6,
|
||||
10,
|
||||
2,
|
||||
7,
|
||||
4,
|
||||
9
|
||||
],
|
||||
"9": [
|
||||
0,
|
||||
6,
|
||||
10,
|
||||
2,
|
||||
7,
|
||||
4,
|
||||
9,
|
||||
1,
|
||||
3
|
||||
],
|
||||
"12": [
|
||||
0,
|
||||
6,
|
||||
10,
|
||||
2,
|
||||
7,
|
||||
4,
|
||||
9,
|
||||
1,
|
||||
3,
|
||||
5,
|
||||
8,
|
||||
11
|
||||
]
|
||||
},
|
||||
"contrast": {
|
||||
"sceneText": 4.83248512643413,
|
||||
"trackOnBoard": 10.688104062178175
|
||||
}
|
||||
},
|
||||
{
|
||||
"id": "midnight",
|
||||
"label": "每周挑战",
|
||||
"name": "黑光嘉年华",
|
||||
"background": "#1B104D",
|
||||
"ink": "#FFFFFF",
|
||||
"materials": {
|
||||
"board": "#35225D",
|
||||
"boardGrid": "#837B9F",
|
||||
"track": "#D9FF55",
|
||||
"trackHalo": "#35225D"
|
||||
},
|
||||
"anchorPalette": [
|
||||
10,
|
||||
2,
|
||||
6,
|
||||
1,
|
||||
9,
|
||||
11,
|
||||
5
|
||||
],
|
||||
"palettes": {
|
||||
"4": [
|
||||
10,
|
||||
2,
|
||||
6,
|
||||
1
|
||||
],
|
||||
"7": [
|
||||
10,
|
||||
2,
|
||||
6,
|
||||
1,
|
||||
9,
|
||||
11,
|
||||
5
|
||||
],
|
||||
"9": [
|
||||
10,
|
||||
2,
|
||||
6,
|
||||
1,
|
||||
9,
|
||||
11,
|
||||
5,
|
||||
0,
|
||||
3
|
||||
],
|
||||
"12": [
|
||||
10,
|
||||
2,
|
||||
6,
|
||||
1,
|
||||
9,
|
||||
11,
|
||||
5,
|
||||
0,
|
||||
3,
|
||||
4,
|
||||
7,
|
||||
8
|
||||
]
|
||||
},
|
||||
"contrast": {
|
||||
"sceneText": 17.102604907549345,
|
||||
"trackOnBoard": 11.952226494271752
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
Reference in New Issue
Block a user