Restore y-sorting

engine/Scene.ts

@@ -34,18 +34,16 @@ export type Scene = {
 
 export type SceneChange = (to: SceneData, from: SceneData) => void;
 
-export const sceneDataMap = new Map<string, SceneData>();
-export const sceneProcessMap = new Map<string, Process>();
 export const sceneComponentsMap = new Map<string, ComponentsMap>();
-
-const sceneEntityProcessMap = new Map<string, Map<string, EntityProcess>>();
-
-export const scenePreProcessMap = new Map<string, PreProcess>();
-export const scenePostProcessMap = new Map<string, PostProcess>();
-
 export const sceneChangeSet = new Set<SceneChange>();
 export const sceneGraph: Graph<string> = new Map();
 
+const sceneEntityProcessMap = new Map<string, Map<string, EntityProcess>>();
+const sceneDataMap = new Map<string, SceneData>();
+const sceneProcessMap = new Map<string, Process>();
+const scenePreProcessMap = new Map<string, PreProcess>();
+const scenePostProcessMap = new Map<string, PostProcess>();
+
 export const currentScene: Scene = {
 	data: {
 		name: "",

game/scenes/testScene/data.json

@@ -29,6 +29,15 @@
 					"y": 32
 				}
 			}
+		},
+		{
+			"name": "testEntity",
+			"init": {
+				"position": {
+					"x": 64,
+					"y": 64
+				}
+			}
 		}
 	]
 }

main.ts

@@ -1,6 +1,12 @@
+import type { Box } from "#/engine/Box.ts";
 import { listenKeyboard } from "#/engine/Keyboard.ts";
 import { listenPointer } from "#/engine/Pointer.ts";
-import $, { currentScene, setScene } from "#/engine/Scene.ts";
+import $, {
+	currentScene,
+	sceneChangeSet,
+	sceneComponentsMap,
+	setScene,
+} from "#/engine/Scene.ts";
 import {
 	animateSprite,
 	drawSprite,
@@ -16,6 +22,48 @@ import {
 	viewport,
 } from "#/engine/Viewport.ts";
 
+function animateSpriteSystem() {
+	for (const [id, playback] of $<SpritePlayback>("playback").entries()) {
+		const sprite = $<Sprite>("sprite").get(id)!;
+		animateSprite(sprite.value, playback.value, delta);
+	}
+}
+
+const drawables: Array<{ position: Box<Vector>; sprite: Box<Sprite> }> = [];
+sceneChangeSet.add((sceneData) => {
+	drawables.length = 0;
+
+	const sprites = [
+		...sceneComponentsMap.get(sceneData.name)!.get("sprite")!.values(),
+	] as Array<Box<Sprite>>;
+
+	sceneComponentsMap
+		.get(sceneData.name)!
+		.get("position")!
+		.values()
+		.forEach((box, index) => {
+			drawables.push({
+				position: box as Box<Vector>,
+				sprite: sprites[index],
+			});
+		});
+});
+
+function drawSpriteSystem() {
+	for (const drawable of drawables.sort(
+		(a, b) => a.position.value.y - b.position.value.y,
+	)) {
+		drawSprite(
+			viewport.ctx,
+			spriteSheetMap.get(drawable.sprite.value.src)!,
+			drawable.sprite.value.xStart,
+			drawable.sprite.value.yStart,
+			drawable.position.value.x,
+			drawable.position.value.y,
+		);
+	}
+}
+
 let then = self.performance.now();
 let delta = 0;
 function animate(timestamp: number): void {
@@ -25,22 +73,8 @@ function animate(timestamp: number): void {
 	resetCtx();
 	currentScene.process(viewport.ctx, delta);
 
-	for (const [id, playback] of $<SpritePlayback>("playback").entries()) {
+	animateSpriteSystem();
-		const sprite = $<Sprite>("sprite").get(id)!;
+	drawSpriteSystem();
-		animateSprite(sprite.value, playback.value, delta);
-	}
-
-	for (const [id, sprite] of $<Sprite>("sprite").entries()) {
-		const position = $<Vector>("position").get(id)!;
-		drawSprite(
-			viewport.ctx,
-			spriteSheetMap.get(sprite.value.src)!,
-			sprite.value.xStart,
-			sprite.value.yStart,
-			position.value.x,
-			position.value.y,
-		);
-	}
 
 	requestAnimationFrame(animate);
 }