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

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.


  • Recently Browsing   0 members

    No registered users viewing this page.