run 11

engine/Entity.ts

@@ -1,52 +1,42 @@
-import type { Sprite } from "#/lib/Sprite.ts";
+import { createVector, type Vector } from "#/lib/Vector.ts";
-import type { Vector } from "#/lib/Vector.ts";
 
-export type Entity = {
+export type Entity<T> = {
 	id: string;
-	src: string;
-	width: number;
-	height: number;
-};
-
-export type EntityInstance = {
 	position: Vector;
-	width: number;
+	state: T;
-	height: number;
-	sprite: Sprite;
 };
 
-export type Draw = (
+export type Animate<T> = (
-	entity: EntityInstance,
+	entity: Entity<T>,
 	ctx: CanvasRenderingContext2D,
+	delta: number,
 ) => void;
 
-export type Process = (entity: EntityInstance, delta: number) => void;
+export type Process<T> = (entity: Entity<T>, delta: number) => void;
 
-export function createEntity(
+export const entityMap = new Map<string, Entity<unknown>>();
+export const entityAnimateMap = new Map<string, Animate<never>>();
+export const entityProcessMap = new Map<string, Process<never>>();
+
+export function useEntity<T>(
 	id: string,
-	src: string,
+	state: T,
-	width: number = 16,
+): {
-	height: number = 16,
+	animate: (fn: Animate<T>) => void;
-): Entity {
+	process: (fn: Process<T>) => void;
-	return { id, width, height, src };
-}
-
-export const entityMap = new Map<string, Entity>();
-export const entityDrawMap = new Map<string, Draw>();
-export const entityProcessMap = new Map<string, Process>();
-
-export function useEntity(data: Entity): {
-	draw: (fn: Draw) => void;
-	process: (fn: Process) => void;
 } {
-	entityMap.set(data.id, data);
+	entityMap.set(id, {
+		id,
+		position: createVector(),
+		state,
+	});
 
 	return {
-		draw(fn: Draw): void {
+		animate(fn: Animate<T>): void {
-			entityDrawMap.set(data.id, fn);
+			entityAnimateMap.set(id, fn);
 		},
-		process(fn: Process): void {
+		process(fn: Process<T>): void {
-			entityProcessMap.set(data.id, fn);
+			entityProcessMap.set(id, fn);
 		},
 	};
 }

engine/Scene.ts

@@ -1,11 +1,9 @@
-import { loadImage } from "#/lib/loadImage.ts";
+import type { Vector } from "#/lib/Vector.ts";
-import { createSprite } from "#/lib/Sprite.ts";
-import { createVector, type Vector } from "#/lib/Vector.ts";
 import {
-	type Draw as EntityDraw,
+	type Entity,
-	type EntityInstance,
+	type Animate as EntityDraw,
 	type Process as EntityProcess,
-	entityDrawMap,
+	entityAnimateMap,
 	entityMap,
 	entityProcessMap,
 } from "./Entity.ts";
@@ -23,9 +21,9 @@ export type SceneData = {
 export type Scene = {
 	data: SceneData;
 	entityPool: Array<{
-		draw: EntityDraw;
+		draw: EntityDraw<never>;
-		process: EntityProcess;
+		process: EntityProcess<never>;
-		entity: EntityInstance;
+		entity: Entity<never>;
 	}>;
 	process: Process;
 };
@@ -50,9 +48,9 @@ export const currentScene: Scene = {
 	entityPool: [],
 };
 
-function drawEntities(ctx: CanvasRenderingContext2D): void {
+function animateEntities(ctx: CanvasRenderingContext2D, delta: number): void {
 	for (const entry of currentScene.entityPool) {
-		entry.draw(entry.entity, ctx);
+		entry.draw(entry.entity, ctx, delta);
 	}
 }
 
@@ -70,7 +68,7 @@ export function useScene(data: SceneData): {
 	return {
 		process(fn: Process): void {
 			sceneProcessMap.set(data.id, (ctx, delta) => {
-				drawEntities(ctx);
+				animateEntities(ctx, delta);
 				processEntities(delta);
 				fn(ctx, delta);
 			});
@@ -94,21 +92,20 @@ export async function loadScene(name: string): Promise<void> {
 	const data = sceneDataMap.get(name)!;
 	currentScene.data = data;
 
-	for (const entity of data.entities) {
+	for (const entry of data.entities) {
-		await import(`#/entities/${entity.id}/index.ts`);
+		await import(`#/entities/${entry.id}/index.ts`);
 
-		const e = entityMap.get(entity.id)!;
+		const e = entityMap.get(entry.id) as Entity<never>;
-		const entityInstance: EntityInstance = {
+		const entity: Entity<never> = {
-			position: entity.position,
+			id: e.id,
-			width: e.width,
+			position: entry.position,
-			height: e.height,
+			state: structuredClone(e.state),
-			sprite: createSprite(await loadImage(e.src), 2, 4), // FIXME
 		};
 
 		currentScene.entityPool.push({
-			draw: entityDrawMap.get(entity.id)!,
+			draw: entityAnimateMap.get(entry.id)!,
-			process: entityProcessMap.get(entity.id)!,
+			process: entityProcessMap.get(entry.id)!,
-			entity: entityInstance,
+			entity: entity,
 		});
 	}
 

entities/testEntity/data.json

@@ -1,6 +0,0 @@
-{
-	"id": "testEntity",
-	"src": "/assets/char-idle.png",
-	"width": 16,
-	"height": 16
-}

entities/testEntity/index.ts

@@ -1,18 +1,26 @@
-import { type EntityInstance, useEntity } from "#/engine/Entity.ts";
+import { useEntity } from "#/engine/Entity.ts";
-import { drawSprite } from "#/lib/Sprite.ts";
+import { loadImage } from "#/lib/loadImage.ts";
-import data from "./data.json";
+import { createSprite, drawSprite } from "#/lib/Sprite.ts";
 
-const { draw, process } = useEntity(data);
+const sprite = createSprite(await loadImage("/assets/char-idle.png"), 2, 4);
 
-draw((entity: EntityInstance, ctx: CanvasRenderingContext2D) => {
+const { animate, process } = useEntity("testEntity", {
-	drawSprite(
+	animation: {
-		ctx,
+		xFrame: 0,
-		entity.sprite,
+		yFrame: 0,
-		entity.position.x,
+	},
-		entity.position.y,
+	stuff: 1,
-		entity.width,
-		entity.height,
-	);
 });
 
-process((_entity, _delta) => {});
+animate((entity, ctx, _delta) => {
+	drawSprite(ctx, sprite, entity.position.x, entity.position.y, 16, 16);
+});
+
+process((entity, _delta) => {
+	if (entity.state.stuff === 1) {
+		entity.position.x += 1;
+		if (entity.position.x > 164) {
+			entity.state.stuff = 0;
+		}
+	}
+});

scenes/testScene/data.json

@@ -1,6 +1,6 @@
 {
 	"id": "testScene",
-	"width": 48,
+	"width": 180,
 	"height": 48,
 	"entities": [
 		{
@@ -16,6 +16,13 @@
 				"x": 16,
 				"y": 16
 			}
+		},
+		{
+			"id": "testEntity",
+			"position": {
+				"x": 32,
+				"y": 32
+			}
 		}
 	]
 }