How to use Texture Atlas with TexturePacker

Using a texture Atlas will generally allow you to:

• save memory, by packing all your sprites into a single texture
• increase your framerate, by optimizing GPU usage (fewer draw calls)
• make your game start faster, by loading a single texture

In this tutorial we are going 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

Open TexturePacker and choose the JSON Array data format. Then drag & drop the directory containing your sprite images to the Sprites area.

Set the Data file to cityscene.json and Texture file to cityscene.png, placing both in your project's image folder.

Recommended settings:

• Use "Power of Two" size for the texture to optimize GPU memory
• Avoid texture rotation when possible — it forces extra rotation calculations when drawing sprites

Press Publish sprite sheet to generate the atlas.

Import the Texture Atlas

Loading the assets

Add the atlas JSON and image to your resources list:

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

Multipack textures: When using TexturePacker's multipack feature, list each atlas/image pair separately:

const resources = [
    { name: "cityscene-0", type: "json",  src: "data/img/cityscene-0.json" },
    { name: "cityscene-1", type: "json",  src: "data/img/cityscene-1.json" },
    { name: "cityscene-0", type: "image", src: "data/img/cityscene-0.png" },
    { name: "cityscene-1", type: "image", src: "data/img/cityscene-1.png" },
];

Creating the TextureAtlas

After preloading, create a TextureAtlas instance:

import { TextureAtlas, loader } from "melonjs";

const texture = new TextureAtlas(
    loader.getJSON("cityscene"),
    loader.getImage("cityscene"),
);

Multipack: Pass arrays of atlas data (the image argument is optional — source image names are extracted from the atlas metadata):

const texture = new TextureAtlas([
    loader.getJSON("cityscene-0"),
    loader.getJSON("cityscene-1"),
]);

Add a Static Background

Create a sprite from a named region in the atlas:

// using createSpriteFromName
const background = texture.createSpriteFromName("background");
background.pos.set(app.viewport.width / 2, app.viewport.height / 2, 1);
app.world.addChild(background);

Or create a Sprite directly with the atlas as the image source:

import { Sprite } from "melonjs";

const background = new Sprite(
    app.viewport.width / 2,
    app.viewport.height / 2,
    {
        image: texture,
        region: "background.png",
    },
);
app.world.addChild(background, 1);

Note: TexturePacker defaults to center as the anchor point. If you change it to top-left, set the position to (0, 0) accordingly.

Add an Animation

Use createAnimationFromName to create an animated sprite from atlas frames:

// in your Entity or Renderable constructor
this.renderable = texture.createAnimationFromName([
    "capguy/walk/0001", "capguy/walk/0002",
    "capguy/walk/0003", "capguy/walk/0004",
    "capguy/walk/0005", "capguy/walk/0006",
    "capguy/walk/0007", "capguy/walk/0008",
]);

You can define custom animations using addAnimation:

this.renderable.addAnimation("walk", [0, 1, 2, 3, 4, 5, 6, 7]);
this.renderable.addAnimation("idle", [0]);
this.renderable.setCurrentAnimation("walk");

Add movement in the update method:

update(dt) {
    this.pos.x += 0.3 * dt;

    if (this.pos.x >= app.viewport.width) {
        this.pos.x = 0;
    }

    super.update(dt);
    return true;
}

Source Code

Full source code of the TexturePacker example is available at: https://github.com/melonjs/melonJS/tree/master/packages/examples/src/examples/texturePacker