To extend Phaser.Scene or not?

[Linzeestomp]

Just a quick curiosity post. I've seen tutorials with two different styles of building a phaser game and I was curious if either had pros/cons over the other method.

The first method usually involves invoking Phaser at the top of your script and then adding 3 functions [preload, create, update] as below

let gObject = {} || gObject;

const config = {

    type    : Phaser.AUTO,
    width   : 1000,
    height  : 750,
        
    autoFocus: true,

    backgroundColor: '#000000',
    parent  : 'gameDiv',
    
    url     : 'http//url.to.game',
    title   : 'Title Goes Here',
    version : '0.0.1', 

    scene   : {
        preload: preload,
        create: create,
        update: update
    },

    physics: {
        default: 'arcade',
        arcade: {
            gravity: { y: 800 },
            debug: false
        }
    }
};

gObject.game = new Phaser.Game(config);

function preload () {
}
function create () {
}
function update () {
}

 

Below is the second method which involves extending the scene class.

 

let gObject = {} || gObject;

const config = {

    type    : Phaser.AUTO,
    width   : 1000,
    height  : 750,
        
    autoFocus: true,

    backgroundColor: '#000000',
    parent  : 'gameDiv',
    
    url     : 'http//url.to.game',
    title   : 'Title Goes Here',
    version : '0.0.1', 

    scene   : [ sceneA ]
};

gObject.game = new Phaser.Game(config);

class sceneA extends Phaser.Scene {
    constructor() {
        super({
            key: 'sceneA',
            active: true,
            physics:
            {
                default: 'arcade',
                arcade:
                    {
                        debug: false,
                        gravity:
                            {
                                y: 800
                            }
                    }
            },
        });
    }

    preload () {

    }
    
    create () {

    }

    update () {
    
    }
}

I've personally been learning Phaser 3 using the second method. However, I'm no JS pro and even less of one where OOP is concerned. I just don't know if there is a benefit to how I've been doing it, and am curious if things are easier the other way -- or if it even matters! I haven't looked into using TypeScript yet with Phaser (seems silly to invest in TypeScript when most of the synactical sugar is already there with ES6--but again I'm not an expert.)

[scope2229]

from what i have learnt the first is used for static objects like scenes and the later if for extending dynamic content like players bullets but thats what i can tell from reading the docs.

Try getting your hands on a copy of An Introduction to
HTML5 Game Development
with Phaser.js by Travis Faas