Skip to main content

SpriteSheet

Represents a collection of sprites from a source image with some organization in a grid

Index

Constructors

constructor

Properties

publicreadonlycolumns

columns: number

publicreadonlyrows

rows: number

publicreadonlysprites

sprites: Sprite[] = []

Methods

publicclone

publicgetSprite

  • Find a sprite by their x/y integer coordinates in the SpriteSheet, for example getSprite(0, 0) is the Sprite in the top-left and getSprite(1, 0) is the sprite one to the right.


    Parameters

    Returns Sprite

publicgetSpriteAsImage

  • getSpriteAsImage(x: number, y: number): Promise<HTMLImageElement>
  • Returns a new image exact size and copy of the original sprite slice.

    Useful if you need to apply effects, manipulate, or mutate the image and you don't want to disturb the original sprite sheet.


    Parameters

    • x: number
    • y: number

    Returns Promise<HTMLImageElement>

publicgetSpriteAsStandalone

  • getSpriteAsStandalone(x: number, y: number): Promise<Sprite>
  • Returns a sprite that has a new backing image the exact size of the sprite that tha is a copy of the original sprite slice.

    Useful if you need to apply effects, manipulate, or mutate the image and you don't want to disturb the original sprite sheet.


    Parameters

    • x: number
    • y: number

    Returns Promise<Sprite>

publicgetTiledSprite

  • Find a sprite by their x/y integer coordinates in the SpriteSheet and configures tiling to repeat by default, for example getTiledSprite(0, 0) is the TiledSprite in the top-left and getTiledSprite(1, 0) is the sprite one to the right.

    Example:

    spriteSheet.getTiledSprite(1, 0, {
    width: game.screen.width,
    height: 200,
    wrapping: {
    x: ex.ImageWrapping.Repeat,
    y: ex.ImageWrapping.Clamp
    }
    });

    Parameters

    Returns TiledSprite

publicstaticfromImageSource

  • Create a SpriteSheet from an ImageSource organized in a grid

    Example:

    const spriteSheet = SpriteSheet.fromImageSource({
      image: imageSource,
      grid: {
        rows: 5,
        columns: 2,
        spriteWidth: 32, // pixels
        spriteHeight: 32 // pixels
      },
      // Optionally specify spacing
      spacing: {
        // pixels from the top left to start the sprite parsing
        originOffset: {
          x: 5,
          y: 5
        },
        // pixels between each sprite while parsing
        margin: {
          x: 1,
          y: 1
        }
      }
    })

    Parameters

    Returns SpriteSheet

publicstaticfromImageSourceWithSourceViews