Jump to content

Game state style guide


Recommended Posts

 I have seen game states being constructed in a few different ways:

// the game object is an argument of the constructor, and also property of the statevar state1 = function(game){    this.preload = function(){        this.game.load.image('img1', 'assets/img1.png');        ...    }    ...};// the state appears to be synonymous with the game objectvar state2 = function(){    this.preload = function(){            this.load.image('img1', 'assets/img1.png');        ...    }    ...};

Both appear to work, though I don't understand why. Could someone enlighten me?


Also, are there recommendations as to which one would be better? Or what are their relative pros and cons? (I might be able to answer this myself if I understood why both work!)

Link to comment
Share on other sites

It is unnecessary to have the game object as an argument of the constructor. You can use any empty object or function object as your implementation of a state object, no parameters required. JavaScript is a weak typed language so the state object is not forced to be any specific data type. Internally Phaser adds some properties of the game-object to your implementation of the state object, like the game object itself, the game's .add, .make, .camera properties and so on. Then it uses some standard-callback methods and links them with the corresponding methods on your own state object, if you implemented them. The Phaser.State object itself is only an example implementation you can inherit from, but since the nature of dynamic property appending in JavaScript, every object is suitable for being a valid state object. You only have to implement the necessary methods for initializing and running your game. And be careful, Phaser dosen't add every single property of the game obejct to your state. Although some tutorials say otherwise: The game object and your state object are never equivalent. 


So for short: The second version of your example-states is the better one. But it dosen't has to be a function at all, only if you want to perform some Phaser Framework independent object-initializations (constructor). If not, you can also use JSON object notation, or an empty object:

var state3 = {   preload: function() {      ...   },   create: function() {      ...   },       ...}
var state4 = {};state4.preload = function() {   ...}
Link to comment
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.
  • Create New...