How to Make an AR Game Using Vuforia

Augmented reality (AR) is suddenly the buzzword on everyone’s tongue. Thanks to Vuforia, developers can easily augment the physical world with digital content. Although the launch of ARKit and ARCore have helped raise the awareness of augmented reality, many other platforms and SDKs have been on the go for a while now. One of these […] By Ben MacKinnon.

Leave a rating/review
Download materials
Save for later
Share

Augmented reality (AR) is suddenly the buzzword on everyone’s tongue. Thanks to Vuforia, developers can easily augment the physical world with digital content.

Although the launch of ARKit and ARCore have helped raise the awareness of augmented reality, many other platforms and SDKs have been on the go for a while now. One of these is Vuforia; and recently, Unity partnered with Vuforia and integrated the AR platform into the Unity game engine.

In this tutorial, you’ll make an AR game using the Vuforia SDK that comes integrated with the Unity game engine. Along the way, you’ll learn the key components of:

  • Setting up an augmented camera feed
  • Image tracking — what it is and how it works
  • Attaching your digital content to a physical object
  • Creating custom interactions triggered by what the camera sees
  • What topping goes best on a pizza :]
Note: This Vuforia tutorial assumes you know the basics of Unity development. If you’re new to Unity development, check out this great Getting Started In Unity tutorial.

Developing AR Games in Unity

There are many AR headsets on the market, but the primary target of AR apps is within the mobile space, like iOS and Android. This is where a combination of Unity and Vuforia is convenient — cross-platform development. Another perk is that you can test your app in the editor. To do this, all you need is a webcam! :]

Before getting started, download the latest version of Unity and install the Vuforia Augmented Reality Support component. If you’re using the Unity Hub, you can add this component to an already installed version of Unity.

Getting Started

Now that you have Unity, Vuforia and a webcam, you need to download the sample project. You can do that by clicking one of the Download Materials buttons at the top or bottom of this tutorial.

Once downloaded, extract the files and open the How to Make an AR Game Using Vuforia Starter project in Unity. With the project loaded, open the Starter scene in the Scenes folder, and look at the Hierarchy window:

After a quick review of what’s there, hit the Play button in the editor and get ready to fulfill some orders in this pizza-related game.

Cool, that was some mean pizza play right there, but the real challenge is to turn this into an AR game.

Note: The UI assets for this tutorial were downloaded from shareicon.net.

Introducing the Sous Chef, Vuforia

To do this, you will make the virtual pizza appear on a tracker image that you can hold in the real world. Once you have added the toppings for the order, you will physically “serve” the pizza by moving it out of view of the camera :]

First things first, you need to swap the Main Camera for an AR Camera. Delete the Main Camera from the scene, then right click in the Hierarchy.

Next, add Vuforia -> AR Camera. When you do, you’ll get this pop-up:

Click Import and wait for the Vuforia Package to import into the project, which adds quite a few files.

You can ignore the new files in the Editor and Streaming Assets folders. Those files are just template files; the ones you need were included with the project.

The Vuforia folder holds all of the prefabs and scripts the Vuforia platform uses, which you’re about to use.

The last file worth mentioning is VuforiaConfiguration, located inside the Resources folder. This file is included because you need a license to develop a Vuforia application. However, if you’d like, you can obtain a free developer license using the Vuforia Developer Portal.

Note: If the App License Key is missing from your project, you can find the key in the README file. Copy the string into the inspector field of the VuforiaConfiguration file.

Now that you have the AR Camera in the scene, there’s just one more thing you need to do. Turn on Augmented Reality!

Go to Edit -> Project Settings -> Player. Scroll down to the bottom where the XR Settings are located, and verify the Vuforia Augmented Reality Supported checkbox is checked.

Push Play in the editor, and say hello to yourself!

Note: If you hit play and are faced with a “Vuforia Initialization Failed” screen, try restarting Unity. This is a random bug that only appears on certain systems.

Introduction to Image Recognition

I’m sure you look lovely, but what happened to the pizza game?

The default way Vuforia works is with Image Recognition. Image Recognition, also called Tracker Recognition or Image Tracking, is the process by which the camera detects a predetermined image and knows what to do with it, such as rendering some content on top of it. This works best when the tracking image matches the content in some way, for example, floor-plans to render a building might work well on top of a picture of a building.

How it works: It’s critical to select a good tracking image. When using Vuforia, you can upload your chosen image to the developer portal to see how well it’ll track, which is something you should do before you start development. The developer portal gives your image a rating, but more importantly, it’ll show you the “feature points”. For a good tracker, these feature points should be densely spread around the image with no repeating patterns. At runtime, the camera looks for these feature points to help calculate where to position itself in relation to the image.

For this tutorial, an image and a tracking database have already been set up. The pizza image file is in the Materials folder you downloaded earlier. Ideally, you should print this out. Alternatively, you can put it on some digital device that you can then “show” to the camera. Here’s what the image looks like in the Vuforia Tracker Database:

As you can see, there is a good distribution of feature points. Also, it’s a pizza! That’s handy. :]

Adding Image Targets to the Scene

It’s time to make some magic! You’re going to make the virtual pizza appear on top of the image of this pizza. Using the Create menu in the Hierarchy again, choose Vuforia -> Image.

Now you’ll have an Image Target GameObject in the scene. Look at this target in the inspector and you’ll see a number of components. The key ones are Image Target Behavior and Default Trackable Event Handler. You’ll dive into the second one later, but for now, make sure the drop-down options of Image Target Behavior are set up as below:

Remember the files that were added to the project earlier that I said you could ignore? You’ve found them! Vuforia adds a bunch of sample Image Target databases for you to begin developing and using their samples with — such as the one that you’ll be using, already included in the materials.

Note: The Pizza tracker is the only image target in your database; however, you can have hundreds of images in a single database. Plus, you can have multiple databases in a single app.

Now that you have an AR Camera and an Image Tracker set up in the scene, you have everything you need to make augmented reality work! Press the Play button in the editor and hold your printed image up to the camera.

Somewhere, there’s a pizza!

Somewhere, there’s a pizza!