Creating a Virtual Reality App with Unity and Google Cardboard

UPDATED: This post has been updated to use the new SDK from Google which is now called GoogleVR instead of Cardboard

Today we will go over how to create a Virtual Reality app that you can run on your mobile device using Unity and the Google CardboardSDK.

Start by creating a new project in Unity, and make sure 3D is selected.

Get the Cardboard

Now we need to download the GoogleVR SDK for Unity

https://github.com/googlevr/gvr-unity-sdk/archive/master.zip

Once downloaded, go to Assets – Import Package – Custom Package, and select the SDK you just downloaded.

Going 3D

To start our game off, we need a floor, so right click, select 3D Object, and then Plane.

With the Plane selected, increase the scale of the X and Z axis so our floor is a bit bigger

Getting the Character

In order to get a character we can control, let’s import the Character Package

Once imported, go to Assets – Standard Assets – Characters – FirstPersonCharacter – Prefabs, then drag and drop the RigidBodyFPSController onto the plane.

Select the FPSController and sure it’s centered in the plane.

Adding GoogleVR

Since the FPSController already has a MainCamera, we need to get rid of the one that comes in the scene. This is what your hierarchy should look like now.

Now we need to go to our assets and find the GvrViewerMain and GvrControllerMain objects and drag and drop them into the scene. The GvrViewerMain is located in GoogleVR -> Prefabs and GvrControllerMain is located in GoogleVR -> Prefabs -> Controller.

Virtual Reality

If you hit the play button at the top you should see our white plane with the blue sky looking through the 2 peep holes that Cardboard is rendering for us. You can use the mouse to look around, and press the Alt key to look around if you need to. This is the same view you will see on your mobile device, it’s not until your using the cardboard with the 2 lenses that everything appears as one image instead of two.

Pretty boring right? Let’s make our game look better!

Making the Scene

To keep things simple, I’m going to import the Environment package so I can drop some conifer trees into the scene real fast.

Here’s the final product for the scene.

Now if you run the application, you should be able to see all the trees! Feel free to make the scene as crazy as you’d like by adding walls and other stuff.

Going Mobile

In order to run the app on your iPhone or Android device, go to File – Build Settings. Then select the platform you want, and select Switch Platform. This process does take some time depending on how fast your computer is. Once it’s finished, if your on iOS, select Build or Build and Run which will create an Xcode project for you to then run the app on your phone. If your on Android, have you phone connected and Unity will deploy the app to your phone directly.

Once the import has finished, you should see the Unity Icon next to the platform you are targeting.

Adding Mobile Input

In order to move our character in the scene we need to add some code that detects user input. I’m going to be targeting the Cardboard headsets that have the newer button that actually taps the screen, instead of the first generation Cardboard that used the magnet.

Time to Script

In the assets, right click and create a C# script. I named mine MobileInput.

Now we need to attach the script to our scene, some people like to create an empty object in the scene and attach their scripts to that, but I’m just going to attach this one to the Plane since I know the floor will always exists in the game. So with the Plane selected, hit the Add Component button on the right, select Scripts, and then select the script you created.

Now double click the script and open it up to start coding!

Moving the Character

The approach I’m going to take is when ever you touch the screen, move the character forward in the direction they are facing.

First off make sure your RigidBodyFPSController and MainCamera have a tag assigned to them. For me, the main camera already had a tag of ‘MainCamera’ but I needed to assign a tag to the FPSController.

Inside the Mobile Input Script, we are going to add some code to the Update method.

All this will do is every frame we will check if there is at least one touch on the screen, since the headset can only simulate one touch, and then update the player’s position in relation to where the camera is facing.

And that’s it!

You should be able to run the app on your mobile device and touch the screen or use the button on your headset to simulate the touch and move around your scene!