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.
 
 
 
 
salva-la-costanera/src/sprite.ts

58 lines
1.7 KiB

import { Juego } from "./main"
// 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,
) {
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 }
}