Playmaker Forum

PlayMaker Help & Tips => PlayMaker Help => Topic started by: Ukiyos on February 22, 2019, 09:52:54 PM

Title: Custom health bar?[SOLVED]
Post by: Ukiyos on February 22, 2019, 09:52:54 PM

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.

Title: Re: Custom health bar?
Post by: ch1ky3n on February 22, 2019, 10:42:07 PM

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

Title: Re: Custom health bar?
Post by: djaydino on February 22, 2019, 11:27:18 PM

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.

Title: Re: Custom health bar?
Post by: Thore on February 24, 2019, 08:05:13 AM

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.

Title: Re: Custom health bar?
Post by: jeanfabre on February 26, 2019, 03:10:59 AM

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...

(https://i.imgur.com/XylPFFC.gif)

- Use the action UiImageSetFillAmount to control the fill amount

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

Bye,

 Jean

Title: Re: Custom health bar?
Post by: djaydino on February 26, 2019, 03:46:25 AM

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

Title: Re: Custom health bar?[SOLVED]
Post by: hoyoyo80 on February 28, 2019, 03:04:10 AM

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

Title: Re: Custom health bar?[SOLVED]
Post by: jeanfabre on March 01, 2019, 06:23:29 AM

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.

(https://i.imgur.com/4KrnIlm.gif)

open the scene Circular Gauge.

Bye,

 Jean