usbharu
/
misskey
mirror of https://github.com/misskey-dev/misskey.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

bubble-game: Use setInterval instead of requestAnimationFrame 

This makes sure Misskey's Bubble Game always runs at a consistent rate, even when the monitor isn't 60hz
This commit is contained in:
CenTdemeern1 2024-10-28 17:52:08 +01:00
parent 3c4d77711e
commit 2fe3618926
2 changed files with 18 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

33
packages/frontend/src/pages/drop-and-fusion.game.vue
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);
});
}

2
packages/misskey-bubble-game/src/game.ts
View File

@ -51,7 +51,7 @@ export class DropAndFusionGame extends EventEmitter<{
public readonly DROP_COOLTIME = 30; // frame
public readonly PLAYAREA_MARGIN = 25;
private STOCK_MAX = 4;
private TICK_DELTA = 1000 / 60; // 60fps
public readonly TICK_DELTA = 1000 / 60; // 60fps
public frame = 0;
public engine: Matter.Engine;