Published: Modified: V1.18
phaser

The Core component in phaser ce

As I continue to expand my content on Phaser ce I have come around to expanding mu posts centered around the various components that are used with display objects in phaser ce. These components add features to display objects like events, and animation. In this post I will be covering the core component and what it brings to a display object, such as a sprite or text object.

1 - What to know

This is a post on the core component in phaser ce that brings some properties and functions to just about all display objects. All display objects use this core module, but all of its features may not be functional depending on the type of display object. For example the core module brings the animations property to a display object, but if the display object does not also include the animation component, then animations will not work. This is the case with Graphics objects, the animations property is there, but an instance of the animation manager is not there and the value is undefined.

Of course this post is not a getting started post with phaser ce, or javaScript in general. In addition I will not be covering all aspects of the may additional components that bring functionality to display objects in phaser ce. However I will like to relevant other posts on the core component from here.

1.1 - This is a phaser ce 2.x post

In this post I am using phaser community edition 2.11.1 of phaser, and not the later phaser 3 major release. As such code in this example will likely break in phaser 3. As long as phaser 2.x is still supported I will continue to expand and revise my 2.x content.

2 - Some examples using core component properties

In this section I will be covering some examples that make use of the properties that are added via the core component.

2.1 - The mkSheet helper

All of these examples make use of features that are present in display objects such as sprites, and as such many of them need a sprite sheet to be skinned with something if I am not getting anything otherwise with the __default key sprite. So for some of the examples I am making use of a simple mkSheet helper that will make a sprite sheet via the 2d canvas drawing api.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
// make a sprite sheet
var mkSheet = function (game) {
    // sprite sheet generated by canvas
    var canvas = document.createElement('canvas'),
    ctx = canvas.getContext('2d');
    canvas.width = 96;
    canvas.height = 32;
    // blue box (player)
    ctx.fillStyle = '#0000ff';
    ctx.fillRect(0, 0, 32, 32);
    // blue box (player)
    ctx.fillStyle = '#ff0000';
    ctx.fillRect(32, 0, 32, 32);
    game.cache.addSpriteSheet('blocks', null, canvas, 32, 32, 2, 0, 0);
};

2.2 - The animations property

So the core component does bring an animations property to a display object, however not all display objects support animation. In the event that the animations component is not used by the display object, then the value of the animations property will be undefined. So although the animations property is listed as part of the core component it is not really of any use unless the display object aslo includes the animation component as well.

1
2
3
4
5
6
7
8
9
10
11
12
var game = new Phaser.Game(320, 240, Phaser.AUTO, 'gamearea');
 
game.state.add('animations', {
    create: function () {
        mkSheet(game);
        var sprite = game.add.sprite(0, 0, 'blocks');
        sprite.animations.add('flash', [0, 1], 8, true);
        sprite.animations.play('flash');
    }
});
 
game.state.start('animations');

I will not be getting into the ins and outs of the animation manager in detail here, however I have wrote a post on the animation manager a while back. As long as you stick to sprites, rather than graphics then the animation manager will also be there at the ready. When using graphics There might be a need to handle animation in a different manager that involves calling a draw method on each frame tick.

2.3 - The components property

The components property is an Object where each key is the name of a component, and the value is a true boolean value if the display object supports the given component. This can be used to find out if a certain kind of display object supports a given component or not.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
var game = new Phaser.Game(320, 240, Phaser.AUTO, 'gamearea');
 
game.state.add('components', {
    create: function () {
        game.data = {};
        // make a simple sheet
        mkSheet(game);
        var sprite = game.add.sprite(0, 0),
        textStyle = {
            fill: 'white',
            font: '10px courier'
        };
        Object.keys(sprite.components).forEach(function (componentName, i) {
            var text = game.add.text(0, i * 10, componentName, textStyle);
        });
    }
});
 
game.state.start('components');

2.4 - The exists property

One of the most important properties that is added to a display object with the core component is the exists property. If this property is set to true then the display object will be removed from the game loop, and it will no longer be viable. So It is very useful for projects where a pool of sprites are being used and they need to be removed, and placed back into the game world given certain conditions.

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
var game = new Phaser.Game(320, 240, Phaser.AUTO, 'gamearea');
 
// exists
game.state.add('exists', {
    create: function () {
 
        mkSheet(game);
 
        var group = game.add.group();
 
        var i = 0,
        len = 10;
        while (i < len) {
 
            // make a sprite, and have sprite.exists = false
            var sprite = game.make.sprite(0, 0, 'blocks', 0);
            sprite.exists = false;
 
            // some physics
            game.physics.enable(sprite);
            sprite.body.gravity.set(0, 100);
            sprite.checkWorldBounds = true;
            sprite.body.collideWorldBounds = true;
            sprite.body.bounce.set(1);
 
            // input enabled, set exists = false if clicked
            sprite.inputEnabled = true;
            sprite.events.onInputDown.add(function (sprite) {
                sprite.exists = false;
            });
 
            // add to group
            group.add(sprite);
 
            i += 1;
 
        }
 
        // scatter the group
        group.scatter(new Phaser.Rectangle(0, 0, game.world.width - 32, game.world.height - 32));
 
        // set a sprite that has exists === false set back to true
        // every second
        game.time.events.loop(1000, function () {
            var sprite = group.getFirst('exists', false);
            if (sprite) {
                sprite.exists = true;
            }
        });
 
    }
});
 
game.state.start('exists');

3 - Conclusion

So I did not get to all of the properties and methods that are used in the core component just yet. I will need to write some more code examples in order to do this subject justice. If you have any questions, or would like for me to give this post another look let me know in the comments. Feedback is a factor I take into concentration when it comes to updating content. In any case thanks for reading.