Introduction: How to Augmented Reality App for Beginners With Unity 3D, Vuforia, and User Defined Targets

Picture of How to Augmented Reality App for Beginners With Unity 3D, Vuforia, and User Defined Targets

This tutorial is designed for anyone beginning with mobile development and augmented reality. We will use the Unity 3D video game engine as well as the Vuforia augmented reality plugin to animate some Imperial Walkers so they can take a stroll around your living room. We will go through how to modify Vuforia's sample scene for user defined targets. Vuforia requires the use of a fiducial marker or image target in order to augment a 3D object. The image it requires lets your mobile device know where the augmentation is to occur, and is often used to create a ground plane so you can place objects on top of it. The app we are going to make with this tutorial will allow the user to take a picture of any image they want, and the augmentation will occur on top of that image. This is much less cumbersome than creating a predefined image that the user must print out in order to use the app. This tutorial does not require any previous experience with Unity or Vuforia so it should be very quick and easy to implement.

All code and game assets can be found here: http://wirebeings.com/star-wars-augmented-reality....

Subscribe to my YouTube channel for more videos like this:

https://www.youtube.com/channel/UClm2DY6pj3ygKoKhE...

Step 1: Download Everything!

Picture of Download Everything!

-Download Unity 3D: https://store.unity.com/products/unity-personal?_g...

-Download the Vuforia SDK for Unity: https://developer.vuforia.com/downloads/sdk

-Download the Imperial Walker 3D Model and the game assets folder from here: http://wirebeings.com/star-wars-augmented-reality....

-Download the Vuforia sample package for Unity here: https://developer.vuforia.com/downloads/samples

Now, open Unity and create a new project, you can call it whatever you want.

Go to File -> build settings, and switch the build platform to IOS or Android depending on what type of phone you have. If you don't already have the appropriate modules installed their will be a button next to each platform to install what you need.

Drag in the Vuforia SDK into your assets folder, and then do the same thing with the Vuforia sample package.

Unzip the game assets folder and drag in the Imperial Walker .obj file as well.

Step 2: Prepare the Scene.

Picture of Prepare the Scene.

First go to Vuforia create a new app in the developer portal. Copy your app license key to your clipboard.

Go back to Unity and go the the samples folder and find the scenes folder. Double click the user defined target scene to open it.

This scene should already work. If you click play in the editor and hold up a magazine or other image to your webcam you should be able to press the camera button with your mouse and a teapot should appear on top of it.

Click play again and lets make this teapot an Imperial Walker.

Under user defined target in the hierarchy you will see a teapot, delete that and drag in the Imperial Walker .obj file on top of where it says user defined target, this will make it a child.

Now we have to color the walker. Expand the at-at walker and go to the game assets folder. You should see a silver texture in there. Drag that silver texture onto every piece of the walker.

Step 3: Lets Make Our Walker Move.

Picture of Lets Make Our Walker Move.

Right click the walker and add a new component off to the right. Add a new c-sharp script and call it atScript.cs

Paste in this code:

using UnityEngine;
using System.Collections;

public class atScript : MonoBehaviour {

  // Use this for initialization
  void Start () {
  
  }
  
  // Update is called once per frame
  void Update () {

    transform.Translate (Vector3.forward * .01f * Time.deltaTime); 
    transform.Rotate(Vector3.up * 3f * Time.deltaTime);

  
  }
}


This will cause our walker to move in a constant forward direction while turning at the same time.

Step 4: Add an Animation.

Picture of Add an Animation.

Now that are walker is moving we need to add an animation so it doesn't look like it is gliding across the ground. We need to animate all 4 legs.

Select the walker and change it's x,y,and z scale to .2 so it's size is a little more manageable.

With the walker selected, go to the animation tab and click to create an animation.

These animations work on key frames and Unity has a system built in that will smoothly interpolate between them.

Go to the 1 second mark and move the feet and legs of the left front area to the position of one step (you will need to change position and rotation of each piece).

You will notice that the default position gets created for you at the 0 mark. Copy those keyframes and paste them in at the 2 second mark.

Now if you click play you will see the first leg doing a complete and smooth step.

Repeat this process for the other 3 legs.

You will now have an animation file in your assets folder. Click that and go up to the top right where you will see 3 lines. Click that and change normal to debug. Tick the check box for legacy.

Go back to your walker and add an animation component to it. Drag in the animation that you just created and change wrap mode to loop.

If you click play your walker will be...walking.

Duplicate this walker and reposition it as many times as you like, in the demo video I did it 3 times.

Step 5: Let's Add Some Snowy Dusty Stuff.

Picture of Let's Add Some Snowy Dusty Stuff.

If you have seen the battle of Hoth you will know its in some kind of desert wasteland. So let's create a frozen tundra type effect.

Go to assets at the top and import standard assets -> particle systems.

Go to the prefabs folder in there and find dust storm mobile.

Drag that onto the user defined target making it a child and click its check box on the top right to turn it on. Click the simulate button to see it in action.

Change its scale to .0001 across the board and move it into whatever position you see fit.

With the dust storm mobile prefab still selected, change its start and end color to white in order to give it a more snowy effect. If you want a darker scene change either one of those colors to black.

Step 6: Add the Cockpit and Make It Shoot.

Picture of Add the Cockpit and Make It Shoot.

Click on target builder UI and create a new UI image.

Find the cockpit image from the game assets folder and click on it.

Look up to the top right and change it from a texture to a sprite.

Click on the UI image you just created and drag in the cockpit image to it's empty slot.

Resize it so it spans the entire width and height of the canvas.

Right click the target builder UI again and create a new button. Change its sprite to a circular image and changes it's color to red (or whatever color you want). Delete its child text.

Reposition that button as well as the build button to wherever you want.

Right click the target builder UI and add a new c-Sharp script. Call it controllerScript.cs

Paste in this code:

using UnityEngine;
using System.Collections;
using UnityEngine.UI;

public class controllerScript : MonoBehaviour {

  public Button fireButton;

  // Use this for initialization
  void Start () {

    fireButton.onClick.AddListener (OnButtonDown);


  }
  // Update is called once per frame
  void Update () {



  }


  void OnButtonDown(){

    GameObject bullet = Instantiate(Resources.Load("bullet", typeof(GameObject))) as GameObject;
    Rigidbody rb = bullet.GetComponent<Rigidbody>();
    bullet.transform.rotation = Camera.main.transform.rotation;
    bullet.transform.position = Camera.main.transform.position;
    rb.AddForce(Camera.main.transform.forward * 500f);
    bullet.GetComponent<AudioSource>().Play ();
    Destroy (bullet, 3);




  }

}//end of file

Step 7: Make It Shoot.

Picture of Make It Shoot.

Before we can make this shoot we need to create a reference for the button we created.

Save and build the script you just added. Go back to the scene and on the target builder UI you will see an empty space inside the script we just made where it says public button. Drag in the button we previously created.

The script we added contains instructions for what to do when the button is pressed. Those instructions include firing a bullet and playing the laser blaster sound.

First lets create the bullet.

Right click anywhere in the hierarchy and create a sphere. Resize it so that it is shaped more like a bullet by extending its z scale and shrinking its x and y scale.

Right click in your assets folder and create a new material. Change the material to red (or whatever other color you want the bullet to be).

Drag that material onto the bullet.

Add a rigid body component to the bullet and uncheck use gravity. Also, remove the bullets sphere collider component.

Add an audio source component onto the bullet and drag the laser blaster .wav file from the game assets folder into the audio clip slot.

Finally, rename the sphere "bullet" and drag it into your resources folder.

Step 8: Build It Out to IOS or Android.

Picture of Build It Out to IOS or Android.

Now when you click play everything should be working, all that is left is to get the app onto your phone.

Plug your phone in via usb to your computer.

For IOS go to build settings -> player settings and change the landscape to left.

Change the bundle identifier to something like com.YourName.YourAppName

Make sure there is some kind of description inside where it says "Camera Usage Description"

Download xCode if you don't already have it and create a free apple developer account. It will have you create a team and make sure that team is chosen when you are building out.

Hit build and run and you should be good to go.

For Android make sure you have usb debugging turned on and in player settings just set default orientation to landscape left. Click build and run and everything should transfer to your phone.

Thanks for looking! Let me know in the comments if you have any questions!

Comments

kdewitt (author)2017-02-06

Mathew I finally worked my way through this and finished late Friday. I had a case sensitivity issue with scripts. I renamed the public class names and that fixed both scripts.
This is an awesome tutorial. I had no previous experience in Unity 3d or other similar software. I'm a stay at home mom determined to teach myself how to build augmented reality applications. This was a great learning experience. Thanks so much.

matthewh8 (author)kdewitt2017-02-06

Just replied to your message before I saw this, sorry it took so long I am not on here much. Thats soo good to here though, if you have any other questions I can be reached at matthewhallberg@gmail.com and let me know if there is anything specific you want to learn and I will try to incorporate it into a video.

kdewitt (author)2017-01-24

Also, I plan to build out to my Android phone. What packages do I need to install on my phone? Anything specific? What are those steps to install? Thanks so much.

kdewitt (author)2017-01-24

I'm working on this. A couple of issues that are different from your video. These may or may not be an issue. 1) When I make the script it pops up visual studio for me. Looks different than your environment. I copied pasted the script saved it and ran Build. 2) The next step to create the animation, my Unity environment does not have the tab for animation. See the attached photo. How do I add that tab or why is it missing? 3) Also note at the bottom of this image, there are some error messages. These appeared upon the import of the packages. Will these cause problems with getting this to run properly on my Android? If so how do I fix them. Thanks so much.

dinojonny (author)2016-12-31

can you put this on the app store?

matthewh8 (author)dinojonny2016-12-31

I don't think I can because if licensing issues, I think it might get taken down. Not sure though.

dinojonny (author)matthewh82017-01-01

thats sad its pretty cool

matthewh8 (author)dinojonny2017-01-01

thanks so much!

About This Instructable

3,249views

64favorites

License:

Bio: 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 ... More »
More by matthewh8:Apple ArKit Augmented Reality AppAugmented Reality Fidget SpinnerFacial Recognition With Tracking.js
Add instructable to: