FIXME

game/entities/hero/entity.ts

@@ -5,6 +5,7 @@ import { keyboardInput } from "#/engine/Keyboard.ts";
 import { pointer } from "#/engine/Pointer.ts";
 import {
 	createSpriteAnimation,
+	type Sprite,
 	type SpriteAnimation,
 	useSpriteSheetSrc,
 } from "#/engine/Sprite.ts";
@@ -15,17 +16,26 @@ export type Hero = {
 	position: Vector;
 	velocity: Vector;
 	body: Circle;
+	sprite: Sprite;
 	animation: SpriteAnimation;
 };
 
 const speed = 0.05;
 const idleSheet = await useSpriteSheetSrc(charIdle, 2, 4);
+const sprite = {
+	src: idleSheet,
+	xStart: 0,
+	yStart: 0,
+	width: 16,
+	height: 16,
+};
 
 const state: Hero = {
 	position: createVector(),
 	velocity: createVector(),
 	body: createCircle(createVector(), 4),
-	animation: createSpriteAnimation(idleSheet, 500, 2),
+	sprite,
+	animation: createSpriteAnimation(sprite, 500, 2),
 };
 
 const process = defineEntity("hero", state);

game/entities/portal/entity.ts

@@ -1,11 +1,19 @@
 import { defineEntity } from "#/engine/Entity.ts";
 import { createSpriteAnimation, useSpriteSheetSrc } from "#/engine/Sprite.ts";
-import { createVector } from "#/engine/Vector";
+import { createVector } from "#/engine/Vector.ts";
 import portal from "#/game/assets/portal.png";
 
 const portalSheet = await useSpriteSheetSrc(portal, 3, 1);
+const sprite = {
+	src: portalSheet,
+	xStart: 0,
+	yStart: 0,
+	width: 16,
+	height: 16,
+};
 
 defineEntity("portal", {
 	position: createVector(64, 64),
-	animation: createSpriteAnimation(portalSheet, 400, 0),
+	sprite,
+	animation: createSpriteAnimation(sprite, 400, 0),
 });

game/entities/testEntity/entity.ts

@@ -1,6 +1,7 @@
 import { defineEntity } from "#/engine/Entity.ts";
 import {
 	createSpriteAnimation,
+	type Sprite,
 	type SpriteAnimation,
 	useSpriteSheetSrc,
 } from "#/engine/Sprite.ts";
@@ -9,11 +10,28 @@ import { viewport } from "#/engine/Viewport.ts";
 import charIdle from "#/game/assets/char-idle.png";
 import charWalk from "#/game/assets/char-walk.png";
 
-const sprites = {
+const sheets = {
 	idle: await useSpriteSheetSrc(charIdle, 2, 4),
 	walk: await useSpriteSheetSrc(charWalk, 4, 4),
 };
 
+const sprites = {
+	idle: {
+		src: sheets.idle,
+		xStart: 0,
+		yStart: 0,
+		width: 16,
+		height: 16,
+	},
+	walk: {
+		src: sheets.walk,
+		xStart: 0,
+		yStart: 0,
+		width: 16,
+		height: 16,
+	},
+};
+
 const animations = {
 	idle: createSpriteAnimation(sprites.idle, 500, 2),
 	walk: createSpriteAnimation(sprites.walk, 250, 2),
@@ -26,11 +44,18 @@ const process = defineEntity<{
 		idle: SpriteAnimation;
 		walk: SpriteAnimation;
 	};
+	sprite: Sprite;
+	sprites: {
+		idle: Sprite;
+		walk: Sprite;
+	};
 	stuff: number;
 }>("testEntity", {
 	position: createVector(),
-	animations,
 	animation: animations.idle,
+	animations,
+	sprite: sprites.idle,
+	sprites,
 	stuff: 1,
 });
 
@@ -39,8 +64,10 @@ process((entity, _delta) => {
 	if (entity.position.x > viewport.canvas.width - 16) {
 		entity.stuff = -1;
 		entity.animation = entity.animations.walk;
+		entity.sprite = entity.sprites.walk;
 	} else if (entity.position.x < 0) {
 		entity.stuff = 1;
 		entity.animation = entity.animations.idle;
+		entity.sprite = entity.sprites.idle;
 	}
 });

game/scenes/testScene/scene.ts

@@ -3,7 +3,6 @@ import { pointer } from "#/engine/Pointer.ts";
 import { defineScene } from "#/engine/Scene.ts";
 import { spriteSheetMap } from "#/engine/Sprite.ts";
 import { createVector } from "#/engine/Vector";
-import type { Hero } from "#/game/entities/hero/entity.ts";
 import data from "./data.json";
 
 const { process, preProcess, linkScenes } = defineScene(data);
@@ -12,11 +11,11 @@ linkScenes(["fooScene"] as const);
 
 preProcess((entityInstanceMap) => {
 	const entry = entityInstanceMap.get("hero")!;
-	const instance = entry.instances[0] as Hero;
-	const sheet = spriteSheetMap.get(instance.animation.src)!;
+	const instance = entry.instances[0];
+	// const sheet = spriteSheetMap.get(instance.animation.src)!;
 
-	instance.position.x = data.width - sheet.frameHeight;
-	instance.position.y = data.height - sheet.frameWidth;
+	instance.position.x = data.width - 16;
+	instance.position.y = data.height - 16;
 });
 
 const cirle = createCircle(createVector(), 4);