My tileSprite is covering up my sprites instead of being in the background

[owen]

Hi all

 

I'm still a bit new to Phaser so please forgive this silly question.

 

I am trying to make a simple puzzle game with a constantly scrolling background that is, well, in the background.

 

So I have a preload() function and when complete it calls a loadComplet() function which sets a background image as a tilesprite as follows:

 

    // tilesprite, for scrolling background            if (bgtile) bgtile.destroy();    bgtile = game.add.tileSprite(0, 0, game.stage.bounds.width, game.stage.bounds.height, 'bgtile');

Then in my update() I am doing this:

// scroll background     bgtile.tilePosition.x--;

The background image shows (albeit not as a background) and I know all of my other sprites are definitely there hiding behind the tilesprite because when I set the tilesprite alpha property to 0.5 I can see all my sprites hiding behind it!

 

The problem is that bgtile appears over the top of everything else in the game instead of in the background.  I think I'm making a dumb newbie mistake here. Is there some way I can send the tilesprite to the back of the display or adjust its z-index somehow?   There seems no 'sendToBack' for a tilesprite so I'm stuck.

 

I have also tried to 'bringToTop()' the sprites but this hasn't had any effect.

 

Any ideas welcomed...

 

Thanks!

Owen

 

PS. failed attempt (with apha 0.5 on tilesprite) is here: http://www.owensouthwood.com/rainbow/

[Skeptron]

I'd say that the best solution is to use groups : put everything you want to display into a group, and order those things within. Groups provide several useful function for ordering : for example, the order in which you add your displayable objects into the group will order them as layers, but the addAt(index) function also enables you to order them manually.

 

This example will show you how to create a group : http://examples.phaser.io/_site/view_full.html?d=groups&f=add+a+sprite+to+group.js&t=add%20a%20sprite%20to%20group

[owen]

I'd say that the best solution is to use groups : put everything you want to display into a group, and order those things within. Groups provide several useful function for ordering : for example, the order in which you add your displayable objects into the group will order them as layers, but the addAt(index) function also enables you to order them manually.

 

This example will show you how to create a group : http://examples.phaser.io/_site/view_full.html?d=groups&f=add+a+sprite+to+group.js&t=add%20a%20sprite%20to%20group

 

 

Yes I'm already using groups for my sprites, but still the tilesprite appears on top of all the sprites (which are in groups).  I don't quite understand how it helps sorry.

 

Are you saying I should use addAt(...) instead of add ?

 

Owen

[lewster32]

Replace the bgtile.alpha = 0.5 line with:

game.world.sendToBack(bgtile);

This will put the bgtile sprite at the bottom of the display list.

[Skeptron]

You are using groups for your sprites, yes, but you should also use a group for all the displayed objects : a big, global group of all the elements the user will see. So in this particular group you can order things.

 

I think you can put you sprite groups into a group, it should work. So your global group wouldn't be that huge : it would contain your two sprite groups (grpCounters and grpBins), and the background. Then order them accordingly.

 

lewster32's solution seems much simpler, maybe try that one first.

[lewster32]

Phaser already has a global group, game.world is a type of group with the same methods available to it. I agree that in the long term though, having groups defined up-front for your 'layers' is a good way to go, as then you don't have to continuously manage your display list, you just add display objects to the layer that they belong in.

[Skeptron]

Oh, didn't know about game.world being some kind of group. Nice!

[owen]

Replace the bgtile.alpha = 0.5 line with:

game.world.sendToBack(bgtile);

This will put the bgtile sprite at the bottom of the display list.

 

Thanks Lewster.  I knew it would be simple!

 

O.