Jump to content
This forum will be closing down. Please move to the respective dedicated project forums.

sending to back not working?


casey
 Share

Recommended Posts

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);
    
   }

 

Link to comment
Share on other sites

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?

Link to comment
Share on other sites

 Share

  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...