The Bounds component in phaser ce

When working with one or more sprites or display objects in Phaser ce there might come a time when the bounds of a sprite are of interest. These are simple values like the y position of the sprite plus its height which results in the bottom y position of the sprite. In phaser ce there is no need to write my own code to fine these values because they are part of the bounds component. In some cases it might be necessary to world with these values, and if so they are there all ready at the instance of the display object thanks to this component. This component also adds two useful methods that can be used to align one display object with another as well. Although This component by itself does not do anything with collision detection, it does maintain properties that are needed for things like bounding box collision detection.

1 - What to know

In this post I am outlining what is added to display objects like sprites in phaser ce thanks to the bounds component, one of many components that are used to add features to display objects like sprites. The reason why I write these posts is because if you are new to phaser studying these components one at a time helps to gain a better sense of everything there is to work with when it comes to using sprites, and other display objects. So the scope of this post is on a very narrow topic, and is not a getting started post on phaser ce or javaScript in general. Alos when it come to studying phaser display object components it might be best to start with the core component, or PIXI.Sprite.

1.1 - This is a phaser ce 2.x post

In this post I am using phaser Community Edition 2.11.1 of phaser.

2 - Bounds properties that are added by the bounds component

So the bounds component adds a bunch of properties that get updated each frame tick along with many other things. So if for some reason you need the y position that is at the bottom of the sprite there is no need to preform the extra operation to get that value because it is all ready a property of the sprite object.

In this example I am logging all of the properties that the bounds component adds and updates for the sprite.

// make a sprite sheet
var mkSheet = function (game) {
    // sprite sheet generated by canvas
    var canvas = document.createElement('canvas'),
    ctx = canvas.getContext('2d');
    canvas.width = 32;
    canvas.height = 32;
    ctx.fillStyle = '#0000ff';
    ctx.strokeStyle = '#ffffff';
    ctx.lineWidth = 3;
    ctx.fillRect(0, 0, 32, 32);
    ctx.strokeRect(1, 1, 30, 30);
    game.cache.addSpriteSheet('blocks', null, canvas, 32, 32, 1, 0, 0);
};
 
var game = new Phaser.Game(320, 240, Phaser.AUTO, 'gamearea');
 
// properties demo
game.state.add('properties', {
    create: function () {
 
        mkSheet(game);
 
        var sprite = game.make.sprite(32, 32, 'blocks');
 
        // setting anchor to 0.5 0.5
        sprite.anchor.set(0.5, 0.5);
 
        // x,y,width, and height properties from PIXI.Sprite
        console.log('pos: ', sprite.x, sprite.y); // 32 32
        console.log('size: ', sprite.width, sprite.height); // 32 32
 
        // Bound Component properties
        console.log('center pos: ', sprite.centerX, sprite.centerY); // 32 32
        console.log('offset: ', sprite.offsetX, sprite.offsetY); // 16 16
        console.log('top', sprite.top); // 16
        console.log('bottom: ', sprite.bottom); // 46
        console.log('left: ', sprite.left); // 16
        console.log('right: ', sprite.right); // 48
 
    }
});

3 - The alignIn method

The bounds component also gives a method that can be used to align a sprite relative to another sprite. It can be used with a number of directional constants other then that of Phaser.BOTTOM_RIGHT which would be the kind of behavior if one where to just align one sprite with another manually.

// alignIn method
game.state.add('alignin', {
 
    create: function () {
 
        mkSheet(game);
 
        var sprite1 = game.add.sprite(32, 32, 'blocks');
 
        var sprite2 = game.add.sprite(0, 0, 'blocks');
 
        sprite2.alignIn(sprite1, Phaser.BOTTOM_RIGHT, 16, 16);
 
        console.log(sprite2.x, sprite2.y); // 48 48
 
    }
 
});
 
game.state.start('alignin');

4 - Conclusion

Thats it for today the bounds component is a fairly simple component that just adds a few properties, and two methods.