Preferred way to isolate game logic in Rust backend and rendering on JavaScript frontend

[un-burro]

I'm practicing tauri + rust by implementing mini games and I want to keep as much of the game decisions as possible in rust and only use javascript to animate the game, however my implementation results in the ui flickering as the screen updates state. I'm first working on creating pong and I'm currently separating my game as follows

Frontend

1. I'm using requestAnimationFrame to try and control the fps and redraw the game scenes
2. To capture the user's keyboard inputs

Backend

1. Ball collisions
2. Paddle movement
3. Ball movement
4. Resetting the game

I'm sending the game variables to rust via tauri's invoke function and getting back the game state to update the ui for the next step. I've also implemented the game in pure solid.js as well and it runs smoothly. I understand that this is not ideal and expect it to run somewhat slower due to the additional communication overhead but the refresh rate is very noticable - I'd ideally like to offload the entire game loop to rust and only display the game animation in javascript but from my research, some considerable effort is required to get a game engine like bevy to handle the event loop and manage the ui or even a keyboard event listener (winit - I think tauri uses a fork of this somewhere) to play nicely with tauri and it also seems like overkill for my application.

I'm still a beginner to rust, does anyone have any suggestions for my implementation to improve the experience or what is the preferred approach to achieve what I'm trying to do?

I'm using a while loop with requestAnimationFrame to avoid recursion, when I reduce the refresh rate lower than 9 or when I remove the if (delta < refresh) block, then the ball and paddle don't display on the screen

index.tsx

import { useGame } from "./useGame";
import styles from "./styles.module.css";


export default function Pong() {

	const { canvas } = useGame();

	return (

		<canvas ref={canvas}
				class={styles.container} />

	);

}

useGame.tsx

import { onMount, onCleanup } from "solid-js";
import { loop } from "./utility";


export function useGame() {

	let canvas;
	let timer = 0;
	let animation;
	let keys = {};
	let paddle1Y = 0;
	let paddle2Y = 0;

	let ball = { x: 0, y: 0,
				 dx: 6, dy: 6 };

	const press = (event) => keys[event.key] = true;
	const release = (event) => keys[event.key] = false;

	onMount(() => {

		window.addEventListener("keydown", press);
		window.addEventListener("keyup", release);

		loop(canvas, ball,
			 paddle1Y, paddle2Y,
			 keys, timer);

	})

	onCleanup(() => {

		window.removeEventListener("keydown", press);
		window.removeEventListener("keyup", release);

		if (animation) {

			cancelAnimationFrame(animation);

		}

	})

	return { canvas: (html) => (canvas = html) };

}

utility.ts

import { invoke } from "@tauri-apps/api/core";


export async function loop(canvas, ball, paddle1Y, paddle2Y, keys, timer) {

	canvas.width = canvas.offsetWidth;
	canvas.height = canvas.offsetHeight;

	const xCenter = canvas.width / 2
	const yCenter = canvas.height / 2;
	const height = 100;
	const width = 10;
	const radius = 8;
	const speed = 7;
	const refresh = 9;

	ball.x = xCenter;
	ball.y = yCenter;
	paddle1Y = yCenter - height / 2;
	paddle2Y = paddle1Y;
	const paddle1X = canvas.width * 0.02;
	const paddle2X = canvas.width * 0.98 - width;

	const ctx = canvas.getContext("2d");

	while (true) {

		const time = await nextFrame();
		const delta = time - timer;

		if (delta < refresh) {

			continue;

		}

		timer = time;

		// clear screen
		ctx.clearRect(0, 0, canvas.width, canvas.height);
		ctx.fillStyle = "#111";
		ctx.fillRect(0, 0, canvas.width, canvas.height);

		const [ballX, ballY,
			   ballDx, ballDy,
			   y1Paddle, y2Paddle] = await invoke("computeGameState", {

			paddle1X: paddle1X,
			paddle1Y: paddle1Y,
			paddle2X: paddle2X,
			paddle2Y: paddle2Y,
			ballX: ball.x,
			ballY: ball.y,
			ballDx: ball.dx,
			ballDy: ball.dy,
			up1: keys["w"] || keys["W"] || false,
			down1: keys["s"] || keys["S"] || false,
			up2: keys["ArrowUp"] || false,
			down2: keys["ArrowDown"] || false,
			screenWidth: canvas.width,
			screenHeight: canvas.height

		});

		ball.x = ballX;
		ball.y = ballY;
		ball.dx = ballDx;
		ball.dy = ballDy;
		paddle1Y = y1Paddle;
		paddle2Y = y2Paddle;

		// draw updates
		ctx.fillStyle = "#fff";
		ctx.fillRect(paddle1X, paddle1Y, width, height);
		ctx.fillRect(paddle2X, paddle2Y, width, height);
		ctx.beginPath();
		ctx.arc(ball.x, ball.y, radius, 0, 2 * Math.PI);
		ctx.fill();

	}

}

async function nextFrame() {

	const duration = await new Promise(resolve => requestAnimationFrame(resolve));
	return duration;

}

services.rs

...

// mini games - pong
#[tauri::command]
pub async fn computeGameState(paddle1X: f64, paddle1Y: f64, paddle2X: f64, paddle2Y: f64, ballX: f64, ballY: f64, ballDx: f64, ballDy: f64, up1: bool, down1: bool, up2: bool, down2: bool, screenWidth: f64, screenHeight: f64) -> (f64, f64, f64, f64, f64, f64) {

	let mut x = ballX;
	let mut y = ballY;
	let mut dx = ballDx;
	let mut dy = ballDy;
	let mut leftPaddleY = paddle1Y;
	let mut rightPaddleY = paddle2Y;

	// move paddles
	movePaddles(up1, down1, up2, down2, &mut leftPaddleY, &mut rightPaddleY, &screenHeight).await;

	// ball colision
	collision(x, y, &mut dx, &mut dy, paddle1X, leftPaddleY, paddle2X, rightPaddleY, screenHeight).await;

	// move ball
	x += dx;
	y += dy;

	// reset game
	if ((x + constants::radius >= paddle2X + constants::width) ||
		(x - constants::radius <= paddle1X)) {

		x = screenWidth / 2.0;
		y = screenHeight / 2.0;
		leftPaddleY = screenHeight / 2.0 - constants::height / 2.0;
		rightPaddleY = leftPaddleY;

	}

	return (x, y, dx, dy, leftPaddleY, rightPaddleY);

}

async fn movePaddles(leftUp: bool, leftDown: bool, rightUp: bool, rightDown: bool, leftPaddleY: &mut f64, rightPaddleY: &mut f64, screenHeight: &f64) {

	let mut y: f64;
	let leftPaddleBottom = *leftPaddleY + constants::height;
	let rightPaddleBottom = *rightPaddleY + constants::height;

	if (leftUp && (*leftPaddleY > 0.0)) {

		y = *leftPaddleY - constants::paddleSpeed;

		if (y < 0.0) {

			y = 0.0;

		}

		*leftPaddleY = y;

	} if (leftDown && (leftPaddleBottom < *screenHeight)) {

		y = *leftPaddleY + constants::paddleSpeed;

		if (y > *screenHeight) {

			y = *screenHeight;

		}

		*leftPaddleY = y;

	} if (rightUp && (*rightPaddleY > 0.0)) {

		y = *rightPaddleY - constants::paddleSpeed;

		if (y < 0.0) {

			y = 0.0;

		}

		*rightPaddleY = y;

	} if (rightDown && (rightPaddleBottom < *screenHeight)) {

		y = *rightPaddleY + constants::paddleSpeed;

		if (y > *screenHeight) {

			y = *screenHeight;

		}

		*rightPaddleY = y;

	}

}

async fn collision(ballX: f64, ballY: f64, ballDx: &mut f64, ballDy: &mut f64, leftPaddleX: f64, leftPaddleY: f64, rightPaddleX: f64, rightPaddleY: f64, screenHeight: f64) {

	let ballLeftEdge = ballX - constants::radius;
	let ballRightEdge = ballX + constants::radius;
	let ballTopEdge = ballY - constants::radius;
	let ballBottomEdge = ballY + constants::radius;
	let leftPaddleEdge = leftPaddleX + constants::width;
	let leftPaddleBottom = leftPaddleY + constants::height;
	let rightPaddleBottom = rightPaddleY + constants::height;

	if ((ballLeftEdge <= leftPaddleEdge) &&
		(ballY >= leftPaddleY) &&
		(ballY <= leftPaddleBottom)) {

		*ballDx *= -1.0;

	} else if ((ballRightEdge >= rightPaddleX) &&
			   (ballY >= rightPaddleY) &&
			   (ballY <= rightPaddleBottom)) {

		*ballDx *= -1.0;

	}

	if ((ballTopEdge <= 0.0) ||
		(ballBottomEdge >= screenHeight)) {

		*ballDy *= -1.0;

	}

}

...

game window for pure solid.js implementation (inside a tauri app)

solid-js-pong.mp4

game window for tauri implementation

tauri-pong.mp4

=====================================================================

Here is the output of my tauri info

=====================================================================

[email protected] tauri
tauri info


[✔] Environment
    
OS: Windows 10.0.22631 x86_64 (X64)
  ✔ WebView2: 133.0.3065.92
  ✔ MSVC: Visual Studio Build Tools 2019
  ✔ rustc: 1.84.1 (e71f9a9a9 2025-01-27)
  ✔ cargo: 1.84.1 (66221abde 2024-11-19)
  ✔ rustup: 1.27.1 (54dd3d00f 2024-04-24)
  ✔ Rust toolchain: stable-x86_64-pc-windows-msvc (default)
node: 20.10.0
npm: 10.2.3

[-] Packages
    
tauri :crab:: 2.2.5
tauri-build :crab:: 2.0.5
wry :crab:: 0.48.1
tao :crab:: 0.31.1
@tauri-apps/api : 2.2.0 (outdated, latest: 2.3.0)
@tauri-apps/cli : 2.2.7 (outdated, latest: 2.3.1)

[-] Plugins
    
tauri-plugin-opener :crab:: 2.2.5
@tauri-apps/plugin-opener : 2.2.5 (outdated, latest: 2.2.6)

[-] App
    
build-type: bundle
CSP: unset
frontendDist: ../dist
devUrl: http://localhost:1420/
framework: SolidJS
bundler: Vite

[Samelot]

Very cool idea, yes i would imagine that it would be really hard on the refresh rate.

[jwulf0]

Maybe it helps if you change the order within the loop running in each animation frame to:

1. await result of computeGameState
2. Clear screen
3. Draw new state

That way, the computation and (probably more relevant) ipc does not happen in between clearing and re-drawing.