Jump to content
HTML5 Game Devs Forum

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:

healthbar.gif

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

Link to post
Share on other sites
  • 1 year later...

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
  • Recently Browsing   0 members

    No registered users viewing this page.

×
×
  • Create New...