• ARI Leadership Team

Intro to Vuforia

Vuforia is used with Unity to create marker-based augmented reality experiences. With marker-based project, the program is looking for an image in the real world and will display to project relative to this image.


In this tutorial, we will use a marker of a maze and display on it a playable maze game. This maze is played by tilting the printed out image to guide the ball from the start to the end. The ball goes back to the start if it falls or reaches the end.


Recommended version of Unity: any stable 2019 version



Unity Setup

Launch Unity with a new 3D project. Go to Edit > player settings > XR Settings and select “Vuforia Augmented Reality Supported”. If you do not have Vuforia, this will take you to a download page. Once you have Vuforia, click the check mark for this setting.


Vuforia Setup

Go to https://developer.vuforia.com/ and create an account if you do not have one.

Next, got to Develop > Licence Manager and create license by pressing “Get Development Key”. You can use any name for your key.


Go to Target Manager and click Add Database. Choose a name and select “Device”. Now select your database and click Add Target. The width component determines the size of the object in Unity. It also effects tracking at different distances. For this project, use a width of 10. For your file, click and download the image below as a jpg and upload to Vuforia. The image below is a slightly edited version of the maze featured in the wikipedia page.


When you upload this image, Vuforia will give it a rating. The more stars an image has, the better it can be tracked. This image receives a rating of 4, which is good enough for the purposes of this project. Vuforia tracks images based on features that it identifies. You can see the features for this image by selecting your target and clicking"Show Features" at the bottom of the image. You should see something like this, where the yellow marks are features that Vuforia will track.



To learn more about creating ideal Image Targets and how Vuforia tracks images, check out this guide by Vuforia.


Download your database with the “Unity Editor” option selected in the download page. We will use this later. Also, print out this image so that you can run the project.




Starting with Vuforia in Unity

Remove your main camera through the hierarchy view. Right click and select Vuforia > AR Camera and Image. These will add an augmented reality supported camera and an ImageTarget to your scene. Click the AR Camera and under “Vuforia Behavior” click “Open Vuforia Engine Configuration”. Here, copy and paste your license key to the “App License Key” section.



Drag your previously downloaded database file into the Assets folder and import. From the ImageTarget settings, go to “Image Target Behavior” and select your database. Now, the target image should be visible in the scene.



Building your maze

Add blocks and shape them to fit the pattern of the maze. It doesn’t have to fit perfectly, but try to make them as flush as possible. It would also be recommended to create a new material to color the cubes for better contrast. I found it fastest create one cube in the correct shape, and use that as a template by copying and pasting to create the whole maze. It is also easier to place the first cube in the correct y-axis location and go into the top-down view to only change the X and Y locations and scales.



Once done, create an empty object and place all the maze cubes inside this object as its children. Next, make this empty object a child of the ImageTarget object. You should have something like this:



Test that you can see this by pressing the play button at the top and holding up your image.


Additionally, create a cylinder on top of one of the circles. Scale and move as needed. This will be the end of the maze. Create a material for the cylinder with the rendering mode set to transparent. Give it a color through the Albedo setting with the alpha channel in the middle. This will make the object look transparent. Make the sphere a child of the ImageTarget.



Repeat this for a second cylinder on top of the other circle, which will be your starting point. However, with your starting cylinder, remove the “cylinder collider” component.


Physics

Create a sphere and a material to color the sphere. Resize the sphere so that it can go through the entire maze. Make this a child of the ImageTarget. We want the ball to slide inside the maze. So go to Assets > Create > Physics Material.


Within your material, Dynamic Friction is for friction during motion and Static Friction is when the object is staying still. These values go from 0 to 1, with zero feeling like ice. You can adjust this to your preference, but I used 0.1 for both.



Add a RigidBody component to the sphere so that it has gravity. Under the “Sphere Collider” component, drag the Physics Material to the “material” slot. Add this Physics Material to all the cubes as well.



Since we do not need the maze template anymore, create a plane so that it covers the entire maze floor. Give this the same Physics Material property and make it a child of the Image Target. Feel free to add color! This is what your project should start to look like:



Coding

Within your sphere object, add a "New Script" component and name it. Below is the code for this script with a TO DO and descriptions. Past this code inside the class within the created script.



Within your sphere object, add the corresponding objects to the script component by dragging them from the hierarchy view.



Congrats, you are done! Now run your project and try it out!


Extra

Want to take your project further? Here are some ideas:

-Score system

-Display a victory message and/or sound

-Add multiple "false" spheres. You lose or points get reduced if you score these "false" spheres


Exporting

There are many tutorials available online that show how to export Unity projects to mobile devices. Here is a tutorial by Unity that teaches how to build for IOS and Android.

0 views

Questions? Contact us:

altrealityinitiative@gmail.com

  • LinkedIn
  • Instagram
  • ARI Logo
  • Facebook
  • YouTube