Class TextureAtlas

constructor

• new TextureAtlas(
      atlases: object | object[],
      src?: any,
      options?: boolean | object,
  ): TextureAtlas

  Parameters

  • atlases: object | object[]

    atlas information. See loader.getJSON

  • Optionalsrc: any

    Image source

  • Optionaloptions: boolean | object

    either a boolean (legacy cache flag — false disables TextureCache registration; default behavior is to cache) or an options object { cache?: boolean, normalMap?: HTMLImageElement|HTMLCanvasElement|OffscreenCanvas|ImageBitmap|string }. When normalMap is provided, the atlas exposes a paired normal-map texture sharing the same UVs as the color texture (used by the WebGL renderer's lit pipeline). HTMLVideoElement is intentionally not supported as a normal map (would freeze on frame 0 due to per-image GL texture caching).

  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")
  );
  
  // SpriteIlluminator workflow: pair the color atlas with its normal map
  game.texture = new me.TextureAtlas(
      me.loader.getJSON("scene"),
      me.loader.getImage("scene"),
      { normalMap: me.loader.getImage("scene_n") }
  );
  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: any, settings: any): Sprite

  Parameters

  • names: any
  • settings: any

  Returns Sprite

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

getAnimationSettings

• getAnimationSettings(names?: string[] | number[]): object

  Return the Sprite settings object (framewidth, frameheight, atlas, atlasIndices, etc.) for the given set of atlas frame names. This is useful when extending Sprite and you need to pass atlas animation data to the parent constructor.

  Parameters

  • Optionalnames: string[] | number[]

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

  Returns object

  A settings object suitable for passing to the Sprite constructor

  Example

  // extend Sprite directly with texture atlas animation frames
  class MyPlayer extends me.Sprite {
      constructor(x, y, settings) {
          super(x, y, {
              ...game.texture.getAnimationSettings([
                  "walk0001.png", "walk0002.png", "walk0003.png"
              ]),
              anchorPoint: { x: 0.5, y: 1.0 }
          });
          // add a physic body
          this.body = new me.Body(this, new me.Rect(0, 0, this.width, this.height));
      }
  }
  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)"

getNormalTexture

• getNormalTexture(
      region?: object,
  ):
      | ImageBitmap
      | HTMLImageElement
      | HTMLCanvasElement
      | OffscreenCanvas
      | null

  Return the paired normal-map texture for the given region, or null if no normal map was provided to this atlas. The normal map shares the same UV layout as the color texture returned by TextureAtlas#getTexture.

  Parameters

  • Optionalregion: object

    region name in case of multipack textures

  Returns ImageBitmap | HTMLImageElement | HTMLCanvasElement | OffscreenCanvas | null

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): HTMLImageElement | HTMLCanvasElement

  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 HTMLImageElement | HTMLCanvasElement

getUVs

• getUVs(
      name: string | number,
      sy?: number,
      sw?: number,
      sh?: number,
  ): Float32Array<ArrayBufferLike>

  return the uvs mapping for the given region

  Parameters

  • name: string | number

    region (or frame) name, or sx when using numeric parameters

  • Optionalsy: number

    source y coordinate (when using numeric parameters)

  • Optionalsw: number

    source width (when using numeric parameters)

  • Optionalsh: number

    source height (when using numeric parameters)

  Returns Float32Array<ArrayBufferLike>

  region Uvs