Phaser框架加载进度页黑色背景替换为自定义图片实现咨询

要实现加载阶段显示自定义背景，核心要解决的问题是背景图需要在加载进度逻辑运行前完成加载，避免进度跑的时候背景还是默认黑色，以下是两种稳定可行的实现方法：

方案1：拆分双场景（官方推荐） #

拆分出一个极小的启动场景，仅加载背景图（资源体积小，加载耗时可忽略），加载完成后跳转到正式加载场景显示背景+进度条，是Phaser生态最常用的处理方式。

修改后完整代码示例： #

<!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: [BootScene, LoadScene, MainScene]
      };
      var game = new Phaser.Game(config);

      // 启动场景：仅加载加载页背景图
      function BootScene() {
        this.preload = function() {
          // 替换为你自己的背景图地址
          this.load.image('loadBg', 'https://你的背景图地址.png');
        };
        this.create = function() {
          // 背景图加载完成立刻跳转到加载场景
          this.scene.start('LoadScene');
        };
      }

      // 加载场景：显示背景+进度条，加载所有业务资源
      function LoadScene() {
        this.preload = function() {
          // 第一步先渲染已经加载好的背景图，放在最底层
          const loadBg = this.add.image(400, 300, 'loadBg');
          // 如果背景图尺寸和画布尺寸不匹配，加下行拉伸铺满整个画布
          // loadBg.setDisplaySize(800, 600);

          // 以下是你原来的进度条逻辑，不用修改
          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 () {
            // 如果加载完成后不需要保留背景，可在这里销毁
            loadBg.destroy();
            progressBar.destroy();
            progressBox.destroy();
            loadingText.destroy();
            percentText.destroy();
            assetText.destroy();
          });

          // 加载所有业务资源（原来的logo等资源）
          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"
            );
          }
        };
        this.create = function() {
          // 所有资源加载完成跳转到主场景
          this.scene.start('MainScene');
        };
      }

      // 主场景：业务逻辑入口
      function MainScene() {
        this.create = function() {
          var logo = this.add.image(400, 300, "logo");
        };
      }
    </script>
  </body>
</html>

方案2：单场景base64嵌入背景 #

如果不想拆分场景，可以将背景图转成base64编码直接嵌入代码，无需走Phaser的异步加载流程，preload阶段一开始就能直接渲染背景：

1. 将背景图转换为base64编码字符串
2. 在preload最开头添加如下代码即可：

// 替换引号内的内容为你自己的背景图base64字符串
const bgBase64 = 'data:image/png;base64,xxxxxx';
this.textures.addBase64('loadBg', bgBase64);
const loadBg = this.add.image(400, 300, 'loadBg');
// 按需添加拉伸铺满逻辑
// loadBg.setDisplaySize(800,600);

后续进度逻辑和资源加载逻辑保持不变即可。

内容的提问来源于stack exchange，提问作者TechDev