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.
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!