The autocull component in phaser ce

The auto cull component in Phaser ce is a fairly simple component that just adds two boolean values. One of which can be used to enable auto culling of sprites in a project keeping sprites that are outside of the camera from rendering, and the other is just an inCamera boolean that can be used to find out if a sprite is outside of the camera or not. In this post I will be outlining a simple example that makes use of what is added to sprites in phaser ce thanks to the auto cull component.

1 - What to know

This is a post where I am writing about just the auto cull component of phaser ce,the javaScript powered game framework. As such this post just covers a very narrow topic of interest whet it comes to making games with phaser ce as a framework. If you are new to phaser you might want to start with my getting started post on phaser ce. The auto cull component is one of many components that add features to display objects in phaser such as sprites, text, and graphics. I have found that studying each of these components one at a time is helping me understand everything that there is to work with out of the box with phaser, ultimately helping me save time by writing less code. Culling is similar to clipping) when it comes to 3d games, only the whole object is not rendered because it is out of view of the camera.

1.1 - This is a phaser ce 2.x post

In this post I was using phaser community edition 2.11.1 of phaser

2 - Example of the sprite.inCamera property

For an example of the inCamera property I made a demo that involves two sprites one represents a ship, and the other represents a pointer sprite that points to the location of the ship when it it outside the view of the camera.

2.1 - The update pointer method

So then here is a helpe that will be used to set the properties of the pointer, and ship sprites depending on the inCamera value of the ship sprite.

var updatePointer = function (game) {
 
    var ship = game.data.ship,
    pointer = game.data.pointer;
 
    // default to an invisible pointer, and a viable ship;
    pointer.visible = false;
    ship.renderable = true;
 
    // using ship.inCamera to toggle displaying the pointer
    if (!ship.inCamera) {
        pointer.angle = new Phaser.Point(pointer.centerX, pointer.centerY).angle({
                x: ship.centerX,
                y: ship.centerY
            }) / Math.PI * 180;
        pointer.visible = true;
        ship.renderable = false;
    }
 
};

2.2 - Make a sprite sheet

This helper just makes a sprite sheet for the ship, and the pointer sprites using canvas.

// 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;
 
    // red box
    ctx.fillStyle = '#ff0000';
    ctx.fillRect(0, 0, 31, 31);
 
    // triangle
    ctx.beginPath();
    ctx.moveTo(34, 8);
    ctx.lineTo(62, 16);
    ctx.lineTo(34, 24);
    ctx.closePath();
    ctx.fill();
    game.cache.addSpriteSheet('sheet', null, canvas, 32, 32, 2, 0, 0);
 
};

2.3 - The Phaser.Game instance and state object

So now that I have my helpers I now just need to get everything working with a Phaser.Game instance and a state object.

var game = new Phaser.Game(320, 240, Phaser.AUTO, 'gamearea');
 
game.state.add('incamera', {
 
    create: function () {
 
        game.data = game.data || {};
 
        var data = game.data;
 
        mkSheet(game);
 
        // create the ship, and pointer
        var ship = game.data.ship = game.add.sprite(game.world.centerX, game.world.centerY, 'sheet', 0);
        ship.anchor.set(0.5, 0.5);
        ship.data.dx = 5;
        ship.data.dy = 2;
 
        var pointer = game.data.pointer = game.add.sprite(game.world.centerX, game.world.centerY, 'sheet', 1);
        pointer.anchor.set(0.5, 0.5);
        pointer.visible = false;
 
    },
 
    update: function () {
 
        var ship = game.data.ship;
 
        // update pointer
        updatePointer(game);
 
        // update ship
        ship.x += ship.data.dx;
        ship.y += ship.data.dy;
        ship.x = Phaser.Math.wrap(ship.x, -320, 640);
        ship.y = Phaser.Math.wrap(ship.y, -240, 480);
 
    }
 
});
 
game.state.start('incamera');