Puzzler | A Virtual Reality puzzle game

Virtual Reality is currently one of the top areas of research and development in the tech industry. Applications and experiences with Virtual Reality instantly teleports you to a different world where you get to explore and interact with the elements there. With the advent of fully immersive Virtual Reality Headsets like Oculus Rift and HTC Vive, the horizon of Virtual Reality has expanded.

Like a lot of people, I also got curious and started learning about Virtual Reality through Udacity. I created the puzzler application as part of my learning experience.

What is it?

Puzzler is a Mobile VR game in which the user will be placed in a VR world and has to interact with elements in the world to enter a dungeon, solve the puzzle and exit the dungeon to complete the game and restart it.

In the final version of the game, the user will be able to start the game, move in to the dungeon, observe the order of orbs that light up and will be able to move out of the dungeon to restart the game once the orbs are clicked on the same order in which the lit up. Here is a video showcasing the end result:

A Video cap of the final result

Who this app is for?

The ideal target audience for this game would be people with low to moderate exposure to virtual reality, has a smartphone with gyroscope and a VR Headset.

To create a perfect target audience group, I have created a persona which is basically an imaginary character who will be the ideal user for the application.

Persona for the User

What were the steps involved?

Creating a Virtual Reality game or application is fun and also requires lot of experimentation and iteration. Here are the steps that I followed:

Scene Sketching

Before starting to create the scene on Unity, it is always better to visualise and draw them so that we have a rough target to hit otherwise the scene creation step will take forever.

Initial Sketch of the Dungeon
Wireframe mockups for UI panel

Scene Design

Once we have the rough sketch of what needs to be created, we can dive right into Unity and start creating the world and its elements using the models and prefabs

Digital Dungeon — from outside
Inside the Dungeon

Lighting

Lighting plays a huge role in setting the mood and ambience for the scene. I have followed a blue and neon lighting effect to create a dark and mysterious setting for the scene.

Orbs and Elements placed along with lighting to enhance the ambience

Spatial Audio

Unity provides us with a way for creating spatial audio which will simulate sound in 3D space. When using Spatial Audio, the sound will become louder when the user gets close to the source and vice versa. This is just how audio sources work in real life. Isn’t it?

Animations and Waypoints

Waypoints are how the user will navigate around the 3D world. There are different ways to create a navigation system Ray Casting, Waypoints etc.,

For Animations, the plugin iTween has been used for moving around objects and the Main Camera.

Game Initiation and Navigation

User Testing

The above mentioned steps were part of the design and the development of the logic. There is one other aspect which helps you understand the experience your app is providing to its users, that is User Testing.

I am sharing the user testing results from the scene design and animation phase of the development.

I had my friend help me out by interacting with the application on a mobile device and answering the questions about the experience.

Q : How would you describe the environment?

A: Dark and Bluish. Feels like some dungeon or a shady room.

Q : Are you able to see the elements on the scene with out any strain?

A : Yes. I can see the balls in the centre, barrels and also the lamps on the wall.

Q : How big do you think the room is?

A : It feels big. not huge.

Q : How is the movement around the scene? Are you having any discomfort?

A : The first movement from start to inside the dungeon is very fast. The second movement is very smooth.

This step helped me in figuring out the mistake I did while placing the orbs. In the earlier version, the orbs were very close to the Main camera and were smaller, so while seeing the output it appeared as if they are in the perfect position. But the user testing revealed that they are really close to the camera than actually planned thus enabling me to correct that.

Final Thoughts

Though the interactivity and gameplay experience is less in the application, this application helped me a lot to learn about the process and technicalities involved in creating an application for Mobile VR. I will be working on adding new effects and features to the application. Will keep you guys posted about the updates.


Note: I will be adding the project assets and code to my github repository soon and add the link here once done.