Use TouchScript with UI

Dears,

I’m the plugin touchscript and I have a problem that when I use it with UI (image or panel to move), It doesn’t work!

Thank you in advance for any help and proposition :slight_smile:

Well! I did some tests and it seems that UI is not detected by touch, even with an collider.

So instead of applying some gesture component to the object, you will need to check whether the touch position is within the image bounding box.

I created a script that increases the size of image when the touch is dragged inside, and turns back to normal when the touch ends or is dragged out.

Attach this script to UI>Image

using UnityEngine;
using System.Collections;
using TouchScript;
using UnityEngine.UI;

public class UI_Image : MonoBehaviour
{
    private Image   getImage;
    private Rect    getBorder;
    private Vector2 originalSize;
    private Vector2 pressedSize;
    // Use this for initialization
    void Start()
    {
        getImage       = GetComponent<Image> (); // Get the Image component

        originalSize = new Vector2 (getImage.rectTransform.rect.width, getImage.rectTransform.rect.height);              // The size when is not pressed
        pressedSize  = new Vector2 (getImage.rectTransform.rect.width * 1.1f, getImage.rectTransform.rect.height *1.1f); // The size when is pressed

        // Get the border position of image
        getBorder.x       = getImage.rectTransform.position.x - (getImage.rectTransform.rect.width * getImage.rectTransform.pivot.x);
        getBorder.y       = getImage.rectTransform.position.y - (getImage.rectTransform.rect.height* getImage.rectTransform.pivot.y);
        getBorder.width   = getImage.rectTransform.rect.width;
        getBorder.height  = getImage.rectTransform.rect.height;

        // Create the toches events
        if (TouchManager.Instance != null)
        {
            TouchManager.Instance.TouchesBegan += HandleTouchesBegan; // When click
            TouchManager.Instance.TouchesMoved += HandleTouchesMoved; // When move the touch
            TouchManager.Instance.TouchesEnded += HandleTouchesEnded; // When end the touch
        }
    }



    void HandleTouchesBegan (object sender, TouchEventArgs e)
    {
        foreach (var point in e.Touches)
        {
            if( getBorder.Contains(point.Position)) //If the touch is inside of the image.
            {
                getImage.rectTransform.sizeDelta = pressedSize; // Increases the size
            }
        }
    }



    void HandleTouchesEnded (object sender, TouchEventArgs e)
    {
        getImage.rectTransform.sizeDelta = originalSize; // Back to normal size when the touch end
    }



    void HandleTouchesMoved (object sender, TouchEventArgs e)
    {
        foreach (var point in e.Touches)
        {
            if( getBorder.Contains(point.Position)) //If the touch is over.
            {
                getImage.rectTransform.sizeDelta = pressedSize;
            }
            else
                {
                    getImage.rectTransform.sizeDelta = originalSize;
                }
        }
    }
}

In other cases, if use a sprite or textMesh, you can use “GetHitTarget()” to know which object is touching, or if the touch was dragged out or was dragged inside.
Exemple:

void HandleTouchesMoved (object sender, TouchEventArgs e) //If are moving the touch on the screen.
    {
        foreach (var point in e.Touches)
        {
            if( TouchManager.Instance.GetHitTarget(point.Position) == this.transform) //If the touch is in this
            {
                isPressed = true;
            }
            else { isPressed = false;}
        }
    }

I created an UI Image and dropped your script into it, but I still couldn’t move the image using touch :confused:
Do I have to keep the pan gesture and transformer 2D of touchscript? and I have to create 2D layer camera?
Thank you.

Your script work now, it increases the size of image when the touch is dragged inside, and turns back to normal when the touch ends or is dragged out. But how about to move the Image from place to another?

No, as I explained, at least in my tests the TouchScript strangely can not detect touches on UI colliders, try contacting the developer of the plugin and ask him if this is possible because I have not figured out how to do this.

So these components “Pan Gesture” and “Tansformer2D” become irrelevant in this case because they need that returns a collider to operate.

The script I sent you, is another way to know if the touch is on over of the image by comparing the position of touch with the borders of the image, without using colliders.

If you want the image to move when is touching on over, you will need to do this by yourself, the “Transformer2D” component will not help you this time.

One way to do this is within the event “HandleTouchesMoved” make the image position to be the same as the touch position.

Example:

using UnityEngine;
using System.Collections;
using TouchScript;
using UnityEngine.UI;

public class UI_Button : MonoBehaviour
{
    private Image   getImage;
    private Rect    getBorder;
    private Vector2 originalSize;
    private Vector2 pressedSize;
    private bool    canDrag;
    // Use this for initialization
    void Start()
    {
        canDrag = false;
        getImage       = GetComponent<Image> (); // Get the Image component

        originalSize = new Vector2 (getImage.rectTransform.rect.width, getImage.rectTransform.rect.height);              // The size when is not pressed
        pressedSize  = new Vector2 (getImage.rectTransform.rect.width * 1.1f, getImage.rectTransform.rect.height *1.1f); // The size when is pressed

        // Get the border position of image
        GetBorder ();

        // Create the toches events
        if (TouchManager.Instance != null)
        {
            TouchManager.Instance.TouchesBegan += HandleTouchesBegan; // When click
            TouchManager.Instance.TouchesMoved += HandleTouchesMoved; // When move the touch
            TouchManager.Instance.TouchesEnded += HandleTouchesEnded; // When end the touch
        }
    }



    void HandleTouchesBegan (object sender, TouchEventArgs e)
    {
        // Get the border position of image
        GetBorder ();
        foreach (var point in e.Touches)
        {
            if( getBorder.Contains(point.Position)) //If the touch is inside of the image.
            {
                getImage.rectTransform.sizeDelta = pressedSize; // Increases the size
                canDrag = true;
            }
        }
    }



    void HandleTouchesEnded (object sender, TouchEventArgs e)
    {
        getImage.rectTransform.sizeDelta = originalSize; // Back to normal size when the touch end
        canDrag = false;
    }



    void HandleTouchesMoved (object sender, TouchEventArgs e)
    {
        foreach (var point in e.Touches)
        {
            if(canDrag)
            {
                // Get the border position of image
                //GetBorder ();
                Vector3 newPosition = new Vector3(point.Position.x, point.Position.y,0);
                transform.position = newPosition;
            }
        }
    }

    private void GetBorder()
    {
        getBorder.x       = getImage.rectTransform.position.x - (getImage.rectTransform.rect.width * getImage.rectTransform.pivot.x);
        getBorder.y       = getImage.rectTransform.position.y - (getImage.rectTransform.rect.height* getImage.rectTransform.pivot.y);
        getBorder.width   = getImage.rectTransform.rect.width;
        getBorder.height  = getImage.rectTransform.rect.height;
    }
}

Ps:
As I was writing I did not see his second comment! But answer is in the text above.