define a Z-Index for specific sprite/elements.

[Phempt]

Hello guys, is there a way to set the Z-Index property for objects? Now a new object has an high z-index than previously created objects.

 

I need to set the highest z-index for some buttons like "sound on/off".

 

Thank you.

[JUL]

mySprite.bringToTop();

 

http://docs.phaser.io/Phaser.Sprite.html#z

[Stephan]

Panda tiles the sprites in order of appearance. Last sprite comes on top of the stack. I have had this problem also and was able to solve it with different containers.

Basically you create 2 (or more) main containers and add them to the main.scene.stage. Now you can add your buttons to the top container and the other sprites to another container. (This way you create all the layers that you need).

 

 

 

 

[Phempt]

So I can create 1 container for the game and one game for the top bar with score/life/timer/etc ?

 

Is there some tutorial about the container creation?

 

Thank you

[Ninjadoodle]

Hi @Phempt

 

All you have to do to create a container is ...

 

var myContainer = new game.Container().addTo(game.scene.stage);

myContainer.position.set(100, 100);

this.stage.addChild(myContainer);

 

now you can create sprites and add them to the container

[Phempt]

Sorry I forgot to say that I solved my problem thanks to Stephan's suggestion and Flying dog source code ^^

 

It works very well!

 

Thanks also to  Ninjadoodle, this forum is amazing

[enpu]

You can define zIndex for your sprites and then use this code to sort them:

depthCompare: function (a,  {    if (a.zIndex < b.zIndex) return -1;    if (a.zIndex > b.zIndex) return 1;    return 0;},sort: function() {    this.myContainer.children.sort(this.depthCompare);}

[Stephan]

Thanx Enpu, I think your suggestion is more flexible than using predefined layers.

[Ninjadoodle]

Hi guys

 

Thank you for this code I'm having a bit of trouble getting it to work.

 

Could somebody post a simple example of how this would work with two overlapping sprites?

 

Thank you heaps in advance!

[Phempt]

Thank you enpu! This will be really usefull

[Stephan]

Here is a working code example. (You can also see it live at panda fiddler: http://vermeire.home.xs4all.nl/panda/fiddler.html

game.module(	'game.main').require(	'engine.core').body(function(){	game.addAsset('box.png');	game.addAsset('target.png');	game.createScene('Main', {			init: function() {			//Add sprite			var sprite1 = new game.Sprite('target.png', 250, 200);			this.stage.addChild(sprite1);						//Add another sprite. 			//It will be on front of the first sprite because it's the last one added to the container.  			var sprite2 = new game.Sprite('box.png', 270, 250);			this.stage.addChild(sprite2);			//Now lets rock and z-order them!			sprite1.zIndex=2;			sprite2.zIndex=1;			this.sort();		},				depthCompare: function (a,  {			if (a.zIndex < b.zIndex) return -1;			if (a.zIndex > b.zIndex) return 1;			return 0;		},				sort: function() {			//All sprites have been added to game.scene.stage.			//In order to update the zIndex, you have to sort the following list			game.scene.stage.children.sort(this.depthCompare);		}			});});

[enpu]

Nice example Stephan!

Btw, you don't have to require 'engine.core' in 'game.main'. It's auto-required

[Ninjadoodle]

Hi Stephan

 

Thank you heaps for the example! I appreciate you taking your time to write it up + now I understand how to use the sort function