Designing interfaces for new mediums is always a challenge and is often one that is first met by simply plugging in existing practices into the new medium. Those designs often don't transfer over too well, and usually need modifications. VR is still new enough that lots of interface design still falls into the 'plug-in-the-existing' category, which due to the perceptual nature of VR, often feels quite jarring and breaks immersion. This article will explore my attempts at incorporating immersive design in VR in my recently launched game, Psyche Soldier VR (http://store.steampowered.com/app/571660/Psyche_Soldier_VR/).
The concept and setting of the game are paramount to creating immersion. In the case of Psyche Soldier VR, the player starts in a remote realistic location, which we'll refer to as the 'menu area,' and needs to travel into their own subconscious, the 'gameplay area,' to battle against shadow creatures that embody aspects of their psyche by casting light energy.
In the menu area, the player needs to select one of seven missions and one of four difficulties, as well as confirm they are ready to play. Existing interfaces would include a 2D list of various missions and difficulties, where the player would scroll down, select the desired mission/difficulty, and then hover over and press the play button. Sure that works, but isn't there a way that fits the 3D perceptual nature of VR better? There is. Brainstorming a way to use the concept and setting; the idea of a shaman's brew and witch's cauldron came to mind.
In order to strengthen the suspension of disbelief, start with realistic objects and then progress toward fantasy. Standing before a realistic wooden bookshelf, the player enters the game and is eased into the virtual world. One of the two shelves holds seven glass jars, one for each mission. The second shelf holds four skulls, one for each difficulty. On the front of the shelves there are brass nameplates that indicate what each jar and skull represents.
The player is instructed to pick up a jar and put it into the cauldron that's to the player's right side. Doing so makes the water in the cauldron bubble more rapidly, which is how the player selects a mission. Then the player is instructed to put one skull into the cauldron, which is how the player selects a difficulty. Now that both the mission jar and difficulty skull are inside the cauldron, the water bubbles even more vigorously causing a large bubble to float up above. Notice that the bubble rising up out of the cauldron is the first step toward fantasy. A bubbling cauldron seems realistic, however, the player's expectation of reality is stretched toward fantasy as the bubble rises above the cauldron.
This next step is where the bridge from reality to fantasy is fully crossed. The player is instructed to place their hand into the floating bubble and pull the trigger, which confirms the player's desired mission and difficulty. Upon triggering the bubble, a psychedelic tunnel quickly emerges covering the player's field of view. A texture scrolls by quickly as the tunnel moves around the player's head, creating the illusion that the player is traveling through the tunnel. While the player is experiencing movement through the tunnel, the gameplay area is loading and the menu area is unloading. Once the gameplay area is loaded, the tunnel opens and fades so that the player experiences exiting the tunnel as if they have traveled to their subconscious. From a technical perspective the tunnel served as a loading screen, but from an experiential standpoint, the player has seamlessly crossed the bridge from reality to fantasy without breaking the player's suspension of disbelief. (The tunnel can be seen in the video at the top, around 30 seconds in).
The return to the menu area uses the same tunneling effect, however instead of clicking on a bubble floating above a cauldron, the player uses a laser pointer to click a button on a traditional 2D scoreboard. Although a traditional scoreboard is not immersive, I couldn't think of a better way to easily convey that type and amount of information. Players are used to this sort of end capping UI, and isn't too jarring from an experiential standpoint. The goal in this sort of scenario is to return to immersive interactions as quickly as possible.
If you must use traditional 2D UI, make them simple and merge them with the environment, if you can. Like the scoreboard, there were a few cases where traditional UI seemed appropriate and wasn't required during actual gameplay, so I placed those in the menu area. Those were, achievements, upgrades, and leaderboard. In order to merge these with the menu environment, a trophy stand was included to represent achievements and a crystal ball for upgrades, both fitting for their purpose and consistent with the theme of the game. When each was clicked, the 2D UI expanded from and collapsed to the representing object. The leaderboard only appeared when the appropriate mission jar was placed in the cauldron and disappeared if the jar was replaced. Although those menus are quite gamey in nature, the simple environmental tie-ins and transitions help retain the fantasy.
There were also some traditional 2D menus that were needed during gameplay, such as the glossary, controls, and options menus. I tied all of those menus to the pause button, since players already expect a disruption when they pause.
During gameplay, avoid HUDs and 2D UI as much as possible. With the design goal of having a fully embedded UI during gameplay, originally the player's health and energy were baked into the patterned color of the subconscious gameplay area's walls. However, I ended up splitting health and energy into two separate elements, keeping the energy resource as the patterned color, and placing the heath on the player's hand. Players are able to look at their hand during gameplay, but often don't because it's distracting. Consequently, the health level is often unknown during the game. Player feedback was usually to place their health on the HUD, which felt like a landed bug was stuck on your face, so instead I implemented a heart beat sound effect when the player was at low health. Although that helped, I had to make a compromise, which was that any time a player gained or lost health, a HUD element, mirroring the health level on the player's hand, would slide up to the bottom right corner of the screen and fade out after a second. The limitated brief exposure of the HUD element made it feel much better.
Changing weapons called for another modified implementation of traditional UI. When holding in the weapon select button, a radial 2D UI element wraps around the player's hand. Rotating the hand changes the selection. When releasing the button, the wrapped 2D UI element disappears as a UI icon of the selected weapon lingers and fades. The player can also 'quick swap' to change weapons by clicking the weapon select button. In this quick method, the radial 2D UI element is so brief it's often not even noticed. The selected weapon icon fadeout is the only thing seen. Since the weapon effects change so drastically, the player doesn't need to look for the selected weapon icon once they've become comfortable with the quick swap.
Remember to leverage the game's concept and setting to embed interfaces. An aspect of the game that is embedded is the hit effects, which in Psyche Soldier VR are colored sparks of light energy. Weaker damaging ability hits produce less hit effects, and stronger damaging ability hits produce more. The scaling spawning of hit effects help sell the feeling of power relative to the amount of damage without having an arcade-like score pop out.
Another aspect of the game that is embedded is enemy health. Since the enemies are shadow creatures that have light casted on them by the player. At full health, the enemies spawn dark in color and lighten as they lower in health. Since the regular enemies have relatively low health pools, the rate of change is high enough for players to easily notice. Boss enemy health pools are very large, making the rate of change between coloration too subtle, so a traditional health bar seemed necessary. The goal then became to integrate the health bar into the environment and make it fit with the game concept. Placing the health bar on the ground underneath the bosses seemed the least intrusive and most useful place to put it. Adding puffs of shadow and sparks of light where the dark meets the light fits the concept and helps maintain the player's immersion into the fantasy.
Whenever adding an UI into VR, ask yourself, "How could I make this interface more immersive?" In hindsight, I know there's ways I could have made certain interfaces more immersive. As examples, I could have integrated the achievement menu as a spell book akin to Harry Potter, or the upgrade menu could have been represented by many pieces of a fragmented light crystal. Fortunately, the majority of the main play loop in Psyche Soldier VR is seamless and immmersive.
Hopefully, you gained some insights, reinforced some existing knowledge, or triggered some creative ideas after having read this article. Challenge yourself to design something that fits the concept and setting of your game, and keeps the players suspension of disbelief alive. Create on, create forward!