Catching Swipes – a touch screen tutorial

One of the hurdles of dealing with touch screens is to handle finger tracking and boiling it down to a clean cut movement so that one can process gesture recognition.

Let’s look how to make a component that:

  1. only gets swipes in a specific screen area
  2. can detect multiple touches and store their individual details
  3. measures movement since last frame

Touch interface input – variables needed

For this we’ll need a couple of things in our data:

    public GameObject toCheck;
    Dictionary<int, Vector2> lastTouchPositionByFinger = new Dictionary<int, Vector2>();
    Vector2 lastClickPositionByMouse;
    Vector2 currentMousePos;
    [SerializeField]
    Vector2 netSwipe;
    public Vector2 NetSwipe
    {
        get { return netSwipe; }
    }

First of all we get a GameObject we’ll use to define the area in which the swipes shall be catched, it must be a UI element that can be Raycasted.
The next item will be a dictionary in which to store the current position of every single tracked finger. Also, since on Windows 10 computer touch screens are treated as mouse input we’ll need an extra place for mouse input position. And at last, of course, we have a property which will contain our movement since last frame inside the area.

Notice: there are up to 10 fingers and just one net movement. What we will do will be to have the total movement of the frame in this netSwipe variable, if you need to track the fingers independently, you will need to change this approach.

How to check if touch is over a UI element

So, how do we implement our first requisite? We just ask the event system if a finger is over the image (which of course can be made invisible by setting a 0 in its alpha channel).

    private static List<RaycastResult> tempRaycastResults = new List<RaycastResult>();

    public bool PointIsOverUI(Vector2 position)
    {

        var eventDataCurrentPosition = new PointerEventData(EventSystem.current);

        eventDataCurrentPosition.position = position;

        tempRaycastResults.Clear();

        EventSystem.current.RaycastAll(eventDataCurrentPosition, tempRaycastResults);
        foreach (var item in tempRaycastResults)
        {
            if (item.gameObject.GetInstanceID() == toCheck.GetInstanceID() && item.index == 0)
                return true;
        }
        return false;
    }

We’ll need an extra list for this function, to store all the results of the Raycast. At first we poll the EventSystem for a RaycastAll , then we go through every hit object and only if the object we hit is the one we’re looking to hit and only if there is no other object over it we give true as an answer. Otherwise we’re not hitting the right item and the touch should not be contributing to net swipe.

How to process a touch input in Unity3d

Now we can check if the touch should be counted or not, but that’s not enough. We also need to check for the touch phase in which we are and put tracking in place, let’s start with the Update function’s structure:

 void Update()
    {
        if (Input.touchCount > 0)
        {
            for (int i = 0; i < Input.touchCount; i++)
            {
                var touch = Input.GetTouch(i);
                switch (touch.phase)
                {
                    case TouchPhase.Began:
                        //stuff
                        break;
                    case TouchPhase.Moved:
                        //moar stuff
                        break;
                    case TouchPhase.Ended:
                        //stuff again
                        break;
                    case TouchPhase.Canceled:
                        //last stuff
                        break;
                    default:
                        break;
                }
            }
        }

    }

The first thing to check, of course, is if there are any touches at all. If there aren’t, then we don’t want to waste any resources. Then we cycle through each touch and do stuff appropriately.

Let’s get to the details. Before even starting our check we want to ensure that if no touches are active our netSwipe is reset to zero, so:

void Update()
    {
        netSwipe = Vector2.zero;
        if (Input.touchCount > 0)
        {

Getting to the actual stuff, when the touch begins and ends or gets cancelled we just want to add or remove it from our tracking accordingly, so we have:

                   case TouchPhase.Began:
                         lastTouchPositionByFinger.Add(touch.fingerId, touch.position);
                        break;

and:

                    case TouchPhase.Ended:
                        lastTouchPositionByFinger.Remove(touch.fingerId);
                        break;
                    case TouchPhase.Canceled:
                        lastTouchPositionByFinger.Remove(touch.fingerId);
                        break;

When the finger is moving, instead, is where the fun part happens:

                    case TouchPhase.Moved:
                        if (PointIsOverUI(touch.position))
                        {
                            netSwipe += touch.position - lastTouchPositionByFinger[touch.fingerId];
                            lastTouchPositionByFinger[touch.fingerId] = touch.position;
                        }
                        break;

First we check if the finger is over the area of interest, then we add its movement since last frame to our  netSwipe variable and update the finger’s position in our dictionary and that’s it! You now have also the tracking and net movement over the image.

Dealing with Windows 10

        if (Input.GetMouseButton(0))
        {
            currentMousePos = Input.mousePosition;
            if (PointIsOverUI(currentMousePos))
                netSwipe += (currentMousePos - lastClickPositionByMouse);

            lastClickPositionByMouse = currentMousePos;
        }

As I said before, on Windows 10 laptops touchscreens touches are read as mouse input. In that case we’re going to make an exception ad use a special treatment. The logic is still the same, but without the tracking of a finger touch. Simply put, if the button is down, then we check if it’s over the UI element we’re tracking and if so we use current position versus last frame’s one to contribute to netswipe.

That’s all folks!

Now go out there and do something awesome with that. I’ll post soon enough a tutorial that makes use of this component to control a gallery of sliding images. Join my newsletter to never miss my stuff and hit me up on Twitter for any remarks!

And of course here’s the script in a copypaste-friendly format:

using System.Collections.Generic;
using UnityEngine;
using UnityEngine.EventSystems;

public class CatchSwipe : MonoBehaviour
{

    public GameObject toCheck;
    Dictionary<int, Vector2> lastTouchPositionByFinger = new Dictionary<int, Vector2>();
    Vector2 lastClickPositionByMouse;
    Vector2 currentMousePos;
    [SerializeField]
    Vector2 netSwipe;
    public Vector2 NetSwipe
    {
        get { return netSwipe; }
    }

    void Update()
    {
        netSwipe = Vector2.zero;
        if (Input.GetMouseButton(0))
        {
            currentMousePos = Input.mousePosition;
            if (PointIsOverUI(currentMousePos))
                netSwipe += (currentMousePos - lastClickPositionByMouse);

            lastClickPositionByMouse = currentMousePos;
        }
        if (Input.touchCount > 0)
        {
            for (int i = 0; i < Input.touchCount; i++)
            {
                var touch = Input.GetTouch(i);
                switch (touch.phase)
                {
                    case TouchPhase.Began:
                        lastTouchPositionByFinger.Add(touch.fingerId, touch.position);
                        break;
                    case TouchPhase.Moved:
                        if (PointIsOverUI(touch.position))
                        {
                            netSwipe += touch.position - lastTouchPositionByFinger[touch.fingerId];
                            lastTouchPositionByFinger[touch.fingerId] = touch.position;
                        }
                        break;
                    case TouchPhase.Ended:
                        lastTouchPositionByFinger.Remove(touch.fingerId);
                        break;
                    case TouchPhase.Canceled:
                        lastTouchPositionByFinger.Remove(touch.fingerId);
                        break;
                    default:
                        break;
                }
            }
        }
    }


    private static List<RaycastResult> tempRaycastResults = new List<RaycastResult>();
    public bool PointIsOverUI(Vector2 position)
    {

        var eventDataCurrentPosition = new PointerEventData(EventSystem.current);

        eventDataCurrentPosition.position = position;

        tempRaycastResults.Clear();

        EventSystem.current.RaycastAll(eventDataCurrentPosition, tempRaycastResults);
        foreach (var item in tempRaycastResults)
        {
            if (item.gameObject.GetInstanceID() == toCheck.GetInstanceID() && item.index == 0)
                return true;
        }
        return false;
    }
}

 

  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  

Unity3d WebGL input mapping for Xbox controller

So, this weekend ludum dare 35 happened and I made my entry using xbox 360 controller as my intended imput source. Only one problem there: no existing input guide spoke of how to map buttons on the Xbox controller for unity3d webGL. And that was my target platform.

So, long story short, here’s what I wasted precious jam time looking for:

xbox controller unity3d webgl input map

xbox_360_controller-button-map

For xbox controller usually you would have the triggers on the back as a 3rd or 5th axis, instead on webGL they are mapped only as standard buttons.

As for the axis: left stick is X and Y axis (as usual), right stick is 3rd and 4th axis.

You can set them like this:

xbox controller unity axis input
xbox controller unity axis input

By the way, there’s a simple way to test these mappings on your own!
You can just use this script:

public class testbuttons : MonoBehaviour
{
    [SerializeField]
    Text t;
    // Update is called once per frame
    void Update()
    {
        t.text = "";
        for (int i = 0; i < 20; i++)
        {
            t.text += "Button " + i + "=" + Input.GetKey("joystick button " + i) + "| ";
        }
    }
}

Make an empty scene, add a UI>Text element and stick this script on it. Then run it and read what turns to true when any button is pressed on your controller.

As easy as pie… unless you are in a game jam frenzy, with severe sleep deprivation and panicking like I was… Want more tutorials like this? Join my newsletter! Want to tell me anything? Hit me up on twitter.

  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  

Validating email in C#

Input sanitation is a must when dealing with web services, but it’s also smart to avoid to waste precious seconds in registration procedures due to a wrong email address. That’s true in web development, that’s true in mobile apps, that’s just true on any digital platform.
So it’s best to validate email in unity3d too before any web service is called.

The variables

First we get the references via unity editor to catch both theInputFieldandButton.

    [SerializeField]
    InputField mail;
    [SerializeField]
    Button sendButton;

Then we create aRegexusing the mail validation pattern from .Net framework (be aware, it’s not perfect, but it’s good enough).

    System.Text.RegularExpressions.Regex mailValidator = new System.Text.RegularExpressions.Regex(@"^((([a-z]|\d|[!#\$%&'\*\+\-\/=\?\^_`{\|}~]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])+(\.([a-z]|\d|[!#\$%&'\*\+\-\/=\?\^_`{\|}~]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])+)*)|((\x22)((((\x20|\x09)*(\x0d\x0a))?(\x20|\x09)+)?(([\x01-\x08\x0b\x0c\x0e-\x1f\x7f]|\x21|[\x23-\x5b]|[\x5d-\x7e]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(\\([\x01-\x09\x0b\x0c\x0d-\x7f]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]))))*(((\x20|\x09)*(\x0d\x0a))?(\x20|\x09)+)?(\x22)))@((([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))\.)+(([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))\.?$");

TheRegexclass will provide us with a pattern-matching function that we can easily use to check if the pattern on which is built does or not match any input. The pattern will follow the regex syntax. Which by the way I found out not to be a regular expression language any more due to backreferences.

Validate email

Then, on eachUpdatewe first reset the button’s state, then we make it notinteractableagain only if any of the validation criteria is false. So only if the mail validation check DOES NOT recognize our string as a mail address it should make it notinteractable, but in the converse case it shouldn’t make itinteractablesince another validation criteria may fail independently.

    void Update()
    {
        sendButton.interactable = true;

        //other sanitation for other stuff

        if (!mailValidator.IsMatch(mail.text))
                sendButton.interactable = false;
    }

That’s all folks!

Really? really.
It’s not more than just 15 lines of code but it’s a big deal in reducing friction during your registration process for any service or game. If you like this kind of tutorial or just want to hear from me in the future, join my newsletter.

And here’s everything ready for copy-paste :

    [SerializeField]
    InputField mail;
    [SerializeField]
    Button sendButton;
    System.Text.RegularExpressions.Regex mailValidator= new System.Text.RegularExpressions.Regex(@"^((([a-z]|\d|[!#\$%&'\*\+\-\/=\?\^_`{\|}~]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])+(\.([a-z]|\d|[!#\$%&'\*\+\-\/=\?\^_`{\|}~]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])+)*)|((\x22)((((\x20|\x09)*(\x0d\x0a))?(\x20|\x09)+)?(([\x01-\x08\x0b\x0c\x0e-\x1f\x7f]|\x21|[\x23-\x5b]|[\x5d-\x7e]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(\\([\x01-\x09\x0b\x0c\x0d-\x7f]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]))))*(((\x20|\x09)*(\x0d\x0a))?(\x20|\x09)+)?(\x22)))@((([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))\.)+(([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))\.?$");
    void Update()
    {
        sendButton.interactable = true;

        //other sanitation for other stuff

        if (!mailValidator.IsMatch(mail.text))
                sendButton.interactable = false;
    }
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  

Webservices in unity3d: Post, JSON and wait

Working with webservices in mobile apps is quite a common task,  but what if you are developing in Unity3d and need to send a Post request with JSON data? Well, there’s a quick and painless way of dealing with it, in less than 40 lines of code, complete of “wait…” screen management, from call to loggable answer.

First of all we’ll need a little coroutine and a JSON script you can get here.

The coroutine

It’s actually a very small one:

    IEnumerator afterConditionExecutor<T>(System.Action<T> del, T param, bool cond)
    {
        while (!cond)
        { yield return new WaitForEndOfFrame(); }
        del(param);
    }

This will just wait for our condition to be true, then execute the delegatedelgiving it the parameter it needs. We could just put here our wait screen control code, but you may want to customize it so we’ll handle that later (plus, this coroutine is so generally useful, you may want to put it in a library).

Sending the Post request

Let’s get to the meat of the issue, where the POST request is sent along with all our JSON data:

    public void sendMessage(JSONObject data, string url, bool addCookie, MonoBehaviour reqSource, System.Action<WWW> callBack)
    {
        Dictionary<string, string> headers = null;
        if (addCookie)
        {
            headers = new Dictionary<string, string>();
            headers.Add("Cookie", "SomeHeaderContent");
        }

        byte[] pData = Encoding.ASCII.GetBytes(data.ToString().ToCharArray());

        WWW www = new WWW(url,pData, headers);
        reqSource.StartCoroutine(afterConditionExecutor<T>(delegate (WWW mmm)
        {
            Debug.Log("sendMessage to: " + mmm.url + " returned: " + mmm.text);
            callBack(mmm);
        }, www, www.isDone);
    }

In the first part we prepare the request headers. Those are tipically the same across all webservice requests (eg.: login tokens) so it can be convenient to just generate them there and have a bool to control if they are added or not. Otherwise just add a parameter and pass it along from the source.

After that we encode ourJSONObjectin a byte array, so that is in the right format for theWWWobject constructor to pick up. When this constructor is called the webservice request will be sent as a POST http request, but we cannot just parse the reply right away because it won’t be ready. Even for whole seconds. Since it would be too long of a time to freeze our game/app, this call is conveniently Asynchronous. When is done,WWWclass will tell us by turning true thewww.isDoneflag (see reference docs here).

This is the reason why we start a coroutine on behalf of the message-sending class that will use our coroutine to wait until the proper moment and then call our callBack function.

Since there may be some standard error handling to do (eg: no internet connection) we do this inside a dedicated delegate that is passed as argument to the coroutine. Notice that theWWWargument of the delegate is named differently from the object we are just creating so that it links to the one being passed from the coroutine as an argument, this avoids a compilation error.

Let’s see a usage example:

    public void executeLogin(string username, string password)
    {
        JSONObject loginReqJS = new JSONObject();
        loginReqJS.AddField("username", username);
        loginReqJS.AddField("password", password);

        waitLayer.SetActive(true);
        sendMessage(loginReqJS, "http://your url/request/url", false, this, delegate (WWW www)
        {
            waitLayer.SetActive(false);
            Debug.Log("executeLogin to: " + www.url + " returned: " + www.text);
        });
    }

The first thing we do here is to prepare aJSONObjectwith the appropriate parameters for the situation, then we activate our “wait” UI element and finally call oursendMessagefunction.

Inside the delegate that will handle the server reply we also make our “wait” screen go away (non-standard error handling goes here, eg: wrong password), in this case we just log what’s been returned, but in real-life cases you’d transition from a login to your main menu.

This will produce the following http request:

POST /request/url HTTP/1.1
Cookie: "SomeHeaderContent"

{"username":"username","password":"password"}

And here you go. Hope you’ll find this tutorial useful. For more unity3d tutorials join my newsletter 😉

Here’s everything in a more copy-pastable format:

    IEnumerator afterConditionExecutor<T>(System.Action<T> del, T param, bool cond)
    {
        while (!cond)
        { yield return new WaitForEndOfFrame(); }
        del(param);
    }

    public void executeLogin(string username, string password)
    {
        JSONObject loginReqJS = new JSONObject();
        loginReqJS.AddField("username", username);
        loginReqJS.AddField("password", password);

        waitLayer.SetActive(true);
        sendMessage(loginReqJS, "http://your url/request/url", false, this, delegate (WWW www)
        {
            waitLayer.SetActive(false);
            Debug.Log("executeLogin to: " + www.url + " returned: " + www.text);
        });
    }

    public void sendMessage(JSONObject data, string url, bool addCookie, MonoBehaviour reqSource, System.Action<WWW> callBack)
    {
        Dictionary<string, string> headers = null;
        if (addCookie)
        {
            headers = new Dictionary<string, string>();
            headers.Add("Cookie", "SomeHeaderContent");
        }

        byte[] pData = Encoding.ASCII.GetBytes(data.ToString().ToCharArray());

        WWW www = new WWW(url, pData, headers);
        reqSource.StartCoroutine(afterConditionExecutor<T>(delegate (WWW mmm)
        {
            Debug.Log("sendMessage to: " + mmm.url + " returned: " + mmm.text);
            callBack(mmm);
        }, www, www.isDone);
    }

 

  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •