Skip to main content

SpriteSheet

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

Index

Constructors

constructor

  • Build a new sprite sheet from a list of sprites

    Use [[SpriteSheet.fromImageSource]] to create a SpriteSheet from an [[ImageSource]] organized in a grid


    Parameters

    Returns SpriteSheet

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

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