Problem with scenes in Phaser 3

Phaser 3
1

Hi, I’m a complete newbie with Phaser. I’m learning Phaser 3 using some tuts and books.

After reading this tut:

I wanted to try to make a multi-scene template for my future games, in one file with a boot, preloader, main title screen, options, credits, game scene, and a gameover scene.

But for now I’m just testing it with two scenes in one file, a loading scene with a progress bar that calls a title scene showing the logo. :slight_smile:

My reference are these tuts:


And a book named HTML5 Cross Platform Game Development Using Phaser 3.

All these tuts and the book say that the scenes are made via config and with:

class preloader extends Phaser.Scene{ constructor(){ super("Preloader"); } }

But no matter what I try I get a black screen and this error:

Uncaught ReferenceError: Cannot access ‘preloader’ before initialization

Even if I leave just one scene, I get this error.

Here is my complete code:

        // The game config that is used by Phaser
        let config = {
            type: Phaser.AUTO,
            parent: 'phaser-example',
            width: 800,
            height: 600,
            scale: {
                mode: Phaser.Scale.FIT,
                autoCenter: Phaser.Scale.CENTER_BOTH},
            scene: [preloader, main]
        };

        // Create a new Phaser Game object
        let game = new Phaser.Game(config);
        
        
class preloader extends Phaser.Scene{
 constructor(){
super({ key: "preloader" });
 }


preload() {
            let progressBar = this.add.graphics();
            let progressBox = this.add.graphics();
            progressBox.fillStyle(0x222222, 0.8);
            progressBox.fillRect(240, 270, 320, 50);
            
            let width = this.cameras.main.width;
            let height = this.cameras.main.height;
            let loadingText = this.make.text({
                x: width / 2,
                y: height / 2 - 50,
                text: 'Loading...',
                style: {
                    font: '20px monospace',
                    fill: '#ffffff'
                }
            });
            loadingText.setOrigin(0.5, 0.5);
            
            let percentText = this.make.text({
                x: width / 2,
                y: height / 2 - 5,
                text: '0%',
                style: {
                    font: '18px monospace',
                    fill: '#ffffff'
                }
            });
            percentText.setOrigin(0.5, 0.5);
            
            
            this.load.on('progress', function (value) {
                percentText.setText(parseInt(value * 100) + '%');
                progressBar.clear();
                progressBar.fillStyle(0xff0000, 1);
                progressBar.fillRect(250, 280, 300 * value, 30);
            });
            

            this.load.on('complete', function () {
                progressBar.destroy();
                progressBox.destroy();
                loadingText.destroy();
                percentText.destroy();
            });
            
            this.load.image('logo', 'logo.png');
            for (let i = 0; i < 500; i++) {
                this.load.image('logo'+i, 'logo.png');
            }
        }
        
create () {
    this.scene.start('Main');
}

} 

//Preloader Scene
class main extends Phaser.Scene{
    constructor(){
        super("Main");
    }

create() {
            let logo = this.add.image(400, 300, 'logo');
        }
}

What am I doing wrong? And why don’t the methods from these supposedly “official” tuts and books work?

Thanks a lot!

2

Hi, I’m a beginner, too. I followed this tutorial in order to get Scenes working:

I hope this can be useful to you (I recommend checking out the other 12 videos from that tutorial series, they’re all very brief, yet informative).

3

JS Classes are not hoisted (well, mostly), so your new Phaser game’s config has no access to your scene declarations. Move them up before your game init.

3 Likes
4

Wow! Thank you so much! It worked! :smile:

Hmmm, I wonder why all the tuts put config before the scenes… :slight_smile: