SpriteKit - Draw Bezier Curve Gradually

Question

I'm working on an iOS educational where kids are drawing letters. The game mechanism is pretty simple and works OK. What I want to do is to show a drawing progress by turning the elapsed part into green thick line. See the image:

There are couple of solution I have in mind.

1. Mask over hidden path which transforms according to users touch position
2. Creating a new path on touchesMoved: by taking the original and adding a point to the user touch position, then stripping the rest

What would you choose or is there some better solution?

Note: I want to draw the green path precisely as the dashed one. By just drawing a path following the user movement would result in ugly line.

Thanks.

Answer 1

I would say your choice depends on whether the dashed line is also drawn (or drawable in all of its parts) with bezier curves.

If the dashed line is an image you show, probably solution 1 with an also drawn thick line and an adapted mask is easiest to do.

If the dashed line is already drawn as a bezier curve (or drawn by drawing several connected bezier curves), then solution 2 seems best to me. The tricky part would be to ensure you exactly follow the dashed line in this case (but I suppose you figured that already :-).