HexTrails/design/directions/macaron/design.md

07 · 马卡龙

设计 ID：macaron · 渲染风格：macaron · 英文名：MACARON。2026-09-14 参考 Meowdoku（喵喵数独）的设计语言制作，可与其他方案同时保留。参考分析与实机对照见 docs/art-proposal-macaron.html。

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

设计目标

从 Meowdoku 借来的是一套"奶油世界 + 白卡片 + 糖果色块 + 白色粗记号"的语言：奶油色世界上托一张白色软托盘，六角格像带白缝的软糖砖，藕紫色轨道压在糖砖上；棋子是糖果色圆角六角，白色贴纸边，十二色统一粗圆头白箭头。所有状态用颜色和弹跳表达，不用描边和阴影：路线点亮成棋子自己的浅色，碰撞处橘红打叉，出场从左上角一波弹开，离场撒星。文字是藕紫褐色，行动色只有一种橙。

棋盘与棋子怎么画

以格半径 s 为单位，复用 renderer.js 的 macaron 分支和 token-art.js 的 macaron 分支。圆角六角由 tile-shape.js 的 roundedHex(x, y, r, 0.16) 生成。

部件	当前实现
画布边距	layout.pad = 0.3：布局时每一侧多留 0.3 格半径；同时画布向左右各多伸 8px 到外壳内边距里（.canvas-wrap 负外边距），所以棋盘尺寸与其他方案相同，出口处的冲出与消融仍落在画布内
托盘	全部格面外扩 0.34s 后取凸包，转角圆化半径 0.9s，纯色 tray（白），随棋盘旋转
托盘阴影	两层不透明色阶：外层再放大 0.06s、下移 0.20s 用 shadowSoft；内层下移 0.10s 用 shadow。偏移在屏幕坐标里施加，旋转时保持向下
糖砖（格面）	圆角六角，半径 0.90s，圆角 0.16；格与格之间是 0.17s 的白缝，不画格线
环带色	从棋盘中心格向外按六角距离分环，三色循环 rings[d % 3]；只表达位置，旋转后不变
轨道	track 藕紫褐（每个世界一档），单层，宽 clamp(0.11s, 2.2, 6.5)，圆头圆接；跨过白缝连续画，路线不断开；只有板边端点内收到 0.90s − 轨宽/√3
棋子	圆角六角，半径 0.90s，正好盖满糖砖，圆角 0.16，纯色面；白色贴纸边宽 0.10r，与白缝连成一体。轨道从棋子底下钻过：白缝里的一小段一直画到白边为止，和空砖之间的画法一致，所以看得出哪几条轨道通向这枚棋子；不再画底座
箭头	白色线条：杆从 −0.34r 到 0.30r，头两笔到 ±0.30r；线宽 0.20r，圆头，十二色统一
路线点亮	预览或行进中路线经过的糖砖改用棋子色调白 80%（行进中 84%）；被挡时用 blush 橘奶色
预览路线	棋子本色一根粗线 1.15 × 轨宽，画在轨道上、棋子下；被挡只画到接触点，末端橘红叉
碰撞	接触时被撞格改 blush，接触点画橘红 blocked 叉，大小随 impact 变化；回弹沿用共用碰撞动画
提示	两层实心圆角六角光晕：hintGlow 1.02s、hint 0.94s，露出棋子外一圈蜂蜜黄
出场	新棋盘时糖砖、轨道、棋子按左上到右下的顺序缩放弹入：每格延迟 = 归一化位置 × 0.55，各自 0.45 段，ease-out 回弹 5%，总长 720ms
离场	滑行沿用共用时序；到达出口后是 640ms 的收束（exitDuration 把窗口从共用的 180ms 放宽）：前 45% 棋子沿出口方向减速冲出 0.55s（三次 ease-out），大半个身体越过托盘边缘；从 15% 起实心面、白边在 20% 内淡掉，箭头在 25% 内淡掉；面被一层同色圆点阵接管（间距 0.17s、半径 0.115s、六角排列、内缩到 0.82r），圆点跟着棋子走，并从外圈向中心依次化掉：开始时刻 = 0.16 + 0.38 × (1 − 到边缘的比例) + 0.16 × 噪声，各自用 0.28 段缩小到 0、颜色向白调 45%、透明度降到 40%、沿固定随机方向漂 0.14s 并上浮 0.10s。没有尾迹、碎片和飞出的粒子
计数	棋子离场后 .moves-bubble 弹一次（1 → 1.18 → 1，420ms）
通关庆祝	最后一枚棋子离场后先在棋盘上放 720ms 的清空涟漪（state.celebrate）：糖砖按到中心格的环数依次鼓起 8% 并向白调亮 35% 再落回，每环延迟 0.07、各自 0.45 段的正弦脉冲；轨道不随之缩放；结束后才淡入结算

不使用棋子图集，不使用滤镜调色。全部造型由多边形、折线与圆组成；阴影是两层不透明多边形，不是模糊。

五种主题

主题 ID	阶段	名称	用色方向
lagoon	轻松	奶油	奶油底，蜜桃奶／奶黄／薄荷奶三环，草莓、蓝莓、抹茶领色
apricot	进阶	蜜桃	蜜桃奶油底，蜜柑与海盐蓝领色
lavender	烧脑	香芋	香芋奶油底，香芋紫与玫瑰领色
rose	挑战	草莓牛奶	草莓牛奶底，玫瑰与抹茶对照
midnight	每周挑战	可可夜	可可色底，白托盘像被灯照亮的甜品盘

完整色值、环带色、托盘与阴影色、每主题 4/7/9/12 色有序 palette 见 tokens.json 与 art-directions.js。场景文字用藕紫褐（可可夜用奶白），对世界色 5.5 : 1 以上；十二色白箭头最低 3.30 : 1；轨道对三种糖砖最低 3.28 : 1（奶油世界）。

主游戏中本方案的主题按旅程切换：五个世界平均铺在整条主线上，最后一段为可可夜；?theme= 参数仍可强制指定。

控件与边界

• 字体：资源圆体 Resource Han Rounded（用户指定，SIL OFL），Medium 500 与 Bold 700 两档子集在 assets/fonts，@font-face 写在 game-tools.css 的 macaron 段；其后回落 ui-rounded、Arial Rounded、Nunito、PingFang。界面里 600 以上的字重落到 Bold，400–500 落到 Medium。子集之外的字符按字形回落到系统字体，新增文案要补进字符表。
• 顶部选关、设置：白色圆底加柔和投影，图标通过遮罩着色为深藕紫；不用滤镜。
• 关卡号与待解计数：两列并排放在两枚圆钮之间，小标签在上（关卡 / 待解，淡藕紫 12px），大数字在下（26px 粗体深藕紫）；由 direction.hud 提供标签，app.js 生成；数字在棋子离场后弹一次。教学关显示 入门 N/3。
• 通知：白色气泡，顶部小尾巴指向计数胶囊，前置一枚橙点；位置沿用 shared.md（步数下方）。
• 旋转按钮：无底座，图标 60px 用世界色对应的浅藕紫着色，标签 12px 藕紫；位置由 app.js 的 placeRotation 按棋盘几何计算（layout.rotation = 'under-board'，layout.rim = 0.40）：取下方斜边中点，向下作垂线到道具上缘，按钮中心放在垂线中点。旋转不占独立布局行，与 06 相同，是与 shared.md 的一处出入。
• 撤销、重来、提示：参考作品的白色圆钮。白底 64px、柔和投影、无描边；图标通过图集遮罩着色为海盐蓝 #4A91D4 / 玫瑰 #D06E93 / 蜂蜜褐 #C98A0E；标签藕紫；禁用 45% 透明。这是与 shared.md「道具无阴影」的一处有意出入，2026-09-14 用户确认只允许本方案使用，不向其他方案放开。
• 结算：参考作品的深色庆祝画面，而且是全屏覆盖层：<dialog> 铺满整个视口（inset 0、无最大宽高、无圆角、无卡片），320ms 淡入，遮罩 rgba(40,26,32,.86) 加模糊；内容居中，奶白发光标题 25px，副标题浅奶色，金色发光星星后有 640px 缓慢旋转的奶黄射线和一次糖果色纸屑，全部铺在整屏上不被裁切；主按钮是橙色胶囊 #E07416（白字 3.1 : 1）底边 4px 深橙，次按钮是半透明奶白胶囊。失败画面用同一覆盖层。
• 选关与设置：白色圆角卡片弹入（0.86 → 1，380ms 回弹），顶部一条蜜桃色标题带，右上角白色圆形关闭钮；当前关橙色胶囊，普通关奶油方块，完成关薄荷奶。
• 棋盘居中、金色奖励继承 shared.md。

验收与接入

使用 artDirection('macaron') 和 directionTheme(direction, themeId, colorCount)；主游戏 ?design=macaron。

• 检查五个世界的托盘、阴影方向与环带色；可可夜下托盘保持奶白。
• 检查 37 / 61 / 91 格下白缝与轨道宽度：91 格时白缝约 3px、轨道 2.2px，箭头仍可读。
• 检查出场动画在换关、重来、教学三处都播放一次；旋转、撤销时不重播；清空涟漪只播一次且全屏结算在它之后淡入，射线与纸屑不被任何盒子裁切。
• 检查棋子砖面上没有轨道露出，白缝里通向棋子的轨道段可见，空格之间的轨道连续不断；提示路线连续画过白缝。
• 检查路线点亮只覆盖路线经过的格；被挡路线在接触点结束并打叉。
• 检查左右两侧出口的消融完整留在画布内，没有被画布边裁掉；prefers-reduced-motion 下取消出场、消融、庆祝与计数弹跳。
• 原生端需实现两层不透明阴影、圆角六角与遮罩着色；尚未完成原生实机验收。