How do you animate UI Float Amount?

[Shizane]

Hey there hoping someone can help with an issue:

I have a UI Image mask that animates vertically from top to bottom, with a fill amount of 1 that needs to go to 0 when the player finishes and completes 100% of the task. Everything is setup including getting the float values etc.

But I'm having a hard time figuring out how to animate the Fill Amount on the UI Image. I've tried Animate Fill Amount, and v2, Animate Float etc...

Which FSM do I use and what settings would I use? I've attached a few screenshots.

Thank you so much.

[djaydino]

Hi.
you can use a "Ui Image Set Fill Amount" and a Tween Float
on Ui Image Set Fill Amount turn on every frame and set a variable, then use the variable in the tween float

[Shizane]

Hey thanks for the response.

The only other missing thing though is what FSM do I use to compare the value of the fill amount with my other script that has a percentage from 0-100. So I'm looking to compare and match the fill amount with the percentage.

Player has completed 44%
Fill amount is at 44%

I would probably need a float compare?

Thanks!

[djaydino]

divide by 100 to get normalized (0-1)

but code wise it would be better to use a percentage between 0 and 1 (1 = 100% 0.5 50%)
and if you need to display then use *100

there is also an action to Get the filled amount btw

[Shizane]

I did this before I saw your last message. I'm close....

When the player enters the area and the percentage starts going up, the float amount jumps from 0-100 (where it should be going up matching the percentage). So I'm close...

So as per your comment to divide by, do I need another FSM for that? Check out my screenshot and let me know what you think. 

[djaydino]

Hi.
You can use a Float Operator and set it Every Frame

so float 1 is 0-100 (variable)
float 2 = 100
and set to 'divide' and every frame enabled
and set a result variable (should be beween 0 and 1)

[Shizane]

Thank you!! Finally got this working after many hours lol. The image mask fill amount is going backwards but at least it's working. I will figure out how to go in reverse.

Here's what I did in case others want to know how to do this and again thank you for your help I appreciate it. 

[djaydino]

Hi.
Try Multiply by -1

[Shizane]

Hey thanks! I actually just changed the way I had my mask setup.

Cheers.

[Shizane]

Hey Djaydino, Would you know how to tween the float as it moves? I have DoTween and I'm trying to tween the values as the fill circle mask moves so it's not so choppy. I'm using DoTween Animate Float but nothing I try seems to work. Screenshot attached.

Thanks!

[djaydino]

Hi.
Maybe you can use the build in tween float (i'm have not used doTween yet)

It has setting to start from current value

[Shizane]

Yeah I had tried the built-in Tween before DoTween and couldn't seem to get it to work. But maybe im missing something. Do you need to specify a time as a variable? Ive attached what I have and here's my variables:

storePercentage (stores the current value of the players progression)
circleFillAmount (gets the value of the fill mask)
snowCirclePosition (sets the value of the fill mask)

Also - should it be in Real Time and what should the update type be?

Thank you.

[djaydino]

Hi.
Time is the Tween duration
Real time is for when you use Scale Time (for example when you want to pause the game and set scale time to 0)
If real time is checked its not manipulated by Scale Time.

'From' is where the tween start (curve 0) on that you have different settings (current value/Offset/Value)
'To' is where the tween end (curve 1) on that you have different settings (current value/Offset/Value)

Update time in most cases you want to use fixed update.
To know more about update types its best to google unity update time.

Best is to play around with them so you understand howthey work (on a test scene for example)