Recommendations on breaking up Scenes

[blackhawx]

Looking for any recommendations on how to break up custom scenes with Phaser 3.  I'm fairly new to understanding this area of Phaser. I have been looking through several game projects,  but don't see a consistent pattern on what is best for Phaser 3.  Should we keep all scenes on a single app.js file where preload, create, etc... are all located? Or are we building a better foundation by having scenes on seperate js files?  In either case, it would be nice if someone can put a small demo tutorial on how custom scenes should be managed with Phaser 3.

Many thanks!

 

[blackhawx]

Got it, it appears from the Phaser 3 example source on Github, that game.scene.add(...) is what I'm looking for.

game.scene.add('demo',demo,true,{x:0,y:0});
game.scene.add('demoB',demoB,true,{x:0,y:0});
...

And there's even more examples of using Scenes in that directory.  This is a great start!

[fariazz]

I'm using multiple scenes on a game, I'm using a scene (each one in it's own file) for the following:

- Game itself

- home screen

- loading screen

- a "boot" scene where I load the logo that I want to show in the loading screen

I'm using mainly in ES5 and loading the files in this manner:

<!-- index.html -->
<script src="js/scenes/bootScene.js"></script>
  <script src="js/scenes/loadingScene.js"></script>
  <script src="js/scenes/homeScene.js"></script>
  <script src="js/scenes/gameScene.js"></script>
  <script src="js/main.js"></script>

Each scene file looks like so:

// create a new scene
let homeScene = new Phaser.Scene('Home');

homeScene.create = function(){
  // game background, with active input
  let bg = this.add.sprite(0, 0, 'backyard').setInteractive();
  bg.setOrigin(0, 0);
ETC...

Adding them to my game like so:

// our game's configuration
let config = {
  type: Phaser.AUTO,
  width: 360,
  height: 640,
  scene: [bootScene, loadingScene, homeScene, gameScene],
  title: 'Virtual Pet',
  pixelArt: false,
  backgroundColor: 'ffffff'
};

// create the game, and pass it the configuration
let game = new Phaser.Game(config);

 

Note I'm just loading my scenes in global variables, yes I'm polluting the global scope but I don't care. If you want to do it more elegantly you can load them in individual commonJS modules or ES6 modules, in my case I don't want to install 1000 node.js packages just to run the game so I'm doing it a bit old school.

[tihoho]

On 5/23/2018 at 4:41 AM, fariazz said:

in my case I don't want to install 1000 node.js packages just to run the game so I'm doing it a bit old school.

Old school respect!  I'm sometimes use https://github.com/digital-synapse/ds.oop/wiki lightweight, fast and simple oop-cover lib.