106 lines
2.0 KiB
TypeScript
106 lines
2.0 KiB
TypeScript
import { loadImage } from "./lib/loadImage";
|
|
|
|
export type SpriteSheet = {
|
|
image: HTMLImageElement;
|
|
xFrames: number;
|
|
yFrames: number;
|
|
frameWidth: number;
|
|
frameHeight: number;
|
|
};
|
|
|
|
export type SpriteAnimation = {
|
|
src: string;
|
|
xIndex: number;
|
|
yIndex: number;
|
|
frameTime: number;
|
|
frameDelta: number;
|
|
};
|
|
|
|
// It's not possible to crate a structured clone of a HTMLImageElement and it would be a
|
|
// waste of memory anyways since we use the HTMLImageElement only as reference for draw calls.
|
|
// Therefore the SpriteSheet will stored by it's image source.
|
|
export const spriteSheetMap = new Map<string, SpriteSheet>();
|
|
|
|
export function createSpriteSheet(
|
|
image: HTMLImageElement,
|
|
xFrames: number,
|
|
yFrames: number,
|
|
): SpriteSheet {
|
|
return {
|
|
image,
|
|
xFrames,
|
|
yFrames,
|
|
frameWidth: image.width / xFrames,
|
|
frameHeight: image.height / yFrames,
|
|
};
|
|
}
|
|
|
|
export async function useSpriteSheetSrc(
|
|
src: string,
|
|
xFrames: number,
|
|
yFrames: number,
|
|
): Promise<string> {
|
|
spriteSheetMap.set(
|
|
src,
|
|
createSpriteSheet(await loadImage(src), xFrames, yFrames),
|
|
);
|
|
|
|
return src;
|
|
}
|
|
|
|
export function createSpriteAnimation(
|
|
src: string,
|
|
frameTime: number,
|
|
yIndex: number,
|
|
): SpriteAnimation {
|
|
return {
|
|
src,
|
|
xIndex: 0,
|
|
yIndex,
|
|
frameTime,
|
|
frameDelta: 0,
|
|
};
|
|
}
|
|
|
|
export function drawSprite(
|
|
ctx: CanvasRenderingContext2D,
|
|
sheet: SpriteSheet,
|
|
xIndex: number,
|
|
yIndex: number,
|
|
x: number,
|
|
y: number,
|
|
width?: number,
|
|
height?: number,
|
|
): void {
|
|
ctx.drawImage(
|
|
sheet.image,
|
|
xIndex * sheet.frameWidth,
|
|
yIndex * sheet.frameHeight,
|
|
sheet.frameWidth,
|
|
sheet.frameHeight,
|
|
x,
|
|
y,
|
|
width || sheet.frameWidth,
|
|
height || sheet.frameHeight,
|
|
);
|
|
}
|
|
|
|
export function playAnimation(
|
|
ctx: CanvasRenderingContext2D,
|
|
animation: SpriteAnimation,
|
|
x: number,
|
|
y: number,
|
|
delta: number,
|
|
): void {
|
|
const sheet = spriteSheetMap.get(animation.src)!;
|
|
|
|
if ((animation.frameDelta += delta) > animation.frameTime) {
|
|
animation.frameDelta = 0;
|
|
if ((animation.xIndex += 1) >= sheet.xFrames) {
|
|
animation.xIndex = 0;
|
|
}
|
|
}
|
|
|
|
drawSprite(ctx, sheet, animation.xIndex, animation.yIndex, x, y);
|
|
}
|