Question

有时，游戏开始时无需等待所有资产加载。最常见的情况是spaceStation，它是3372x700 px的最大精灵。游戏首次启动时，spaceStation未加载。但是，如果您离开游戏，然后在不刷新页面的情况下返回游戏，它将第二次加载。我将Phaser游戏引擎与IonPhaser包装一起用于React。

游戏在这里托管，因此您可以了解我的意思：https://seanhetzel.github.io/star-runner/#/

这是我的spaceStation精灵代码：

import spaceStation from "../assets/space-station-sprite-sheet.png";

// other stuff...

preload: function() {

// other stuff...

    const spaceStationImg = new Image();
    spaceStationImg.onload = () => {
      this.textures.addSpriteSheet("spaceStation", spaceStationImg, {
        frameWidth: 3372,
        frameHeight: 700
      });
    };
    spaceStationImg.src = spaceStation;

// other stuff...

}

// other stuff...

create: function() {

// other stuff...

    const config = {
        key: "lights",
        frames: this.anims.generateFrameNumbers("spaceStation", {
          start: 0,
          end: 6
        }),
        frameRate: 3,
        repeat: -1
     };

     this.anims.create(config);

     this.spaceStation = this.impact.add
       .sprite(1686, 350, "spaceStation")
       .play("lights")
       .setDepth(1);

// other stuff...
}

我加载不正确吗？

谢谢！

Answer 1

使用React时，Phaser 3 Loader应该使用导入的精灵，而不是直接指向preload()函数中的相对路径。

import spaceStation from "../assets/space-station-sprite-sheet.png";

// other stuff...

this.load.spritesheet(
            'spaceStation',
            spaceStation, // <-- not '../assets/space-station-sprite-sheet.png'
            {
              frameWidth:3372,
              frameHeight:700
            }
          );

现在从“ ../assets/space-station-sprite-sheet.png”中从导入的空间站获取精灵。导入，而不是直接指向相对路径并使用Phaser 3 Loader。

Sprite有时无法在Phaser游戏中加载

1 个答案: