How to make a gui button follow a path after a touch?

Question

I would like a button in my gui menu to follow a specific path if we selected it, I am wondering how I could do it: if we touch the button, then it can only move on the specific path, it is an arc such as this path :

Would you know how to achieve this? I am using Unity, but I think the theory should be the same for other software/language ?

Thanks for your help

__

EDIT:

here is the code for the bezier curve in unity : Where should I put the script?

using UnityEngine;
using System.Collections;

public class DrawBezierHandle extends Editor {

    public Transform startT;
    public Transform endT;

    function Start(){
        startT = GameObject.Find("start").GetComponent("Transform") as Transform;
        endT = GameObject.Find("end").GetComponent("Transform") as Transform;
    }

    function OnSceneGUI() {

        var width : float = HandleUtility.GetHandleSize(Vector3.zero) * 0.1;
        Handles.DrawBezier(startT.position, 
                        endT.position, 
                        startT.position * 5 * Vector.up, 
                        endT.position * 5 * Vector.up,
                        Color.red, 
                        null,
                        width);
    }
}

Answer 1

Well, first of all you need a way to descrive such path.

I would use some spline curves like Bezier curves or Hermite Splines to describe the path, and let the button follow that path once pressed. Unfortunately these curves are not available as is, you need to implement them. If you are interested here you can find 2 nice Herman Tulleken's articles(fundamentals and some algorithms), that contains a basic bezier spline implementation for Unity3D too:

If you want to go another way you can define some points the button should pass through and interpolate position (and eventually orientation) of the object while updating its position. You can interpolate Vector3 position using Lerp or Slerp methods.

---

EDIT

If you attach your script you should be able to see the Bezier curve drawn. (Pay attention that your control and tangent points are coincident, so it will be always a straight line). Unity just let you draw such parametric curves, you have to evaluate it on your own.

The article I linked to you gives you the code. For example:

Vector3 CalculateBezierPoint(float t,
  Vector3 p0, Vector3 p1, Vector3 p2, Vector3 p3)
{
  float u = 1 – t;
  float tt = t*t;
  float uu = u*u;
  float uuu = uu * u;
  float ttt = tt * t;

  Vector3 p = uuu * p0; //first term
  p += 3 * uu * t * p1; //second term
  p += 3 * u * tt * p2; //third term
  p += ttt * p3; //fourth term

  return p;
}

You can move a GameObject along the curve you can varying t parameter inside your Update function. For example:

float time = 0f;
void Update()
{

   if (time < 1f)
   {
     time += Time.deltaTime;

     transform .position = CalculateBezierPoint(time,startP, startT, endT, endP );

   }
}

how could I clamp the coordinates so that the button only slide on the curve, exactly where the touch is (without any delay)? I thought about creating a list of 50 Vector2, and compare the x/y with the touch pos, but it might be too heavy... Would you have any idea about that?

Well, the curve parameter domain is [0,1]. You could for example start recording a gesture when a touch is detected near the start control point. Supposing you gesture length is [0,N], what you can to is to map the gesture interval domain to the curve one.

Answer 2

Just for what concern GUI you can use UIToolkit. It's free and opensource and already have the methods that you need for doing simple gui movement (you can call the delegate with the Action onTouchUpInside). There are also a demo scene that reproduce what you want to do, and with this library you can make all your GUI's element with a single draw call (pretty useful if you play to make a game runnable also in mobile).

I know that there are also excellent substitutes of UIToolkit (search in Assets Store for more info), but i've experience just with that for now :)