Multi File Game

[ThomasMorrison]

I want to get into phaser but I haven't found any tutorials which show you how to take the critical step from a single file game to multiple files (broken up logically into things like Hero.js, Enemy.js, etc.)

 

I'm running on a Mac btw, not that I've found any windows tutorials either

[Heppell08]

Might be a bit off what you may be wanting but I know that states are multi file game set ups for stuff like, levels, preloading assets, setting screen resolutions and stuff like that. If you look in the resources folder and look at basic for the state set up it may help you out a bit on the kind of multi file system you could use.

[caezs]

You can try to use require.js to organise your files.
Here you can see a working example of a require.js inegration with phaser.js.

[jpdev]

You don't actually need anything phaser specific for this.

 

Just create your own objects in separate flies and call them from the main game phaser functions.

 

For example, you want to manage your hero (or even multiple heros later on) in hero.js

 

you could do this:

 

to the html file you add this: 

<script src="hero.js" type="text/javascript>

Add it before the main-game script tag (or if you are just using a index.html with the main game in it, then add this hero scirpt-tag before the actual game script).

 

Now in the hero.js you can do just anything, it's part of the websites script.

 

But we want to manage a hero, so we create our own object, that can be used multiple times:

function Hero(game){  this.game = game;  this.sprite = null;  this.anyCustomVariables = 5;}Hero.prototype.create= function() {  this.sprite = this.game.add.sprite(0, 0, 'hero');}Hero.prototype.update = function(enemieGroup) {  this.sprite.collide(enemieGroup);}

Hero(game) is the constructor.

All the methods added to it's prototype can later be called by you on each hero instance.

(You are free to give them any names and parameters you want, they are not phaser specific).

 

In your main file, you can now create heros and call their methods at the appropriate times like this:

 

For example after creating the phaser game object, you can put:

var player1 = new Hero(game); //create one instance of your hero

We now have a global object named player1, that is an instance of what we defined in hero.js.

 

within the main phaser create function you then place

player1.create();

now when everything else for your game is created, also everything this hero needs gets created

 

and in the update function of your phaser you put:

player1.update(enemies);

enemies should be the enemies group the player has to interact with. (it will call collide with it, because that is what we put into the update function of your Hero).

You are free to pass anything around that you need to create interaction between the different objects you have in your game. Just create a parameter for it, and use it within the called method.

[Heppell08]

Yeah much better description above

Mark solved.

[ThomasMorrison]

Awesome answer jpdev!

 

I actually ended up using Grunt (http://gruntjs.com/). What this allows me to do is combine all my .js files into a single one (as well as minify etc.) all with a single command! (You have to have node and npm installed however).

 

I'm still having some difficulty extending objects in an elegant way. Getting things like function extension working is proving to be a tad difficult.

 

Currently Im going with:

Bird = function(game_state) {  this.game_state = game_state;  this.sprite = null;}Bird.prototype.create = function(x, y) {  this.sprite = this.game_state.game.add.sprite(0, 0, "bird");  this.sprite.body.gravity.y = 1000;  this.sprite.x = x;  this.sprite.y = y;  this.sprite.update = function () {    console.log(game_state);    if(this.inWorld == false) {      game_state.main.prototype.restart_game();    }  }}Bird.prototype.jump = function() {  this.sprite.body.velocity.y = -350;}

And then adding the Bird with:

    create: function() {      var birdy = new Bird(this);      birdy.create(100, 245);      var space_key = this.game.input.keyboard.addKey(Phaser.Keyboard.SPACEBAR);      space_key.onDown.add(birdy.jump, birdy);      this.pipes = game.add.group();      this.pipes.createMultiple(20, "pipe");      this.timer = this.game.time.events.loop(1500, this.add_row_of_pipes, this);      this.score = 0;      var style = { font: "30px Arial", fill: "#ffffff" };      this.label_score = this.game.add.text(20, 20, "0", style);    },

The benefit of this method is that Bird.update() gets called automatically which is a nice. However, in Bird.update() the call to game_state.restart_game() doesn't work properly... I should probably just read some more JS docs/explanations.

 

Thanks again,

 

(and yes Im extending one of the many flappy bird examples )