textureatlas.enchant.js is a plugin for enchant.js that make it very easy to use a texture atlas generated from Texture Packer in your enchant.js game/application.
-
Download Texture Packer
-
Set the export setting to output JSON(Array)
-
Create a texture atlas as usual. You will get two files, which are .json and .png files.
-
Include textureatlas.enchant.js into your HTML file.
-
Preload both the json file and the png file in your game.
game.preload("res/atlas.png",
"res/atlas.json");
- Create a texture atlas and give it a name for later access.
// Create a texture atlas called 'mainAtlas', using
// atlas.json and atlas.png files
enchant.TextureAtlas.createTextureAtlas(
'mainAtlas',
game.assets['res/atlas.json'],
game.assets['res/atlas.png']);
- Create an instance of a AtlasSprite class and use it as a normal enchant.js Sprite
var bgSprite = new enchant.AtlasSprite('mainAtlas', 'bg_01.png');
bgSprite.x = Core.instance.width/2 - bgSprite.width/2;
this.addChild(bgSprite);
- You can also change the sprite's graphic quickly by reassigning the sprite identifier.
bgSprite.spriteId = 'enemies-01.png';