How to Make: Augmented Reality Pokemon CARD Game Tutorial

This video goes through the process of making an augmented reality app with Unity 3D and the Vuforia plugin for use with Pokemon cards. I always thought something like this should have existed and I am really surprised Nintendo has not yet capitalized. An image of your Pokemon card gets loaded into an image database and when your phone camera picks up that image it renders the 3d version of that Pokemon over top of the card. This tutorial then goes through how to set up two attacks, water and fire, so when you hit a button in the app the Pokemon performs that attack. I tried to gear this tutorial towards beginners so sorry that it is a little long. I also see some value in leaving mistakes in the video as well, so beginners can learn how to recover. Also, Unity allows you to build apps cross platform, so this app can be built for Android or iPhone (IOS).

Let me know in the comments what you want to see in the next video!

Pick out two Pokemon cards that you have (try to find one water and one fire) and go here: http://roestudios.co.uk/project/3d-pokemon-models...

Download their 3D models from that site and unzip their folders.

Open up Unity 3D and start a new project. https://unity3d.com/

Go to Vuforia and login to your developer account. http://www.vuforia.com/

Download the Vuforia plugin for Unity if you don't already have it and drag it into your assets folder.

Go to google images and find a picture of your chosen Pokemon cards. You could take the pictures yourself but, then you would have to crop them.

Inside the dev portal on the Vuforia website click on image targets and add your two Pokemon card images as image targets. For each image let's set the width to 5.

Once the images are uploaded, download the image target database (for unity) and drag it into your new Unity project.

Now, go into Unity and click on the Vuforia folder. Find the prefabs folder and drag the ARCamera into the hierarchy.

Delete the main camera in the scene.

Find the imageTarget prefab and drag it on top of the ARCamera making it a child.

First go to the imageTarget in the Unity inspector:

-choose image target from database.

-under image target choose the name of the first Pokemon you want to create.

Find both folders that contain your 3d Pokemon models and drag both into Unity.

Find any .obj file for your desired Pokemon and drag in onto the image target (Pokemon card) in the scene.

Resize the 3D model to your liking and rotate it appropriately on the card.

Finally, go to ARCamera in the hierarchy and look at the inspector where it says Vuforia Behavior Script...change world center mode to Camera.

Go to database load behavior script and check load image targets, then check activate.

Press play and hold your Pokemon card up to your webcam. You should now have a virtual 3D Pokemon sitting on it, provided there is no glare.

Repeat these steps for your second Pokemon.

Right click in the hierarchy and create a UI Button.

Place it in the bottom left hand corner of the screen and change the text and background color to your liking. Change its anchor location to the bottom left.

Right click on that same button and click duplicate. Change its position to the bottom right of the screen and do the same with it's anchor point.

Create two c-sharp scripts on each Pokemon in the hierarchy.

Add using UnityEngine.IU to both scripts (watch the video to see this in more detail).

Declare two public Button's in both scripts and drag their respective button game objects into the script components in the inspector to create a reference.

Go to import, standard assets, particle effects, and import those.

Go to the particle effects folder and find the prefabs folder.

Drag the hose prefab on to your water Pokemon, so it becomes a child.

Find the firemobile prefab and do the same with your fire Pokemon, making it a child.

This is the full script you want on your water Pokemon:

using UnityEngine;

using System.Collections;

using UnityEngine.UI;

public class pokemon1Script : MonoBehaviour {

public Button attackButton1;

public GameObject hose;

// Use this for initialization

void Start () {

attackButton1.onClick.AddListener (attackButton1Down);

hose.transform.FindChild ("WaterShower").gameObject.SetActive (false);

}

IEnumerator Wait(){

hose.transform.FindChild ("WaterShower").gameObject.SetActive (true);

yield return new WaitForSeconds (2);

hose.transform.FindChild ("WaterShower").gameObject.SetActive (false);

}

void attackButton1Down(){

StartCoroutine (Wait ());

}

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

This is the full script you want on your fire Pokemon:

using UnityEngine;

using System.Collections;

using UnityEngine.UI;

public class pokemon2Script : MonoBehaviour {

public Button fire2Button;

public GameObject spawnPoint;

public GameObject fireBall;

// Use this for initialization

void Start () {

fire2Button.onClick.AddListener (fire2ButtonDown);

}

void fire2ButtonDown(){

fireBall = Instantiate (Resources.Load ("FireMobile"), spawnPoint.transform.position, Quaternion.identity) as GameObject;

fireBall.GetComponent<Rigidbody> ().AddRelativeForce (spawnPoint.transform.forward * -1000f);

Destroy (fireBall, 2);

}

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

OK, now everything should work. If it doesn't or you have any problems I tried to add all the steps in detail in the video.

The last step is to build for Android or Xcode (if you want to build for an iPhone or iPad).

Android is pretty strait forward, if you are building for IOS you need to download xCode and follow the prompts to create a (free) developer account in order to deploy to your iPhone.

Let me know in the comments what everyone wants to see next or if you want me to take this a little further.

Also, comment if you have any problems and I will try to help to the best of my abilities.

Thanks for looking!!!!