Class TextureAtlas

constructor

• new TextureAtlas(atlases, src?, cache?): TextureAtlas

• Parameters

  • atlases: object | object[]

    atlas information. See loader.getJSON
  • Optionalsrc:
        | string
        | string[]
        | OffscreenCanvas
        | HTMLCanvasElement
        | HTMLImageElement
        | HTMLImageElement[]
        | OffscreenCanvas[]
        | 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, x, y, w, h): 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, name, w, h): Float32Array

• 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

  the created region UVs

createAnimationFromName

• createAnimationFromName(names?, settings?): 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, settings?, nineSlice?): 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?): 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, atlas?): 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?): 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): Float32Array

• return the uvs mapping for the given region

  Parameters

  • name: object

    region (or frame) name

  Returns Float32Array

  region Uvs