merge: fix(frontend): Ensure physics run consistently across different device framerates (!823)

View MR for information: https://activitypub.software/TransFem-org/Sharkey/-/merge_requests/823

Closes #684

Approved-by: dakkar <dakkar@thenautilus.net>
Approved-by: Marie <github@yuugi.dev>
This commit is contained in:
Marie 2024-12-17 21:50:39 +00:00
commit 241949da04
4 changed files with 41 additions and 43 deletions

View file

@ -53,7 +53,7 @@
"is-file-animated": "1.0.2",
"json5": "2.2.3",
"katex": "0.16.10",
"matter-js": "0.19.0",
"matter-js": "0.20.0",
"misskey-bubble-game": "workspace:*",
"misskey-js": "workspace:*",
"misskey-reversi": "workspace:*",

View file

@ -557,7 +557,7 @@ let bgmNodes: ReturnType<typeof sound.createSourceNode> | null = null;
let renderer: Matter.Render | null = null;
let monoTextures: Record<string, Blob> = {};
let monoTextureUrls: Record<string, string> = {};
let tickRaf: number | null = null;
let tickInterval: number | null = null;
let game = new DropAndFusionGame({
seed: seed,
gameMode: props.gameMode,
@ -663,13 +663,20 @@ function getTextureImageUrl(mono: Mono) {
}
}
function startTicking(tickFunction: () => void) {
tickInterval = window.setInterval(tickFunction, game.TICK_DELTA);
}
function stopTicking() {
if (tickInterval !== null) {
window.clearInterval(tickInterval);
tickInterval = null;
}
}
function tick() {
const hasNextTick = game.tick();
if (hasNextTick) {
tickRaf = window.requestAnimationFrame(tick);
} else {
tickRaf = null;
}
if (!hasNextTick) stopTicking();
}
function tickReplay() {
@ -700,11 +707,7 @@ function tickReplay() {
if (!hasNextTick) break;
}
if (hasNextTick) {
tickRaf = window.requestAnimationFrame(tickReplay);
} else {
tickRaf = null;
}
if (!hasNextTick) stopTicking();
}
async function start() {
@ -716,7 +719,7 @@ async function start() {
});
Matter.Render.run(renderer);
game.start();
window.requestAnimationFrame(tick);
startTicking(tick);
gameLoaded.value = true;
@ -803,9 +806,7 @@ function reset() {
function dispose() {
game.dispose();
if (renderer) Matter.Render.stop(renderer);
if (tickRaf) {
window.cancelAnimationFrame(tickRaf);
}
stopTicking();
}
function backToTitle() {
@ -829,7 +830,7 @@ function replay() {
});
Matter.Render.run(renderer);
game.start();
window.requestAnimationFrame(tickReplay);
startTicking(tickReplay);
});
}