Files
HexTrails/design/directions/calm/design.md
T
cabinw 10cf93a324 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.
2026-09-13 13:24:34 +08:00

3.3 KiB
Raw Blame History

01 · 柔和原色

设计 ID:calm · 渲染风格:classic · 英文名:QUIET TRAILS。这是当前默认的基础方案,可与其他候选方案同时保留。

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

设计目标

低饱和环境、暖白底盘和哑光六角棋子,让注意力集中在弯曲轨道与方向。原有棋子是较鲜明的颜色;“柔和”主要指背景和整体气氛,不代表把全部棋子调成灰色。

棋盘与棋子怎么画

以格半径 s 为单位。复用 renderer.js 的 classic 回退分支和 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 的原图中心采样,由 sprites.js 提供裁切框。其余八色或图集未就绪时用纯色回退。保留共享箭头,不把方向烘焙进图集。

五种主题

主题 ID 阶段 名称 氛围
lagoon 轻松 薄荷浅湾 浅湾背景,蓝青与日光黄
apricot 进阶 杏色午后 杏底配珊瑚、鸢尾蓝
lavender 烧脑 鸢尾花园 柔紫背景,绿与冰川青
rose 挑战 玫瑰暮色 玫瑰背景与明亮暖色
midnight 每周挑战 午夜极光 深靛蓝环境,棋盘仍是暖白

完整环境色、文字色、棋盘材质与 4/7/9/12 色有序 palette 见 tokens.json。源为 design-tokens.js 的 LEVEL_THEMES / PIGMENTS。五主题共享基础棋盘材质;不能因为 midnight 是夜间环境就擅自把它的棋盘变深色。箭头按该色库的 3:1 对比度门槛选白色或深蓝灰。

控件与边界

底部道具保持圆形纯色底座:撤销蓝、重来紫、提示黄,均无阴影。顶部是紧凑的蓝灰导航控件。尺寸、通知位置、居中棋盘及金色奖励按 shared.md;角标只在设计示例出现。

修改此方案的基础语义色可能影响其他设计继承的面板、奖励与组件,需要检查全部五套。不要替换已接受图集,也不要把新增设计的颜料库复制到 PIGMENTS。

验收与接入

使用 artDirection('calm') → directionTheme(direction, themeId, colorCount) → drawScene(..., {theme})。详细代码和验证命令见 shared.md。

  • 对比前四色的图集版本与纯色回退,确认方向一致且形状没有脏边。
  • 检查移除、撤销、离场后颜色稳定;白/深箭头按对应色库切换。
  • 检查五主题文字与轨道识别度,尤其深背景中的暖白棋盘。
  • 现有 Cocos 示例可参考图集适配,但五套设计切换与当前动画尚未完成原生验收。