HUDManager: Bringing AngularJS style data binding to your game's HUD [Demo and Source]

[codevinsky]

I've been working on this plugin and demo for a few days. I think it's pretty cool and I'd like some feedback.
 
Here's a running demo: http://phaser-hudmanager.herokuapp.com

( WASD to move, mose to shoot )
 
Here's the source and the readme: http://github.com/codevinsky/phaser-hudmanager
 
The Rundown
Basically, you can tell the HUDManager to watch a variable in your state's scope and to do a number of things with it.
 
The simplest thing you can do is have the HUDManager add a text label that will change every time the watched variable changes. This is most obvious with a score display:
 
 

var hud = Phaser.Plugin.HUDManager.create(game, this, 'gamehud');var score = 0;var style = { font: '18px Arial', fill: '#ffffff', align: 'center'};var textHUD = hud.addText(10, 10, style, 'Score: ', 'score');game.add.existing(textHUD.text);

 
Now, every time your score variable changes, the text will update to reflect that.
 
But wait, there's more:
 
Health/Progress bars
 

maxHealth = 10;var sprite = game.add.sprite(100,100, 'player');sprite.health = maxHealth;game.physics.arcade.enableBody(sprite);var healthHUD = this.hud.addBar(0,-20, 32, 2, maxHealth, 'health', sprite, Phaser.Plugin.HUDManager.HEALTHBAR);healthHUD.bar.anchor.setTo(0.5, 0.5);sprite.addChild(healthHUD.bar);

Now, your sprite will have a health bar above itself head that will display, in colors, where the sprite's health sits, like so:



There's a few more things it can do, but I'll let you look around for that as you see fit.

[Heppell08]

Ooh this looks pretty damn nice!!

[gbachik]

You sir are my hero
This plugin is awesome and I will be using it in my next game!

Ps what do you use to record those gifs in a all your tuts?

[codevinsky]

LICEcap. It's free.

[Heppell08]

LICEcap. It's free.

 

Good call on LICEcap! been looking for something like that for a while but never got around to searching for one!

[plicatibu]

You sir are my hero

This plugin is awesome and I will be using it in my next game!

 

 

I second that.

[ClonkMobile]

thanks for that :-)

[jdnichollsc]

Hi man, ¿Is possible to cancel the rotation to health bar if the sprite change the rotation?

 

Thanks for all, Nicholls