Double Tap: Powerful AR Interactions

In a previous blog post, we discussed how to create rotate and scale functions in AR. Let’s say you now want the object to do something else, like animate, change colour or explode, you’d add a button right? Wrong! There’s still lots more UX design we can do here. In this post, I’m going to show how we can set up a double tap while using Unity’s event system to be able to allocate whatever we like to this function.

So just how much more UX is there?

In terms of touch screen gestures, there’s still a few more thing we can do. Powerworld.com have a great list of different types of touchscreen interaction which I have listed below:

• Tap
• Press
• Two-finger Tap
• Press-Tap
• Press-and-Hold
• One-finger Pan
• Two-finger Pan
• Pinch
• Rotate

So from the above list, we’ve already set up “Pinch” and “Rotate” functions. We’re now going to set up “two-finger-tap”, that still gives us 5 or 6 interactions we can use without the need for any buttons. Each one has their strengths and weaknesses with what you’re trying to achieve, for example, you wouldn’t use a tap to rotate something.

However, the key thing is that UX doesn’t stop at gestures! It’s how your user experiences the application, things like menus, placing the object and immersivity are all factors that play into this, but I won’t go into that rabbit hole today…

What’s the goal?

Before I explain how to set up a double tap, lets first decide what we want our double tap to do. In my case, I’d like to use the AR app to show a wall detail. In particular, this wall detail will be bunched up close together and it would be helpful to pull each element apart to see exactly how these layers go together. For those familiar with 3D modelling tools, this is often referred to as an ‘exploded view’. Not to be confused with the command ‘explode’ in CAD.

So using the app from the previous blog post, I’ve added in a very basic wall detail consisting of 4 layers. Each layer is a different game object under a parent object. By dropping this under the ‘main object’ tag that we used in the previous blog, we can see that we can place this object as well as rotate it and scale it using the gestures we made.

Double tap

Time to set up the double tap, create a new script in your assets folder called DoubleTap and open this up. As you can imagine, this isn’t the first time someone has needed to create a double tap function, so thanks to the worldwide web, we’re going to use code kindly provided in the unity answers forum (thanks!) We are however, going to make a slight adjustment to this code using Unity Events to be able to make this script super flexible for your needs.

using System;
using System.Collections;
using System.Collections.Generic;
using UnityEngine;
using UnityEngine.Events;

public class DoubleTap : MonoBehaviour
{

    int TapCount;
    public float MaxDoubleTapTime;
    float NewTime;
    public UnityEvent OnDoubleTap;

    void Start()
    {
        TapCount = 0;
    }

    void Update()
    {
        if (Input.touchCount == 1)
        {
            Touch touch = Input.GetTouch(0);

            if (touch.phase == TouchPhase.Ended)
            {
                TapCount += 1;
            }

            if (TapCount == 1)
            {
                NewTime = Time.time + MaxDoubleTapTime;
            }
            else if (TapCount == 2 && Time.time <= NewTime)
            {
                OnDoubleTap.Invoke();
                TapCount = 0;
            }

        }
        if (Time.time > NewTime)
        {
            TapCount = 0;
        }
    }
}

So what’s going on here? When we start the application, we are setting our tap count to 0 as to not confuse the program. During runtime, the program is looking for us to tap. Once tapped, it is then going to wait for a specific period of time (that we will set) before resetting. During that time, it is going to be looking for a second tap. Once it registers the second tap, an event is called, and the tap count is set back to 0. Also, the ‘TouchPhase.Ended’ means that it’s looking for us to take our finger off before tapping again. This is important because without this, our rotate and scale functions would be affected and would invoke a ‘double tap’ every time we went to do this.

So aside from the source code, we have added 3 lines.

1. At the top, we need to tell unity to use events

using UnityEngine.Events;

2. Under the class, we want to add a public Unity Event

public UnityEvent OnDoubleTap;

3. When tap count is 2, invoke the double tap event

else if (TapCount == 2 && Time.time <= NewTime)
    {
        OnDoubleTap.Invoke();
        TapCount = 0;
    }

Why use a Unity Event?

Unity events are great in that they provide a level of flexibility for your scripts. These events are custom triggered and its you as the creator to define what these events are triggered by. In our case, it’s a double tap. We can then drag and drop all sorts of objects from our assets/hierarchy into the event system which, by clicking on the drop down list, we can select what we want that to do.

Its not limited to one object either, you can add as many things to be triggered as you like and all will get triggered at the same time without having to write any extra code.

Conclusion

Lastly, I added an explode script, all this script does is find the layers of our spawned object and moves them apart using the transform function. It then moves them back to their original location once you double tap again.

So there you have it! More functionality without the price of screenspace. Have a play about with the script and see what things you can trigger with it? Make it spin on its spot? Change the colour of it? Hide it completely? All possible!