Creating a VR Dialogue System UI

Creating a VR Dialogue System UI

I recently wrapped up the first prototype of a VR Dialogue System for a project idea we are exploring. Overall I’m pretty happy with the result – it functions really smoothly in VR and has all the functionality that I set out to include. I figured I’d share a bit of it here for anyone who is interested!


Initial UI Mockup

The Dialogue system itself is built on an Unreal Marketplace plugin by CodeSpartan called, appropriately, “Dialogue Plugin.” I considered writing this part of the system from the ground up, but after doing a little bit of initial research I found that CodeSpartan had already set up the exact framework I was looking for and so I happily shelled out for the cost of the plugin.The level of ease with which new dialogue content can be added was the main selling point for me.

There was a fair bit of modification involved to get exactly what I wanted from it, however. My aim was to create a dialogue system that is more ‘Firewatch’ than ‘Skyrim.’ NPC talks as a voice track plays and subtitles are displayed, then it hands over control to the player who can pick from 3 dialogue responses. I also wanted the option to have a response timer that would trigger a 4th ‘did not respond’ option if it expired.

The added challenge, of course, was making it function smoothly in VR and look to be a believable diegetic part of the world – the premise being that the UI is projected via a hologram device on the user’s wrist.

For the purposes of this test the player will be conversing with Autumn, a recently awakened AI who has lost her memory. I also needed a way to visualize her during the dialogue and give her a bit of character. The image above shows what my initial UI mockup looked like. The part that took the longest during the mockup was actually finding an appropriate font. I wanted something clean and bold so that it would read well in VR (plus sans-serif because nobody uses serif fonts in the future!). I eventually settled with Font For Fighting.

Check out the webm below for a look at how it turned out:

The bulk of the work in the creation of this feature was mostly split between making the art & animation behave properly, and rewiring the initial plugin to suit my exact needs. You can see in the video that I eventually chose to display the UI above the hand. This position was chosen to mimic the location that you would hold a piece of paper if you were reading it in real life. In playtesting though, one thing I found is that different users preferred to have the UI in different locations. Because of this I went ahead and added a feature where the player could actually drag around the UI window and place it wherever they wanted relative to their hand. Here is a look at how this works (there are a few minor visual bugs in this video since the UI is not meant to be open/closed mid-dialogue):


Dialogue is selected by moving your thumb up and down on the left trackpad, and clicking anywhere on the trackpad to select the currently selected option. Haptic feedback helps a lot with making it feel natural. I plan to eventually add an option for the user to select a dialogue choice with their right hand as well (pointer-style).

If this type of thing interests you, stay tuned for more content! I plan on showing off some gameplay videos of the dialogue system in action, as well as some other gameplay systems that pair with the dialogue system to create some cool game experiences.

Leave a Comment