Splitting game code

[Barsik_The_CaT]

Is there a way to split the code? Like, move part of it to another .js file, but retain the ability to use Phaser code? I noticed that you have to do a lot of boring stuff like loading sprites, and it does not help the code readability at all.

[erich]

yep you can easily separate code by creating new states eg BootState, PreloadState,GameState etc and you you use prefabs in your gamestate eg Player.js,Enemy.js, Items.js etc to help control the code you ceate to make it more managable.

There is a lot of good tutorials out there on this subject

Eric

[mattstyles]

Yep you can split them all up, and either include each one as a script tag in your html or use a bundling tool (browserify, webpack, rollup etc) to implement a module system and create a single bundle to include (note that there isn't a clean way to include Phaser in your bundle, but, thats fine, just include the Phaser script tag and accept that the Phaser global exists).

For example, using script includes:

// State.js
var state = 'I am a state'

// Unit.js
var unit = 'I am a unit'

// Game.js
console.log(Phaser)
console.log(state)
console.log(unit)

<script src='https://cdnjs.cloudflare.com/ajax/libs/phaser/2.6.2/phaser.js'></script>
<script src='./state.js'></script>
<script src='./unit.js'></script>
<script src='./game.js'></script>

Note that doing things this way pollutes global scope but there is no other ways to share code between scripts, also note that, critically, the order of inclusion here is very important. There are things you can do to mitigate global scope pollution but you're almost always tied to having an order of script includes.

You could use a tool to concatenate your three app files together in to one file, but order would still be important.

Here's a similar example using a module system, there are a few more steps to get going:

// State.js
module.exports = 'I am a state'

// Unit.js
module.exports = 'I am a unit'

// Game.js
var state = require('./state.js')
var unit = require('./unit.js')

console.log(Phaser) // note we have not imported Phaser, we just assume it exists
console.log(state)
console.log(unit)

We now have to do some work to convert these 3 files into something the browser can understand, if you have node (and therefore npm) installed on your system you can use a tool like browserify from the command line to do this (there are other tools out there too but browserify is probably the simplest):

$ npm install -g browserify
$ browserify game.js > bundle.js

Browserify creates a new file called bundle.js which turns the module system (those exports and requires) into something the browser can understand, it also produces a single file so the browser only has to load one rather than multiple (in this example it probably doesn't matter but as your app grows you could end up having hundreds of files). Order is not a concern here, which is good, we just have an entry point for our app (game.js) and everything flows from there. Note also that there is no global scope pollution here at all (barring the Phaser object, which is not a part of our bundle and so tacking it on global is the only way to make it available to our bundle).

Note that we've installed browserify globally here, which isn't a great idea, but it is the simplest way for now.

Now we have a simpler html file with just a single application script tag:

<script src='https://cdnjs.cloudflare.com/ajax/libs/phaser/2.6.2/phaser.js'></script>
<script src='./bundle.js'></script>

Both of these methods produce the same output, you've separated your code base in to multiple files and given them to the browser in a way it can execute them and fire out the console logs on the 3 variables (including Phaser).

The 2nd method, using a proper module system, is the most favourable as order becomes irrelevant and it gives you access to a very powerful and simple way of consuming other modules into your application (not to mention it avoids global scope pollution completely), but, it is more complex than just firing something up in a browser.