Understanding Example Phaser Game Code

Question

So I have stumbled across some example game code that runs on Phaser's html 5 game engine. Below is the example code

var game = new Phaser.Game(800, 600, Phaser.AUTO, '', { preload: preload, create: create, update: update });

function preload() {
    game.load.image('someKey','someUrl');

}

function create() {
}

function update() {
}

I'm trying to figure out how phaser is able to accomplish passing in functions (preload,create, and update) to the game object by referring to the function declarations and adding images, for example, to the object via the variable name 'game'. The example provided above is what I have generally seen around the web (or at least something similar).

Below, I have started working on my own game engine (for fun) in order to imitate phaser and understand their though process. Unfortunately, I can't successfully accomplish the same effect as seen above.

My Engine.js (Phaser copycat file)

function Game(holderId,canvasOptions,functionDeclarations){
    this.test="testing";
    functionDeclarations.init();//this does not work :( because game in init() is undefined.
}

My Main.js

var game= new Game("canvas-holder",{width:1500,height:600, unit:"px"},{init:init,core:core,update:update});

function init(){
    console.log(game.test);//game is undefined. Seems like a scope issue
}

I sense this is a scoping issue. I tried looking through phaser's source code, but it contains 97k lines, and ctrl+f was of no help.

I cant start any of examples also not work any other html file .... — Nikola Lukic

PhotonStorm PhotonStorm · Accepted Answer · 2016-06-02T11:11:15

The Object being passed to the Phaser constructor is the game State. Look at src/core/State.js in the Phaser repo for an example State file, and descriptions as to what each function and property does.

I cannot say this enough: Don't ever try to read through the one single phaser.js file! Instead checkout the repo and go through the files one by one. They're in a logical and sane structure there, and much easier to follow the path through.

When the Phaser game is created it waits for a DOM Ready event. Only when it receives that does it then start to run through the State object, calling the functions in turn. This is why you can reference game within the preload function, and not get a scope error, because by the time it's called, it exists.

In the example above (and all those found on the Phaser examples site) game is created as a global JS object. We do this purely to keep the example code less verbose, and easy to fiddle with. In a production level game you'd rarely actually do this though. Look in the Phaser repo, 'resources' folder at the Project Templates, there are better structured alternatives in there.

Understanding Example Phaser Game Code

2 Answers