Our Unity Tutorial on Augmented Reality Game Development with Vuforia SDK

Unity AR Tutorial: Augmented Reality Game Development with Vuforia

 

Vuforia is an AR platform that provides amazing opportunities for augmented reality development. Here are some examples:

Vuforia also has a Unity SDK and in the second part of this tutorial  I’ll explain how to integrate and develop it. But let’s start with the Vuforia integration…

Obtaining a Vuforia license

add_license_keyThe first thing you have to do is  register on Vuforia page. After you complete the registration process, you can start developing with Vuforia SDK. You will then need a license for your project.

Head over to the Development tab, and click on the “Add license” button. A little form will show up. Fill in the form as shown on the side and click “Next”.

Then you have to confirm your license key by agreeing with terms and conditions and by clicking “Confirm”. Pretty simple so far, right?

Vuforia’s Unity SDK

It’s time to download the Vuforia SDK for Unity. You can download it in the Vuforia Downloads tab.

unity_sdk

After downloading the package, import it into the existing project inside of Unity.

Prepare the markers

Now it’s time to prepare the markers. Markers are the images that Vuforia will use as the points of reference to display your objects. The more distinct key points the image has, the more accurate or “augmentable” your markers will be. The easiest way to create such  marker is to generate a QR code. QR codes have a lot of key points and they work like a charm. You can generate them yourself or, to make it quicker, you can download mine 🙂

create-databaseOnce you’ve got the marker, it’s time to upload it to Vuforia. Go to the Vuforia Target Manager page and click on the “Add new database” button. Type the preferred name for your database and choose the “Device” as a Type option.

 

Great! Now, select the name of the database you’ve just created and then click on the “Add the new target” to the database.

add-target

Select the Single Image type, pick the marker you’ve downloaded before, set the width to 1, name it the way you want it and click “Add”.

There are other types of targets, for example Cuboid, Cylinder or a 3D object. These can work as 3D markers (you can make them if you feel like it), but preparing them would take a lot more time, because you’d have to create and upload every side of that cuboid to Vuforia and that’s a chore…

Alright, so now you can see your target has been added to the list and it’s ready to be downloaded. Click “Download Database” and import the package to Unity.

Preparing the scene

Setting up the scene is also very easy. Get rid of the existing camera on the scene. Vuforia has its own camera that your scene will use. Drag and drop ARCamera prefab from Vuforia > Prefabs folder into the scene. Your scene hierarchy should look like this:

unity-scene-image

Now, let’s setup the ARCamera properties. ARCamera prefab requires the license key which you can find on the Vuforia License Manager Page.

AR license key

Copy and paste your License key to Vuforia Behaviour Script field of the ARCamera prefab on the scene.

unity-scene-with-script-image

Select ARCamera in your hierarchy, and in the Database Load Behaviour tick the “Load [name] database” checkmark, then “Activate”.

database-load-behaviour

Setting up the markers

Alright, now it’s time to add the markers on the scene! You can do it by dragging ImageTarget prefab from Vuforia > Prefabs to your scene.

Your ImageTarget needs to be set to a specific marker image. It has a script called “Image Target Behaviour”, where you can do that by choosing your database name in the “Database” field and then select the “ImageTarget” from the drop down list. It should look like this:

image-target

Great, you’re almost done! Now it’s time to add some objects to the display. Right click on the ImageTarget in the hierarchy, 3DObject > Cube. Resize the cube the way you want it and the project is ready to be compiled! Alternatively, you can add any 3D object to the hierarchy of the ImageTarget.

As you can see, Vuforia SDK is very easy to setup and it has a lot of nice features you can utilize to make awesome games or apps. For example, you can combine a couple of those markers to make something a bit more complicated like this:

Procuring Graphical Assets

You will need some 3D models. I’d suggest that you download and import these amazing drone models by Popup Asylum.

Next, we’ll need a QR code as an additional marker. You can generate your own, but feel free to use mine if you’re lazy 🙂 Also don’t forget to upload it to the Vuforia Target Manager page and download the updated database after that.

For the testing purposes you’ll need these two markers printed, so I’ve also prepared a pdf for you to download.

A few more textures for you to import: drone_shadow, white_ring.

Scene setup

Drag and drop 2 ImageTarget prefabs from Vuforia > Prefabs to the scene. Name the first one as “DroneTarget” and the second one as “GoalTarget”. After that assign the corresponding “Image Target” to each one of them in the Image Target Behaviour Script. In the same script, change the width of the DroneTarget to 3 and GoalTarget to 2. It should look like this for the DroneTarget:

dronetarget

And like this for the GoalTarget:

goaltarget

Now in the ARCamera object in our hierarchy, head over to the Vuforia Behaviour Script and change the value of “Max Simultaneous Tracked Images / Objects” to 2. Then in the “World Center Mode” section select “SPECIFIC_TARGET” from the drop down list and in the section “World Center” choose the DroneTarget from the hierarchy. It should look like this:

ar-camera

Connecting Models to Markers

We’ve got the markers, let’s add the 3D models they will represent…

Right click on the DroneTarget and select “EmptyObject”. Make sure this new object has a position of [0;0.5;0] and scale of [0.33;0.33;0.33]. I’ve also changed the name of it to “Drone”. Then, add a 3D model of any drone as a child to this object and change the position of it to [0;0;0] and scale to [0.33;0.33;0.33]. Now the hierarchy looks like this:

drone-model-setup

So, let’s add a model for our GoalTarget. Add an empty object same way we did for the DroneTarget and change its name to “Ring”. Then add a Sprite Renderer to that object and in the “Sprite” section, choose our ring sprite. After that you can change its color to whatever you’d like. You also might want to resize it, change the position to make to fit the QR marker. It kind of looks like this for me:

all-model-setup

Nav Mesh setup

Alright, so we’ve got the scene, let’s now get to the main functionality… Pathfinding. So we need to bake a Nav Mesh. For more info, please, go to Unity navigation tutorial page.

Baking a Nav Mesh requires a presence of a regular mesh on the scene to walk on first. Right click on the hierarchy 3D Object > Plane. Rescale the plane so it covers an area around the markers where you potentially would like your drone to move. Now open up the navigation window (Window > Navigation) and in the Object tab make sure your plane is selected along with a “Navigation Static” checkbox. After that click “Bake”. Fantastic! If your scene looks somewhat like this, you’re on the right track!

navmesh-with-plane

So what do we do with that annoying white plane obstructing the view? Well, it’s time for us to get rid of it. Yeah, just delete it, we won’t need it anymore, since the Nav Mesh is already baked.

Once we’ve got our Nav Mesh, it’s time to setup a Nav Mesh Agent, an actor that would travel using the Nav Mesh. The Nav Mesh Agent functionality should obviously be applied to the drone, so select the first child in the “DroneTarget” hierarchy…

select-the-drone

… and add NavMesh Component to the inspector. You’ll see a whole bunch of parameters for this component. I’m not going to explain what each and every one of this parameters means since that’s not the point of the tutorial. (If you’re interested in the commentary over the parameters, please watch this video and here’s Unity docs). Here’s a screenshot of my Nav Mesh Agent parameters for the drone:

nav-mesh-agent

Coding time

The initial scene setup is ready and it’s time to write some code for it to work… Create a script in one of your folders and add it to the “Drone” object (DroneTarget first child).

The whole moving mechanic is pretty simple. We’d need two variables variables:

A function to track a position of the second marker and move the drone towards it:

That’s it. Just execute this function in the update and don’t forget to select the “Ring” (GoalObject child) object as a public variable in the inspector.

movement-script

You can now build the project onto your phone and check whether it works with the markers.

NOTE: The DroneMarker should always be in the camera view for the whole app to work since we’ve declared it as the world center and the whole drone logic is attached to it.

Drone leaning

You might also want your drone movement look more realistic, so let’s add movement leaning. The done will lean forward depending on its current speed.

MapRange function

There’s a great function I use pretty often called MapRange. It converts numbers within a range to numbers within another range depending on the current value.

A simple example of this function working is… let’s say we want to change the color of the ball depending on player’s distance from it. s would be our current distance from the ball. a1 – minimum observed distance, a2 – maximum observed distance. So we want the ball to be blue if the distance is more than 3 meters and red if player is 1 meter away or less. everything in between would be automatically purple -ish. So the implementation with MapRange would look like this:

playercolorball

Back to the drone leaning…

so in case of movement leaning, exploiting MapRange() would be this simple:

Add PitchCtrl() to the update function and you’re good. The drone will lean forward while moving.

Shadow

Let’s add a shadow to the drone. A simple static shadow. That’s a piece of cake since we just have to add a sprite to the existing hierarchy. Make sure your shadow object is the second child of “Drone”. Just like that:

first-shadow

Line renderer

In order to setup a line renderer we should add a sprite, but don’t worry, there’s no need to import one, just head over to your project window and open the folder where you store your sprites. Hit Right click > Create > Sprites > Square. You’ve got your new sprite which we’ll use for the new material that we’re about to create.

Right click > Create > Material. Material’s shader should be changed to Particles > VertexLit Blend and Particle Texture to the earlier created Square sprite. Sounds hectic, but just look at this picture and you’ll get it:

laser-material

Create a new script. Let’s say the name of this script is Goal. Attach the Goal script to our Ring object.

ring-line-renderer

Also attach line renderer component to the “Ring”. Line renderer would require a material, so please add the material we just created to it.

line-renderer

So, it’s time to write the code, which is also very simple. Here the whole Goal script code and it’s pretty much self-explanatory:

If you run the app now, you’ll see the ring’s line/laser pointing to the drone destination. It’s great but we can also make this destination look a little bit more clear by adding another object… Just a game object containing a Sprite Renderer and Animation components.

destination play

Create a public variable destSprite and update MoveToTarget() function.

That’s it, run your project on a smartphone and you’ll have the same result as in this video:

Thanks for reading and don’t forget to subscribe to our newsletter not to miss any of the new Unity development blog posts!

Hide or lock layer in Scene window

Have you ever found yourself in a situation that the object you’ve put into the scene can be selected too easily or is covering some other important scene objects? What can you do about it? Well, you can disable this object every time when you don’t want to see it. However, you can easily forget about enabling it when your work on the scene is finished. There’s a better way solution!

Have you noticed Layers button at the top-right corner of your Unity editor?

layers dropdown

Layers drop-down allows you to toggle layer visibility (1) and locked state (2).

When the layer is locked you can’t select objects with this layer assigned by clicking on them. Object still can be selected using the Hierarchy window.

When layer is invisible, all objects with this layer assigned will not be rendered in the Scene window. Invisible layers will still be visible in Game window and in the final product.

It’s just that simple. Well then… Why don’t you try it for yourself now? 🙂

Hold the Alt button to expand or collapse the Hierarchy

Did you know that by holding the Alt button while clicking on Hierarchy or Project window arrows you can completely expand or collapse its contents? It can be especially useful when there’s a lot of items that you’d like to collapse or expand.

The trick is to hold the Alt button when clicking on the expand arrow to completely expand all of its children (you will see all nested children after this operation). To do the opposite, you can hold the Alt button when collapsing an item. By default, collapsing and expanding will get the item back to the same status as it was before. Normally you would need to manually collapse the previously expanded children in case you don’t want to see these items. Collapsing while holding the Alt button will also collapse all the children.

Here’s a video explaining this functionality:

The same can be done in the Project window.

You can search your scene objects by component’s type

Did you know that besides searching your Hierarchy window by object name you can actually filter your scene objects by component names they have?

As you already know, there’s a small search input on top of Hierarchy window. It allows you to search for scene objects by name. When you start typing in the input, the object list will be filtered, and only the objects which names include the typed text will be displayed.

hierarchy search by name

What you might not know is that besides searching for object’s names, the search input is also searching for the object’s components. It works a bit differently though. You need to type the component name as a whole (not only a part of it) in order to get the list of objects that this component is attached to.

hierarchy search by type

Be careful. By default the Hierarchy is filtering game object by name and by type. Yet you can specify precisely what you’re looking for.

hierarchy search by type only

You can restore unsaved scene after Unity crash

Unity as any other software out there may crash from time to time. It’s not a big deal unless the last time you saved your scene file was somewhere near your lunch and now you are just about to end your workday. Do you know that feeling? Have you just lost many hours of hard work? Maybe not!

unity crash

Even if you didn’t know that, Unity is saving your scene every time when you hit the play button. No, it’s not saved over the original scene file, instead it is saved in the project’s Temp directory!

Now be careful! If you want to restore your scene file, you cannot re-launch Unity editor after the crash. If you do, you will lose the scene file and all the progress with it!

Restoring crashed scene

If you want to restore your crashed scene, you have to go to your project’s directory (this is the folder that contains the Assets directory) then enter the Temp directory. You will find the __EditModeScene file within. This is your saved scene file.

temp directory

 

Now all you have to do is to copy this file and replace your previous scene file with the copy. You will need to set the file extension to unity in order to make this file recognizable as Unity scene file.

scene file replace

Please remember to backup your project folder before making this kind of changes. If you make any mistake, you can easily go back and try again. Without the backup you have only one chance to do it right!