How to create a Radial Lifebar in Construct 2

  • 35 favourites

Attached Files

The following files have been attached to this tutorial:


Download now 5.35 KB


Download now 180.27 KB


4,208 visits, 6,227 views



This tutorial hasn't been translated.


This tutorial is licensed under CC BY 4.0. Please refer to the license text if you wish to reuse, share or remix the content contained within this tutorial.

Every wondered how to program a radial lifebar in Construct 2? In this tutorial, we’re going to see how we can build a radial lifebar with only a few sprites and lines of code.

Subscribe to Construct videos now

You can download the assets in the top left corner of the page. If you are comfortable with C2, you can also directly download the final Capx example.

The principle behind this lifebar is quite simple: we are rotating 2 black half rings over an orange ring split in 2 sprites, to mask it out.

Here is a snapshot of the events in Construct 2. Note that the LifePercent variable corresponds to a percentage, that is to say a value between 0 and 1 (ie. 80% <=> 80/100 <=> 0.8).

Support me!

If you liked that tutorial and want to see more, you can become a follower on facebook, twitter and Google Plus ! Thank you (★^O^★) ! 

You can find the original article at this address.


Download now 5.35 KB


Download now 180.27 KB

  • Order by
Want to leave a comment? Login or Register an account!
  • This is quite a nice idea but so clumsy, especially when you have a lot lot lot of them + responsive sizing. Has anybody or scirra have found a sweeter solution for this over the years? I can not find any results on this anywhere :) Any help is greatly appreciated!