search

curiouslearning / FeedTheMonsterJS

Javascript and HTML canvas exploration
MIT License
0 stars 4 forks source link

Recreate "tapping" ripple animation #1019

Closed burrage closed 6 months ago

burrage commented 7 months ago

User Story As a UI/UX designer, I want to display a "tapping" ripple animation, So that it is clearer to the user that we want them to tap a certain area of the screen.

Open question-- is it easy to programmatically recreate this animation given the Unity circle asset below? Or will we need to figure out how to isolate that animation and export it and how will we need to export it (e.g. sequence of PNGs?)

FTM Unity tutorial reference video FTM Unity circle

Acceptance Criteria Given that I am playing the first question of the first level, When I want the user to tap the screen (either to have the stones appear OR when tapping and dragging the stone to the monster), Then I should see the tutorial hand move and the "tapping" ripple animation play from around the tutorial hand.

amitsinghsutara commented 7 months ago

Hey @burrage ,

Hope you are doing well ;) Regarding previous question of being able to programmatically creating the animation, we got good news as we can create this animation using html canvas without needing any other additional image assets!

Best Regards Amit

burrage commented 7 months ago

Awesome :-) I'm hoping it is a relatively straightforward and low effort process to do via the canvas (and hopefully will be kinda fun for someone to do! Like throwing a rock into a pond!) because the Unity export way... well... more unknowns for that path!