salva-la-costanera/src/sprite.ts

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