Introduction: How to Augmented Reality Tutorial: Virtual Buttons

By Check me out on YouTube!
About: My name is Matthew and I attend the University of Pittsburgh. Currently I am a senior, going for a bachelors in Information Science with a minor in CS. Current interests include augmented reality, virtual real…

This tutorial is geared towards beginners so you won't need any prior experience with AR, Unity, or Vuforia. The video above goes through everything step by step. Overall, the video shows you how to implement virtual buttons with the augmented reality Vuforia SDK in Unity. This tutorial shows you how to create a zombie scene on top of a fiducial marker and then play a walking animation when your hand goes over the virtual button. Upon trying to figure out how to use these virtual buttons I quickly found that there is not much information online. I hope this video helps some people!

All you need to follow along is a computer with a webcam.

As far as software you will need Unity 3D: https://store.unity.com/?_ga=1.97655965.303547796....

and the Vuforia SDK: https://developer.vuforia.com/downloads/sdk

Thanks for watching!

Step 1: Start a New Unity Project.

Start a new Unity project and delete the main camera on the left (in the hierarchy).

Drag in the Vuforia SDK to your assets folder.

Navigate to the Vuforia folder, prefabs, and drag in the ARCamera prefab into the scene.

Create an account on Vuforia.com if you don't already have one.

Find an image you want to use as a target, could be anything as long as it is rich in detail.

Print out the image and then upload a copy to your Vuforia developer portal where it says target manager.

Download the image database from Vuforia for Unity.

Drag that image database into your asset folder in Unity.

Go back to Vuforia one last time and copy your license key.

Click on the ARCamera in your scene (in Unity) and off to the right you will see a place to paste your license key.

Step 2: Set Up Your Unity Scene.

Once your license key is in, go down to database load behavior script and check the box to load image targets and activate.

Go to the Vuforia folder again and drag in the ImageTarget prefab on top of the ARCamera so it becomes a child.

Now, click on the ImageTarget prefab off to the left and to the right you will see Image Target Behavior Script, choose ImageTarget under database and choose your image from the ImageTarget dropdown.

Right click the ImageTarget off to the left and create a 3d object, plane.

Resize the plane with the controls on the right so that the plane just covers your image.

Now, grab the grass texture from here and drag it into your assets folder. Now drag that same image onto your plane in the scene.

When you click play in the editor now, you should be able to see the grass over your image when you hold it in front of your camera.

Step 3: Create Your Virtual Button.

Find the VirtualButton prefab in the Vuforia prefabs folder and drag that on top of your image target in the scene to make it a child.

Rename your virtual button "actionButton" in off to the left.

Click on the virtual button and change its name (off to the right) "actionButton" as well under where it says Virtual Button Behavior.

In the scene view drag your button over a feature rich portion of your image. Try to make it approximately 10% of your total image size, by resizing it with the controls on the top left of the screen.

Now, click on the Image Target off to the left, and go to the inspector off to the right. Scroll to the bottom and click add component, new c sharp script.

This will open up Mono Develop.

Step 4: Add This Script!

Call this new script: virtualButtonScript.cs

Delete everything currently in the script and replace it all with this:

using UnityEngine;
using Vuforia;

public class virtualButtonScript : MonoBehaviour, IVirtualButtonEventHandler
{

	GameObject zombie;
	/// <summary>
	/// Called when the scene is loaded
	/// </summary>
	void Start() { 
	
		zombie = GameObject.Find ("zombie");
			
			GameObject virtualButtonObject = GameObject.Find ("actionButton");
			virtualButtonObject.GetComponent<VirtualButtonBehaviour> ().RegisterEventHandler (this);
			

	}

	/// <summary>
	/// Called when the virtual button has just been pressed:
	/// </summary>
	public void OnButtonPressed(VirtualButtonAbstractBehaviour vb) { 
	
		Debug.Log("button Pressed");
		zombie.GetComponent<Animation> ().Play ();
	
	}

	/// <summary>
	/// Called when the virtual button has just been released:
	/// </summary>
	public void OnButtonReleased(VirtualButtonAbstractBehaviour vb) { 
	
		zombie.GetComponent<Animation> ().Stop ();


	}
}

Hit control "s" to save.

Step 5: Almost There!

Now, all the button functionality should be there so we just need to add a physical button so you can see it when the reality is getting augmented (lol idk).

Right click the virtual button (actionButton) and create a new plane. Resize the plane so it just covers the transparent blue button.

If you want to change the color, right click in the assets folder and create a new material, change the color of that material and then drag it onto your new button.

If you want to add text to the button like I have done, right click the plane and add 3D text to it. You will have to resize the text and rotate it until it looks correct.

Step 6: Add Your Zombie.

Go to the asset store tab and search for "free zombie with animation."

Find the one pictured above and hit download and then import it into your scene.

In your new zombie folder go to model and click "z@walk."

From the inspector change animation type from generic to legacy.

Drag your zombie in the scene and resize it how you want it.

Change its name in the hierarchy on the left to "zombie."

Under its animation component off to the right uncheck "play automatically."

Step 7: Click Play and Prepare to Be Amazed.

Now simply click play and you should be able to put your hand over the portion of your physical image that you assigned a button to, and the zombie will play its walking animation.

This works much better on a smart phone so you can go to file, build settings, and switch them to either Android or IOS. This will take a minute or two. Now, go to File build settings again and click player settings. Change the bundle identifier to something like "com.yourName.YourAppName."

Plug in your phone and click build and run.

For android just follow the prompts it will have you download a few things if you don't already have them, if you have IOS you will need to download xCode and create a free developer account.

Any Questions don't hesitate to ask.

Check the video for more step by step instructions.

Thanks for looking!!!