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:
@@ -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。
|
||||
|
||||
- 五主题都应与原版明显不同,保持高纯度用色,棋子与底盘容易分离。
|
||||
- 黑光主题检查浅色轨道和深色板面,其他主题检查深线与亮板面的关系。
|
||||
- 静态、移动、碰撞时都使用同一贴纸轮廓和箭头。
|
||||
- 底部道具无阴影;原生端尚未接入并实机验收此套风格。
|
||||
Reference in New Issue
Block a user