diff --git a/engine/Sprite.ts b/engine/Sprite.ts index 1f69a82..39c63f4 100644 --- a/engine/Sprite.ts +++ b/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) { - playback.frameDelta = 0; - if ((playback.xIndex += 1) >= sheet.xFrames) { - playback.xIndex = 0; + if ((animation.frameDelta += delta) > animation.frameTime) { + animation.frameDelta = 0; + if ((animation.xIndex += 1) >= sheet.xFrames) { + animation.xIndex = 0; } } - sprite.xStart = playback.xIndex * sheet.frameWidth; + sprite.xStart = animation.xIndex * sheet.frameWidth; } diff --git a/engine/system/animateSprites.ts b/engine/system/animateSprites.ts index 5c2738d..4afc7b6 100644 --- a/engine/system/animateSprites.ts +++ b/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 $("playback").entries()) { + for (const [id, animation] of $("animation").entries()) { const sprite = $("sprite").get(id)!; - animateSprite(sprite.value, playback.value, delta); + animateSprite(sprite.value, animation.value, delta); } } diff --git a/game/entities/hero/entity.ts b/game/entities/hero/entity.ts index 85598d2..a3cb4f5 100644 --- a/game/entities/hero/entity.ts +++ b/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(), }); diff --git a/game/entities/portal/entity.ts b/game/entities/portal/entity.ts index 8ea5a44..c811ee9 100644 --- a/game/entities/portal/entity.ts +++ b/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), }); diff --git a/game/entities/testEntity/entity.ts b/game/entities/testEntity/entity.ts index 93a9fdc..744dab5 100644 --- a/game/entities/testEntity/entity.ts +++ b/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 = { - idle: createSpritePlayback(500, 2), - walk: createSpritePlayback(250, 2), +const animations = { + idle: createSpriteAnimation(500, 2), + walk: createSpriteAnimation(250, 2), }; const process = defineEntity<{ position: Vector; - playback: SpritePlayback; - playbacks: { - idle: SpritePlayback; - walk: SpritePlayback; + animation: SpriteAnimation; + animations: { + idle: SpriteAnimation; + walk: SpriteAnimation; }; sprite: Sprite; sprites: { @@ -53,8 +53,8 @@ const process = defineEntity<{ stuff: number; }>("testEntity", { position: createVector(), - playback: playbacks.idle, - playbacks: playbacks, + animation: animations.idle, + animations: animations, sprite: sprites.idle, sprites, stuff: 1, @@ -64,16 +64,16 @@ process((id, _delta) => { const position = $("position").get(id)!; const stuff = $("stuff").get(id)!; const sprite = $("sprite").get(id)!; - const playback = $("playback").get(id)!; + const animation = $("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; } });