5.6K visitors
55K page views
5.9K translation visitors
26.6K translation page views

Making a Fancy Lifebar

Favourite 153 favourites
Tutorial written by KiyoshiOriginally published on 13th, December 2011 - 10 revisions

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:

Unlock your full gamedev potential

Upgrade to the Personal Edition of Construct 2, it has way more features and won't holding back from making money and using your full creativity like the free edition does. It's a one off payment and all Construct 2 editor updates are free for life!

View deals

Plus, it's got a lot of additional features that will help you save time and make more impressive games!

Congratulations on finishing this tutorial!

Did you learn a lot from it? Share it now with your friends!


Bigheti 17.3k rep

Sorry my newbies knowledge :-) I do add properties who explained in the step 3?

Wednesday, December 14, 2011 at 6:21:43 PM
Kiyoshi 13.4k rep

With object selected. Look at the properties panel on the left then Edit Variables on Instance Variables section. There click the Plus sign to add a new property or more correctly instance variable :D

Wednesday, December 14, 2011 at 7:07:10 PM
Bigheti 17.3k rep

I got it! Thank you for the tip ...

Thursday, December 15, 2011 at 7:58:41 AM
Lordxorn2 3,532 rep

Great Tutorial,

I am going to improve the Beginner Tutorial with this health bar.

BTW since I do not have the REP to edit a typo,
"Below this add a System: Every Thick event with the actions:" ~~Shouldn't Thick=Tick?

Monday, December 26, 2011 at 8:35:23 AM
Kiyoshi 13.4k rep

Eheh of course typo fixed thanks !

Monday, December 26, 2011 at 6:04:31 PM
ludodesign 30.7k rep

Cool work =)

Tuesday, January 24, 2012 at 3:04:14 AM
existonfile 2,897 rep

Simple and works perfectly, thanks!

Monday, February 06, 2012 at 11:58:52 AM
Eltorografix 2,273 rep

For what is Self. standing for ?

Tuesday, February 07, 2012 at 4:47:37 PM
Kiyoshi 13.4k rep

The current picked object of the event. Ex:

Bar: Set InitialWidth to Self.Width is the same as
Bar: Set InitialWidth to Bar.Width

Wednesday, February 08, 2012 at 6:16:25 PM
Eltorografix 2,273 rep

thanks a lot

Monday, February 20, 2012 at 2:07:34 PM
Eltorografix 2,273 rep

Sad .. I don´t get it :( I think I´m doing something wrong ..

Monday, February 20, 2012 at 5:10:19 PM
Kiyoshi 13.4k rep

@Eltorografix What exactly is happening ?

Monday, February 20, 2012 at 9:14:35 PM
Eltorografix 2,273 rep

nothing don´t have any clue ...maybe a syntax issue ?

Tuesday, February 21, 2012 at 6:32:48 AM
Kiyoshi 13.4k rep

A capx would be helpful then.

Tuesday, February 21, 2012 at 6:20:12 PM
AarongamerX 6,005 rep

Cool tutorial
what if i wanted that health bar to move with an enemy. Like an enemy life bar. Would i just set the position of the life bar to Enemy.X and Enemy.Y 1?

Wednesday, March 07, 2012 at 5:44:24 AM

Leave a comment

Everyone is welcome to leave their thoughts! Register a new account or login.