How to use separate files for scenes and config

Phaser 3
1

It seems that phaser 3.20 did not accept class architecture in js; with a class for loading assets and another for adding them to the scene ,but in one file it works fine

2

The one thing all javascript files have in common is the global namespace.

So in one file you can define:

let config = [
  //config here
];

And then use that in another file that sets up Phaser:

let myGame = new Phaser.Game(window.config);

Technically window. isn’t necessary, but I use it anyway to remind myself of where I’m referencing.

You can also write classes to extend Phaser’s Scene class, and have that class define preload(),create(), update(), etc.

3 Likes
3

Thank you ,but i try to use config in separate file for a game dev and i export class as you say but not working for me
This is a class for example:

class Scene_play extends Phaser.Scene{

    constructor(){
        super({Key: "Scene_play"});
    }
    create(){
        this.add.image(200,100,"ball");
        this.add.image(10,100,'left_pallete');
        this.add.image(100,100,'right_pallete');
        this.add.image(100,100,'separator');
    
    }
}

export default Scene_play;

And this is for preload function:

class Bootloader extends Phaser.Scene {
    constructor(){
        super({key: "Bootloader"});

    }

    preload(){
        console.log('hello');
        this.scene.start('Scene_play');
        this.load.image("ball","./assets/ball.png");
        this.load.image("left_pallete", "./assets/left_pallete.png");
        this.load.image("right_pallete", "./assets/right_pallete.png");
        this.load.image("separator", "./assets/separator.png");
        

    }
    
}
export default Bootloader;

This for config

import Bootloader from './bootloader.js';
import Scene_play from './src/scenes/scene_play.js'

const config = {
 width:620,
 height:440,
 
 parent: "contenedor",
 physics: {
     default: 'arcade',
     
 },
 scene:{
     //preload,
     //create,
     Bootloader,
     Scene_play
 }
}

/*function preload(){
    console.log('hello');
    
    this.load.image("ball","./assets/ball.png");
    this.load.image("left_pallete", "./assets/left_pallete.png");
    this.load.image("right_pallete", "./assets/right_pallete.png");
    this.load.image("separator", "./assets/separator.png");
    

}
function create(){
    this.add.image(200,100,"ball");
    this.add.image(10,100,'left_pallete');
    this.add.image(100,100,'right_pallete');
    this.add.image(100,100,'separator');
    
}*/
new Phaser.Game(config);

Any help please i appreciate !Images don’t appears when i use sparate
classes!

4

You need an array here:

{
  scene: [Bootloader, Scene_play]
}
2 Likes
5

Thanks a lot but still not working, I think because i use the new version of phaser??

6

The second scene is never started. You need to start it from the first one.

And please be as specific as possible when you say “it’s not working.”

1 Like
7

I mean that images did not appear in the web page when i use separate files so may be i have to update my editor or is google chrome will be updated??

1 Like
8

Is your console.log() call executing? If no, then the pre-loader isn’t being called. Are you compiling/combining all the files using a build process, or are you including the separate javascript files individually from your HTML?

3 Likes
9

What you mean by build process?I use visual code and console.log don’t appears also like scene ;only a black screen of the config method who appears without images;It works fine in one javascript file but i have to use
separate files to added more details ,i have only the problem of exporting and importing here i think…

10

  1. config.scene must be an array.

  2. In Scene_play's constructor, key is misspelled as Key.

  3. In Bootloader, scene.start() shouldn’t be in preload(). That’s too early. Move it to update().

class Scene_play extends Phaser.Scene {
  constructor () {
    super({ key: 'Scene_play' });
  }
  create () {
    this.add.image(200, 100, 'ball');
    this.add.image(10, 100, 'left_pallete');
    this.add.image(100, 100, 'right_pallete');
    this.add.image(100, 100, 'separator');
  }
}

class Bootloader extends Phaser.Scene {
  constructor () {
    super({ key: 'Bootloader' });
  }

  preload () {
    console.log('hello');
    this.load.image('ball', './assets/ball.png');
    this.load.image('left_pallete', './assets/left_pallete.png');
    this.load.image('right_pallete', './assets/right_pallete.png');
    this.load.image('separator', './assets/separator.png');
  }

  update () {
    this.scene.start('Scene_play');
  }
}

const config = {
  width: 620,
  height: 440,
  parent: 'contenedor',
  physics: {
    default: 'arcade'
  },
  scene: [Bootloader, Scene_play],
  callbacks: {
    postBoot: function (game) {
      game.scene.dump();
    }
  }
};

new Phaser.Game(config);
11

That’s great solution thanks even i haven’t understand what is dump method or why using a callbacks!!

12

Hello, there is a full example of es6 classas + phaser, with some other stuff here. https://github.com/Y8Games/Y8-Instant-io-Game/tree/master/src

1 Like
13

I yet download this project in my device to understand es6 class but i hit the some issue solved by samm,thank you ,it is a nice project you done !!!

1 Like
14

Waow! We can create in a class a keyed asset that was loaded in some other class. Is that correct?

15

I found that it is.

1 Like
16

What do you found @fselcukcan ?

17

That:

1 Like