Jump to content

Multi File Game


Recommended Posts

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.

Link to comment
Share on other sites

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


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:


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.

Link to comment
Share on other sites

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 :D )

Link to comment
Share on other sites


  • Recently Browsing   0 members

    • No registered users viewing this page.
  • Create New...