Change the Black background loading screen to background image (Phaser)

Phaser 3
1

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:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
  </head>
  <body>
    <script src="//cdn.jsdelivr.net/npm/phaser@3.0.0/dist/phaser.min.js"></script>
    <script type="text/javascript">
      var config = {
        type: Phaser.AUTO,
        parent: "phaser-example",
        width: 800,
        height: 600,
        scene: {
          preload: preload,
          create: create
        }
      };
      var game = new Phaser.Game(config);
      function preload() {
        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();
        });

        this.load.image(
          "logo",
          "https://upload.wikimedia.org/wikipedia/commons/thumb/2/2f/Google_2015_logo.svg/368px-Google_2015_logo.svg.png"
        );
        for (var i = 0; i < 5000; 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"
          );
        }
      }
      function create() {
        var logo = this.add.image(400, 300, "logo");
      }
    </script>
  </body>
</html>
2

I don’t know exactly what you want but examples/v3/view/loader/scene-payload/scene-files-payload shows how to load an image early. In that example you could add in preload()

const img = this.add.image(0, 0, 'sonic');

because the 'sonic' texture was already loaded.

Change the CDN script to https://cdn.jsdelivr.net/npm/phaser@3.55.2/dist/phaser.js.