sending to back not working?

[casey]

I have a background image that takes up my whole window.  It renders in front of my text, even when all in a group, and using sendToBack isn't working.  It renders behind my graphics, which is good, but why isn't my text coming forward as well?

 

create: function(){
    
    this.titles = this.game.add.group();
    
 
    //background
    this.bg= this.game.add.sprite(0,0, 'bg');
    this.titles.add(this.bg);
    this.bg.sendToBack();
    
   //logo
    this.logo = this.game.add.sprite(this.game.world.centerX, this.game.world.centerY -200, 'logo');
    this.logo.anchor.setTo(0.5);
    this.titles.add(this.logo);
    
     
  //text for instructions 
    this.style = {font: "26px Arial", fill: '#fff'};
    this.text1 =this.game.add.text(this.game.world.centerX, this.game.world.centerY, 'Instructions: blah de blah de blah.', this.style, this.titles);
    this.text1.anchor.setTo(0.5);
    this.titles.add(this.text1);
     
    //start button
    this.startbtn=this.game.add.button(this.game.world.centerX, this.game.world.height-100,'start',this.startGame,this,1,0,1);
    this.startbtn.anchor.set(0.5);
     this.titles.add(this.startbtn);
    
   }

 

[gauravD]

Hi Casey.

Children of a group will be rendered in the order in which they are added (unless of course you change the order with functions like sendToBack()).

Because you add the background first, it will be rendered before everything else (so you don't need the call to sendToBack() on bg), and the text should appear on top - https://jsfiddle.net/gauravdixitv/r6v7sLkw/

Perhaps, you are changing the group's order somewhere else in your code?

[casey]

Oh my god, I'm SUCH a tool. My text was white, as was my background. derrrrrrrrr......   Thanks for the reply!