Using Sprite.health to manage hit point in phaser ce.

With Phaser ce sprite objects there is a health property, this property can be used in conjunction with methods like Sprite.damage to manage hit points for the Sprite. Many kinds of games involve the use of hit points, and when these hit point values reach zero or lower, that often will trigger death animations, and other events. Although it is fine to make hit points part of my own separate game logic, the built in health property can be used in conjunction with other properties and methods to help speed things along with managing health. In this post I will be writing about managing hit points in a phaser ce game using the Sprite.health property, and a few closely related methods and properties like Sprite.damage, and Sprite.events.onKilled.

1 - What to know

This is a post on the Sprite.health property, and other methods, and properties in phaser ce the community edition of phaser a javaScript powered game framework. This is not a getting started post on phaser, or the ins and outs of everything relating to javaScript in it entirety, so I ssume you have some background before hand.

1.1 - This is a phaser ce (2.x) post

In this post I am using phaser 2.11.0, also know as phaser community edition. I have been playing around with phaser 2.c on and off for a long time now, and feel as though I am just starting to get the hand of things. It is only a matter of time until I start to break ground with phaser 3, but for now I am sticking to the tired yet true version of phaser.

2 - A Basic example of Sprite.health

For a basic example of using Sprite.health, I made a simple example that makes a Sprite and sets the health property to 100. I then also set up an onKilled event that will be used to set the exists property to true, and set the frame index to a frame that will represent a death frame. The reason for this is that when I use the Sprite.damage method the Sprite.alive, and Sprite.exists properties will be set to false. In this example I want to display a death frame, but in more advanced examples this might advance into a death animation.

2.1 - A helper for making a sprite that makes use of Sprite.health

So here is the method that makes the Sprite, I make a new sprite with game.add.sprite, and use a sheet called ‘sheet-block’ that I make with a canvas solution that I will briefly cover shortly. I set the player.health property with a number literal here, and also set up an event to define what to do when the Sprite is killed.

// make a player sprite
var mkPlayerSprite = function (game) {
 
    // create player sprite, and attach name
    var player = game.add.sprite(0, 0, 'sheet-block', 0);
    player.name = 'player';
 
    // set health to 100
    player.health = 100;
 
    // what to do if the player is killed
    player.events.onKilled.add(function (player) {
 
        // set exits to true, but leave the alive value as is
        player.exists = true;
        player.frame = 1; // set to frame 1 (death frame);
 
    });
 
};

2.2 - The sprite sheet helper

For many of my examples like this I often use a canvas solution for making a quick simple sprite sheet. For this example I need a sprite sheet that has just two frames one for an alive state, and one for a death state.

// make a sprite sheet
var mkSheets = function (game) {
 
    // sprite sheet generated by canvas
    var canvas = document.createElement('canvas'),
    ctx = canvas.getContext('2d');
    canvas.width = 96;
    canvas.height = 32;
 
    // blue box (alive frame)
    ctx.fillStyle = '#0000ff';
    ctx.fillRect(0, 0, 32, 32);
 
    // red box (death frame)
    ctx.fillStyle = '#ff0000';
    ctx.fillRect(32, 0, 32, 32);
 
    game.cache.addSpriteSheet('sheet-block', null, canvas, 32, 32, 3, 0, 0);
 
};

For more on using canvas as a way to make quick sprite sheets I have a post in which I go into deeper detail on this.

2.3 - The phaser.Game instance, and boot state

So to pull everything together there I will need to make a Phaser.Game instance, and some state objects. In by boot state I will be making my sprite sheet by calling the mkSheet method, and setting up the player sprite with my mkPlayerSprite method.

var game = new Phaser.Game(320, 240, Phaser.AUTO, 'gamearea');
 
game.state.add('boot', {
 
    create: function () {
 
        mkSheets(game);
 
        mkPlayerSprite(game);
 
        game.state.start('basic-demo', false, false);
 
    }
 
});

When changing to the basic-demo state, I make sure to set the clearWorld, and clearCache booleans to false as well, else I will want to do all of this in the basic-demo state. For simple examples like this it might seem over kill, but as a project grows it will seem less silly.

2.4 - The demo state

So Finally I have my basic-demo state and for the moment I just use the Sprite.damage method on the player Sprite, and log the results with console.log.

game.state.add('basic-demo', {
 
    create: function () {
 
        var player = game.world.getByName('player');
 
        console.log(player.health); // 100
        console.log(player.alive); // true
        console.log(player.exists); // true
 
        player.damage(50);
 
        console.log(player.health); // 50
        console.log(player.alive); // true
        console.log(player.exists); // true
 
        player.damage(50);
 
        console.log(player.health); // 0
        console.log(player.alive); // false
        console.log(player.exists); // true
 
    }
 
});
 
game.state.start('boot');

The Sprite.damage method will deduct the amount of damage from Sprite.health, and when Sprite.health reaches Zero the Sprite.Kill method will fire. This saves time with making my own solution for handling all of this.

3 - Conclusion

So the Sprite.health, and Sprite.damage method are there to help make quick work of something that is very common amongst a lot of games, and in many cases the phaser built in stuff for handing health works just fine. If not there is always just working out my own solution appending to the sprite.data object.