How can I correctly order a tilemap so that it appears on the bottom-most layer with Phaser?

Question

I have been working on a small game using Phaser and have mostly gotten it working, however collectively the various parts are not working correctly. For some odd reason, the main tilemap - meant to be a base layer, is set over everything else.

I have double checked this by removing the map, and have seen the asteroid shadows generated on screen. Even setting the asteroid group to a depth of 200 or more, the map still appears on top and using 'group.sort' seems to have no effect. How can I fix this?

GameObject.Engine = function() {};

GameObject.Engine.prototype = {
    init : function()
    { 
        this.map;
        this.cursors;
        this.mapLayer = System.add.group();
        this.mapLayer.z = 0;

        this.asteroidShadowGroup = System.add.group();
        this.asteroidShadowGroup.z = 200;

        this.mapSizeWidth = 1280;
        this.mapSizeHeight = 960;
        this.bufferZone = 60;


        System.world.setBounds(0, 0, this.mapSizeWidth, this.mapSizeHeight);
        this.initPhysics();
    },
    initPhysics :function()
    {
        System.physics.startSystem(Phaser.Physics.ARCADE);
        this.asteroidShadowGroup.enableBody = true;
        this.asteroidShadowGroup.physicsBodyType = Phaser.Physics.ARCADE;       
    },
    create : function()
    {
        this.map = System.add.tilemap('World');
        this.map.addTilesetImage('Tiles', 'Background');

        this.map.createLayer('BaseWorld');
        this.cursors = System.input.keyboard.createCursorKeys();

        this.buildAsteroids();
    },
    update: function() {

        this.asteroidShadowGroup.forEachExists(this.checkBoundaries, this);

        if (this.cursors.up.isDown)
        {
            System.camera.y -= 4;
        }
        else if (this.cursors.down.isDown)
        {
            System.camera.y += 4;
        }

        if (this.cursors.left.isDown)
        {
            System.camera.x -= 4;
        }
        else if (this.cursors.right.isDown)
        {
            System.camera.x += 4;
        }
    },
    checkBoundaries: function (sprite) {
        if (sprite.x < -this.bufferZone) {
            sprite.x = this.mapSizeWidth + this.bufferZone;
        } else if (sprite.x > this.mapSizeWidth + this.bufferZone) {
            sprite.x = -this.bufferZone;
        } 

        if (sprite.y < -this.bufferZone) {
            sprite.y = this.mapSizeHeight  + this.bufferZone;
        } else if (sprite.y > this.mapSizeHeight  + this.bufferZone) {
            sprite.y = -this.bufferZone;
        }
    },
    buildAsteroids: function () {

        for (var i=0; i < 8; i++ ) {

            var x;
            var y;

            x = System.rnd.integerInRange(0, this.mapSizeWidth);
            y = System.rnd.integerInRange(0, this.mapSizeHeight);

            this.createAsteroid(x, y);
        }   
    },
    createAsteroid: function (x, y) {
        var asteroid = this.asteroidShadowGroup.create(x, y, 'asteroids', System.rnd.integerInRange(0, 12));
        asteroid.anchor.set(0.5, 0.5);
        asteroid.angularVelocity = System.rnd.integerInRange(0, 360);

        var randomAngle = System.math.degToRad(System.rnd.angle());
        var randomVelocity = System.rnd.integerInRange(10, 40);

        System.physics.arcade.velocityFromRotation(randomAngle, randomVelocity, asteroid.body.velocity);
    }
}

Answer 1

You can create and initialise your groups after creating this.map in your create() method.

Generally, if you want to add groups in different "z" layers the order you add them to the game matters. For example if you have:

this.groupA = this.game.add.group();
this.groupB = this.game.add.group();
this.groupC = this.game.add.group();

then the rendering order will always be:

• groupA background
• groupB middle and
• groupC foreground

There are probably some methods like bringToTop() where you can manipulate the order, but you'd have to search the docs for that!