You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 
 
 

90 lines
2.1 KiB

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 };
}