91 lines
2.1 KiB
TypeScript
91 lines
2.1 KiB
TypeScript
import { Juego } from "./main";
|
|
|
|
export type Sprite = {
|
|
getWidth: (juego: Juego<any>) => number;
|
|
getHeight: (juego: Juego<any>) => number;
|
|
draw: (
|
|
juego: Juego<any>,
|
|
x: number,
|
|
y: number,
|
|
spriteIndex?: number,
|
|
flipped?: boolean
|
|
) => void;
|
|
width: number;
|
|
height: number;
|
|
};
|
|
|
|
// Sprites are image assets that have a grid of tiles to animate
|
|
export function loadSprite(
|
|
img: HTMLImageElement,
|
|
// Calculates the size of the sprite when rendering
|
|
size:
|
|
| { width: (juego: Juego<any>) => number }
|
|
| { height: (juego: Juego<any>) => number },
|
|
tileSize?: { width: number; height: number }
|
|
): Sprite {
|
|
const width = tileSize ? tileSize.width : img.width;
|
|
const height = tileSize ? tileSize.height : img.height;
|
|
|
|
const rowSize = Math.floor(img.width / width);
|
|
if (img.width / width !== rowSize) {
|
|
console.warn(
|
|
`The sprite grid for ${img.src} has extra space after rows, are you sure the width/height of each tile is right?`
|
|
);
|
|
}
|
|
|
|
function getWidth(juego: Juego<any>) {
|
|
return "width" in size
|
|
? size.width(juego)
|
|
: (size.height(juego) * width) / height;
|
|
}
|
|
|
|
function getHeight(juego: Juego<any>) {
|
|
return "height" in size
|
|
? size.height(juego)
|
|
: (size.width(juego) * height) / width;
|
|
}
|
|
|
|
function draw(
|
|
juego: Juego<any>,
|
|
x: number,
|
|
y: number,
|
|
spriteIndex = 0,
|
|
flipped = false
|
|
) {
|
|
const drawHeight = getHeight(juego);
|
|
const drawWidth = getWidth(juego);
|
|
const tileX = spriteIndex % rowSize;
|
|
const tileY = Math.floor(spriteIndex / rowSize);
|
|
if (flipped) {
|
|
juego.ctx.save();
|
|
juego.ctx.scale(-1, 1);
|
|
juego.ctx.drawImage(
|
|
img,
|
|
tileX * width,
|
|
tileY * height,
|
|
width,
|
|
height,
|
|
-x - drawWidth,
|
|
y,
|
|
drawWidth,
|
|
drawHeight
|
|
);
|
|
juego.ctx.restore();
|
|
} else {
|
|
juego.ctx.drawImage(
|
|
img,
|
|
tileX * width,
|
|
tileY * height,
|
|
width,
|
|
height,
|
|
x,
|
|
y,
|
|
drawWidth,
|
|
drawHeight
|
|
);
|
|
}
|
|
}
|
|
|
|
return { getWidth, getHeight, draw, width, height };
|
|
}
|