How to create a Radial Lifebar in Construct 2

How to create a radial bar… that’s a tricky
question! The easiest (and least flexible) way to code it would be to use an animated sprite with lots of frames. But thankfully for us, there are other ways to go! In this
tutorial, we’re going to see how we can build a radial lifebar with only a few sprites
and lines of code. Let’s first take a look at the logic behind
this lifebar system. I’ve setup a Photoshop document to that end. We have four layers
containing half of a ring each. The two orange ones correspond to the lifebar fill, and the
black ones will rotate to hide the bar. Let me show you how this works: The first
mask rotates counter-clockwise over the left half of the orange ring. When it has rotated
180°, the second black mask relays the first one. As far as coding the system is concerned, we will simply convert a percentage of life
points to the angle of the bar that should be covered. We can now start working in Construct 2. You can find a link to download the bar sprites
in the description below. In Construct 2, we first need to import our
orange half. After that, we import the black mask. We have to set the pivot (the origin) of both objects to the center of the half ring. That is to say the middle of the images’
left edge. Select the origin icon in the image editor and press 4 on your numpad to set the origin. We’re then going to clone our black mask object in the projects panel, which will make
it easier to code our Lifebar. After that, we have to properly place our
assets on the layout. We actually have to replicate the draw order I showed you in the
Photoshop document. To do so easily, we are going to first activate the grid. In the ribbon, click on the view tab, and check the “Snap to grid” option. Then,
we have to build our radial bar this way: There is our bar’s left half at the bottom.
On top of it in the Z order comes the first black mask. Next, we need the right orange half. And, finally, the second mask object will be on top. We have to place all four
assets at the same position: their pivot points need to be superposed for the rotation trick
to work. Let’s add the Function object and a Slider
Bar. We can rename the bar to LifeValue. By default, the slider bar’s value varies between
0 and 100. As we need a percentage in this project, we’ll keep it as it is.
We are now setup to start programming the bar. In order to update our lifebar, we’re going to use a function. The advantage of a function
is that we can call it whenever we need to in our code. This will make it easier for
you to add this radial lifebar to other capx projects. Here, I chose to call the function Lifebar.Update. I tend to name functions using the system’s
name, which is Lifebar here, followed by what it does. This function will update the lifebar. This naming convention is actually just meant to take advantage of Construct 2’s auto
completion, and to make it clear for myself as well. In a larger project, you would only have to type “Life” when calling
a function to filter all of the Lifebar related functions. Which could be Lifebar.Create,
Lifebar.ChangeSkin, Lifebar.Scale, etc. Next, we want to create a global variable
called LifePercent. It represents our character’s life in percentage. On every tick, we want
to set this global variable to the slider’s value divided by 100. Don’t forget that
percentages actually represent a value between 0 and 1. For instance, 20% means 20 over 100 or 20 divided by 100. We add a system event, "on every tick", and set the variable LifePercent
to LifeValue.Value / 100. Right after that, we call the Lifebar.Update function. Ok, now we have a life value to work with, it’s time to dive into the fun part!
We want the first black mask to cover the left half of our orange lifebar. In practice,
this means that we want the LifebarCache object to rotate over the lifebar if and only if
the LifePercent value is over 50%! So, if LifePercent is above 50 / 100, or 0.5, we
set LifebarCache’s angle to LifePercent * 360. What if our Life value is below 0.5? Let’s add an else event block in our function by pressing X. Then, we set the first cache to an angle of 180, and we rotate the LifebarCache2
object just like the first one: we set its angle to LifePercent * 360. We’re almost there. If we preview the project now, you can see that we are facing some issues. Actually, to wrap-up the function, we need to hide and unhide the LifebarCache2 object. If LifePercent is above 0.5, we hide it. Else, we unhide it!
Last but not least, at the start of the layout, you can hide the LifebarCache2 object as well. And we're done! Before we part ways, I want to give you a little tip on creating the base assets. Be careful with the height of the half rings. The sprites’ height needs to be a multiple
of 2 for the origin to fit exactly in the middle of its left edge. Otherwise, you’ll
get a 1 px difference in the Construct 2 editor, between the 2 halves when using your system. And it's going to create artifacts when rotating the lifebar. Game development is all about logic and tricks. Hopefully, this radial lifebar illustrates
that idea. Also, there is rarely a single good way to code a system for a game! If you liked that video, you can subscribe to my channel, and follow me on social networks. Thank you for watching!

18 thoughts on “How to create a Radial Lifebar in Construct 2

  1. wut… what?! It was possible! amazing! I've already retired to implement it long ago! What an amazing! Thank you so much!

  2. haveing an issue following this, my sprites dont nit end perfectly like they do in yours. theres a little blabk space bewteen them even though the exported version is perfectly flush and in the image editor in c2 it shows its perfectly flush agaisnt the side, but in the actual c2 it shows a line between it x.x

  3. oi sou brasileiro e facilita muito quando tem tambem um tutorial  escrito.
    achei esse video apartir do "How to simplify your AI code with Finite State Machine" 
    quando o o tutorial e escrito da para traduzir pelo google tradutor.
    o vidio e muito bom como referencia mas a legenda e fraca.
    muito bom seus tutoriais .
    obrigado 🙂

  4. @Gib Gibon Afaik your idea is simple to realize. And you have 2 ways:
    1) transparent frontal layer, which will change its color (like colored glass effect)
    2) you may change the color of your sprites instead.
    The main problem here is C2 has no regular event option "SetSpriteColor" unlike Construct Classic. So 1st thing to do is adding the effect named "SetColor" to your layer or sprites. Then you may set the event to change the color depending on distance or time passed.
    P.s.: second way you may use only for one color objects/layout, where the picture is based on brightness, not color. Because C2 SetColor sets ALL pixels RGB. If you want to change the hue without brightness or frontal lense, there are other effects in C2 but now I cant help with it because of lack of knowledge.

    Best regards,

  5. Awesome tutorial.  Please make more of these kinda videos.  One feature explained with a possible use.  thanks.

Leave a Reply

Your email address will not be published. Required fields are marked *