Introduction: How to Make: Augmented Reality Pokemon CARD Game Tutorial

Picture of 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!

Step 1: Find Your Pokemon

Picture of Find Your Pokemon

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.

Step 2: Create an Image Target Database With Vuforia and Your Pokemon Cards

Picture of Create an Image Target Database With Vuforia and Your Pokemon Cards

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.

Step 3: Add Virtual Pokemon to Your Physical Cards...

Picture of Add Virtual Pokemon to Your Physical Cards...

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.

Step 4: Lets Add Some Attacks

Picture of Lets Add Some Attacks

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.

Step 5: Import the Particle Effects

Picture of Import the Particle Effects

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.

Step 6: Do Some C#

Picture of Do Some C#

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 () { } }

Step 7: Everything Should Work...

Picture of Everything Should Work...

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!!!!

Comments

jackj106 (author)2016-08-31

(i know i put this up a month ago, but a month is a while for a response. im not sure if it got like a mile down in notifications because of like a vacation, so im puting it back up.)

ok, so i bought the Logitech c270 webcam and tryed to use it with unity but i get a error related to the plugin: it gets this

Failed
to load 'Assets/Plugins/VuforiaWrapper.dll', expected 64 bit
architecture (IMAGE_FILE_MACHINE_AMD64), but was
IMAGE_FILE_MACHINE_I386. You must recompile your plugin for 64 bit
architecture.
Vuforia.VuforiaRuntimeUtilities:CheckNativePluginSupport()
Vuforia.VuforiaRuntimeUtilities:CheckNativePluginSupport()
Vuforia.EditorClasses.WebCamEditor:OnInspectorGUI()
UnityEditor.DockArea:OnGUI()

do you know how to fix this?

rocketangel (author)2016-08-16

hi friend, I love your tutorial, but I don't understand anything about making a program, because your tutorial I'm little bit know it now.

but how about buid for android and ios at the end of your tutorial ?

I need more tutorial how to export the project to android and ios, can you explain me more ?

BIG thanks

jackj106 (author)2016-07-27

if you are not adding attacks, do you need that xcode thingy for ios?

matthewh8 (author)jackj1062016-07-30

Yeah you need xcode it to build out the app to your phone, the unity remote app might work so it's worth a try but it may still use the camera from your computer rather than the front facing camera on your phone.

jackj106 (author)matthewh82016-08-02

ok, so i bought the Logitech c270 webcam and tryed to use it with unity but i get a error related to the plugin: it gets this

Failed to load 'Assets/Plugins/VuforiaWrapper.dll', expected 64 bit architecture (IMAGE_FILE_MACHINE_AMD64), but was IMAGE_FILE_MACHINE_I386. You must recompile your plugin for 64 bit architecture.
Vuforia.VuforiaRuntimeUtilities:CheckNativePluginSupport()
Vuforia.VuforiaRuntimeUtilities:CheckNativePluginSupport()
Vuforia.EditorClasses.WebCamEditor:OnInspectorGUI()
UnityEditor.DockArea:OnGUI()

do you know how to fix this?

jackj106 (author)jackj1062016-07-27

cant you just use the unity remote app?

jackj106 (author)2016-07-27

i would recommend using models from here:

http://www.models-resource.com/3ds/pokemonxy/ they are pulled right from pokemon X&Y!

curiouskrafter (author)2016-07-26

So Unity is capable of making fully fleshed out AR games like the one Niantec has put together?

matthewh8 (author)curiouskrafter2016-07-26

Yeah as far as I know with the right plugins, I don't have any experience with the gps side of things though. I did come across this today, http://docs.back4app.com/docs/new-parse-app/how-to-build-a-pokemon-go-app/

About This Instructable

2,782views

34favorites

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: