在 Phaser 3 中更改场景的问题

Posted 2023-03-15

【中文标题】在 Phaser 3 中更改场景的问题

【英文标题】：Problem with changing the scenes in phaser 3

【发布时间】：2019-01-07 14:54:57

【问题描述】：

我正在 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文件中完成了第一关和第二关，并将它们都作为场景添加到了包含config函数的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

非常感谢您提前提供的帮助，我使用 Phaser 才一个月左右，有些东西我很难理解，但从现在开始我总是在网上找到答案但这一直困扰着我一段时间，我什么也没找到。

【参考方案1】：

你需要在两个场景中都添加一个构造函数，并使用键名调用 super。

所以在 MainScene 中会是

constructor() 
  super("main");

在 MainScene2 中

constructor() 
  super("main2");

【参考方案2】：

tontheman 的回答是正确的。如果您想扩展Phaser.Scene，只想添加它，您需要将string 作为键或Object 作为配置传递。您可以参考Phaser 3 API Documentation - Class:Scene获取更多指导。