TextureAtlas

class TextureAtlas

A Texture atlas class, currently supports :

TexturePacker : through JSON export (standard and multipack texture atlas)
Free Texture Packer : through JSON export (standard and multipack texture atlas)
aseprite : through JSON export (standard and multipack texture atlas)
ShoeBox : through JSON export using the melonJS setting file
Standard (fixed cell size) spritesheet : through a {framewidth:xx, frameheight:xx, anchorPoint:me.Vector2d} object );

Constructor

new TextureAtlas(atlases: object | Array<object>, src: HTMLImageElement | HTMLCanvasElement | string | Array<HTMLImageElement> | Array<HTMLCanvasElement> | Array<string>, cache: boolean) → {}

 // 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")

Parameters:
Name	Type	Attributes	Default	Description
atlases	object \| Array<object>			atlas information. See loader.getJSON
src	HTMLImageElement \| HTMLCanvasElement \| string \| Array<HTMLImageElement> \| Array<HTMLCanvasElement> \| Array<string>	<optional>	atlas.meta.image	Image source
cache	boolean	<optional>	false	Use true to skip caching this Texture

Summary

Methods from TextureAtlas

object	addRegion(name: string, x: number, y: number, w: number, h: number)
Float32Array	addUVs(atlas: object, name: object, w: number, h: number)
Sprite	createAnimationFromName(names: Array<string> \| number<Array>, settings: object)
Sprite \| NineSliceSprite	createSpriteFromName(name: string, settings: object, nineSlice: boolean)
object	getAtlas(name: string)
string	getFormat()
object	getRegion(name: string, atlas: string)
HTMLImageElement \| HTMLCanvasElement	getTexture(region: object)
Float32Array	getUVs(name: object)

Public Methods

addRegion atlas.js:227

addRegion(name: string, x: number, y: number, w: number, h: number) → {object}

add a region to the atlas

Parameters:
Name	Type	Description
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:
Type	Description
object	the created region

addUVs atlas.js:304

addUVs(atlas: object, name: object, w: number, h: number) → {Float32Array}

add uvs mapping for the given region

Parameters:
Name	Type	Description
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:
Type	Description
Float32Array	the created region UVs

createAnimationFromName atlas.js:374

createAnimationFromName(names: Array<string> | number<Array>, settings: object) → {Sprite}

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

 // 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);

Parameters:
Name	Type	Attributes	Description
names	Array<string> \| number<Array>	<optional>	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)
settings	object	<optional>	Additional settings passed to the Sprite contructor

Returns:
Type	Description
Sprite

createSpriteFromName atlas.js:334

createSpriteFromName(name: string, settings: object, nineSlice: boolean) → {Sprite | NineSliceSprite}

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

// 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
);

Parameters:
Name	Type	Attributes	Default	Description
name	string			name of the sprite
settings	object	<optional>		Additional settings passed to the Sprite contructor
nineSlice	boolean	<optional>	false	if true returns a 9-slice sprite

Returns:
Type	Description
Sprite \| NineSliceSprite

getAtlas atlas.js:193

getAtlas(name: string) → {object}

return the default or specified atlas dictionnary

Parameters:
Name	Type	Attributes	Description
name	string	<optional>	atlas name in case of multipack textures

Returns:
Type	Description
object

getFormat atlas.js:206

getFormat() → {string}

return the format of the atlas dictionnary

Returns:
Type	Description
string	will return "texturepacker", or "ShoeBox", or "melonJS", or "Spritesheet (fixed cell size)"

getRegion atlas.js:260

getRegion(name: string, atlas: string) → {object}

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

Parameters:
Name	Type	Attributes	Description
name	string		name of the sprite
atlas	string	<optional>	name of a specific atlas where to search for the region

Returns:
Type	Description
object

getTexture atlas.js:214

getTexture(region: object) → {HTMLImageElement | HTMLCanvasElement}

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

Parameters:
Name	Type	Attributes	Description
region	object	<optional>	region name in case of multipack textures

Returns:
Type	Description
HTMLImageElement \| HTMLCanvasElement

getUVs atlas.js:283

getUVs(name: object) → {Float32Array}

return the uvs mapping for the given region

Parameters:
Name	Type	Description
name	object	region (or frame) name

Returns:
Type	Description
Float32Array	region Uvs