Creating a common fading element

[grumpygamer]

Hello again,

one pebble at a time I'm moving things forwards but still need a bit of help.

 

I've structured my code so it is (hopefully) well divided into sections and states.

 

So my main js file is as follows:

window.onload = function() {            var game = new Phaser.Game(window.innerWidth, window.innerHeight, Phaser.AUTO, '', { preload: preload, create: create, update:update });            function preload() {            }            function create() {                game.state.add('hiscore', sections.hiscore);                game.state.add('menu',    sections.menu);                game.state.add('planets', sections.planets);                game.state.add('shooter', sections.shooter);                game.state.start('menu');                var fadergroup = game.add.group();                var gamegroup = game.add.group();                var spr_bg = game.add.graphics(0, 0);                spr_bg.beginFill(0xffccff);                spr_bg.drawRect(0, 0, window.innerWidth, window.innerHeight);                spr_bg.alpha = 1;                spr_bg.endFill();                fadergroup.add(spr_bg);                game.world.bringToTop(fadergroup);            }            function update() {            }

When game.state.start('menu') is triggered, images are loaded (in the relative preload) and appear.
What I am trying to accomplish is to have the common rectangle at the top in a common environment so I can later call it from whatever state I'm in telling it to obscure the screen (opacity:1).

 

Still that code does not put that rectangle in front of everything.

As you see I also tried grouping it to obtain the result, though other elements are not grouped elsewhere.

 

Thanks again.

[grumpygamer]

Ok I have not solved this as I was expecting, BUT I've created a fading element for each state and have positioned it at the top of all the rest;

this is the fader object inside the state (same level as preload, create and update):

    this.fader = function(){        this.create = function(game, layer, faderect){                faderect.beginFill(0x000000);                faderect.drawRect(0, 0, window.innerWidth, window.innerHeight);                faderect.alpha = 1;                faderect.endFill();                layer.add(faderect);        }        this.fadeOut = function(game, faderect){            s = game.add.tween(faderect);            s.to({ alpha: 0 }, 500).start();        }        this.fadeIn = function(game, faderect){            s = game.add.tween(faderect);            s.to({ alpha: 1 }, 500).start();        }    }

then inside the create function:

var layerBg  = game.add.group();var layerMax = game.add.group();layerBg.z  = 0;layerMax.z = 90;topFader = new this.fader();topFader.create(game, layerMax, spr_bg);topFader.fadeOut(game, spr_bg);

Hope this helps someone.