Tilemap Layer z-indices vs. player sprite index

[mauticom]

Hi guys,

 

First thanks for the awesome engine and especially great documentation.

 

I'm currently working on a top down runner. After playing around for a while now I have some assumptions I would like to verify if I'm right:

 

1. Tilemap layers visibility are always rendered in the same row as they are created.
2. There is no way I can adjust their z-index with layer.z = X.
3. The only way to push a certain layer at the top is to use the bringToTop() function, which basically reorders the display list.
4. My main question: Is there any possibility that when I have a player sprite, that is not part of the tile map, I can put between 2 tilemap layers? (from my trying it seems I can only affect the display list order within the tilemap or within sprites outside of the tilemap, but I can't mix them)

 

Thank you and keep up the good work,

 

Clemens

[lewster32]

From my understanding, Tilemap itself is not a display object related to a group (as you might expect) but instead a manager of TilemapLayers, which are extended from Phaser.Image and consist basically of a single texture which is redrawn each frame with the current positions of your tiles. These layers are added to the passed group when creating a Tilemap (and will default to game.world if no group is passed) so in theory it should be possible to insert your own layers between the layers added by the Tilemap by managing the children and indices of game.world or, to make it easier, a group made to hold the Tilemap layers and your player sprite.

[mauticom]

Hi Lewster,

 

thanks. Indeed I found the objects in game.world.children. 

It seems the z index doesn't have any influence on the renderer. I have to reorder the children array to affect visibility (highest index == highest z-index). That's really odd, and I didn't expect that kind of behaviour.

 

For which purpose is the z-index used!?

 

Regards,

 

Clemens

[rendall]

Hi mauticom.

 

I found success with the same problem just now using Group.addAt(child,index);  

 

e.g.:

 

var map = new Map(this.game, 'map'); // all layers are created in this constructorvar player = new Player(this.game, 210, 240, 1);this.game.world.addAt(player, 2); // this is above the ground elements and below the buildings and trees

Here's a quick peek at the Map.js:

 

var Map = function(game, key, tileWidth, tileHeight, width, height) {    Phaser.Tilemap.call(this, game, key, tileWidth, tileHeight, width, height);  this.addTilesetImage('gameSpriteSheet');var ground = this.createLayer('ground'); // This is layer index '0'ground.resizeWorld();this.createLayer('roads'); // layer index 1// player should go here at layer index 2var buildings = this.createLayer('buildings'); // layer index 3this.setCollisionByExclusion([], true, buildings);var trees = this.createLayer('trees'); // etc.};Map.prototype = Object.create(Phaser.Tilemap.prototype);  Map.prototype.constructor = Map;

 

 

[lewster32]

The z property is pretty much only used together with Group.sort - by default it's just set to the index in the array + 1 (children.length) and the group updates all of its children's z values when you use methods which affect ordering such as swap, moveUp, moveDown etc. It's not meant to be a way to actually change the object's position in a group on its own, you need to use sort after changing whereupon it should then be applied.

 

Somewhat misunderstood is that because Group adds sorting and other stuff that pixi's DisplayObjectContainer doesn't have, and Sprites are extended from PIXI.DisplayObjectContainer and not Phaser.Group, these functions aren't available on Sprites where you can also add children. I guess this is a holdover from how Phaser was structured early in its development, and changing it now would break a lot of stuff.

[mauticom]

Awesome thank you guys. That helped a lot.