Rename playback to animation again

engine/Sprite.ts

@@ -16,7 +16,7 @@ export type SpriteSheet = {
 	frameHeight: number;
 };
 
-export type SpritePlayback = {
+export type SpriteAnimation = {
 	xIndex: number;
 	yIndex: number;
 	frameTime: number;
@@ -71,10 +71,10 @@ export async function defineSpriteSheet(
 	return src;
 }
 
-export function createSpritePlayback(
+export function createSpriteAnimation(
 	frameTime: number,
 	yIndex: number,
-): SpritePlayback {
+): SpriteAnimation {
 	return {
 		xIndex: 0,
 		yIndex,
@@ -108,16 +108,16 @@ export function drawSprite(
 
 export function animateSprite(
 	sprite: Sprite,
-	playback: SpritePlayback,
+	animation: SpriteAnimation,
 	delta: number,
 ): void {
 	const sheet = spriteSheetMap.get(sprite.src)!;
-	if ((playback.frameDelta += delta) > playback.frameTime) {
+	if ((animation.frameDelta += delta) > animation.frameTime) {
-		playback.frameDelta = 0;
+		animation.frameDelta = 0;
-		if ((playback.xIndex += 1) >= sheet.xFrames) {
+		if ((animation.xIndex += 1) >= sheet.xFrames) {
-			playback.xIndex = 0;
+			animation.xIndex = 0;
 		}
 	}
 
-	sprite.xStart = playback.xIndex * sheet.frameWidth;
+	sprite.xStart = animation.xIndex * sheet.frameWidth;
 }

engine/system/animateSprites.ts

@@ -2,12 +2,12 @@ import $ from "#/engine/Scene.ts";
 import {
 	animateSprite,
 	type Sprite,
-	type SpritePlayback,
+	type SpriteAnimation,
 } from "#/engine/Sprite.ts";
 
 export function animateSprites(delta: number): void {
-	for (const [id, playback] of $<SpritePlayback>("playback").entries()) {
+	for (const [id, animation] of $<SpriteAnimation>("animation").entries()) {
 		const sprite = $<Sprite>("sprite").get(id)!;
-		animateSprite(sprite.value, playback.value, delta);
+		animateSprite(sprite.value, animation.value, delta);
 	}
 }

game/entities/hero/entity.ts

@@ -4,7 +4,7 @@ import { pointer } from "#/engine/Pointer.ts";
 import $ from "#/engine/Scene.ts";
 import {
 	createSprite,
-	createSpritePlayback,
+	createSpriteAnimation,
 	defineSpriteSheet,
 } from "#/engine/Sprite.ts";
 import { createVector, type Vector } from "#/engine/Vector.ts";
@@ -16,7 +16,7 @@ const idleSrc = await defineSpriteSheet(charIdle, 2, 4);
 const process = defineEntity("hero", {
 	position: createVector(),
 	sprite: createSprite(idleSrc),
-	playback: createSpritePlayback(500, 2),
+	animation: createSpriteAnimation(500, 2),
 	velocity: createVector(),
 });
 

game/entities/portal/entity.ts

@@ -1,7 +1,7 @@
 import { defineEntity } from "#/engine/Entity.ts";
 import {
 	createSprite,
-	createSpritePlayback,
+	createSpriteAnimation,
 	defineSpriteSheet,
 } from "#/engine/Sprite.ts";
 import { createVector } from "#/engine/Vector.ts";
@@ -12,5 +12,5 @@ const portalSrc = await defineSpriteSheet(portal, 3, 1);
 defineEntity("portal", {
 	position: createVector(),
 	sprite: createSprite(portalSrc),
-	playback: createSpritePlayback(400, 0),
+	animation: createSpriteAnimation(400, 0),
 });

game/entities/testEntity/entity.ts

@@ -1,10 +1,10 @@
 import { defineEntity } from "#/engine/Entity.ts";
 import $ from "#/engine/Scene.ts";
 import {
-	createSpritePlayback,
+	createSpriteAnimation,
 	defineSpriteSheet,
 	type Sprite,
-	type SpritePlayback,
+	type SpriteAnimation,
 } from "#/engine/Sprite.ts";
 import { createVector, type Vector } from "#/engine/Vector.ts";
 import { viewport } from "#/engine/Viewport.ts";
@@ -33,17 +33,17 @@ const sprites = {
 	},
 };
 
-const playbacks = {
+const animations = {
-	idle: createSpritePlayback(500, 2),
+	idle: createSpriteAnimation(500, 2),
-	walk: createSpritePlayback(250, 2),
+	walk: createSpriteAnimation(250, 2),
 };
 
 const process = defineEntity<{
 	position: Vector;
-	playback: SpritePlayback;
+	animation: SpriteAnimation;
-	playbacks: {
+	animations: {
-		idle: SpritePlayback;
+		idle: SpriteAnimation;
-		walk: SpritePlayback;
+		walk: SpriteAnimation;
 	};
 	sprite: Sprite;
 	sprites: {
@@ -53,8 +53,8 @@ const process = defineEntity<{
 	stuff: number;
 }>("testEntity", {
 	position: createVector(),
-	playback: playbacks.idle,
+	animation: animations.idle,
-	playbacks: playbacks,
+	animations: animations,
 	sprite: sprites.idle,
 	sprites,
 	stuff: 1,
@@ -64,16 +64,16 @@ process((id, _delta) => {
 	const position = $<Vector>("position").get(id)!;
 	const stuff = $<number>("stuff").get(id)!;
 	const sprite = $<Sprite>("sprite").get(id)!;
-	const playback = $<SpritePlayback>("playback").get(id)!;
+	const animation = $<SpriteAnimation>("animation").get(id)!;
 
 	position.value.x += stuff.value * 0.5;
 	if (position.value.x > viewport.canvas.width - 16) {
 		stuff.value = -1;
-		playback.value = playbacks.walk;
+		animation.value = animations.walk;
 		sprite.value = sprites.walk;
 	} else if (position.value.x < 0) {
 		stuff.value = 1;
-		playback.value = playbacks.idle;
+		animation.value = animations.idle;
 		sprite.value = sprites.idle;
 	}
 });