FCK

game/entities/hero/entity.ts

@@ -1,34 +1,35 @@
-import { createAnimation, playAnimation } from "#/engine/Animation.ts";
-import { createCircle } from "#/engine/Circle";
+import { type Circle, createCircle } from "#/engine/Circle.ts";
 import { moveAndCollide } from "#/engine/Collision.ts";
 import { defineEntity } from "#/engine/Entity.ts";
 import { keyboardInput } from "#/engine/Keyboard.ts";
+import { loadImage } from "#/engine/lib/loadImage";
 import { pointer } from "#/engine/Pointer.ts";
-import { fromSrc, type Sprite } from "#/engine/Sprite.ts";
-import { createVector } from "#/engine/Vector.ts";
+import {
+	createSpriteAnimation,
+	createSpritesSheet,
+	type SpriteAnimation,
+} from "#/engine/sprites.ts";
+import { createVector, type Vector } from "#/engine/Vector.ts";
 import charIdle from "#/game/assets/char-idle.png";
 
-const idle: Sprite = await fromSrc(charIdle, 2, 4);
+export type Hero = {
+	position: Vector;
+	velocity: Vector;
+	body: Circle;
+	animation: SpriteAnimation;
+};
+
 const speed = 0.05;
+const idleSheet = createSpritesSheet(await loadImage(charIdle), 2, 4);
 
-const { animate, process } = defineEntity("hero", {
-	animation: createAnimation(idle, 500, 2),
+const state: Hero = {
+	position: createVector(),
 	velocity: createVector(),
-	body: {
-		shape: createCircle(createVector(), 4),
-		offset: createVector(8, 10),
-	},
-});
+	body: createCircle(createVector(), 4),
+	animation: createSpriteAnimation(idleSheet, 500, 2),
+};
 
-animate((entity, ctx, delta) => {
-	playAnimation(
-		ctx,
-		entity.animation,
-		entity.position.x,
-		entity.position.y,
-		delta,
-	);
-});
+const process = defineEntity("hero", state);
 
 process((entity, delta) => {
 	if (pointer.isDown) {
@@ -49,6 +50,6 @@ process((entity, delta) => {
 
 	moveAndCollide(entity.body, entity.velocity);
 
-	entity.body.shape.position.x = entity.body.offset.x + entity.position.x;
-	entity.body.shape.position.y = entity.body.offset.y + entity.position.y;
+	// entity.body.position.x = entity.body.offset.x + entity.position.x;
+	// entity.body.position.y = entity.body.offset.y + entity.position.y;
 });

game/entities/portal/entity.ts

@@ -1,20 +1,10 @@
-import { createAnimation, playAnimation } from "#/engine/Animation.ts";
 import { defineEntity } from "#/engine/Entity.ts";
-import { fromSrc, type Sprite } from "#/engine/Sprite.ts";
+import { loadImage } from "#/engine/lib/loadImage.ts";
+import { createSpriteAnimation, createSpritesSheet } from "#/engine/sprites.ts";
 import portal from "#/game/assets/portal.png";
 
-const sprite: Sprite = await fromSrc(portal, 3, 1);
+const portalSheet = createSpritesSheet(await loadImage(portal), 3, 1);
 
-const { animate } = defineEntity("portal", {
-	animation: createAnimation(sprite, 400, 0),
-});
-
-animate((entity, ctx, delta) => {
-	playAnimation(
-		ctx,
-		entity.animation,
-		entity.position.x,
-		entity.position.y,
-		delta,
-	);
+defineEntity("portal", {
+	animation: createSpriteAnimation(portalSheet, 400, 0),
 });

game/entities/testEntity/entity.ts

@@ -1,49 +1,41 @@
-import {
-	type Animation,
-	createAnimation,
-	playAnimation,
-} from "#/engine/Animation.ts";
 import { defineEntity } from "#/engine/Entity.ts";
 import { loadImage } from "#/engine/lib/loadImage.ts";
-import { createSprite } from "#/engine/Sprite.ts";
+import {
+	createSpriteAnimation,
+	createSpritesSheet,
+	type SpriteAnimation,
+} from "#/engine/sprites.ts";
+import { createVector, type Vector } from "#/engine/Vector.ts";
 import { viewport } from "#/engine/Viewport.ts";
 import charIdle from "#/game/assets/char-idle.png";
 import charWalk from "#/game/assets/char-walk.png";
 
 const sprites = {
-	idle: createSprite(await loadImage(charIdle), 2, 4),
-	walk: createSprite(await loadImage(charWalk), 4, 4),
+	idle: createSpritesSheet(await loadImage(charIdle), 2, 4),
+	walk: createSpritesSheet(await loadImage(charWalk), 4, 4),
 };
 
 const animations = {
-	idle: createAnimation(sprites.idle, 500, 2),
-	walk: createAnimation(sprites.walk, 250, 2),
+	idle: createSpriteAnimation(sprites.idle, 500, 2),
+	walk: createSpriteAnimation(sprites.walk, 250, 2),
 };
 
-const { animate, process } = defineEntity<{
-	animation: Animation;
+const process = defineEntity<{
+	position: Vector;
+	animation: SpriteAnimation;
 	animations: {
-		idle: Animation;
-		walk: Animation;
+		idle: SpriteAnimation;
+		walk: SpriteAnimation;
 	};
 	stuff: number;
 }>("testEntity", {
+	position: createVector(),
 	animations,
 	animation: animations.idle,
 	stuff: 1,
 });
 
-animate((entity, ctx, delta) => {
-	playAnimation(
-		ctx,
-		entity.animation,
-		entity.position.x,
-		entity.position.y,
-		delta,
-	);
-});
-
-process((entity, delta) => {
+process((entity, _delta) => {
 	entity.position.x += entity.stuff * 0.5;
 	if (entity.position.x > viewport.canvas.width - 16) {
 		entity.stuff = -1;

game/scenes/barScene/data.json

@@ -5,9 +5,11 @@
 	"entities": [
 		{
 			"name": "hero",
-			"position": {
-				"x": 0,
-				"y": 0
+			"init": {
+				"position": {
+					"x": 0,
+					"y": 0
+				}
 			}
 		}
 	]

game/scenes/fooScene/data.json

@@ -5,16 +5,20 @@
 	"entities": [
 		{
 			"name": "hero",
-			"position": {
-				"x": 0,
-				"y": 0
+			"init": {
+				"position": {
+					"x": 0,
+					"y": 0
+				}
 			}
 		},
 		{
 			"name": "testEntity",
-			"position": {
-				"x": 24,
-				"y": 16
+			"init": {
+				"position": {
+					"x": 24,
+					"y": 16
+				}
 			}
 		}
 	]

game/scenes/testScene/data.json

@@ -1,27 +1,33 @@
 {
 	"name": "testScene",
-	"width": 80,
-	"height": 48,
+	"width": 240,
+	"height": 160,
 	"entities": [
 		{
 			"name": "hero",
-			"position": {
-				"x": 0,
-				"y": 0
+			"init": {
+				"position": {
+					"x": 0,
+					"y": 0
+				}
 			}
 		},
 		{
 			"name": "portal",
-			"position": {
-				"x": 16,
-				"y": 16
+			"init": {
+				"position": {
+					"x": 16,
+					"y": 16
+				}
 			}
 		},
 		{
 			"name": "testEntity",
-			"position": {
-				"x": 32,
-				"y": 32
+			"init": {
+				"position": {
+					"x": 32,
+					"y": 32
+				}
 			}
 		}
 	]

game/scenes/testScene/scene.ts

@@ -1,6 +1,7 @@
-import { strokeCircle } from "#/engine/Circle";
+import { strokeCircle } from "#/engine/Circle.ts";
 import { pointer } from "#/engine/Pointer.ts";
 import { defineScene } from "#/engine/Scene.ts";
+import type { Hero } from "#/game/entities/hero/entity.ts";
 import data from "./data.json";
 
 const { process, preProcess, linkScenes } = defineScene(data);
@@ -8,14 +9,14 @@ const { process, preProcess, linkScenes } = defineScene(data);
 linkScenes(["fooScene"] as const);
 
 preProcess((entityInstanceMap) => {
-	const entity = entityInstanceMap.get(data.entities[0].name);
-	const instance = entity!.instances[0];
+	const entry = entityInstanceMap.get("hero")!;
+	const instance = entry.instances[0] as Hero;
 
-	instance.position.x = data.width - 16;
-	instance.position.y = data.height - 16;
+	instance.position.x = data.width - instance.animation.sheet.frameHeight;
+	instance.position.y = data.height - instance.animation.sheet.frameWidth;
 });
 
-process((ctx, delta) => {
+process((ctx, _delta) => {
 	if (!pointer.isDown) {
 		strokeCircle(ctx, {
 			position: pointer.position,