Improve animation handling

entities/barEntity/entity.ts

@@ -1,18 +1,17 @@
+import { createAnimation, playAnimation } from "#/engine/Animation.ts";
 import { useEntity } from "#/engine/Entity.ts";
-import { animateSprite, createAnimation } from "#/lib/Animation.ts";
 import { fromSrc, type Sprite } from "#/lib/Sprite.ts";
 
 const idle: Sprite = await fromSrc("/assets/hero/idle.png", 5, 4);
 
 const { animate, process } = useEntity(import.meta, {
-	animation: createAnimation(0, 200),
+	animation: createAnimation(idle, 200, 0),
 	stuff: 1,
 });
 
 animate((entity, ctx, delta) => {
-	animateSprite(
+	playAnimation(
 		ctx,
-		idle,
 		entity.animation,
 		entity.position.x,
 		entity.position.y,

entities/fooEntity/entity.ts

@@ -1,18 +1,17 @@
 import charIdle from "#/assets/char-idle.png";
+import { createAnimation, playAnimation } from "#/engine/Animation.ts";
 import { useEntity } from "#/engine/Entity.ts";
-import { animateSprite, createAnimation } from "#/lib/Animation.ts";
 import { fromSrc, type Sprite } from "#/lib/Sprite.ts";
 
 const idle: Sprite = await fromSrc(charIdle, 2, 4);
 
 const { animate, process } = useEntity(import.meta, {
-	animation: createAnimation(2, 500),
+	animation: createAnimation(idle, 500, 2),
 });
 
 animate((entity, ctx, delta) => {
-	animateSprite(
+	playAnimation(
 		ctx,
-		idle,
 		entity.animation,
 		entity.position.x,
 		entity.position.y,

entities/portal/entity.ts

@@ -0,0 +1,19 @@
+import { createAnimation, playAnimation } from "#/engine/Animation.ts";
+import { useEntity } from "#/engine/Entity.ts";
+import { fromSrc, type Sprite } from "#/lib/Sprite.ts";
+
+const sprite: Sprite = await fromSrc("./assets/portal.png", 3, 1);
+
+const { animate } = useEntity(import.meta, {
+	animation: createAnimation(sprite, 400, 0),
+});
+
+animate((entity, ctx, delta) => {
+	playAnimation(
+		ctx,
+		entity.animation,
+		entity.position.x,
+		entity.position.y,
+		delta,
+	);
+});

entities/testEntity/entity.ts

@@ -1,12 +1,12 @@
 import charIdle from "#/assets/char-idle.png";
 import charWalk from "#/assets/char-walk.png";
-import { useEntity } from "#/engine/Entity.ts";
-import { viewport } from "#/engine/Viewport.ts";
 import {
 	type Animation,
-	animateSprite,
 	createAnimation,
-} from "#/lib/Animation.ts";
+	playAnimation,
+} from "#/engine/Animation.ts";
+import { useEntity } from "#/engine/Entity.ts";
+import { viewport } from "#/engine/Viewport.ts";
 import { loadImage } from "#/lib/loadImage.ts";
 import { createSprite } from "#/lib/Sprite.ts";
 
@@ -14,28 +14,28 @@ const sprites = {
 	idle: createSprite(await loadImage(charIdle), 2, 4),
 	walk: createSprite(await loadImage(charWalk), 4, 4),
 };
+const animations = {
+	idle: createAnimation(sprites.idle, 500, 2),
+	walk: createAnimation(sprites.walk, 250, 2),
+} as const;
 
 const { animate, process } = useEntity<{
+	animation: Animation;
 	animations: {
 		idle: Animation;
 		walk: Animation;
 	};
-	currentAnimation: "idle" | "walk";
 	stuff: number;
 }>(import.meta, {
-	animations: {
-		idle: createAnimation(2, 500),
-		walk: createAnimation(2, 250),
-	},
-	currentAnimation: "idle",
+	animations,
+	animation: animations.idle,
 	stuff: 1,
 });
 
 animate((entity, ctx, delta) => {
-	animateSprite(
+	playAnimation(
 		ctx,
-		sprites[entity.currentAnimation],
-		entity.animations[entity.currentAnimation],
+		entity.animation,
 		entity.position.x,
 		entity.position.y,
 		delta,
@@ -46,9 +46,9 @@ process((entity, delta) => {
 	entity.position.x += entity.stuff * 0.5;
 	if (entity.position.x > viewport.canvas.width - 16) {
 		entity.stuff = -1;
-		entity.currentAnimation = "walk";
+		entity.animation = entity.animations.walk;
 	} else if (entity.position.x < 0) {
 		entity.stuff = 1;
-		entity.currentAnimation = "idle";
+		entity.animation = entity.animations.idle;
 	}
 });