How to use Texture Atlas with TexturePacker

[WIP]

Using a texture Atlas will generally allow you to :

• save memory, by packing all your sprites into a single texture
• increase your framerate, by optimising the GPU usage
• make your game starts faster, by loading a single texture

In this tutorial we are gonna to see how to :

• use TexturePacker to create a texture atlas
• import the generated texture into a melonJS project
• add a static renderable sprite
• add a renderable animation

create a Texture atlas

To create a new texture atlas, simply start TexturePacker and select the generic JSON (Array) framework :

Then drag & drop the directory containing your sprite images to the Sprites area of TexturePacker. TexturePacker will automatically load and lay out all image files. For this example we use the assets from the texture packer example here (see the cityscene folder).

After that use the file selection button to enter a Data file, name it cityscene.json and place it in the [img] folder (to follow the melonJS boilerplate structure), and do the same for the texture file by choosing cityscene.png in Texture file's file selector (also place it in the same folder).

Recommended settings :

• use "Power of Two" size for the texture, especially if you do plan to use the webGL renderer, to optimize the use of GPU memory
• we recommend not to use texture rotation when possible (although this will increase the final texture size), as it forces melonJS to apply a default rotation angle when drawing sprites and, based on how many sprites are to be displayed, can impact performance.

Finally press the [Publish sprite sheet] to create the sprite sheet, and we are done in TexturePacker !

import the generated texture into a melonJS project

As this tutorial is focusing on using TexturePacker, we will assume that you are already familiar with melonJS and that you have at least a first project up & running. If you need help on starting with melonJS, we recommend you to check either our platformer or space invaders tutorial.

Loading the texture atlas and sprite sheet in melonJS :

the first step is of course to add our two files to the list of assets to be loaded :`

game.resources = [
    { name : "texture", type : "json", src : "data/img/cityscene.json" },
    { name : "texture", type : "image", src : "data/img/cityscene.png" }
];

(note that this is automatically managed by our boilerplate, as it builds the resources list and exposes it to your app as game.resources (build/js/resources.js) when using the grunt serve task)

Then let's create a global reference of our Texture under the game namespace, so that we can reuse it later :

// load the texture atlas file
game.texture = new me.video.renderer.Texture(
   me.loader.getJSON("texture"),
   me.loader.getImage("texture")
);

make sure of you course to do this after all resources have been preloaded (in our example we created from the loaded function callback).

add the static background

Adding a static background is pretty easy, and for that we will use the sprite from our texture called background. From your play screen onResetEvent function :

// add the Background
var background = game.texture.createSpriteFromName("background");
// set position to the middle of the viewport
// (as the sprite anchorPoint is (0.5, 0.5)
background.pos.set(me.game.viewport.width / 2, me.game.viewport.height / 2, 1);
// add to the scene
me.game.world.addChild(background);

Note that as the default settings in TexturePacker is to use center as the anchorPoint, we set also set the default position for the background to the center of the screen, but you can of course change it to top-left or whatever you need.

Also, note that melonJS 3.x provides an alternate and easier way of creating a me.Sprite object from a texture atlas, as shown below :

// add the Background with default position to the middle of the viewport
var background = new me.Sprite(
    me.game.viewport.width / 2, 
    me.game.viewport.height / 2,
    {
        image: game.texture,
        region : ""background".png"
    }
);
// add to the scene
me.game.world.addChild(background, 1);

add the cap guy animation

source code

https://github.com/melonjs/melonJS/tree/master/examples/texturepacker