Class TextureAtlas

constructor

• new TextureAtlas(
      atlases: object | object[],
      src?:
          | string
          | string[]
          | OffscreenCanvas
          | HTMLCanvasElement
          | HTMLImageElement
          | OffscreenCanvas[]
          | HTMLImageElement[]
          | HTMLCanvasElement[],
      cache?: boolean,
  ): TextureAtlas

  Parameters

  • atlases: object | object[]

    atlas information. See loader.getJSON

  • Optionalsrc:
        | string
        | string[]
        | OffscreenCanvas
        | HTMLCanvasElement
        | HTMLImageElement
        | OffscreenCanvas[]
        | HTMLImageElement[]
        | HTMLCanvasElement[]

    Image source

  • Optionalcache: boolean

    Use true to skip caching this Texture

  Returns TextureAtlas

  Example

  // create a texture atlas from a JSON Object
  game.texture = new me.TextureAtlas(
      me.loader.getJSON("texture")
  );
  
  // create a texture atlas from a multipack JSON Object
  game.texture = new me.TextureAtlas([
      me.loader.getJSON("texture-0"),
      me.loader.getJSON("texture-1"),
      me.loader.getJSON("texture-2")
  ]);
  
  // create a texture atlas for a spritesheet with an anchorPoint in the center of each frame
  game.texture = new me.TextureAtlas(
      {
          framewidth : 32,
          frameheight : 32,
          anchorPoint : new me.Vector2d(0.5, 0.5)
      },
      me.loader.getImage("spritesheet")
  Copy

repeat

addRegion

• addRegion(name: string, x: number, y: number, w: number, h: number): object

  add a region to the atlas

  Parameters

  • name: string

    region mame

  • x: number

    x origin of the region

  • y: number

    y origin of the region

  • w: number

    width of the region

  • h: number

    height of the region

  Returns object

  the created region

addUVs

• addUVs(
      atlas: object,
      name: object,
      w: number,
      h: number,
  ): Float32Array<ArrayBufferLike>

  add uvs mapping for the given region

  Parameters

  • atlas: object

    the atlas dictionnary where the region is define

  • name: object

    region (or frame) name

  • w: number

    the width of the region

  • h: number

    the height of the region

  Returns Float32Array<ArrayBufferLike>

  the created region UVs

createAnimationFromName

• createAnimationFromName(names?: string[] | number[], settings?: object): Sprite

  Create an animation object using the first region found using all specified names

  Parameters

  • Optionalnames: string[] | number[]

    list of names for each sprite (if not specified all defined names/entries in the atlas will be added) (when manually creating a Texture out of a spritesheet, only numeric values are authorized)

  • Optionalsettings: object

    Additional settings passed to the Sprite contructor

  Returns Sprite

  Example

  // create a new texture object under the `game` namespace
  game.texture = new me.TextureAtlas(
      me.loader.getJSON("texture"),
      me.loader.getImage("texture")
  );
  
  // create a new Animated Sprite
  let sprite = game.texture.createAnimationFromName([
      "walk0001.png", "walk0002.png", "walk0003.png",
      "walk0004.png", "walk0005.png", "walk0006.png",
      "walk0007.png", "walk0008.png", "walk0009.png",
      "walk0010.png", "walk0011.png"
  ]);
  
  // define an additional basic walking animation
  sprite.addAnimation ("simple_walk", [0,2,1]);
  // you can also use frame name to define your animation
  sprite.addAnimation ("speed_walk", ["walk0007.png", "walk0008.png", "walk0009.png", "walk0010.png"]);
  // set the default animation
  sprite.setCurrentAnimation("simple_walk");
  // set the renderable position to bottom center
  sprite.anchorPoint.set(0.5, 1.0);
  Copy

createSpriteFromName

• createSpriteFromName(
      name: string,
      settings?: object,
      nineSlice?: boolean,
  ): Sprite | NineSliceSprite

  Create a sprite object using the first region found using the specified name

  Parameters

  • name: string

    name of the sprite

  • Optionalsettings: object

    Additional settings passed to the Sprite contructor

  • OptionalnineSlice: boolean = false

    if true returns a 9-slice sprite

  Returns Sprite | NineSliceSprite

  Example

  // create a new texture object under the `game` namespace
  game.texture = new me.TextureAtlas(
     me.loader.getJSON("texture"),
     me.loader.getImage("texture")
  );
  ...
  ...
  // create a new "coin" sprite
  let sprite = game.texture.createSpriteFromName("coin.png");
  // set the renderable position to bottom center
  sprite.anchorPoint.set(0.5, 1.0);
  ...
  ...
  // create a 9-slice sprite
  let dialogPanel = game.texture.createSpriteFromName(
     "rpg_dialo.png",
     // width & height are mandatory for 9-slice sprites
     { width: this.width, height: this.height },
     true
  );
  Copy

getAtlas

• getAtlas(name?: string): object

  return the default or specified atlas dictionnary

  Parameters

  • Optionalname: string

    atlas name in case of multipack textures

  Returns object

getFormat

• getFormat(): string

  return the format of the atlas dictionnary

  Returns string

  will return "texturepacker", or "ShoeBox", or "melonJS", or "Spritesheet (fixed cell size)"

getRegion

• getRegion(name: string, atlas?: string): object

  return a normalized region (or frame) information for the specified sprite name

  Parameters

  • name: string

    name of the sprite

  • Optionalatlas: string

    name of a specific atlas where to search for the region

  Returns object

getTexture

• getTexture(region?: object): HTMLCanvasElement | HTMLImageElement

  return the source texture for the given region (or default one if none specified)

  Parameters

  • Optionalregion: object

    region name in case of multipack textures

  Returns HTMLCanvasElement | HTMLImageElement

getUVs

• getUVs(name: object): Float32Array<ArrayBufferLike>

  return the uvs mapping for the given region

  Parameters

  • name: object

    region (or frame) name

  Returns Float32Array<ArrayBufferLike>

  region Uvs