Jump to content

Recommendations on breaking up Scenes


Recommended Posts

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!


Link to comment
Share on other sites

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);

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.

Link to comment
Share on other sites

  • 5 months later...

  • Recently Browsing   0 members

    • No registered users viewing this page.
  • Create New...