图像未添加到场景 -Phaser 3.5

Question

我正在尝试学习 Phaser JS，但一直无法弄清楚为什么我的背景图像没有显示到场景中。我试过将图像文件移动到不同的位置，还尝试做函数声明而不是方法，但结果相同。预先感谢您提供的任何指导！顺便说一句，我正在使用 parcel-bundler 代码和截图

Screenshot

首先是main.js

import Phaser, { Physics } from "phaser"
import { TitleScene } from "./scenes"

const GameConfig = {
  width: 800,
  height: 500,
  type: Phaser.AUTO,
  physics: {
    default: "arcade",
    arcade: {
      gravity: {
        y: 0,
      },
    },
  },
};

const game = new Phaser.Game(GameConfig);

game.scene.add("title", TitleScene);

game.scene.start("title");

这是我的 scenes.js 个文件：

import Phaser, { Textures } from "phaser"

export class TitleScene extends Phaser.Scene {
    preload() {
        this.load.image("sky", "sky.png");
    }

    create() {
       this.add.image(400, 250, "sky");
       const titleText = this.add.text(400, 250, "Hello World!");
       titleText.setOrigin(0.5,0.5);
     //this.add.arc(400, 250, 128, 0, 360, false, 0xff0000);
        
    }
};

export class GameScene extends Phaser.Scene {
    preload() {

    }

    create() {

    }
}

Answer 1

您可能需要调整为图像 url 提供的相对于 scenes.js

的路径

例如，

// __rootDir__/js/scenes.js
import Phaser from 'phaser'

export class TitleScene extends Phaser.Scene {
  preload() {
    this.load.image("sky", "../images/sky.jpg") // path relative to scenes.js
  }

  create() {
    const image = this.add.image(200, 200, "sky")
    image.setScale(1.0)

    const titleText = this.add.text(200, 200, "Hello World!")
    titleText.setOrigin(0.5, 0.5)
  }
}

export class GameScene extends Phaser.Scene {
  preload() {}
  create() {}
}

https://codesandbox.io/s/Whosebug-66878947-qhevi?file=/js/scenes.js

https://phaser.io/examples/v2/basics/01-load-an-image

Answer 2

对于遇到类似问题的任何人，我可以通过直接导入图像来解决 2 方法 1：import bg0 from "./assets/bg0.png" 或使用 require() 这样： this.load.image("bg0", require("./assets/bg0.png")) 我怀疑这些是由于某些 macos 设置问题或包裹捆绑程序问题而需要。

图像未添加到场景 -Phaser 3.5

Image is not getting added to the scene -Phaser 3.5

javascript

game-development

phaser-framework