Change the Black background loading screen to image (Phaser)

Question

i am newbie to phaser, i show the loading screen already but i wanted to change the black background to image when progress loading appear. However im not sure how will i gonna do it cause im quite not familiar with the element using. is there anyway i can change it? can someone guide me how? Thank youu.

This is the code:

user_1679286 · Answer

Well in Phaser ther many ways to do it. The fastes I can think of.

Create a Scene (in the example the preloadScene) that load only the Images I need for the Load Scene
Create the real Load Scene(in the example the mainScene), and here you can add the images to the Scene and they will be displayed, because they are already loaded.
Start the preloadScene

Important: You will have to remove the Scene part from the config - Object.

Here a working demo:

var config = {
            type: Phaser.AUTO,
            parent: "game",
            width: 800,
            height: 600
            /* REMOVE THE SCENE FROM HERE */
        };

        var game = new Phaser.Game(config);

        var mainScene = {
            preload: function preload() {
                // Add the images to the Scene, because now they are loaded
                var logo = this.add.image(400, 300, "logo");
                var bg = this.add.image(400, 300, "bg");

                var progressBar = this.add.graphics();
                var progressBox = this.add.graphics();
                progressBox.fillStyle(0x222222, 0.8);
                progressBox.fillRect(240, 270, 320, 50);

                var width = this.cameras.main.width;
                var height = this.cameras.main.height;
                var loadingText = this.make.text({
                    x: width / 2,
                    y: height / 2 - 50,
                    text: "Loading...",
                    style: {
                        font: "20px monospace",
                        fill: "#ffffff"
                    }
                });
                loadingText.setOrigin(0.5, 0.5);

                var percentText = this.make.text({
                    x: width / 2,
                    y: height / 2 - 5,
                    text: "0%",
                    style: {
                        font: "18px monospace",
                        fill: "#ffffff"
                    }
                });
                percentText.setOrigin(0.5, 0.5);

                var assetText = this.make.text({
                    x: width / 2,
                    y: height / 2 + 50,
                    text: "",
                    style: {
                        font: "18px monospace",
                        fill: "#ffffff"
                    }
                });
                assetText.setOrigin(0.5, 0.5);

                this.load.on("progress", function (value) {
                    percentText.setText(parseInt(value * 100) + "%");
                    progressBar.clear();
                    progressBar.fillStyle(0xffffff, 1);
                    progressBar.fillRect(250, 280, 300 * value, 30);
                });

                this.load.on("fileprogress", function (file) {
                    assetText.setText("Loading asset: " + file.key);
                });
                this.load.on("complete", function () {
                    progressBar.destroy();
                    progressBox.destroy();
                    loadingText.destroy();
                    percentText.destroy();
                    assetText.destroy();
                });

                for (var i = 0; i < 3; i++) {
                    this.load.image(
                        "logo" + i,
                        "https://upload.wikimedia.org/wikipedia/commons/thumb/2/2f/Google_2015_logo.svg/368px-Google_2015_logo.svg.png"
                    );
                }
                }
        }

        var preloadScene = {
            preload: function preload() {
                // Load only images needed for the Loading Screen (keep it small)
                this.load.image("logo", "https://upload.wikimedia.org/wikipedia/commons/thumb/2/2f/Google_2015_logo.svg/368px-Google_2015_logo.svg.png");
                this.load.image( "bg", "https://upload.wikimedia.org/wikipedia/commons/thumb/7/72/IC1024_-_SDSS_DR14.jpg/600px-IC1024_-_SDSS_DR14.jpg");
            },
            create: function create() {
                // Start loading Scene
                this.scene.start('Main')
            }
        }

        // ADD A Scene that load images needed for the real load Screen
        // these should be small, or the user will see a black screen for a long time
        game.scene.add('PerLoad', preloadScene);

        // ADD the Loading Scene/Screen
        game.scene.add('Main', mainScene);
        
        // Start The PreLoad Scene
        game.scene.start('PerLoad');

Change the Black background loading screen to image (Phaser)

1 Answers