FlxHealthBar added to Flixel Power Tools
5th Apr 2011
Health bars are a commonly used feature in games. From little health bars floating over players / enemies heads, to bars in the UI / HUD. This class provides a really fast way to create them, and they are highly customisable. It features:
- 3 different types of bar: Plain-colour filled, Gradient filled or Image filled
- All fill types support alpha levels
- Optional 1px border around the bar with configurable colour
- The bar can fill in one of 3 directions: From left to right, right to left or from the inside out
- Bars are associated with FlxSprites (its parent). When the health value of the parent changes, the bar updates automatically (within a given threshold limit)
- Bar can be fixed on-screen, and supports scrollFactor
- Bar can “float” with its parent at a given x/y offset from the parents origin
|
1 2 3 4 5 6 |
// Create a tiny 32x4 health bar that floats above the "wolf" sprite wolfHealth = new FlxHealthBar(wolf, 32, 4, 0, 100); // Tells it to track the x/y position of the wolf FlxSprite but offset by -5px on Y wolfHealth.trackParent(0, -5); |
Visit the Flixel Power Tools page to see it in action in the Test Suite, and find the svn download details.
Posted on April 5th 2011 at 12:39 am by Rich.
View more posts in Flixel Power Tools. Follow responses via the RSS 2.0 feed.
5 Responses
Leave a commentMake yourself heard
Hire Us
All about Photon Storm and our
HTML5 game development services
Recent Posts
OurGames
Filter our Content
- ActionScript3
- Art
- Cool Links
- Demoscene
- Flash Game Dev Tips
- Game Development
- Gaming
- Geek Shopping
- HTML5
- In the Media
- Phaser
- Phaser 3
- Projects
Brain Food
This is awesome! I hate rewriting this code over and over for HUD’s or floaty bars. It looks very versatile. For it to be useful in any HUD situation I might add vertical fill options as well. Great work!
I think for it to be a generic “power bar” it would need to have an option so it’s not tied to the health value of an FlxSprite, but rather any value you care to assign to it. Then it’d make sense to add vertical support too
If you’d like to help me out with that, feel free (just send me the modified code and I can commit it to the next release)
Hello, as far as I see there is no support for vertical healthBar correct? I might as well give it a try since I think it will also help for mobile development, because of the lack of horizontal space.
I suppose I can mail you for any help if necessary?
Hi Michael – in v1.7 which is currently on github in the dev branch FlxHealthBar has been removed and replaced with a more generic FlxBar, which supports any orientation and is a lot more flexible. I will push it to master soon, but you can grab it from dev right now if you like.
oh cool, I’ll check it out surely. Great job on those classes, they speed up things greatly!