将黑色背景加载屏幕更改为图像（Phaser）

Question

我是移相器的新手，我已经显示了加载屏幕，但我想在加载进度出现时将黑色背景更改为图像。但是我不确定我将如何去做，因为我不太熟悉使用的元素。无论如何我可以改变它吗？有人可以指导我吗？谢谢你。

这是代码：

<!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>

Answer 1

好吧，在 Phaser 中有很多方法可以做到这一点。我能想到的斋戒。

创建一个场景（在示例中为 preloadScene），仅加载加载场景所需的图像
创建真实的加载场景（在示例中为mainScene），在这里您可以将图像添加到场景中并显示它们，因为它们已经加载。
开始preloadScene

重要提示：您必须从 config - 对象中删除场景部分。

这是一个工作演示：

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

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <script src="//cdn.jsdelivr.net/npm/phaser@3.0.0/dist/phaser.min.js"></script>
  </head>
  <body>
    <div id="game" style="padding:0;margin:0;height:800px"></div>
  </body>
</html>

将黑色背景加载屏幕更改为图像（Phaser）

Change the Black background loading screen to image (Phaser)

phaser-framework