Improve render call by limit render calls to visible elements

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;