55 lines
1.4 KiB
TypeScript
55 lines
1.4 KiB
TypeScript
import { type Entity, useEntity } from "#/engine/Entity.ts";
|
|
import { viewport } from "#/engine/Viewport.ts";
|
|
import { loadImage } from "#/lib/loadImage.ts";
|
|
import { createSprite, drawSprite, type Sprite } from "#/lib/Sprite.ts";
|
|
|
|
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<any>,
|
|
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", {
|
|
animations: {
|
|
walk: {
|
|
frameTime: 222,
|
|
frameDelta: 0,
|
|
},
|
|
},
|
|
stuff: 1,
|
|
});
|
|
|
|
animate((entity, ctx, delta) => {
|
|
animateSprite(ctx, spriteIdle, entity, delta);
|
|
});
|
|
|
|
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) {
|
|
entity.state.stuff = 1;
|
|
}
|
|
});
|