Published: Modified: V1.1
phaser

Whats cool about init methods in Phaser State objects.

Because of the relationship with initialization methods of State Objects and the start method of the StateManager in phaser, it occurred to me that this is something that needs it’s own post.

If new to Phaser

If you are new to phaser you might want to check out my post on getting started with phaser, I also assume that you have at least some knowlage of html, css, and javaScript as I do not have any posts on how to get up to speed with that at this time. This is my standard hexo tag for all phaser posts where I want to inform readers that this is not a post for beginers.

A quick demo that will help understand why init methods are cool

So I would like to put together a real example, but making a game is something that takes a while, for for the sake of this post I will just throw together a stupid demo that is just some circles moving around a center point.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
var game = new Phaser.Game(320, 240, Phaser.AUTO, 'gamearea');
 
game.state.add('circles',
 
    // so I want to place some stuff in a closure
    (function () {
 
        var conf,
        rOff = 0,
        i = 0,
        circles,
 
        setCircle = function (cr, ci, rOff) {
            var r;
 
            rOff = rOff || 0;
 
            r = Math.PI * 2 / conf.count * ci + rOff;
            cr.x = conf.cx + Math.cos(r) * conf.radius,
            cr.y = conf.cy + Math.sin(r) * conf.radius
 
        };
 
        // the State object that will get returned
        return {
 
            // so here is the init method
            init : function (opt) {
 
                var prop,
 
                // the defaults
                defaults = {
 
                    count : 3,
                    cx : 160,
                    cy : 120,
                    size : 32,
                    radius : 64,
                    color : 0x00ff00
 
                };
 
                opt = opt || {};
 
                // apply defaults to anything that is missing
                for (prop in defaults) {
 
                    if (opt[prop] === undefined) {
 
                        opt[prop] = defaults[prop];
 
                    }
 
                }
 
                // ref opt to the variable that will be shared across methods.
                conf = opt;
 
            },
 
            // the create method
            create : function () {
 
                var ci = 0,
                r,
                cir;
 
                // set up the circles based on conf settings
                circles = [];
                while (ci < conf.count) {
 
                    cir = game.add.graphics(0, 0);
 
                    cir.beginFill(conf.color);
                    cir.drawCircle(0, 0, conf.size);
                    cir.endFill();
 
                    setCircle(cir, ci);
 
                    circles.push(cir);
 
                    ci += 1;
 
                }
 
            },
 
            // showtime
            update : function () {
 
                var ci = 0;
 
                rOff = Math.PI * 2 / 100 * i;
                while (ci < conf.count) {
 
                    setCircle(circles[ci], ci, rOff);
 
                    ci += 1;
                }
 
                i++;
                if (i >= 100) {
 
                    i = 0;
 
                }
 
            }
 
        };
 
    }
        ()));
 
// start with default settings
game.state.start('circles');

When I call game.state.start with just the key of the state, the demo will go by everything I put in the defaults object I defined in the init method, but as you can see the method accepts an argument. This argument can be used to set some different settings other than the default.

The param argument of StateManager.start

What makes init methods cool is that I can bass a config object of sorts to a state every time I start the state. 

1
2
3
4
5
6
7
8
// start with default settings
game.state.start('circles', true, true, {
    count : 8,
    size : 16,
    color : 0x00afff
});

This will change some of the default values and make the demo behave different.

real examples

A real example would be having a game state that accepts an object in its init method that can set up the game in a way that would otherwise me a new game. This is why init methods come in handy, mainly I use them with my main game states in this way.

Conclusion

There are of course the core methods of state objects in phaser, but in some states an init method is called for as a means to set things up in a certain way before anything else is done.

happy coding.