How to trace paths with Phaser 3

Phaser 3
1

Hi All,

  • I came across this cool kids educational game : Drawing Letters
  • It allows us to draw letters and it reveals a different texture while you’re drawing the letter
  • it is also forcing the user to draw the letters in the exact path as shown in the video below. (if you cannot see the video, please reload the page while holding Shift)

  • The letter revealing effect can be done like this example

  • My question is how can I force the user to stick to the correct path while drawing the letter?

Thanks.

1 Like
2
  1. Get a tangent vector T at the current position on the curve.
  2. Get a vector P for the pointer drag movement
  3. Combine them somehow to get a new position on the curve. Maybe T scaled by dot product of T and P, I’m not sure.
3
4

You can do it a little like this:

3 Likes
5

@samme This is so cool. Thank you so much.

1 Like
6

Hi Samme. Can you point out what topic in math to understand this especially the tangent on the curve I can’t find which topic to look into.