Getting Started
Here i'll assume you already have the graphics for your lifebar - make it however you want! But the basic structure is this:
The second one is optional. It just gives it a better look.
Step 2
Import them into Construct and assign the image points like so:
Adjust it as necessary. This will make life easier when making the events. Name the objects. I'll name them Frame, Subbar and Bar. The character or target object i'll name Hero :)
Put your life bar objects on a separate layer on top of everything if you want. Be sure to set it's Parallax X and Y values to zero.
Step 3
Let's add some properties. Just add the properties "Life" and "MaxLife" to your target object, and "InitialWidth" to your life bar object. To add properties go in Left Panel -> Instance Variables -> Edit Variables. Edit them as you want. For example if your hero has max life 100, just set MaxLife to 100 and Life to 100, or any value you want :)
To set a property: Either go directly on object properties section "Instance Variables" editor, or on event sheet: Add Action -> Double Click On Object - > Go To "Instance Variables" section -> Set Value. Usually in event "On Start of Layout" but it can be wherever wanted.
Step 4
Last step: the events. For better organization add an Event Sheet called HUD or whatever you like, going on:
Projects Tab -> Right click on Event Sheets -> Add Event Sheet.
Then adding it on main Event Sheet with Right click on Main Event Sheet screen -> Include Event Sheet. Then on HUD Event Sheet:
Add a System: On Start of Layout event. In its actions add:
- Bar: Set Position to (Frame.X, Frame.Y)
- Subbar: Set Position to (Frame.X, Frame.Y)
- Bar: Set Instance Variable InitialWidth to Self.Width
Below this add a System: Every Tick event with the actions:
- Bar: Set Width to (Self.InitialWidth + (Hero.Life-Hero.MaxLife)*(Self.InitialWidth/Hero.MaxLife))
(Thanks to @Sargas for the tip !)
And you're done! The image points will position the bars correctly, so adjusting its width won't misplace it.
Now just manipulate the Hero.Life as wanted! That's it. See you in a next tutorial :D
Final Look: