Adding and maintaining your game objects

As you create and work with various renderable objects, you need to tell MelonJS that they need to be executed as part of the game loop. You can do this one of two ways.

Since version 0.9.9, MelonJS provides an ObjectContainer class, as well as an instance of it at me.game.world. You can add your game objects to it via:

me.game.world.addChild(new MySprite());

The legacy style of doing it is (required for 0.9.8 and older):

me.game.add(new MySprite());
me.game.sort();

The ObjectContainer handles the sorting for you, and if you're in 0.9.9 or higher, so will the legacy style. It is advised when using an older version to call all your add statements first, then call sort.

You also need to tell MelonJS the draw order. By default, MelonJS uses the z property on your objects to sort. The lower the number gets updated & painted first, the highest number gets updated & painted last. You can tell MelonJS the draw order one of two ways.

First, declare it in your object definitions:

var MySprite = me.SpriteObject.extend({
    init : function() {
        this.parent(0, 0, me.loader.getImage('sprite'), 64, 64);
        this.z = 2;
    }
});

The second way is by using me.game.add and passing the z-index as the second parameter:

me.game.add(new MySprite(), 2);

This effectively accomplishes the same thing, the latter simply sets the z-index property on the object. You can of course alter the z property on your objects at any time in game. Just be sure to call sort.

Note

It's generally considered a good practice to use defer to ensure that the sort is not called mid loop:

me.game.sort.defer();

The entity pool

The entity pool is a way of managing your objects without having to create new ones unless you absolutely need them. The tutorial uses examples on combining tiled with the entity pool. The docs also cover basic usage here.

The key is to tell the pool what objects you want. Just be sure to only call it once, such as in your screen setup:

onResetEvent: function() {
  // tell the entity pool what classes it needs to work with
  me.entityPool.add('main', game.MainEntity, true);
  me.entityPool.add('renderable', game.RenderableEntity, true);
},

That tells the entity pool to create pools for each of those types. When you need to either create a new object, or grab an unallocated object from the pool, simply invoke:

var mainObject = me.entityPool.newInstanceOf('main', 100, 100);

The first parameter is the name you used in the add method, and the following params are what you wish to pass to the init of your object. From there, you simply work with the object as you normal. Add it via:

me.game.world.add(mainObject);

Then when you're done with it:

me.game.world.removeChild(mainObject);

Removing the child will remove it from the ObjectContainer, but it will keep it as an available object in the entity pool. Invoking newInstanceOf, will simply reset it.

Be sure that you properly initialize any data and variables in the init method of your objects.