Search the Community

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