feat: 比例适配、bgm 音源选择与 fps 限流,打包 v3

取景(issue 04)
- 新增 viewport-fitter.js:让立绘层缩放跟随背景图的 cover 缩放——背景放大多少倍、
  特效就放大多少倍。原先背景走 cover、立绘层走 contain,比例一变两者就分叉。
  16:9 下与作者设定逐像素一致(kv37 为 0 差异)。实测证伪了"contain 会裁掉作者视口"
  这个最初的判断:contain 在任何比例下都完整含住作者视口。
- 应用方式为原地改写 config.viewport 字段后调 setViewport(),不重建播放器;
  维护挂在 config.frame 上按画布比例增量进行(config.success 早于 setViewport,拿不到视口)。

WE 属性(issue 05)
- project.json 新增 bgm combo(所有壁纸音源的并集 + 「随预设」);所选项不属于当前壁纸时
  音频回落该壁纸默认,选择本身保留。
- fps 限流包裹实例 drawFrame 并接管排程。修掉两个实测缺陷:朴素丢帧会把 rAF 抖动放大成
  整拍丢失(目标 30fps 实测只有 22.5fps);fps:0 被真值判断吞掉导致无法取消限流。

打包(issue 06)
- project.json version 升至 3 并更新描述;preset 的 combo 取值保持 xilian/kv37 不变。
- preview.gif 821 KB → 347 KB(每 2 帧取 1 帧 + 128 色不抖动,逐帧与源帧像素完全相同)。
- index.html 加内联 favicon,消除 CEF 自动请求 /favicon.ico 造成的 404 报错。

其它
- dist/scripts/wallpaper-engine.js 移到 tools/:它没有任何入口引用,且环境判据依赖真实 WE
  并不存在的 wallpaperRegisterListener,一旦按它自己的说明挂进 index.html 会在生产环境自我激活。
- 修正死文件检查:原检查会拿文件名匹配到文件自身的内容,使这类文件漏网。
- 新增离线算式验证与 resize / 属性 / 全量验收三套浏览器测试脚本。
This commit is contained in:
Shuery committed 2026-09-19 20:29:25 +08:00
1 parent 4662856963
commit eb56efbd9e
22 files changed
+2766 -1012

No files matched your search

@@ -0,0 +1,36 @@
# 立绘层取景跟随背景图的 cover 缩放
立绘层(spine 特效层)的可见世界矩形不再按"含住作者视口"(contain)映射,
而是让它与背景图 `background-size: cover` 的缩放**同步**:背景放大多少倍,立绘层就放大多少倍。
## 问题
背景走 CSS `cover`(铺满、按需裁切),立绘层走播放器自带的 contain 映射。
两者只在作者调参的那个比例下一致,比例一变缩放就分叉。以 1080×1920 竖屏为例,
背景被放大约 1.78 倍,立绘层的世界高度却纹丝不动——特效与背景插画脱节。
需要说明的是:contain 本身**不会**裁掉作者视口。可见矩形是宽高比等于画布、
且恰好含住作者视口的最小矩形,所以作者视口在任何比例下都完整可见。
"负内边距在其它比例下会裁掉主体"这个最初的判断经实测证伪。
## 决定
- 参考比例取 `16/9`。该比例下取景与作者设定**逐像素一致**,保证已发布的观感不被改动。
- 其它比例:`V.h = V0.h × coverScale(参考比例) / coverScale(当前比例)`,中心不变,
其中 `V0` 是作者视口换算到参考比例后的可见矩形。等价于"立绘层相对背景插画永远 cover"。
- 应用方式是原地改写 `config.viewport` 字段后调 `player.setViewport(动画名)`,
绝不整体替换该对象:`setViewport()` 会无条件读 `config.viewport.animations[name]`,
换掉整个对象会在 `spine-player.js` 第 14973 行崩溃。
- 维护时机挂在 `config.frame` 回调(每帧相机计算之前),以画布比例作键。
`config.success` 不可用:它在 `setViewport` 之前触发,那时 `currentViewport` 还不存在。
- 预设可声明 `framing: "author"` 退回 contain 行为。
## 代价
21:9 与 9:16 下立绘层的可见范围会明显收窄(竖屏约收窄到 1/4 宽度),
因为要让特效跟着被放大 1.78 倍的背景走。这是刻意的:不这样做,特效就会与背景插画对不上。
16:9 不受影响。若某档壁纸不适合这个策略,用 `framing: "author"` 单独退回。
## 背景图比例从哪来
运行时读图片的 `naturalWidth / naturalHeight`,不在预设里重复写一个容易写错的数字。