Issue adding multiple scenes to config file

Phaser 3
1

Hi

I am following an online tutorial that breaks the game into separate scenes (each one in its js file) and then adds them in an array to the config file. this is my code

var config ={
type:Phaser.AUTO,
width: 800,
heigh: 600,
**scene: [**

** BootScene,**
** GameScene,**
** TitleScene,**
** UiScene,**
** ],**
physics:{
default: ‘arcade’,
arcade:{
debug: true,
gravity:{
y:0,
},
},
},
};

var game = new Phaser.Game(config);

I get the following error main.js:6 Uncaught ReferenceError: BootScene is not defined

Files are correctly referenced in the html file

Files themselves extend the Phaser.Scene class, as an example

class GameScene extends Phaser.Scene{
constructor(){
super(‘Game’);
}

preload(){

}

create(){
    
}

}

I have tried with the current stable version of Phaser3, 3.23.0 and the previous version 3.22.0 Can anyone help me figure out where the problem is?

Thank you! much appreciated!

2

Hello, that looks like a path or import error…
Do you have a correct path?
Did you do the correct import at the top of your main file?

import BootScene from "my_scenes_path/boot_scene";

3

Thanks Darko

Unfortunately no, when I follow your suggestion I get Uncaught SyntaxError: Cannot use import statement outside a module

I am creating classes, not modules, so that may be why this is not working

4

What is the HTML?

6

Hi samme

This is the html

> <!DOCTYPE html>
> <html>
>     <head>
>         <meta charset="utf-8">
>         <meta name="viewport" content="user-scalable=0, initial-scale=1, minimum-scale=1, maximum-scale=1, width=device-width, minimal-ui=1">
>         <title>RPG course</title>
>     </head>
>     <body>
>         <div id="phaser-game"></div>
>         <script type="text/javascript" src="assets/js/lib/phaser.min.js" charset="utf-8"></script>
>         <script src="assets/js/main.js" charset="utf-8"></script>
>         <script src="assets/js/scenes/BootScene.js" charset="utf-8"></script>
>         <script src="assets/js/scenes/GameScene.js" charset="utf-8"></script>
>         <script src="assets/js/scenes/TitleScene.js" charset="utf-8"></script>
>         <script src="assets/js/scenes/UiScene.js" charset="utf-8"></script>
>     </body>
> 
> </html>
7

Load files in order… main.js needs BootScene.js? Then I guess BootScene should be loaded before main.js probably…

1 Like
8

Yay! thank you so much, it was load order for the files. Main needs to be the last to load!