Creating NPC Text for VR in Unity

Y’all. I struggled with this for a LONG time.

It seemed simple enough – although text and user interface elements in virtual reality are new and best-practice-less for the time being (and there is a lot of discussion on the topic of how to do this really cleanly for readability), I was simply interested in getting a really basic text UI object to render properly on both eyes so that a player in KittenVR could get a sense of what was happening within the scene. I figured it would be easy, but it turned out that despite virtually every VR game having some form of text in it, this was not well documented from end to end, which was precisely what I needed.

In this post, I’ll go through step by step how I added a player text above my kitten NPC that rendered nicely in the Oculus Rift!

For the uninitiated with user interfaces, the Unity 4.6 update provided a new system for displaying GUI elements (buttons, texts, images, etc.) to the player. There is a lot of good information on the fundamentals of UI elements in Unity on their tutorial site, and I was able to get a basic text UI working for the non-VR version of KittenVR, but I struggled hardcore when it came to doing this in a way that made sense for the Oculus double-camera rig.

First, I made the executive decision that I needed to change up my UI strategy between my VR and non-VR versions.

The non-VR version displays the text over a single panel at the bottom half of the screen:

I decided that this was not only ugly (hey, it’s temporary! Don’t hate!), but also that it wasn’t really a good solution for the Oculus Rift or a VR device. The warping of the screen from the lens distortion would likely interfere with how the panel looked anyway, so I decided to go with a different route (pictured above) and have the text float above of my kitten NPC.

Create the UI

The first thing that you need to do is create the UI game object itself – each UI element that you add needs to have a Canvas object at the root, so I added a Canvas , a Panel , and a Text object to my NPC Kitten like so:

By default, the Canvas generally will appear to create a massive object that takes up the better part of the scene view, but since this was using the Oculus, I went ahead and made it pretty tiny, with a width of 30 and height of 25. Since the parent of the Canvas is the kitten itself, I positioned the Canvas at 0, .5, 0 in order to have it floating above the cat’s head.

Set Up an Event Camera

Disclaimer: I’m not 100% sure how much this next part matters, but it works out nicely for me so I’m going to include it here:

1. On your Oculus Camera Rig, Expand the Tracking Space and select the ‘CenterEyeAnchor’ camera

2. In the Inspector, click “Add Component” and choose ‘Camera’

3. Set the camera’s ‘Culling Mask’ to ‘Nothing’ – this will prevent this particularly camera from attempting to render the scene

4. Back on your Canvas, go to Render Mode -> Event Camera and choose the CenterEyeAnchor from the drop down

Adjust the Text to fit & be clear

Now that we’ve gotten most of the basics around the general UI requirements out of the way, we need to tackle one last issue – and this is the one that took me the longest to figure out due to a general lack of experience in creating Unity UI components.

The Problem: Text sizing is wonky in Unity. At size 36 (default) the text is perfectly reasonable sized for a non-VR camera, and is very clear. Excellent! In VR mode, though, this ends up being massive and ugly and unreadable. Changing the text size makes it smaller, but then it’s gross and blurry.

The Solution: Under your Text item, change the font size to something small. I did size 2 pt. font. That sounds too tiny, right? On your canvas, there is a component called the “Canvas Scaler (Script)” – change the default number for Dynamic Pixels Per Unit from ‘1’ to ’10’.

When you run your game now, your canvas should appear directly over your NPC, be readable, and display in both cameras! You will probably have to tweak the exact sizes based on your text content (or whatever other components you are putting in) but this is a really simple starting point for getting basic text floating over an NPC.

Happy Kitten Collecting!