Custom health bar?[SOLVED]

[Ukiyos]

I've designed a custom health bar for my game, which wont be able to just scale down the bar itself, I'd like to transition between a set of images (see images attached) but I'm not sure quite how to go about this, so any advice is greatly appreciated!

Side note: the current "fix" for this is rather bulky, cross multiplying the current health total health to the number of images, rounding to the nearest integer, and displaying the corresponding image, ideally I'd like to make it more gradual than going in steps.

[ch1ky3n]

Have you try using UGui ?
Try to choose Image instead of using sprite renderer and change the fill mode to radial 360

You can use “ease” to animate the variables.

Hope it will helps

[djaydino]

Hi.
You can use the standard ui actions.

Make some ui images to build your heath indicator.

Then, the on ui image which will indicate the percentage :

Set image type to "Filled"
and play around with the setting you wish to use to fill.

Then you can use the action "Ui Image Set Fill Amount"
to manipulate it @ run time.

[Thore]

You could use the swap sprite action (on Ecosystem) or similar. Basically, from start state, check if health is lower than X, go to next state, if higher than X, go to previous state. Underneath the check, you put each a swap sprite action with the corresponding image.

[jeanfabre]

Hi,

As Djaydino said above ( sorry I posted and realized you gave the solution already ), you need to use Image's Image Type filled with Fill method set to Radial 360 and done...



- Use the action UiImageSetFillAmount to control the fill amount

- Then it's matter of doing proper composition to achieve your final look.

Bye,

 Jean

[djaydino]

Hi.
No problem, you answer is more detailed with the gif image included

[hoyoyo80]

@jean, can i have the source please:) Thanks

[jeanfabre]

Hi,

Sure, here it is, I made it nicer with an Fsm so that you can see how to control it via Fsm, just change the value in the Fsm inspector, and the gauge will refresh itself.



open the scene Circular Gauge.

Bye,

 Jean