时间戳

首页 > 解决方案 > 在 Phaser 3 中更改场景的问题

javascript - 在 Phaser 3 中更改场景的问题

问题描述

我正在 Phaser 3 中制作游戏，并将 Michael Hadley 在他的 Phaser 3/matter.js 教程中完成的游戏作为框架（https://itnext.io/modular-game-worlds-in-phaser-3-tilemaps -5-matter-physics-platformer-d14d1f614557）并且我在第一关结束时更改场景以使其过渡到第二关时遇到问题。我像他一样将所有游戏都划分为 .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 Labs 示例页面（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

非常感谢您提前提供的帮助，自从我使用移相器以来只有一个月左右的时间，而且我很难理解一些东西，但是从现在开始我总是在网上找到答案，但这已经困扰了我一段时间，我什么也没找到。

标签： javascriptphaser-framework

解决方案

您需要向两个场景添加构造函数并使用键名调用 super。

所以在 MainScene 中它将是

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

在 MainScene2 中它将是

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

推荐阅读