Problem with z-index when creating a loader

[Sir Vasile]

Hello, I created a LoadingBar class which contains a loading bar and a background.

I load the resources of the LoadingBar in my Boot state and the loader works.

The problem is that my LoadingBar has a background that has width 100% of the game width. And height 100% of the game height. When the resources of my state are loaded the create method is called. When the create method is called all the created sprites overlap the background of my LoadingBar.

I don't want to destroy my LoadingBar when the resources are loaded but only when the "create" method has finished, because it creates the maps/buildings/sprites/characters/enemies... and other things.

So I want to destroy/hide my Loading screen only when all sprites are created (only when the create method has finished to create the world). But when they are created they immediately overlap my background.

So the question is: what can I do to the background of the LoadingBar to make it be always the highest z-index?

 

class World extends Phaser.State {
    preload () {
        this.loadingBar = new LoadingBar();
        // load sprite sheets.. music.. ..
    }

    create ()
    {
        buildMap(); // Houses overlap the background of the loading screen
        buildJoypad(); // Joypad buttons overlap the background of the loading screen
        build...
        build.....
        // done
        this.loadingBar.destroy();
    }
}

 

[samme]

Arrange like this:

- Stage
  - World
    - Sprites
    - …
  - LoadingBarGroup
    - Background
    - Bar