Drag over path (slide)

0 favourites
  • 6 posts
From the Asset Store
3 different games for kids, easy to edit, mobile ready
  • I am trying to implement a specific type of control where the user can drag an object but that object will move only over a certain path.

    At first it would be great if at least I could implement it using only linear path (just simple line between two points). I want the drag operation to take X,Y of drag and apply the movement to the relevant path. Think of it as a slider.

    I tried to use timeline (with steps) taking advantage of X,Y position but it doesnt work for me (also it seems to be a non-pretty and clunky solution).

    Any ideas?

  • Try Construct 3

    Develop games in your browser. Powerful, performant & highly capable.

    Try Now Construct 3 users don't see these ads
  • If it's a simple horizontal or vertical line then you allow the drag while keeping the X or Y at the same value. So if you are dragging across horizontally, you would constantly set the Y to the Y of the bar or line while allowing it to be dragged across X.

  • I wasn't very clear on my description. I want to achieve this on diagonal lines. I can use the two point line-slope formula but the difficult part is if you have multiple points A -> B -> C and you want the sprite to follow the path created from these 3 parts. I cant even image how harder it must get when you want to implement this with bezier curvers.

  • This topic seems close to what you’re after. There are a few examples and ideas.


    A Bézier curve would be done by converting it to a bunch of lines.

  • I decided to give this a try, and it was a lot harder than I expected...

    particularly because I figured it should work with multiple lines, and with multi-touch.

    (even if you only have one line, you have to make sure additional touches don't break the action)

    you can have as many nodes making up a line as you want. all the nodes that are part of a line need the same Group name (and the Control sprite that slides along the line needs the same Group name). The nodes are connected in order of their instance number.

    I gave the nodes DragAndDrop behavior so you can change the line for testing purposes.

    if the line bends too much, the Control can get stuck (if you change the direction of the touch just before the Control gets to its target node). I added a bit of an error factor in there which helped a lot. It generally seems to work better with touch than it does with the mouse - it is easier to follow the line with your finger on it, than trace it with a mouse...

    with enough nodes, you could make some nice curves. it you don't want to change the lines at runtime then make the nodes invisible.


  • AllaR this is a very nice solution. I tried to implement with line slope equation (calculating the next point of x using y and vice versa according to start point and end point positions). The result was a mesh, as y or x get extreme values according to the slope of the line.

    You solution is much better. I will also put some "clamp" to put some boundaries of drag paths.

Jump to:
Active Users
There are 1 visitors browsing this topic (0 users and 1 guests)