Scenes in Phaser 3 are fundamental building blocks that help organize the different states or sections of your game, such as the main menu, gameplay, level selection, game over screen, etc. They allow you to separate concerns, manage resources efficiently, and transition between different parts of your game seamlessly.

The life cycle of a Scene

init : init method will call only once then the execution will transfer to preload.

preload: The preload method is used to preload all the assets needed for the scene, such as images, audio files, spritesheets, etc. This method is called once before the scene is created. once all the assets are loaded then the execution moved to create method.

create : The create method is used to initialize all the game objects and setup necessary configurations for the scene. This method is called once after the scene is created. It call only once in whole life span of a scene, ideally this function used to construct UI, animations, inputs, sound etc

update : The update method is used to update the game logic and handle user input during the gameplay. This method is called every frame.

// Define a new scene by extending Phaser.Scene Class
class MainMenuScene extends Phaser.Scene {
    constructor() {
        super({ key: 'myscene' }); // unique name of the scene
    }

    preload() {
        // Preload assets needed for the main menu
        this.load.image('background', 'background.png');
        this.load.image('playButton', 'playButton.png');
    }

    create() {
        // Create game objects for the main menu
        this.add.image(400, 300, 'background');
        var playButton = this.add.image(400, 400, 'playButton').setInteractive();

        // Add event listener to the play button
        playButton.on('pointerdown', function () {
            // Transition to the gameplay scene
            this.scene.start('GameplayScene');
        }, this);
    }

    update() {
        // call 60 times per seconds
    }
}