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!


Share this post

Link to post
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.

Share this post

Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Recently Browsing   0 members

    No registered users viewing this page.