Improve render call by limit render calls to visible elements

engine/Viewport.ts

@@ -8,6 +8,12 @@ export type Viewport = {
 	canvas: HTMLCanvasElement;
 	gameContainer: HTMLElement;
 	canvasContainer: HTMLElement;
+	bounds: {
+		minX: number;
+		minY: number;
+		maxX: number;
+		maxY: number;
+	};
 };
 
 export const viewport: Viewport = {
@@ -21,6 +27,12 @@ export const viewport: Viewport = {
 	canvas: null as unknown as HTMLCanvasElement,
 	gameContainer: null as unknown as HTMLElement,
 	canvasContainer: null as unknown as HTMLElement,
+	bounds: {
+		minX: 0,
+		minY: 0,
+		maxX: 0,
+		maxY: 0,
+	},
 };
 
 export function initViewport(): void {
@@ -51,16 +63,18 @@ export function setScale(scale: number): void {
 
 export function resizeCanvas(width: number, height: number): void {
 	const {
-		scale: initialScale,
+		scale,
 		imageSmoothing,
 		ctx,
 		canvas,
 		canvasContainer,
 		gameContainer,
+		translation,
+		bounds,
 	} = viewport;
 
-	const containerWidth = (gameContainer.offsetWidth / initialScale) | 0;
-	const containerHeight = (gameContainer.offsetHeight / initialScale) | 0;
+	const containerWidth = (gameContainer.offsetWidth / scale) | 0;
+	const containerHeight = (gameContainer.offsetHeight / scale) | 0;
 
 	canvas.width = Math.min(width, containerWidth);
 	canvas.height = Math.min(height, containerHeight);
@@ -68,12 +82,15 @@ export function resizeCanvas(width: number, height: number): void {
 	ctx.imageSmoothingEnabled = imageSmoothing.imageSmoothingEnabled;
 	ctx.imageSmoothingQuality = imageSmoothing.imageSmoothingQuality;
 
-	const canvasWidth =
-		canvas.width * initialScale - (containerWidth % initialScale);
-	const canvasHeight =
-		canvas.height * initialScale - (containerHeight % initialScale);
+	const canvasWidth = canvas.width * scale - (containerWidth % scale);
+	const canvasHeight = canvas.height * scale - (containerHeight % scale);
 
 	canvasContainer.style = `width: ${canvasWidth}px; height: ${canvasHeight}px;`;
+
+	bounds.minX = translation.x;
+	bounds.minY = translation.y;
+	bounds.maxX = translation.x + canvas.width;
+	bounds.maxY = translation.x + canvas.height;
 }
 
 export function resetCtx() {

engine/system/drawSprites.ts

@@ -2,8 +2,13 @@ import type { Box } from "#/engine/Box.ts";
 import { sceneChangeSet, sceneComponentsMap } from "#/engine/Scene.ts";
 import { drawSprite, type Sprite, spriteSheetMap } from "#/engine/Sprite.ts";
 import type { Vector } from "#/engine/Vector.ts";
+import { viewport } from "#/engine/Viewport.ts";
+
+type Drawable = { position: Box<Vector>; sprite: Box<Sprite> };
+
+const drawables: Array<Drawable> = [];
+const visibleDrawables: Array<Drawable> = [];
 
-const drawables: Array<{ position: Box<Vector>; sprite: Box<Sprite> }> = [];
 sceneChangeSet.add((sceneData) => {
 	drawables.length = 0;
 
@@ -24,7 +29,27 @@ sceneChangeSet.add((sceneData) => {
 });
 
 export function drawSprites(ctx: CanvasRenderingContext2D): void {
-	for (const drawable of drawables.sort(
+	const { bounds } = viewport;
+
+	visibleDrawables.length = 0;
+	for (const drawable of drawables) {
+		const pos = drawable.position.value;
+		const sprite = drawable.sprite.value;
+
+		const relX = pos.x + sprite.offset.x;
+		const relY = pos.y + sprite.offset.y;
+
+		if (
+			relX + sprite.width > bounds.minX &&
+			relX < bounds.maxX &&
+			relY + sprite.height > bounds.minY &&
+			relY < bounds.maxY
+		) {
+			visibleDrawables.push(drawable);
+		}
+	}
+
+	for (const drawable of visibleDrawables.sort(
 		(a, b) => a.position.value.y - b.position.value.y,
 	)) {
 		const sprite = drawable.sprite.value;