diff --git a/engine/Scene.ts b/engine/Scene.ts index b328628..c85f3e8 100644 --- a/engine/Scene.ts +++ b/engine/Scene.ts @@ -20,13 +20,11 @@ export type SceneData = { export type Scene = { data: SceneData; - entityPool: Map< + entityMap: Map< string, { - hooks: { - animate: AnimateEntity; - process: ProcessEntity; - }; + animate: AnimateEntity; + process: ProcessEntity; entities: Array>; } >; @@ -50,21 +48,21 @@ export const currentScene: Scene = { entities: [], }, process: () => {}, - entityPool: new Map(), + entityMap: new Map(), }; function animateEntities(ctx: CanvasRenderingContext2D, delta: number): void { - for (const entry of currentScene.entityPool.values()) { + for (const entry of currentScene.entityMap.values()) { for (const entity of entry.entities) { - entry.hooks.animate(entity as Entity, ctx, delta); + entry.animate(entity as Entity, ctx, delta); } } } function processEntities(delta: number): void { - for (const entry of currentScene.entityPool.values()) { + for (const entry of currentScene.entityMap.values()) { for (const entity of entry.entities) { - entry.hooks.process(entity as Entity, delta); + entry.process(entity as Entity, delta); } } } @@ -111,15 +109,13 @@ export async function loadScene(name: string): Promise { state: structuredClone(e.state), }; - if (currentScene.entityPool.has(e.id)) { - const pool = currentScene.entityPool.get(e.id); + if (currentScene.entityMap.has(e.id)) { + const pool = currentScene.entityMap.get(e.id); pool!.entities.push(entity); } else { - currentScene.entityPool.set(e.id, { - hooks: { - animate: entityAnimateMap.get(entry.id)!, - process: entityProcessMap.get(entry.id)!, - }, + currentScene.entityMap.set(e.id, { + animate: entityAnimateMap.get(entry.id)!, + process: entityProcessMap.get(entry.id)!, entities: [entity], }); } diff --git a/entities/testEntity/index.ts b/entities/testEntity/index.ts index 8d0cfec..4a58f08 100644 --- a/entities/testEntity/index.ts +++ b/entities/testEntity/index.ts @@ -1,24 +1,51 @@ -import { useEntity } from "#/engine/Entity.ts"; +import { type Entity, useEntity } from "#/engine/Entity.ts"; import { viewport } from "#/engine/Viewport.ts"; import { loadImage } from "#/lib/loadImage.ts"; -import { createSprite, drawSprite } from "#/lib/Sprite.ts"; +import { createSprite, drawSprite, type Sprite } from "#/lib/Sprite.ts"; -const sprite = createSprite(await loadImage("/assets/char-idle.png"), 2, 4); +const spriteIdle = createSprite(await loadImage("/assets/char-idle.png"), 2, 4); +const spriteWalk = createSprite(await loadImage("/assets/char-walk.png"), 4, 4); +spriteWalk.yIndex = 2; + +function animateSprite( + ctx: CanvasRenderingContext2D, + sprite: Sprite, + entity: Entity, + delta: number, +): void { + entity.state.animations.walk.frameDelta += delta; + if ( + entity.state.animations.walk.frameDelta > + entity.state.animations.walk.frameTime + ) { + entity.state.animations.walk.frameDelta = + entity.state.animations.walk.frameDelta % + entity.state.animations.walk.frameTime; + + spriteWalk.xIndex += 1; + if (spriteWalk.xIndex >= spriteWalk.xFrames) { + spriteWalk.xIndex = 0; + } + } + drawSprite(ctx, spriteWalk, entity.position.x, entity.position.y); +} const { animate, process } = useEntity("testEntity", { - animation: { - xFrame: 0, - yFrame: 0, + animations: { + walk: { + frameTime: 222, + frameDelta: 0, + }, }, stuff: 1, }); -animate((entity, ctx, _delta) => { - drawSprite(ctx, sprite, entity.position.x, entity.position.y, 16, 16); +animate((entity, ctx, delta) => { + animateSprite(ctx, spriteIdle, entity, delta); }); -process((entity, _delta) => { - entity.position.x += entity.state.stuff; +process((entity, delta) => { + entity.position.x += entity.state.stuff * 0.05 * delta; if (entity.position.x > viewport.canvas.width - 16) { entity.state.stuff = -1; } else if (entity.position.x < 0) { diff --git a/lib/Sprite.ts b/lib/Sprite.ts index 6d26e51..e5af89e 100644 --- a/lib/Sprite.ts +++ b/lib/Sprite.ts @@ -4,8 +4,8 @@ export type Sprite = { yFrames: number; frameWidth: number; frameHeight: number; - x: number; - y: number; + xIndex: number; + yIndex: number; }; export function createSprite( @@ -19,8 +19,8 @@ export function createSprite( yFrames, frameWidth: image.width / xFrames, frameHeight: image.height / yFrames, - x: 0, - y: 0, + xIndex: 0, + yIndex: 0, }; } @@ -29,18 +29,16 @@ export function drawSprite( sprite: Sprite, x: number, y: number, - width: number, - height: number, ): void { ctx.drawImage( sprite.image, - sprite.x, - sprite.y, + sprite.xIndex * sprite.frameWidth, + sprite.yIndex * sprite.frameHeight, sprite.frameWidth, sprite.frameHeight, x, y, - width, - height, + sprite.frameWidth, + sprite.frameHeight, ); }