December 2016

Virtual reality with a Pennsylvania twist

Designing and developing my first VR app – haunted corn maze style

Virtual Maze Design

Overview

“HCI 580: Virtual Environments, Worlds, and Applications” – the first graduate level HCI (Human Computer Interaction) course I ever enrolled in.  I had NO idea what I just signed up for. See, this wasn’t your typical college course where you can wiggle out an A by memorizing excerpts of textbooks. When we weren’t in class being lectured on the history of virtual/augmented reality, immersion and presence applications, or wayfinding best practices, we were being challenged to design AND develop wicked-cool experiences using the Unity game engine.

 

The first few projects were expansions of some classic Unity tutorials, yet the most important project was our semester-long “capstone” project. We were given the following project constraints:

 

  1. It had to show knowledge learned throughout the semester
  2. It had to be built with Unity
  3. It had function through a head-mounted display

 

Not much to go off of, I know. Here’s the deal: we had to prove we knew our shit by building something wicked-awesome. I’m stoked to tell you that I proved it alright. My final product earned a perfect 100%. Here’s how I did it…

The Idea

I began thinking on my game concept in early October. During this time of year, my rural Pennsylvania hometown is just starting it’s yearly routine of corn-maze madness, pumpkin-flavored EVERYTHING, and homemade haunted hay-rides. I relish October as the onset of the Fall season, and wish I could enjoy the festivities year-round. Then a perfect idea hit me.. my game should be set in a Halloween-themed virtual maze!

 

With the setting in place, the purpose of the game came pretty naturally. I would build out a first-person experience, navigable via the head-mounted display of my choice, and require the user to collect a set number of hidden collectible objects (pumpkins of course) within a set time frame (5-minutes in this case). If they fail to collect all pumpkins within the 5-minute time frame, they lose and the game would restart.

 

I would call the game… Maze Runner.

The Tech

To concept the maze layout, I used Sketch (since I already use it for everything else). I used the Unity game engine to design and develop the game. Unity has a hella-awesome asset store with tons of textures, 3-d models, etc. I took full advantage of these resources for setting the scene.. but put my own design twist on them where I saw fit.

 

Google Cardboard was my head-mounted display of choice due to it’s robust API compatibility with Unity. It only took a few simple steps to push the build to my iPhone 6 through xCode, and plop it into my $10 Google Cardboard setup to start playing!

The Design

Setting the scene

My first step in the design phase was mapping out the maze, and choosing where to place the hidden pumpkins. I had a few considerations to keep in mind:

 

  1. The map should be simple enough to complete in 5-minutes even if the user gets lost.
  2. The user must be able to move around the map while still keeping a sense of place (aka “way finding”).

 

To solve consideration 1, I kept the maze layout fairly simple. It would be rectangular, with 1 entry point. There would be 6 dead-ends. The collectible pumpkins were constrained to 5.
Diagram - Virtual Maze
In order to solve consideration 2, I strategically placed the pumpkins in specific locations throughout the maze. Each pumpkin would also be identified by a unique color in the maze and within the game controls. That way, users could identify where they are in the maze by which color pumpkin they are at.

Cosmetics

With all the logistics in place, I was finally ready to start building the maze in Unity. I really underestimated the breadth of work required here to build out such a complex scene. Each wall had to be manually maneuvered into place, while maintaining consistent spacing and axis settings. It took FOREVER. But the final result was perfect and well worth the effort.
Unity Maze Frame - Virtual Maze
The next step was to import 3-d models for the pumpkins, apply textures to the maze, and design the skybox. Unity’s asset store came in super handy here, since I was working within a limited timeframe and didn’t have time to dabble with 3-d modeling… maybe next time!
Design Asthetic - Virtual Maze
I easily found the perfect pumpkin model, grass maze texture, and spooky skybox to create the desired haunted look & feel. I began dropping the 3-d pumpkins into their places, and applying individual color sources to differentiate.

 

To take advantage of the virtual space, I really wanted the final pumpkin to be this massive behemoth object that could be seen any time the user looked up.

 

Behemoth pumpkin would serve two purposes:

 

  1. Act as a way-pointing element to guide the users through the maze.
  2. Amplify the scare factor.. BOO!

User Interface

The final step in the design phase was to craft a user interface for the game. It would need to include a countdown timer and collectible progress tracker (to track how many pumpkins you’ve collected) and be visible to the user at all times. All of this voodoo UI magic would have to be driven by “animators” with very specifically-defined dependent variables.
Before collection - Virtual Maze
Before collection (slide left)
After collection - Virtual Maze
After collection
I decided to use 2-d pumpkin icons in the UI to represent each collectible 3-d pumpkin in the maze. The UI pumpkins start out in an opaque state, to indicate they have not been collected yet. Each one has a corresponding color (which is applied as a light source under each collectible 3-d pumpkin) and is ordered based off their location in the maze. Blue is first, followed by pink, and so on. This allows the element to double as a way finding attribute for the user in the chance that they get lost.

 

Once each pumpkin is “collected” in the maze, the 3-d pumpkin drops in opacity and it’s corresponding UI icon lights up to indicate it’s collected.

 

The game ends when one of two things happens –  the timer drops to 0:00, or all pumpkins have been collected – whichever comes first. If all pumpkins were collected, a “You Win! 😃” message pops up. Otherwise, “Sorry 😔 You Lose!”.
YouWin

The Code

It was finally time to apply my simple-yet-effective C# skillset I had built up from prior Unity projects. This process took the longest of all. Countless hours were spent testing, debugging, testing, tutorial-watching, debugging, forum-surfing, and testing some more. The end-result was comprised of four scripts; Autowalk, Countdown, Floater, and Gameover.

Script 1 – Autowalk

Script1_Autowalk
The Autowalk script drives the movement of the player. It’s function is simple: anytime the Google Cardboard button is tapped (a tiny piece that simulates a “screen tap” on the mobile device), it sets the user off in a steady motion. In order to stop moving, a second tap of the Cardboard button is required. The user can change direction at any time by turning their gaze left or right.. it’s all gyroscope based.

Script 2 – Countdown

Script2_Countdown
The Countdown script is pretty intuitive. It starts the game off at 5 minutes (or 300 seconds in this case), and subtracts a second for each second that passes since the game started.

Script 3 – Floater

Script3_Floater
Not entirely necessary, but a worthwhile boost to the spook-factor. The Floater script’s sole purpose is to move the 3-d collectible pumpkins up and down on the y-axis to give the the appearance of floating.

 

Here is a taste of what it looks like.
Floater

Script 4 – Gameover

Script4_Gameover
As stated before, the game ends when one of two things happens –  the timer drops to 0:00, or all pumpkins have been collected. The Gameover script makes all this magic happen by tying appropriate elements together at the appropriate time.

 

Win or lose, the game resets the user back to the start for another round of haunted fun!

Demo

🎃