How to create a Radial Lifebar in Construct 2

4

Attached Files

The following files have been attached to this tutorial:

.zip

lifebar-assets.zip

Download now 5.35 KB
.capx

radial-lifebar.capx

Download now 180.27 KB

Stats

4,369 visits, 6,411 views

Tools

Translations

This tutorial hasn't been translated.

License

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.

Published on 11 Feb, 2015. Last updated 19 Feb, 2019

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^★) !

GDquest.com 

You can find the original article at this address.

.ZIP

lifebar-assets.zip

Download now 5.35 KB
.CAPX

radial-lifebar.capx

Download now 180.27 KB
  • 1 Comments

  • 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!