perf: decode-ahead sprite cache; cache bust v56

Sprites.load() now awaits img.decode() before a tier image counts as
ready, so every sprite is fully decoded during the title screen and
first-draw decode jitter disappears on weak machines. Headless smoke
keeps working via the typeof-decode fallback. Asset URLs bump to v=56.
This commit is contained in:
Quintine committed 2026-08-12 18:05:11 +10:00
1 parent 4b9e4a1e97
commit 8c2141c3f1
3 files changed
+26 -26

No files matched your search

+22 -22
View File
@@ -6,32 +6,32 @@
<meta name="theme-color" content="#0a0305">
<link rel="icon" href="data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 64 64%22><text y=%2252%22 x=%2250%22 text-anchor=%22middle%22 dominant-baseline=%22middle%22 font-size=%2252%22>🔪</text></svg>">
<title>MEATSLICER</title>
<link rel="stylesheet" href="css/style.css?v=55">
<link rel="stylesheet" href="css/style.css?v=56">
</head>
<body>
<div id="wrap">
<canvas id="game" width="960" height="640"></canvas>
</div>
<script src="js/utils.js?v=55"></script>
<script src="js/state.js?v=55"></script>
<script src="js/input.js?v=55"></script>
<script src="js/sfx.js?v=55"></script>
<script src="js/sfxbank.js?v=55"></script>
<script src="js/audio.js?v=55"></script>
<script src="js/sprites.js?v=55"></script>
<script src="js/particles.js?v=55"></script>
<script src="js/weapons.js?v=55"></script>
<script src="js/bullets.js?v=55"></script>
<script src="js/pickups.js?v=55"></script>
<script src="js/items.js?v=55"></script>
<script src="js/perks.js?v=55"></script>
<script src="js/enemies.js?v=55"></script>
<script src="js/bosses.js?v=55"></script>
<script src="js/rooms.js?v=55"></script>
<script src="js/player.js?v=55"></script>
<script src="js/hud.js?v=55"></script>
<script src="js/help.js?v=55"></script>
<script src="js/debug.js?v=55"></script>
<script src="js/main.js?v=55"></script>
<script src="js/utils.js?v=56"></script>
<script src="js/state.js?v=56"></script>
<script src="js/input.js?v=56"></script>
<script src="js/sfx.js?v=56"></script>
<script src="js/sfxbank.js?v=56"></script>
<script src="js/audio.js?v=56"></script>
<script src="js/sprites.js?v=56"></script>
<script src="js/particles.js?v=56"></script>
<script src="js/weapons.js?v=56"></script>
<script src="js/bullets.js?v=56"></script>
<script src="js/pickups.js?v=56"></script>
<script src="js/items.js?v=56"></script>
<script src="js/perks.js?v=56"></script>
<script src="js/enemies.js?v=56"></script>
<script src="js/bosses.js?v=56"></script>
<script src="js/rooms.js?v=56"></script>
<script src="js/player.js?v=56"></script>
<script src="js/hud.js?v=56"></script>
<script src="js/help.js?v=56"></script>
<script src="js/debug.js?v=56"></script>
<script src="js/main.js?v=56"></script>
</body>
</html>
+1 -1
View File
@@ -111,7 +111,7 @@ const SfxBank = {
if (this.buffers.has(name) || this.pending.has(name) || this.failed.has(name)) return;
const file = this.FILES[name];
if (!file || !this.ctx || typeof fetch !== 'function') return;
const job = fetch('/assets/sfx/' + encodeURIComponent(file) + '?v=55')
const job = fetch('/assets/sfx/' + encodeURIComponent(file) + '?v=56')
.then(r => { if (!r.ok) throw new Error('HTTP ' + r.status); return r.arrayBuffer(); })
.then(bytes => this.ctx.decodeAudioData(bytes))
.then(buffer => this.buffers.set(name, this.trim(buffer)))
+3 -3
View File
@@ -86,12 +86,12 @@ const Sprites = {
pending++;
const img = new Image();
const finish = () => { if (--pending === 0) G.imagesLoaded = true; };
img.onload = () => { this.imgs[name] = img; finish(); };
img.onload = () => { this.imgs[name] = img; if (typeof img.decode === 'function') img.decode().then(finish, finish); else finish(); };
img.onerror = () => {
if (hd && !img._sdRetry) { img._sdRetry = true; img.src = 'assets/' + name + '.png?v=55'; return; }
if (hd && !img._sdRetry) { img._sdRetry = true; img.src = 'assets/' + name + '.png?v=56'; return; }
finish();
};
img.src = hd ? 'assets/hd/' + name + '.webp?v=55' : 'assets/' + name + '.png?v=55';
img.src = hd ? 'assets/hd/' + name + '.webp?v=56' : 'assets/' + name + '.png?v=56';
}
},