1. Code
  2. Augmented Reality

Create a Pokémon GO Style Augmented Reality Game With Vuforia: Image Targets

Read Time:19 minsLanguages:
This post is part of a series called Create a Pokémon GO Style Augmented Reality Game With Vuforia.
Create a Pokémon GO Style Augmented Reality Game With Vuforia: Part 2
Tips and Tricks for Augmented Reality With Unity and Vuforia

In this tutorial we'll dive back into the Vuforia Augmented Reality (AR) library, exploring one of its most interesting resources—the Image Target. We'll expand on the Shoot the Cubes game that we created in earlier lessons, adding a new level where the player needs to defend their base from attacking cubes. 

This tutorial can be completed alone, although if you want an introduction to AR with Vuforia and Unity3D, check out the earlier posts in the series.

Image Targets

Any kind of image can be a Vuforia Image Target. However, the more detailed and intricate the image, the better it will be recognized by the algorithm. 

A lot of factors will be part of the recognizing calculation, but basically the image must have a reasonable level of contrast, resolution, and distinguishing elements. A blue sky photograph wouldn't work very well, but a picture of some grass would work gracefully. Image Targets can be shipped with the application, uploaded to the application through the cloud, or directly created in the app by the user.

Adding a Target

Let’s begin by adding an ImageTarget element to our Unity project. 

First, download the course assets from the button in the sidebar. Then, in your Unity project, create a new scene called DefendTheBase: in the Project window, select the Scenes folder and click on Create > Scene. Now open that scene and remove all the default scene objects from the hierarchy.

Next we'll add a light and camera. Click on Add > Light > Directional Light to add a directional light. Select this new light and set Soft Shadow as the Shadow Type option. 

After that, drag and drop an ARCamera object from Vuforia > Prefabs. Select the ARCamera object and in the inspector panel, set the App License Key created on the Vuforia developer page (see the first tutorial for instructions). Select DEVICE_TRACKING for the World Center Mod.

Finally, drag and drop an ImageTarget to the hierarchy from Vuforia > Prefabs.

Now we have to add a Vuforia Database. First, navigate to Click on Add Database and choose a name.

There are three types of Database to choose from:

  1. Device: The Database is saved on the device and all targets are updated locally.
  2. Cloud: Database on the Vuforia servers.
  3. VuMark: Database exclusive to VuMark targets. It is also saved on the device.

In this case, choose the Device option and click on create.

Select the new database so we can start adding targets to it. Now it is time to add targets to the database. For now, we’ll just use the Single Image option.

Navigate to the previously downloaded files, pick ImageTarget1, and set its Width to 1 and click on Add. (Note: If you prefer to create your own Image Target, read the guide first.)

Vuforia DatabaseVuforia DatabaseVuforia Database

Now you can download the database, selecting Unity Editor as the chosen platform. Open the file and select all elements to be imported. We must also prepare our Unity scene to recognize the ImageTarget with this database we have created.

In the Unity editor, click on the ImageTarget object. First, find and expand Image Target Behavior in the object inspector. Select a Type of Predefined. Choose the image target we created earlier for Database. Finally, make sure that the Enable Extended Tracking and Enable Smart Terrain options are both disabled.

Image Target settingsImage Target settingsImage Target settings

The ImageTarget prefab is made of a series of components, including some scripts like Image Target Behavior, Turn Off Behavior, and Default Tracker Event Handler. If you want to deeply understand how the system works, read those scripts and try to understand their relationship to other components. 

For this tutorial, we won't dig too deep, though. We’ll only need to concentrate on the Default Tracker Event Handler, which receives calls when the image target tracking status changes. So let’s use this script as a base to create our own script behavior.

Create a copy of this script that we can extend. First select Default Tracker Event Handler, click on options and select Edit Script. Now, make a copy of the script. If you’re using MonoDevelop, click File > Save As and save as ImageTargetBehavior, saving it in the Scripts folder.

The TargetBehaviorScript Script

We won’t need the Vuforia namespace in our script. Remove the line “namespace Vuforia” and the brackets. That means we'll need to explicitly reference the Vuforia namespace when we want to access its classes: 

The most important method in this class will be the OnTrackableStateChanged method that receives calls when the image target is found or lost by the camera device. According to the target status, it calls OnTrackingFound or OnTrackingLost, and we’ll need to edit those methods as well. But first, let’s think about how we want the image target to behave. 

In this game, the user will defend a base that appears on an image target. Let’s consider the following game mechanics:

  • Once the target is recognized by the system, the base appears and enemies start to spawn and fly toward the base in a kamikaze style.
  • Every time an enemy hits the base, the base will take some damage and the enemy will be destroyed.
  • To win the game the user must shoot and destroy all enemies before the base is destroyed.
  • If the image target is lost (is no longer visible from the device camera), the game will start a countdown timer. If the timer gets to zero, the game is lost. While the target is lost, all enemies will stop advancing toward the base.

So we’ll need to adapt those game mechanics on top of what we built in the last tutorial. We'll create the enemy spawning logic in the next section with an empty object named _SpawnController, using the same logic adopted in the first part of the game.

For now, let's look at the tracking found logic.

Back in the Unity editor, we can create the base object that will be spawned by the spawn controller. 

First, on the ImageTarget object, disable the Default Trackable Event Handler script.

Next, click on Add Component and select the Target Behavior Script. From the Hierarchy panel, right click on ImageTarget and create a new cube named "Base". This cube should be inserted inside the ImageTarget object.

Make sure that the Base has Box Collider and Mesh Renderer enabled. 

Optionally, you could also insert a Plane object inside the ImageTarget using the ImageTarget submitted earlier in Vuforia as a texture. This would create an interesting effect, projecting shadows from the target and creating a richer experience.

Hierarchy and Image Target final settingsHierarchy and Image Target final settingsHierarchy and Image Target final settings

Adapting the SpawnScript

Now we will adapt the _SpawnController used in the last tutorial. Save the current scene and open ShootTheCubesMain from the last tutorial. In the Hierarchy panel, select the _SpawnController and drag it to the Prefabs folder to make it a Unity Prefab.

Save this new scene and reopen DefendTheBase. Drag _SpawnController from the prefabs folder to the Hierarchy panel. With the _SpawnController selected, click on Add Tag on the Inspector panel. Name the new tag _SpawnController and apply it to the object. 

In the Project window, select the Cube element in the Prefab folder and set its Tag, back on its inspector, to 'Enemy'.

Set Cubes tag to EnemySet Cubes tag to EnemySet Cubes tag to Enemy

Finally, open the Scripts folder and open SpawnScript. We need to make this script adapt itself to the loaded scene.

Next, we need to create two public methods to receive calls from TargetBehaviorScript when the target is found or lost: 

  • BaseOn (Vector3 basePosition) will be called when the target is found by the camera and the Base object is shown. It will change the spawning position, start the process, and inform all cubes that were previously added to the stage that the base is visible.

  • The BaseOff() method will be used when the target is lost. It will stop the staging process and inform all cube elements that the base was lost. 

The SetPosition (System.Nullable<Vector3> pos) uses the target’s current position to modify the object x, y, and z axes, and it can also receive a null value when the scene loaded is ShootTheCubesMain.

InformBaseOnToCubes() and InformBaseOffToCubes() are responsible for informing all staged cubes of the current base status.

The SpawnLoop() and SpawnElement() methods are using almost the same logic as the last tutorial.

Creating the Enemies

Now we’ll need to create some enemies. We'll use the Cube object that we created in the last tutorial, making some modifications to its script.

In the Prefabs folder, add a Cube object to the hierarchy. Then select the object and edit the CubeBehaviorScript.

We’ll preserve almost the same logic in this script, but with the following differences:

  • The Cube will pursue the Base when the target is found by the camera.
  • When the Cube hits the Base, it will destroy itself and give some damage to the Base.
  • The script needs to know the name of the scene loaded and adapt itself accordingly. 

If the scene's name is DefendTheBase, it must find the Base object and start to move towards it.

The CubeSettings() also need to adapt according to the scene loaded. The Cube only orbits on the y-axis for the DefendTheBase scene.

We’ll add some new logic to the RotateCube() method. The cube objects will rotate around the base while the target is visible. When the target is not visible, they will continue to rotate around the Camera, using the same logic as in the last tutorial.

To move the object toward the base, we’ll need to check first if the base is present, and then apply the position steps to the object.

The DestroyCube() method is the same as before, but now we'll add a new method—the TargetHit(GameObject) method—that will be called when the base is hit. Note that the BaseHealthScript referenced in TargetHit() hasn't been created yet.

Finally, we’ll add the public methods to be called when the cube takes a hit, when it collides with the base, or when the base changes status.

Controlling the Base Health

The enemies are being staged and flying toward the base, but they don't cause any damage when they collide—neither to the base nor to the enemy. We need to create a script to respond to collisions and also to add a health bar to the screen, so the user knows how well they are doing.

Let’s begin adding the health bar. In the Hierarchy panel in the Unity editor, click on Create > UI > Slider. A new Canvas element will be added to the hierarchy. It contains UI elements, including the new Slider. Expand the Canvas and select the Slider.

Change the slider element name to UIHealth. In the Inspector panel, expand Rect Transform and set Width to 400 and Height to 40. Set Pos X to -220Pos Y to 30, and Pos Z to 0.

Now expand the slider script in the hierarchy. Unselect the Interactable option. For Target Graphic, click on the small ‘dot’ on the right side and select the Background image. 

  • Set the Min Value to 0 and Max Value to 100.
  • Select Whole Numbers.
  • Set Value to 100.
UIHealth SettingsUIHealth SettingsUIHealth Settings

Now, expand the Slider panel to expose its child elements: Background, Fill Area, and Handle Slide Area.

  • Delete Handle Slide Area.
  • Select Background and set its Color to a darker shade of green, like #12F568FF.
  • Expand Fill Area and select the Fill object and set its color to #7FEA89FF.

This is how the Game Window should look with the health bar.

Game window with health barGame window with health barGame window with health bar

The Base Health Script

The code is very simple; it just subtracts the damage made by the enemies from the total amount of the base’s health. Once the health gets to zero, the player loses the game. It will also add a rotation animation to the Base. Create a new C# script called MyBase.

Now we need to add and configure the script. 

Select the Base in the hierarchy, click on Add Component, and add an Audio Source. Now drag MyBase to the Base element and, in the Inspector panel, expand MyBase. Select a sound effect for the explosion and hit. I’ve used the explosion clip used in the last tutorial, but feel free to add your own. Finally, in the Health Slider, select the UISlider element.

Base settingsBase settingsBase settings

Defending the Base

Our new game experience is almost done. We only need to shoot some lasers to start defending our base. Let's create a script for the laser! 

First drag the _PlayerController from the Prefab folder to the hierarchy. Expand _PlayerController and select _LaserController. In the Inspector panel, find Laser Script and click on Edit.

The only thing that we need to change in this script is the position of the laser.

Trying Out the Game

That was a lot of work, but now it's time to play the game! Print out the target image and try to run your game on your phone or tablet. Have some fun with it and see if you can come up with some ways to improve the game! 

At this point, you have a good understanding of how the Vuforia system works and how to use it with Unity. I expect that you've enjoyed this journey as much as I have. See you soon!

To learn more about Augmented Reality with Vuforia and Unity, check out our video course here on Envato Tuts+!

Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.