How to Make an AR Game Using Vuforia

Attaching Game Objects as Children to the Trackers

That pizza is a bit small, but it’s stuck to the tracker image. You may also notice that if you take the tracking image away, the pizza is left floating there.

What’s happening here is while your webcam can see the tracker image, Vuforia can update the position of the AR Camera in the scene. If you want to see this in action, set up your Unity Editor in a way that you can see both the Game and Scene views, and have the AR Camera selected when you hit play.

So, how do you get the pizza to behave while the camera is working? Select the ImageTarget in the Hierarchy. You can see that its scale is set to 10 in each axis. The Image Target Behaviour component controls this. In the advanced section, you can see the Width parameter set to 10. This was defined when the image was uploaded to the Vuforia Developer site.

Now, select the Pizza GameObject in the Hierarchy. Drag it onto the ImageTarget to make it a child. Its scale will have changed to (X: 0.1, Y: 0.1, Z: 0.1). Increase this back to (X: 1, Y: 1, Z: 1) and also nudge its Position up to 0.01 in the Y axis. This makes the Pizza fit nicely onto the ImageTarget.

Hit Play again, and you’ll see that the pizza fits nicely on top of the image, but it also disappears if you hide the image.

Exploring the DefaultTrackableEventHandler

This behavior comes from the DefaultTrackableEventHandler on the ImageTarget. Open the script and look it over.

The script is already well commented, but take note of a few things:

When the camera detects the tracking image, it isn’t just moving the AR Camera anymore; it also tells the Pizza GameObject to turn on all of its Renderer components, and when the image goes out of view of the camera, it tells it to turn them back off again. :]

Digest that information for a moment.

Digest that information for a moment.

Making Your own Tracking Actions

It’s time to do something with this information!

Remove the DefaultTrackableEventHandler component from the ImageTarget. Then, add the PizzaTrackableEventHandler which you’ll find in the Scripts folder. Next, open the PizzaTrackableEventHandler. This a clone of the DefaultTrackableEventHandler, but the code in OnTrackingFound and OnTrackingLost has been removed – it’s up to you to solve this!

The turning on and off of Renderer components makes sense in almost every AR application, so add that code back in. If you get stuck, you can copy it from DefaultTrackableEventHandler or find it in the spoiler block below.

[spoiler]

protected virtual void OnTrackingFound()
{
    var rendererComponents = GetComponentsInChildren<Renderer>(true);
        
    // Enable rendering:
    foreach (var component in rendererComponents)
    {
        component.enabled = true;
    }
}

protected virtual void OnTrackingLost()
{
    var rendererComponents = GetComponentsInChildren<Renderer>(true);
        
    // Enable rendering:
    foreach (var component in rendererComponents)
    {
        component.enabled = false;
    }
}

[/spoiler]

You’re ready to make this game an augmented reality game!

Look at the UI and locate the button the player needs to click to complete their pizza.

You can see there’s an Event being called when the player clicks the button, GameManager.CompleteOrder(). Instead of making the player tap a button, you can make them have to “hand” the pizza over (move the tracker out of view) to complete the order.

At the start of PizzaTrackableEventHandler, add a UnityEvent to call when the Image loses tracking.

using Vuforia;
using UnityEngine;
using UnityEngine.Events;

public class PizzaTrackableEventHandler : MonoBehaviour, ITrackableEventHandler
{
    public UnityEvent OnTrackingLostEvent;
...

And now, invoke this event in the OnTrackingLost method:

protected virtual void OnTrackingLost()
{
    var rendererComponents = GetComponentsInChildren<Renderer>(true);
    
    // Enable rendering:
    foreach (var component in rendererComponents)
    {
        component.enabled = false;
    }
    //Trigger our event
    OnTrackingLostEvent.Invoke();
}

This makes the PizzaTrackableEventHandler flexible because now you can set whatever actions you’d like to have happen when an image loses tracking. Save the PizzaTrackableEventHandler, go back into the Unity Editor and wait for it to compile. Once it has, set the GameManager.CompleteOrder() to be invoked when the pizza tracker image loses tracking. Finally, turn off or delete the CompleteOrderButton in the UI.

Save the scene, hit Play, and serve some pizza!

Where to Go From Here

Congratulations on finishing the tutorial!
You can download the sample project by clicking one of the Download Materials buttons at the top or bottom of this tutorial.

For more info on developing with Vuforia in Unity, you can check out the Vuforia Developer Library, or the Unity manual.

Don’t forget to set up a developer account for yourself in the Vuforia portal. Why not try uploading a few different image trackers to see how well each one tracks?

For an advanced topic, look into virtual buttons. There’s some sample material on the Vuforia website to get you started. See if you can you make virtual buttons to replace the UI in the pizza game.

What other augmented reality game ideas can you come up with? A card battle game where creatures jump out of their cards? How about a tower defense game where you’re controlling an attack helicopter through the phone? Whatever you think up, let us know in the comments below! :]