Drag an object from the start of a path to end

Questions & Answers
1

I am trying to figure out a way that I can drag an object from the start of a path to the end. For example, if I had a path in the shape of an “S”, the object would be at the bottom of the “S” and the user would have to drag the object along the “S” to get the object to the top. If the user’s finger or mouse leaves the path then the object will not move until the user touches it again and continues to follow only the path. It would be very similar to dragging a ball through a maze, except its not a maze its just a clear path. Very similar to something like this:

I just figured using an “imaginary” object would be the way to go trying to design a game like this, but if there’s a better way to trace a path with your finger like this game, im open to it also. Thanks!

2

First thing that came to my mind - using bezier curves. Each curve only consists of several “key points”, but they “snap” to each other perfectly, you can actually use Cubic bezier curves for smooth paths and Linear curves for paths like in Flaming Finger.

I explained how to make a chain of bezier curves here (it’s AS3 question, but ideas are all the same, you just connect your current ending point to the first point of the next curve (or line if you use linear bezier curve)

So you just calculate current chain index (or total percentage of the path to follow). If you will drag your object along these bezier curves, it will create a great smooth feeling, and it won’t “unsnap” of the path as at all times you just copy the coordinates provided by these bezier equations