I need to reconsider the delta thing

engine/Scene.ts

@@ -20,13 +20,11 @@ export type SceneData = {
 
 export type Scene = {
 	data: SceneData;
-	entityPool: Map<
+	entityMap: Map<
 		string,
 		{
-			hooks: {
 			animate: AnimateEntity<never>;
 			process: ProcessEntity<never>;
-			};
 			entities: Array<Entity<unknown>>;
 		}
 	>;
@@ -50,21 +48,21 @@ export const currentScene: Scene = {
 		entities: [],
 	},
 	process: () => {},
-	entityPool: new Map(),
+	entityMap: new Map(),
 };
 
 function animateEntities(ctx: CanvasRenderingContext2D, delta: number): void {
-	for (const entry of currentScene.entityPool.values()) {
+	for (const entry of currentScene.entityMap.values()) {
 		for (const entity of entry.entities) {
-			entry.hooks.animate(entity as Entity<never>, ctx, delta);
+			entry.animate(entity as Entity<never>, ctx, delta);
 		}
 	}
 }
 
 function processEntities(delta: number): void {
-	for (const entry of currentScene.entityPool.values()) {
+	for (const entry of currentScene.entityMap.values()) {
 		for (const entity of entry.entities) {
-			entry.hooks.process(entity as Entity<never>, delta);
+			entry.process(entity as Entity<never>, delta);
 		}
 	}
 }
@@ -111,15 +109,13 @@ export async function loadScene(name: string): Promise<void> {
 			state: structuredClone(e.state),
 		};
 
-		if (currentScene.entityPool.has(e.id)) {
-			const pool = currentScene.entityPool.get(e.id);
+		if (currentScene.entityMap.has(e.id)) {
+			const pool = currentScene.entityMap.get(e.id);
 			pool!.entities.push(entity);
 		} else {
-			currentScene.entityPool.set(e.id, {
-				hooks: {
+			currentScene.entityMap.set(e.id, {
 				animate: entityAnimateMap.get(entry.id)!,
 				process: entityProcessMap.get(entry.id)!,
-				},
 				entities: [entity],
 			});
 		}

entities/testEntity/index.ts

@@ -1,24 +1,51 @@
-import { useEntity } from "#/engine/Entity.ts";
+import { type Entity, useEntity } from "#/engine/Entity.ts";
 import { viewport } from "#/engine/Viewport.ts";
 import { loadImage } from "#/lib/loadImage.ts";
-import { createSprite, drawSprite } from "#/lib/Sprite.ts";
+import { createSprite, drawSprite, type Sprite } from "#/lib/Sprite.ts";
 
-const sprite = createSprite(await loadImage("/assets/char-idle.png"), 2, 4);
+const spriteIdle = createSprite(await loadImage("/assets/char-idle.png"), 2, 4);
+const spriteWalk = createSprite(await loadImage("/assets/char-walk.png"), 4, 4);
+spriteWalk.yIndex = 2;
+
+function animateSprite(
+	ctx: CanvasRenderingContext2D,
+	sprite: Sprite,
+	entity: Entity<any>,
+	delta: number,
+): void {
+	entity.state.animations.walk.frameDelta += delta;
+	if (
+		entity.state.animations.walk.frameDelta >
+		entity.state.animations.walk.frameTime
+	) {
+		entity.state.animations.walk.frameDelta =
+			entity.state.animations.walk.frameDelta %
+			entity.state.animations.walk.frameTime;
+
+		spriteWalk.xIndex += 1;
+		if (spriteWalk.xIndex >= spriteWalk.xFrames) {
+			spriteWalk.xIndex = 0;
+		}
+	}
+	drawSprite(ctx, spriteWalk, entity.position.x, entity.position.y);
+}
 
 const { animate, process } = useEntity("testEntity", {
-	animation: {
-		xFrame: 0,
-		yFrame: 0,
+	animations: {
+		walk: {
+			frameTime: 222,
+			frameDelta: 0,
+		},
 	},
 	stuff: 1,
 });
 
-animate((entity, ctx, _delta) => {
-	drawSprite(ctx, sprite, entity.position.x, entity.position.y, 16, 16);
+animate((entity, ctx, delta) => {
+	animateSprite(ctx, spriteIdle, entity, delta);
 });
 
-process((entity, _delta) => {
-	entity.position.x += entity.state.stuff;
+process((entity, delta) => {
+	entity.position.x += entity.state.stuff * 0.05 * delta;
 	if (entity.position.x > viewport.canvas.width - 16) {
 		entity.state.stuff = -1;
 	} else if (entity.position.x < 0) {

lib/Sprite.ts

@@ -4,8 +4,8 @@ export type Sprite = {
 	yFrames: number;
 	frameWidth: number;
 	frameHeight: number;
-	x: number;
-	y: number;
+	xIndex: number;
+	yIndex: number;
 };
 
 export function createSprite(
@@ -19,8 +19,8 @@ export function createSprite(
 		yFrames,
 		frameWidth: image.width / xFrames,
 		frameHeight: image.height / yFrames,
-		x: 0,
-		y: 0,
+		xIndex: 0,
+		yIndex: 0,
 	};
 }
 
@@ -29,18 +29,16 @@ export function drawSprite(
 	sprite: Sprite,
 	x: number,
 	y: number,
-	width: number,
-	height: number,
 ): void {
 	ctx.drawImage(
 		sprite.image,
-		sprite.x,
-		sprite.y,
+		sprite.xIndex * sprite.frameWidth,
+		sprite.yIndex * sprite.frameHeight,
 		sprite.frameWidth,
 		sprite.frameHeight,
 		x,
 		y,
-		width,
-		height,
+		sprite.frameWidth,
+		sprite.frameHeight,
 	);
 }