Files
NumberSwipe_New/docs/2026-10-21_程序化美术-投影字效精修-report.md

4.6 KiB
Raw Permalink Blame History

明亮教具室 · 投影、数字和按钮精修

日期:2026-10-21。修订:v3。基于用户提供的941×1672参考图和v2实际运行画面进行逐项核对。

参考图分析与修正

参考图的特征 v2差异 本次修正
棋块外沿有近距离黄棕晕染,下方另有短投影 只有普通投影,受光与暗部偏灰 暖色近边晕染与落地投影分开绘制;紫面暗部用蓝紫混色,奶油面用暖棕混色,不再统一压黑
底盘下方是向外衰减的阴影 向下复制底盘轮廓并填充黄色,出现额外实体下沿 底盘设为零挤出厚度,只用真实面alpha投影;底盘内部暗部减弱为淡暖色
小块数字按可见字形居中,大块数字位于左上单元区 使用字体行框中心,大块统一在整体中心 使用实际字形包围盒;大块与异形使用左上占用单元锚点,逻辑命中中心保持不变
白字有柔光和非常短的暗边 白字基本平涂,只有普通下投影 独立生成字形缓存,叠短紫暗边、白色柔光和清楚的浅色字面
深色数字有淡材质,并非纯黑 深色数字纯色 使用暖深墨渐变与稳定微颗粒,保持轻微、静止、不影响阅读
按钮的图标较大、短标签较小,二者有明确间隔 图标视觉尺寸不一致,文字偏规整且与图标争抢 重画回转、撤销、灯泡图标;按视觉质量分别校正尺寸;使用圆润短标签字体,重新设定上下留白

大块数字移动只是美术排版调整,仍保留一个逻辑块只走一步。通道格继续使用专用中心通道与数字角标,六边格保留中心布局;墙、门、类别和奇偶语义不变。

实现位置

  • src/bright-classroom/cushion.mjs:从真实面alpha生成暖晕与投影,底盘不再复制实体底层;材质暗部支持着色混合。
  • src/bright-classroom/theme.mjs:按字形墨迹边界定位文字;原生Canvas仅返回文字宽度时,通过一次离屏alpha扫描测量字形边界。
  • src/bright-classroom/number-stamp.mjs:数字柔光、短暗边、淡渐变、固定颗粒与4MiB缓存预算。字形与材质像素均运行时生成。
  • src/bright-classroom/geometry.mjs、board-renderer.mjs:区分数字锚点与逻辑中心,组合规则继续独立排版。
  • src/bright-classroom/ui.mjs:按钮图文比例、图标轮廓和短标签字体。
  • src/hints.mjs:已走块遮罩扩展到外沿晕染区域,避免提示压住新的材质效果。

按钮短标签使用站酷快乐体的改名子集 NumberSwipePlayful.ttf;数字继续使用Nunito800,正文继续使用Noto Sans SC。字体源、字集与哈希记录于 fonts/manifest.json;相关OFL一并交付。来源:站酷快乐体。

验证与证据

Evidence Finding Path
用户参考图与v2画面对照 底盘实体复制层与真实投影不同,字形行框不等于视觉中心 分离投影与挤出厚度,按字形边界定位
node --test bright-classroom.test.mjs hints.test.mjs lessons.test.mjs audio-copy.test.mjs:33/33通过 几何、内孔、类别、字形居中、原生宽度测量回退和零厚度底盘检查通过 新渲染模块→模块验证
node smoke.mjs:200/200通过 关卡唯一解、触摸通关、撤销、重开、提示、教学隔离、存档和前后台保持原行为 实际game.js→模拟微信验收
浏览器 qa/hints.html:200/200采样像素一致 新字效与外沿晕染不被提示改变 实际Canvas→提示与撤销重画对照
浏览器实际检查基础大块与320×568的36块关卡 普通数字、大块锚点、按钮图文与底盘投影可检查 样张观察→保存运行截图

没有新增图片游戏资源。截图仅用于QA,不进入运行包。微信手机的最终显示和性能仍需设备预览,浏览器与模拟微信结果不代替真机记录。

交付

导入包SHA-256:7A490BD9352563455F65501AF0EA0078839ECF22BE16DEB6712FF4DBA07D7ADD。保留此前发布包;解压新包导入微信开发者工具,重新编译并生成预览。