v0.1.13: 金碧山河(SVG/Canvas 素材 + 动效系统 + 舞美重装)

【素材生成(零外部资源)】
- scripts/gen-art.mjs 程序化产出 5 枚 SVG 资产:金碧山水全景(山脊/金乌/雁阵/水纹)、
  祥云纹带、回纹角饰、仙鹤、星辰层 → src/renderer/assets/gen/,npm run gen:art 可重跑

【Canvas 动效系统(单 RAF)】
- ui/fx-canvas.ts:灵雾粒子流(常驻随季色)/金砂喷发(spark)/刀光(blade)/涟漪(ripple),
  单实例防重入、防膨胀 cap、GPU 友好、visibility 自停
- ui/fx.ts + core/fxqueue.ts:FxGate 统一发射闸——档位过滤(柔/标/全)、
  reduced-motion 降级、单帧批处理防竞态、deltas 纯函数(漂字差分)

【舞美】
- 金碧背景层 bg-scene(全页面,随季节 hue-rotate 色温渐变)
- 顶栏时辰司:季节印(春·熏风/夏·蝉鸣/秋·霜叶/冬·雪静)+年月进度环(SVG 弧段)+节气名
- 成员卡:闭关 aura 三点浮动 + 修为流光 shimmer
- 消息流:good 事件(突破/获宝/落槌)→金砂喷发,战事→刀光扫过战报
- Boot 卷轴展开过渡;drift 漂字层(独立节点队列不覆盖,8 条裁剪)
- 设置页动效三档(柔和/标准/全开)

【竞态规避】
- RAF 单循环 guard、particles cap 裁剪、FxGate draining 互斥、漂字节点附加不覆盖、
  visibility 自动降级、advance in-flight 闸沿用

【测试】937→967(timesense 矩阵 15 + FxGate 竞态/档位/deltas 15)
全量 35 套件通过;金钟罩零漂移(纯 UI/素材层);typecheck/build 通过
This commit is contained in:
2026-08-23 12:50:18 +08:00
parent 607624695d
commit c52ecffcd9
20 changed files with 904 additions and 6 deletions
+21
View File
@@ -1,5 +1,7 @@
import { useState } from 'react'
import { useGameStore } from '../store'
import { examplePlugin } from '../../game/engine/demo-plugins'
import { ensureFx } from '../fx'
import { SYSTEM_DEFS } from '../../game/engine/capabilities'
import { buildBiography } from '../../game/core/biography'
@@ -19,6 +21,11 @@ export default function SettingsPanel() {
const soundOn = useGameStore((s) => s.soundOn)
const toggleSound = useGameStore((s) => s.toggleSound)
const setNextToast = useGameStore((s) => s.setNextToast)
const [fxMode, setFxModeState] = useState('std')
const setFxMode = (m: 'soft' | 'std' | 'full') => {
setFxModeState(m)
ensureFx().setMode(m)
}
if (!world) return null
const hasDemo = world.pluginList().some((p) => p.id === 'demo-peaks')
@@ -156,6 +163,20 @@ export default function SettingsPanel() {
<button className="btn btn-sm" onClick={toggleSound}>{soundOn ? '开(点击关)' : '关(点击开)'}</button>
</td>
</tr>
<tr>
<td>/</td>
<td>
{(['soft', 'std', 'full'] as const).map((m) => (
<button
key={m}
className={`btn btn-sm ${fxMode === m ? 'btn-primary' : ''}`}
onClick={() => { setFxMode(m); bump() }}
>
{m === 'soft' ? '柔和' : m === 'std' ? '标准' : '全开'}
</button>
))}
</td>
</tr>
<tr>
<td></td>
<td><button className="btn btn-sm" onClick={() => setSpeed(0)}></button></td>