codevinsky

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.

Share this post


Link to post
Share on other sites

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.