1. Code
  2. Coding Fundamentals
  3. Game Development

Tips and Tricks for Augmented Reality With Unity and Vuforia

Scroll to top
Read Time: 12 min
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: Image Targets

Hello, Augmented Reality traveller! In this post, I'll show you some cool features of Vuforia that make it possible to create engaging AR apps. We'll take a look at Cube and Cylinder Targets, Smart Terrain, VuMarks, and more. We won't dive deep into any of those subjects, but I'll try to cover enough to get you started.

If you aren't familiar with Vuforia's main concepts, check out some of my earlier posts. They'll get you started building your first app with Vuforia, right from scratch.

1. Setting Up Vuforia on Unity

This section is just a review for those who have used Vuforia in the past. If you're already familiar with the process of preparing a Unity project for Vuforia, feel free to skip this section. 

Before using any of Vuforia’s resources on Unity, you’ll have to get the framework set up. First of all, you’ll have to download and import the Vuforia package for Unity.

Then you’ll need to create a License Key for the project in Vuforia's License Manager. Once it's created, you’ll take the key and insert it on an ARCamera prefab, and that’s it. Now you can start playing around with Vuforia.

I cover this process in depth with my tutorial Create a Pokémon GO Style Augmented Reality Game With Vuforia.

2. Designing an ImageTarget

There are multiple ways to create Augmented Reality experiences on Vuforia, and almost all of them rely on some kind of Target that must be recognized by Vuforia's algorithm to start the augmentation process. You can design a target yourself and submit it to Vuforia's Target Manager, making it recognizable by the system. However, this design must conform to some guidelines, otherwise the target won't be tracked easily, or it might not even be recognized at all.

You especially need to know how to design an ImageTarget. That's because a lot of other kinds of Vuforia targets are composed of multiple ImageTargets arranged in some specific position and order with a MultiTarget.

There are three main rules that an ImageTarget must comply with:

  1. It must be rich in detail.
  2. It must have a good contrast, with bright and dark regions.
  3. No repetitive patterns can be present.
An example imageAn example imageAn example image

In the background, Vuforia creates an arrangement of the image using its features, and then the algorithm can find such patterns and track the targets. Roughly, a feature in an image is a sharpened angle, like a box corner or the tip of a star. The quantity of features in an image is directly connected to its 'trackability'.

The edges of an imageThe edges of an imageThe edges of an image

However, it's important to understand that even hundreds of features in an image won't help if those features are arranged in a pattern. The ImageTargets need some grade of randomness and chaos to be properly recognized.

Patterns on ImageTargesPatterns on ImageTargesPatterns on ImageTarges

If you keep those rules in mind, you'll be able to create excellent ImageTargets, but if you need to know a little more, read the documentation.

3. Using MultiTarget

Also known as Cuboid Target, the MultiTarget consists of a series of ImageTargets in a defined geometric arrangement. This arrangement allows Vuforia's algorithm to track the targets at the same time, creating a volumetric reference. MultiTarget can be very useful in marketing campaigns to promote consumer interaction with product packages and so on.

3.1 Designing a MultiTarget

Basically, a MultiTarget design must conform to the same rules as an ImageTarget, adding two other concerns: the Depth of the box and its Geometric consistency

The box's Depth should be at least half of its width. This is only a recommendation, and it will work if it's a little smaller than that, but it's interesting to keep that in mind.

Also, Vuforia's algorithm expects consistency on all parts of the MultiTarget. That means that all of the sides of the box are expected to be in place. If this isn't possible, it would be possible to keep the removable part blank when creating the target in Target Manager. A cereal box lid, for example, could be left blank, otherwise once the lid was open it could generate inconsistencies during the augmentation.

3.2 Creating a MultiTarget

The first step is to add or select a database in Vuforia’s Target Manager. Select the database and click on Add Target, selecting the Cuboid option and setting its Width, Height, Length, and Name.

Adding a Cuboid TargetAdding a Cuboid TargetAdding a Cuboid Target

After the MultiTarget has been created, select it and set its ImageTargets. As I mentioned, a MultiTarget is composed of a series of ImageTargets adjusted in a specific position. Each part of the cuboid must contain an image, and each image should comply with the cuboid’s proportion, defined when the target was created.

When the Cuboid is set, you’ll be ready to go. Just download the database and import it to Unity. To use it, drag a MultiTarget prefab to the stage, and select the downloaded database and Cuboid Target. To learn more about MultiTarget, take a look at the documentation.

4. Cylinder Targets

According to the Vuforia documentation, “CylinderTargets enable you to detect and track images rolled into cylindrical and conical shapes.” You can use this kind of interaction to create engagement with product packages, like soda cans or any other cylindrical product.

4.1 Designing a Cylinder Target

A CylinderTarget is also based on the ImageTarget, hence its design should conform to those rules. The top and bottom of the cylinder must be square images that will be marked by the Target Manager system. As with MultiTarget, you should consider the target's consistency, meaning that if a part of the object can be removed, it would be helpful to leave it blank on the manager.

4.2 Creating a Cylinder Target

This kind of target is created in two steps. The first one is to Add or Select a database in Vuforia’s Target Manager, add a new Target, selecting the Cylinder option, and set its Dimensions and Name.

Adding a Cylinder TargetAdding a Cylinder TargetAdding a Cylinder Target

Next, you’ll need to select the CylinderTarget you created and upload images to it. You can upload one image for the side, one for the bottom, and one for the top. Just click on the desired section and upload the image.

Adding a cylinder targetAdding a cylinder targetAdding a cylinder target

However, the image must respect the cylinder’s ratio. It’s possible that your first attempt won’t work. But fear not, the Vuforia system will give you the correct ratio, and you can adjust your image proportions accordingly. For example, for a cylinder with width of 1 and height of 2, the ratio is 1.571. On a target side, the image’s height is equal to the width divided by the ratio. Once the ratio is correct, your upload will succeed.

Cylinder ratio errorCylinder ratio errorCylinder ratio error

Once the CylinderTarget is defined, you can use it. You’ll only have to download and import the database to Unity, and then drag a Vuforia CylinderTarget prefab to your scene, and you’re ready to go.

5. Smart Terrain

The SmartTerrain is a feature exclusive to Unity that enables you to reconstruct and augment your physical environment. The feature reconstructs, recognizes, and tracks physical objects and surfaces. Those recognized objects can be used as terrain in Unity, opening up interesting possibilities for games and experiences.

The experience is started when some kind of Vuforia target is tracked. It could start when the device tracks an ImageTarget , a CylinderTarget, or any other type of target. 

Once started, the system will recognize objects distributed around the target and set the game stage considering those objects tracked. The terrain is then virtually projected over the scanned objects, and the experience begins.

Smart Terrain can recognize simple objects like boxes and cylinders, as long as they conform to Vuforia standards, putting those objects directly on the game stage and using them as part of the scene. 

Those kinds of objects are called Props by the SmartTerrain system, and their size can be as small as a soup can or as big as a large cereal box. Transparent objects such as glass are not supported.

SmartTerrain works in three phases:

  • Staging: the user distributes the target and the props.
  • Scanning: the stage and props used in the setting are captured and reconstructed by the Smart Terrain tracker.
  • Tracking: the terrain is augmented in real time by the Unity scene you've developed.

The creation process of a SmartTerrain experience is straightforward, but it takes a lot of steps. Since the Vuforia team provides us with an excellent step-by-step guide to creating a Smart Terrain experience in Unity, we won't dive into the creation process here. 

If you want to give it a try, follow the guide, and you shouldn’t have any problems. However, keep in mind that the SmartTerrain has certain limitations, especially concerning hardware and system requirements. You can find out more about the system in its documentation.

6. VuMark

A VuMark is a kind of target that can be fully customized. It can reflect specific design choices or a brand personality. It’s also extremely recognizable by the Vuforia tracking system, and it can start AR experiences or encode data.

VuMark examplesVuMark examplesVuMark examples

Before you start to play around with VuMark, it's good to understand that the creation process isn’t the simplest. The Vuforia team has put together a pretty good guide and some helpful tools, but I would recommend this solution only for specific situations where the design of the marker is of utmost importance.

I won't go into all the VuMark requirements and design processes. Instead, I'll just give you a general idea of the process and, if you decide to design your own VuMarker, you’ll probably need to read Vuforia’s guides first.

6.1 VuMark Design

It's vital to understand some architecture and design rules for VuMark, otherwise the target won't work properly.

A VuMark is composed of five parts:

  1. Contour: The contour isn’t actually drawn on the VuMark; it's defined by the contrast between the border and the clear space. It's the part that the Vuforia’s algorithm first detects.

  2. Border: The most identifiable and defining shape of the VuMark. It's made of straight lines, with at least four angles located at the outermost edge of the design.

  3. Clear Space: A mandatory blank area that appears adjacent to the border. It guarantees there is enough contrast for the algorithm to detect the contour.

  4. Code / Elements: The visual representation of the target’s ID. This is composed of elements with high contrast, which represent two states, dark and light. The number of elements present is defined when creating the VuMark Template in Illustrator using the tools provided by Vuforia. (More on this in the next section.)

  5. Background / Design Area: This area is a blank canvas that will be ignored by the algorithm. You can design freely on this space.

VuMark partsVuMark partsVuMark parts

To find out more about the design requirements, read the VuMarkDesign Guide.

6.2 Creating a VuMark

A VuMark is created using Adobe Illustrator and the VuMark Design Tools that are available for download on Vuforia’s site. The tools are comprised of three Illustrator scripts, which come with some examples and a detailed PDF guide.

Before starting a VuMark, you should design its concept, considering all the guidelines proposed by Vuforia. Once the design is complete, you’ll start to break it down into parts, obeying VuMark’s architecture.

The first step is to create a new VuMark template, using the VuMark-Setup.jsx illustrated script. In the VuMark Template Setup window, you can choose the mark’s name, ID type, and length. The number of characters encoded in the mark will define how many elements it must contain.

VuMark Template Design WindowVuMark Template Design WindowVuMark Template Design Window

Once the template is created, you must copy your design concept and break it down using the layers created by the script. Each layer represents an architectural part and has its own rule. You’ll use the VuMark-Verify.jsx script to check if your design is correct. The script will give you advice on how to fix the design to conform to VuMark standards.

VuMark Verify WindowVuMark Verify WindowVuMark Verify Window

After breaking down your design and verifying that it conforms to VuMark standards, it's time to export the target. To export the design, you must run the VuMark-Export.jsx script. It will create a new file in Illustrator and move the contents from your VuMark template. It will then prompt you to save your VuMark template as an SVG file. 

Finally, your marker will be ready, and you can upload the target file to a new database in Vuforia’s Target Manager. Then you just need to download the database and use it like any other target.

7. Exploring Other Cool Features

It's been a long journey into the Vuforia system and the possibilities for Augmented Reality. As you can see, the Vuforia system has a lot of cool features. This was my fifth post on Vuforia, and yet I still couldn’t cover all its features. However, I’m confident that you have enough knowledge to explore those resources by yourself now.

Here are some pointers to other features that are worth exploring:

  • User Defined Targets: works like ImageTarget, but the user can define the targets on the go using the device’s camera.
  • Cloud Recognition: exclusive to enterprise accounts. It's a kind of target database that lives in the cloud, allowing you to upload and synchronize new ImageTargets with the app on the fly.
  • Object Recognition: This is an experimental feature that allows the recognition of an object, after it's been scanned using a special tool provided by Vuforia.

While you're here, check out some of our other posts on AR and mobile development!

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

Did you find this post useful?
Want a weekly email summary?
Subscribe below and we’ll send you a weekly email summary of all new Code tutorials. Never miss out on learning about the next big thing.
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.