在移相器 3 中更改场景的问题

Problem with changing the scenes in phaser 3

我正在用 Michael Hadley 在他的 Phaser 3/matter.js 教程 (https://itnext.io/modular-game-worlds-in-phaser-3-tilemaps-5-matter-physics-platformer-d14d1f614557) 中完成的游戏作为框架在 Phaser 3 中制作游戏,我遇到了问题在第一级结束时改变场景,使其过渡到第二级。我像他一样将所有游戏划分为 .js 模块,所以我在两个不同的 .js 文件中完成了第一关和第二关,并将它们作为场景添加到包含配置函数的 index.js 文件中:

import MainScene from "./main-scene.js";
import MainScene2 from "./main-scene2.js";

let config = {
  type: Phaser.AUTO,
  width: 1280,
  height: 720,
  backgroundColor: "#000c1f",
  parent: "game-container",
  scene: [MainScene, MainScene2],
  pixelArt: true,
  physics: { default: "matter" },
  plugins: {
    scene: [
      {
        plugin: PhaserMatterCollisionPlugin, // The plugin class
        key: "matterCollision", // Where to store in Scene.Systems, e.g. scene.sys.matterCollision
        mapping: "matterCollision" // Where to store in the Scene, e.g. scene.matterCollision
      }
    ]
  }
};

let game = new Phaser.Game(config);

两个场景是这样开始的:

export default class MainScene extends Phaser.Scene

export default class MainScene2 extends Phaser.Scene

在MainScene场景的最后有触发场景转换的代码:

if(this.player.sprite.x > 15400){
    this.scene.start(MainScene2);
}     

我遇到的问题是,当我尝试 运行 游戏时,它显示黑屏:

Uncaught Error: Cannot add a Scene with duplicate key: default

所以我尝试在第二个场景中删除默认值,然后收到错误:

Uncaught SyntaxError: The requested module './main-scene2.js' does not provide an export named 'default'

我已经尝试在 Phaser 实验室示例页面 (https://labs.phaser.io/index.html?dir=&q=) 上搜索所有场景教程,但它们都没有在场景代码中显示默认值。我试图再次阅读我用作框架的第一个教程,因为他编写了我在游戏中使用的导出代码,但他没有说我如何添加另一个级别作为场景或如何不使用默认导出,我在其他在线代码中看到过,但从未完全理解。我什至尝试将所有三个 .js 文件合并在一起,以便将两个场景和配置文件放在同一个文件中,但错误是一样的。

这两个场景单独玩肯定没问题,只是不知道如何把它们连接成一级和二级。

我确定这个答案真的很愚蠢而且我做错了一些事情但是我已经尝试在网上搜索了很多但没有找到与此类似的东西。

这是我第一次在这里写问题,所以我不确定我是否提供了足够的信息,所以我在这里链接了三个代码沙箱链接;第一个有 index.html 和 index.js 只使第一级工作,第二个使第二级工作,第三个是我尝试连接两个级别的方式:

1: https://codesandbox.io/s/xv42ww7joo

2: https://codesandbox.io/s/l9zr5yqm49

3: https://codesandbox.io/s/2p22o6rnly

非常感谢你的提前帮助,我使用phaser才一个月左右,有些东西我很难理解,但从现在开始我总能找到一个在线回答,但这已经困扰我一段时间了,但我一无所获。

两个场景都需要添加构造器,并调用super,并使用键名调用。

所以在 MainScene 中它将是

constructor() {
  super("main");
}

在 MainScene2 中它将是

constructor() {
  super("main2");
}

tontheman 回答的是正确的。只是想补充一点,如果你想扩展 Phaser.Scene,你需要传递 string 作为键或传递 Object 作为配置。您可以参考 Phaser 3 API Documentation - Class:Scene 以获得更多指导。