Jump to content

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


Recommended Posts

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.

Link to comment
Share on other sites

  • 1 year later...

  • Recently Browsing   0 members

    • No registered users viewing this page.
  • Create New...