This function is called first. It should contain code to handle the loading of assets needed by your game. I.e. game.load.image(), etc. Note: while 'preload' is running the game doesn't call the update or render functions, instead it calls 2 special functions (if they exist): loadUpdate and loadRender.
You don't have to put just loader specific code in the preload function. You could also do things like set the stage background color or scale modes. However to keep it clean and logical I would suggest you do limit it to just loading assets.
Note that you don't need to tell Phaser to start the load, it happens automatically.
This is a special-case function that is only called while assets are preloading (as the standard update function is not). You could use it to do something like update a progress bar.
Most likely not needed (especially not for WebGL games) but this is an optional special-case function that is called after update and should contain render specific code.
The create function is called automatically once the preload has finished. Equally if you don't actually load any assets at all or don't have a preload function then create is the first function called by Phaser. In here you can safely create sprites, particles and anything else you need that may use assets the preload will now have loaded for you. Typically this function would contain the bulk of your set-up code, creating game objects and the like.
The update (and render) functions are called every frame. So on a desktop that'd be around 60 time per second. In update this is where you'd do things like poll for input to move a player, check for object collision, etc. It's the heart of your game really.
The render function is called AFTER the WebGL/canvas render has taken place, so consider it the place to apply post-render effects or extra debug overlays. For example when building a game I will often put the game into CANVAS mode only and then use the render function to draw lots of debug info over the top of my game.
Once render has completed the frame is over and it returns to update again.
Introduced in Phaser 2.1.0 this method is called only if your game is running under the RESIZE scale mode, and only when the game container changes scale (be that the browser or the dom element your game is within). It is passed two variables, the new width and height. You can use this method to re-align responsive game elements.
This method is called when the State is shutdown (i.e. you switch to another state from this one).
Note that you cannot use any of the above function names in your game other than for the use they were intended above. What I mean by that is you should consider them as being 'reserved' as game system only functions.
As well as the above methods there are a set of default properties that are always created in your State objects. They are as follows:
/**
* @property {Phaser.Game} game - This is a reference to the currently running Game.
*/
this.game = null;
/**
* @property {Phaser.GameObjectFactory} add - A reference to the GameObjectFactory which can be used to add new objects to the World.
*/
this.add = null;
/**
* @property {Phaser.GameObjectCreator} make - A reference to the GameObjectCreator which can be used to make new objects.
*/
this.make = null;
/**
* @property {Phaser.Camera} camera - A handy reference to World.camera.
*/
this.camera = null;
/**
* @property {Phaser.Cache} cache - A reference to the game cache which contains any loaded or generated assets, such as images, sound and more.
*/
this.cache = null;
/**
* @property {Phaser.Input} input - A reference to the Input Manager.
*/
this.input = null;
/**
* @property {Phaser.Loader} load - A reference to the Loader, which you mostly use in the preload method of your state to load external assets.
*/
this.load = null;
/**
* @property {Phaser.Math} math - A reference to Math class with lots of helpful functions.
*/
this.math = null;
/**
* @property {Phaser.SoundManager} sound - A reference to the Sound Manager which can create, play and stop sounds, as well as adjust global volume.
*/
this.sound = null;
/**
* @property {Phaser.ScaleManager} scale - A reference to the Scale Manager which controls the way the game scales on different displays.
*/
this.scale = null;
/**
* @property {Phaser.Stage} stage - A reference to the Stage.
*/
this.stage = null;
/**
* @property {Phaser.Time} time - A reference to the game clock and timed events system.
*/
this.time = null;
/**
* @property {Phaser.TweenManager} tweens - A reference to the tween manager.
*/
this.tweens = null;
/**
* @property {Phaser.World} world - A reference to the game world. All objects live in the Game World and its size is not bound by the display resolution.
*/
this.world = null;
/**
* @property {Phaser.Particles} particles - The Particle Manager. It is called during the core gameloop and updates any Particle Emitters it has created.
*/
this.particles = null;
/**
* @property {Phaser.Physics} physics - A reference to the physics manager which looks after the different physics systems available within Phaser.
*/
this.physics = null;
/**
* @property {Phaser.RandomDataGenerator} rnd - A reference to the seeded and repeatable random data generator.
*/
this.rnd = null;