Game structure and logic

Phaser 3
1

I’m a bit confused on how to structure a Phaser 3 game.

Ideally I’d like to have a Main() class. Then in this main class, I can call different scenes Intro(), LevelOne(), LevelTwo(), Credits(), etc.

Right now I’ve been following tutorials and my config is like this:

var config = {
type: Phaser.AUTO,
width: 1520,
height: 720,
_resolution: window.devicePixelRatio,
resolution: 2,
physics: {
default: ‘arcade’,
arcade: {
gravity: { y: 200 }
}
},
scene: [Level_1, Level_2]
};

But I’m confused on how I change from Level 1 to Level 2 and control the logic and flow of my game. I’m making a 2D platformer/RPG.

I tried making a Main class like so, but Phaser 3 gave me an error that “preload is undefined”

class Main extends Phaser.Game{

constructor(){

    super(config);

    var config = {
        type: Phaser.AUTO,
        width: 1520,
        height: 720,    
        _resolution: window.devicePixelRatio,
        resolution: 2,
        physics: {
            default: 'arcade',
            arcade: {
                gravity: { y: 200 }
            }
        },
        scene: {
            preload: preload,
            create: create,
            update: update
        }
    };
}

preload(){
        
}

create(){

}

update(){

}

}

Please help

2

Hi Tac,

I think its not working because the preload, create, update function need to be a part of Phaser.Scene not Phaser.Game

I made a minimal template using classes to prototype ideas, maybe this could help?

3

Follow the first config, like { scene: [ Level_1, Level_2 ] }.

You rarely need to extend Phaser.Game because you can do nearly everything by through the game config.

Here is another example that uses multiple scenes. You don’t have to organize your code in modules, like this one; you can just define your classes one after another and then instantiate the game last.

1 Like
4 
this.input.on('pointerdown', (pointer) => {
    	this.scene.start('level_two');
    });

This is what I was looking for.