Alice in VRLand, a VR Puzzler experience
As part of my coursework with Udacity, I was challenged to design, test and iterate a mobile VR game called Puzzler. My version of the game features Alice, returning to Wonderland for another adventure.
The game is simple. Enter VVondeRland, have a nice chat with the Mad Hatter, solve the puzzle and take the portal back.
The game was designed having in mind a user with a very active imagination, always eager to try something new and escape the mundane.
This ensured that the UI had to be colorful, catchy and out of the ordinary.
In order to achieve this, I needed to have a special set of assets, background and sounds to create the magical Wonderland ambiance.
Design blocks and considerations
In order to build an enchanting experience and because I wanted to learn more about graphical design, I constructed my own assets in MagicaVoxel, using photos found online as inspiration. I then assembled my elements in the scene.
I also used two assets from the Asset Store to bring life to my characters:
After the initial user testing, the feedback was that the Start and Restart buttons were just “floating there” and didn't really fit into the scene, the path was “hard to follow” and the user didn't know which way to head and after completing the puzzle the camera was clipping through the table when it was moving towards the restart point.
With that feedback in mind, I re-designed the buttons so that they were more integrated into the UI theme. What I had in mind was to make the start button a crossroad sign and the restart button a portal gate.
To pinpoint the path and highlight the way the user should head, I made a checkered road and to avoid clipping I made the camera jump over the table. To distract attention from the table jump which looked a little forced on the Alice character, I added a rainbow trail renderer as a mask.
Most audio clips in this project have been processed with Audacity, either to trim them or to modify them to fit the theme.
Clips used feature:
- initial start menu music of a girl humming a lullaby
- Alice in Wonderland piano theme on Synthesia for the gameplay
- Mad Hatter voice
- Alice’s voice for reactions to the puzzle
- cricket sound provided by Udacity for the forest
Final Result and Game Play
Crickets sing in the distance and you find yourself at a crossroad, humming a lullaby. Are you ready to start your adventure?
When you’re ready, move forward and greet your old friend, the Mad Hatter, who is having a nice cup of tea. The music changes to a more dynamic piano pace to mirror Alice’s theme and induce the lively atmosphere of Wonderland.
You’re terribly late, you know?
After catching up with your old friend, move forward and try to solve the puzzle. Alice is very vocal in her reactions to you figuring out the puzzle.
You solved the puzzle! Congratulations! Now all you need to do is take the portal back. Are you ready to go at it again?
If you are, you are teleported back at the crossroads again, where the UI prompts you to start your adventure again. The music changes back to Alice’s gentle humming.
Conclusions and final thoughts
Creating a VR app, especially one you’re very interested in is a lot of fun, albeit complex process.
I had the idea of a Wonderland themed VR app ever since I started this course and this was the perfect opportunity to sketch out a prototype. Picking this particular topic gave me more freedom in designing the experience because everything is allowed in a fantasy world and you can experiment with your own rules.
Developing this, I gathered a better understanding of UI, ergonomics, user testing, audio, motion, the importance of pixel density for text and overall design tricks in VR.
This is just a prototype of Alice in VRLand.
The final portal offers the perfect opening to adding additional levels and extending the game further. What levels would you like to see next?
If you enjoyed this article please recommend and share.