TIL

engine/Scene.ts

@@ -128,9 +128,9 @@ export function useScene(data: SceneData): {
 		},
 		process(fn) {
 			sceneProcessMap.set(data.name, (ctx, delta) => {
-				animateEntities(ctx, delta);
 				processEntities(delta);
 				fn(ctx, delta);
+				animateEntities(ctx, delta);
 			});
 		},
 	};

entities/barEntity/index.ts

@@ -6,6 +6,7 @@ const idle: Sprite = await fromSrc("/assets/hero/idle.png", 5, 4);
 
 const { animate, process } = useEntity("barEntity", {
 	animation: createAnimation(0, 200),
+	stuff: 1,
 });
 
 animate((entity, ctx, delta) => {
@@ -19,4 +20,11 @@ animate((entity, ctx, delta) => {
 	);
 });
 
-process((entity, delta) => {});
+process((entity, delta) => {
+	entity.position.x += entity.stuff * 0.5;
+	if (entity.position.x > 64) {
+		entity.stuff = -1;
+	} else if (entity.position.x < 0) {
+		entity.stuff = 1;
+	}
+});

entities/testEntity/index.ts

@@ -43,7 +43,7 @@ animate((entity, ctx, delta) => {
 });
 
 process((entity, delta) => {
-	entity.position.x += entity.stuff * 0.05 * delta;
+	entity.position.x += entity.stuff * 0.5;
 	if (entity.position.x > viewport.canvas.width - 16) {
 		entity.stuff = -1;
 		entity.currentAnimation = "walk";

lib/Animation.ts

@@ -24,15 +24,11 @@ export function animateSprite(
 	y: number,
 	delta: number,
 ): void {
-	drawSprite(ctx, sprite, animation.xIndex, animation.yIndex, x, y);
-
-	animation.frameDelta += delta;
-	if (animation.frameDelta >= animation.frameTime) {
-		animation.frameDelta = animation.frameDelta - animation.frameTime;
-
-		animation.xIndex += 1;
-		if (animation.xIndex >= sprite.xFrames) {
+	if ((animation.frameDelta += delta) > animation.frameTime) {
+		animation.frameDelta = 0;
+		if ((animation.xIndex += 1) >= sprite.xFrames) {
 			animation.xIndex = 0;
 		}
 	}
+	drawSprite(ctx, sprite, animation.xIndex, animation.yIndex, x, y);
 }