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.
 
 
 
 

80 lines
1.8 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,
// The size of each tile
width: number,
height: number,
// Calculates the size of the sprite when rendering
getHeight: (juego: Juego<any>) => number
): Sprite {
const aspect = width / 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 getHeight(juego) * aspect;
}
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 };
}