Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

iOS - Dragging objects along curved paths

I am tearing my hair out trying to figure out what seems to be a very easy problem. I know a lot of this stuff has been talked about tangentially, so apologies if this treads on well-covered ground, but I can't find anything specific to my solution (believe me, I've looked).

Basically I want to drag an object/sprite along a pre-defined, curved path (not just move it, but DRAG IT). Think of the iPhone's "Slide to unlock" thing, but instead of just dragging the slider left-to-right, make the path an arc or a wavy line.

My basic thinking was:

  • define a bezier path, set the object at the start point.
  • if the object is touched, check for hit detection on the bezier path in touchesMoved (or some similar function). if touches stay on the path, advance the sprite along the path until the path ends (in which case, task is finished) or the user's finger goes off the path (in which case, the object should go back to the beginning).

None of this is trivial (at least, that's how it seems). For example:

  • Doing hit detection on a Bezier path is a royal pain since you actually need to do it on the stroked portion, not the fill portion. And even then, I can't seem to find a way to do it on a path of any width -- only on the 1-point-wide path of the Bezier.
  • Moving an object partially along a path doesn't even seem possible: all of the animation methods move the sprite along the ENTIRE path. Also, doing this requires you to find the point on the path closest to the user's touch, which, if you've ever looked this up involves astoundingly complicated math.
  • I've thought of using rigid bodies to occupy all of the space EXCEPT the path, so the object can only move in the path. However, this requires the definition of curved rigid bodies some of which must be concave. Dead end.

Am I making this too hard? It doesn't seem that complicated. I don't need a whole solution, just a new way to think about this and kick in the right direction. Any help would be really appreciated.

like image 444
johnnysports Avatar asked May 24 '11 17:05

johnnysports


1 Answers

How about this?

  • Consider the X Axis of your bezier path.
  • Each time the user taps or interacts with the screen just look at the x portion of the touch
  • Map that X Coordinate with your path and move the object to the right position.
like image 148
arclight Avatar answered Sep 29 '22 22:09

arclight