The Puzzler VR Project


Introduction

Welcome to my Puzzler project writeup! This project is part of Udacity’s VR Developer Nanodegree program. The second term of this program focuses on VR design and the development cycle from the initial statement of purpose, definition of a user persona, to the iterative process of creating a usable mobile app. This process involved multiple user tests to ensure that the experience is comfortable and clear to the player.

I completed this project over the course of three weeks starting on May 15. Although I only had a limited amount of time available in the evenings it was fun to create this game – especially moving it forward a little every day and seeing it evolve quickly after each step and user testing. In this process I also created documentation that helped me find my way back when I had to step away from it for a day.

I didn’t find any parts of this project particularly difficult, but working on scale, lights, optimization required a lot of repeated on-device testing. Some (as it turned out, minor) issues with the GoogleVR audio components took me a little while to troubleshoot, too. But thanks to the active community around Unity I eventually figured out what was wrong (conflicting DLL files).

The final product created in this course segment is Puzzer. Puzzler is an immersive variation of the old memory skill game Simon. The player is presented with a random sequence of five lit up orbs. The game is won by repeating the sequence in the correct order.

Outcomes

The following is a video of the final result, captured in the desktop game view.

The Design Process

Statement of Purpose

Puzzler is a mobile VR application for new VR users which challenges them to solve a familiar type of puzzle in a new way.

Persona

During the design I had an audience in mind who grew up with 2D jump-n-run or adventure games and may not be familiar with VR apps yet. The app would present a first impression of a VR experience and not occupy too much of the user’s time (yet). Meet Alice:

Image

Alice in Wonderland illustration by John Tenniel, 1865.
Public domain image via Wikimedia Commons.

Name: Alice

Age: 49

Occupation: Managing Editor

Quote: “I’m so stressed!”

Summary: Alice spends most of her time writing, editing and swimming. After work she winds down with Twitter, Netflix or some mobile games that can be paused and continued later, or don’t take a lot of time to begin with.

Experience with VR: She has little experience with VR, but she is open and curious about the experience after her husband introduced her to some VR apps.

First Sketches

First, I drew a sketch on paper to get an overall feeling of what the game and environment might look like. In the process I also had an idea for a Logan’s Run-themed puzzle, but this could be something for a future version.

First Sketch

First Prototype

The next step was to create a prototype and scale it to a size that would resemble the real-life size of the user and surroundings.

First Prototype

To set a mood lights were introduced along the walls and above the orbs. Then it was time to get some feedback in the first user test.

Scene for first user test

First User Test

User’s initial reaction: “Oh wow, look at that! I’m right in the middle of the doorway. Looks very cool.”

How big or tall do you feel in this room, compared to real life? I feel a little smaller than in real life.

What mood or atmosphere does the scene give you? Dark and mysterious.

Can you describe the level of visual comfort? Anything you find difficult to see? Everything seems pretty clear to me. Don’t find anything difficult to see. Totally comfortable. The only time when I looked back and forth and moved my head very quickly I felt a little Woozy. But I felt comfortable looking around.

Can you describe your general experience with the scene? Anything you’d like to see? It was a good experience. There’s some really strong details. I’m looking at the spikes of the gate. Amazing the details. Light coming from the moon outside. I feel interested in what I’m seeing. Orbs are compelling and interesting, I want to know what purpose they have. I want to see them work. They’re completely different from anything else in the room, I’m sure they’ll do something. Yeah, the torches could use some fire.

Screenshot

In the next iteration adjusted the scale a little, add some animated particle systems to add some fire to the torches. I also adjusted a couple settings to optimize the scene and handle fast movement better.

Here’s the final result with fire:

Screenshot

UI Sketches and more User Testing

Now it was time to think about the user interface and getting the user to navigate and play the game. Back on paper:

I created a few different UI sketches but chose the simpler panels with less text so I could avoid small font sizes.

The second user test with focus on the UI panels didn’t require additional iterations. Everything was confirmed clear and easy to see and use.

Finishing Touches

Now it was time to finish the game play scripting, click events, audio components. I also added a mountain background to keep consistency between the inside and outside moods.

Breakdown of the Final Piece

Visual and Mood Setting

The dungeon is placed in a mountain range that could be located next to Dracula’s castle. It’s night-time. The dungeon with its barrels, torches, gates and wall links create a medieval setting. Outside of the dungeon there’s a cricket sound to underline the night setting.

To add to the dark, mysterious mood, a mysterious sound is playing inside. Torches are lit with fire and a blue spotlight shines down the orbs. Their blue appearance stands out from the rest of the scene. They are easily noticeable, and attracted attention even before the game mechanics were completed.

They are arranged in a half-circle centered in the scene, easy to reach without having to turn the head too far to the left or right.

Movement

When the game is started, the player moves from the start to a play point. Once the puzzle is solved the player moves out of the dungeon to an end point from which the game can be restarted. The motion is linear to reduce the possibility of simulator sickness for users who may not be used to VR experiences yet.

Interaction

When the player moves the reticle over a button on the start and restart panel, the button lights up green. Similarly, the orbs light up once the reticle touches them. A click on the orb also plays a sound for additional feedback and confirmation that the player really selected an orb. If the selection was incorrect it plays a failure sound.

Conclusion and Next Steps

It took a few iterations to transform the initial sketches into a comfortable VR experience, but the final product turned out to be a game my test player could experience with comfort.

Here’s a screen capture taken on an Android phone (Google Pixel 2 XL):

In the next steps I can picture a few improvements to the existing experience, for example using different light-up colors and sounds for each orb similar to the original Simon game. Once the orbs are selected successfully, it would also be nice to let the orbs fade or explode before the player moves on to the end/restart point.

I could also imagine this puzzle to be part of several small puzzles, or several themes like the Logan’s Run theme I thought about earlier.