HUD UI: Best approach

[grumpygamer]

Ok, here's another advice request:

 

I would like to build a HUD for my game with some futuristic graphics, what would be the best approach for this?

Using sprites seems quite a big undertaking as I'd have to draw each percentage as a separate sprite: I'd be more keen on drawing the UI elements with Phaser and animating them accordingly?

What do you guys think?

 

[MichaelD]

If you use tileSprite you could only set the width/height of the bar and since the tileSprite repeats it would fill the available space accordingly.

 

Can you give an example of what kind of look are you looking at?

[grumpygamer]

Sure something like this: 

 

but with circular elements too such as these:

 

 

Sorry don't know how to resize it...

 

For example I would like to do a circular gauge that fills up on keypress.
Would be lovely to do it slightly in perspective too

[drhayes]

I think you're better off not drawing them in Phaser, at least not in real-time with your game, especially for UI elements that have known values, i.e. sliders and gauges and such.

 

Have you checked out the Image class? It's got alpha (transparency), rotation (maybe for a circular gauge?), mask (for only showing the RED parts of a warning diagram, like ship hull or something). 

 

For everything that you *do* end up drawing I think you should check out BitmapData. It's got a lot of great drawing methods and then, at the end of it all, you can use it as the texture for an Image for drawing in your game.

 

EDIT: BTW, those UI elements look great. ( =

[MichaelD]

I think going element by element and creating groups of images/text/sprites would be my course of action. Then you can have better control over the UI.

[grumpygamer]

Sounds like you know how you'd do it.

Could you expand just a little (no need for code)?

Just an idea for a slightly perspective-d circular gauge that has a smooth bar animating

If I understand where you point me at, I'm sure I'll be able to do it!

[MichaelD]

For the bars you can have one image with colored bar and one without color place them one behind the other and simply change the width of the enabled-colored-bar.

For the round ui elements if you want the to rotate from center add element.anchor.setTo(0.5, 0.5)

 

In general I would create a phaser group for each element and add the sub-parts inside that, that way all the elements will be positioned based on their position within the group x=0, y=0 etc. And you will only need to move the group to place it wherever you want. So in the end you will end up with 5-6 groups of elements.