Jump to content
Search Community

Best way to animate dynamic fishing meter?

leet-ice test
Moderator Tag

Recommended Posts

Wanting to animate a meter, similar to one in Fishing Clash, attached below at ~1:06..

 

Basically meter starts dropping to 0%, pressing a button has it go to 100% slowly.  If it goes to 0, fish gets away. If meter goes to 100%, your line breaks.

 

Seems like function-based values would help figure out new 'x' to go to onmousedown, but is that the best way to handle a dynamic 'x' to tween to? Calling invalidate seems to make it glitch/jumpy..   Would be nice if instead the dynamic function was called every single frame? But that's probably innefecient.  https://greensock.com/function-based/

 

 

Other thing would be is adding in randomization, like every few seconds, maybe the fish starts pulling harder, and meter is going faster to 0%? or it's swimming towards you and you don't need to reel in as fast?  

 

 

 

 

 

 

Link to comment
Share on other sites

49 minutes ago, leet-ice said:

Calling invalidate seems to make it glitch/jumpy

 do you have an example of this? this seems like an interesting challenge but it would be best to provide a minimal demo so that we can better understand what you are trying to do. This isn't typically the type of thing we just build up from scratch on request.

 

 

 

Also a question:

When you say "pressing a button has it go to 100% slowly" does that mean pressing and holding down or pressing multiple times in quick succession.

 

Trying to better understand the game mechanics and see what features of GSAP might help you best.

  • Like 1
Link to comment
Share on other sites

Here we are...

See the Pen poVqNYX by charnog (@charnog) on CodePen

 

To implement...

1 hour ago, leet-ice said:

Other thing would be is adding in randomization, like every few seconds, maybe the fish starts pulling harder, and meter is going faster to 0%? or it's swimming towards you and you don't need to reel in as fast?  

... you can use setTimeout() with random time values and adjust the .timeScale() of the timeline randomly.

  • Like 2
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...