blackhawx

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

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.