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

CHANGELOG.md

@@ -22,6 +22,7 @@
 - Fix: デッキのタイムラインカラムで「センシティブなファイルを含むノートを表示」設定が使用できなかった問題を修正
 - Fix: Encode RSS urls with escape sequences before fetching allowing query parameters to be used
 - Fix: リンク切れを修正
+- Fix: Ensure physics run the same across different framerates
 
 ### Server
 - Enhance: 起動前の疎通チェックで、DBとメイン以外のRedisの疎通確認も行うように  

packages/frontend/package.json

@@ -50,7 +50,7 @@
 		"insert-text-at-cursor": "0.3.0",
 		"is-file-animated": "1.0.2",
 		"json5": "2.2.3",
-		"matter-js": "0.19.0",
+		"matter-js": "0.20.0",
 		"mfm-js": "0.24.0",
 		"misskey-bubble-game": "workspace:*",
 		"misskey-js": "workspace:*",

packages/frontend/src/pages/drop-and-fusion.game.vue

@@ -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);
 	});
 }
 

packages/misskey-bubble-game/src/game.ts

@@ -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;