Udacity project: Interactive puzzle game

Asger
5 min readAug 16, 2018

--

Introduction

As part of the Udacity VR Nanodegree course, I have made this short puzzle project during July-August 2018 for my colleagues to try out. The reason I made this is to boost my VR Design experience.

Completion of this project took approximately 20 hours.

The project consists of a puzzle game that must be solved by you; the player. Inside a dungeon environment, five orbs lights up in a sequence. You win the game by using your Google Cardboard, interacting with the orbs in the correct order.

Download APK (50MB, Android 6.0+)

Final result of the puzzle dungeon from outside (incl. UI elements)

Outcomes

My own goal with this project was to become better at working with interactive design elements in the Unity Editor. The level design is not the main focus of this project, hence the plain-looking visual effects. Rather, the purpose of this project revolves learning my way around interactive VR design in Unity, while documenting the process.

What I liked/didn’t like

I liked the parts of the project where I had to link things together in Unity; getting the code to working with the correct gameobjects, sounds and visuals.

I didn’t like the fact that the Google SDK had to be tweaked so much, and I had a hard time finding the documentation that I needed to get past this challenge. This was the most difficult part of the project.

Walkthrough video of the puzzle game

Story of the process

Like mentioned, the original goal was to create a simple level; focusing mainly on me learning how to set up an interactive VR experience. Therefore the environment should be fairly straightforward:

  1. Click to start the level
  2. Move straight to the interactive orb puzzle
  3. Continue straight to the finish (and click to restart level)
Early sketches for puzzle level design

The most difficult part of the project would turn out to be correcting for differences: between what was taught in the Udacity tutorial videos and how the Google VR SDK had updated and changed over time.

It took lots of trial and error to make the orb interactions work. But once it did, the rest of the first iteration went pretty smooth.

How to set up the Google VR SDK correctly in Unity, utilizing the GvrEditorEmulator, GvrReticlePoint and GvrEventSystem

Following the Udacity tutorial, I set up the user interface panels for starting and restarting the game. The dungeon was finished using the provided prefabs and I added a skybox for the sake of eye-candy and immersion.

After optimizing the project for mobile and doing a few internal test builds, the first stable version was ready for user testing.

User testing outcomes and iteration

Once the first version of the puzzle game was ready, I tested the puzzle game on a colleague. We will refer to him as “Peter” the test subject.

Persona

Name: Peter

Age: 30

Occupation: Motion Graphics Designer

Motivation:
Peter is usually working on large design projects in Illustrator that he brings to life in After Effects. In his spare time he has an interest for indie virtual reality games. He spends the evenings with his wife and two children — they like to do camping together during vacations.

VR experience:
Beginner level. He has downloaded a few VR apps to his phone, and he has bought Google Cardboard for his kids. He has no skills in programming for VR, but he likes to try out a fun game once in a while.

Quotes:
“My kids love VR.”
“More and more VR apps are available in the app store.”

Testing my game, Peter could start it up, clear the puzzle and restart it effortlessly. However, he did point out an issue for improving the immersion:

“The torches are unlit!” — Peter the test subject

Torch lights (Point lights) was added for version two of the puzzle game. Now the mood fit the wanted environment better.

Baked Point lights for the torches
Lighting before and after the torches were updated

Furthermore I bumped up the transition speed from when you press START until you are inside the dungeon. Reason: preventing possible motion sickess.

Transition speed for iTween was changed to “2”

Breakdown of final piece

Environment
Taking place in a deserted mountain area, the player enters a mystical dungeon. The scene is not too bright — but bright enough to see what is happing around the player. Torchlights sets the mood inside the dark dungeon. In a blue halo of dim light, orbs float above the player. This custom environment is my attempt to differentiate my project from other, similar Udacity Puzzle Game projects.

User interface
Taking up most of the player’s visibility in the beginning of the game, a large GUI awaits the player’s input. The UI is fairly simple; looking at the START-button expands the reticle pointer and changes the button color to green. Pressing on your Google Cardboard conductive button whilst looking at the START-button, begins the game.

The same button-press interaction is repeated throughout game.

Gameplay
The puzzle is a randomized, sequence-based memory game. Five orbs brightens up in a sequence that the player repeats, using his/her Google Cardboard. Once the game restarts, the sequence is different.

Sound
For the sake of the user experience and for immersion, sounds and ambient music has been added to the game. Playing the orb sequence — as well as pressing an orb — is supported by positive and negative sound effects according to player interaction.

The ambient music is 3D, meaning that once you enter the dungeon, the music becomes louder. And when you leave, the music gets lower. You can even hear some Doppler effect going on as you finish the game. This is not an intended feature, and it could be the next logical step to fix in the next version.

Conclusion

It served to be quite the challenge to setting up the Google SDK as intended. But once the technical aspects were in place, the rest of this Udacity course went step-by-step.

The resulting puzzle game has been user tested on Android 8.0, where it runs effortlessly.

Creating this project gave great early insights to working with interactivity in Unity for VR.

Made by Asger, 12-Aug-2018 for Udacity Nanodegree Term 2: VR Design

--

--