Breaking News

In-Game UI in Virtual Reality – A Hand HUD

When it comes to user interfaces in VR there are so many options, good and bad. Depending on the situation, a different UI approach can make sense. Today I want to talk about in-game information, things like time elapsed, bullets left in a gun, hints to the player how to reload etc.

For such UIs I have seen two major directions:

  • embed into the objects the player uses, e.g. a gun could show a bullet count right on a barrel display or a clock on the players wrist could show the time.
  • overlay the objects with virtual icons and text that float in the air

Both have their merits and can of course also be combined. I was very strong on the embed notion initially until I realized a couple of things:

  • a real pistol doesn’t have a display, so unless it is a sci-fi pistol not much is gained
  • looking at a virtual watch and spending time with this action just to find out how much time one has left kind of defeats the purpose when time is a critical factor in a game, like when speed-running
  • showing meaningful additional text on the small surface of virtual objects can be quite difficult

Designing the System

So after quite some deliberation I decided to try a floating UI this time and see what I can do with it. After a bit of tinkering I found that at least for me the most natural place to have it is at the base of the virtual hands. These are in front of you most of the time anyway, especially in a shooter-like environment. I made a quick-list of initial things I want to display:

  • Time elapsed since world started
  • Bullets left in current weapon
  • Hint how to reload the weapon if no bullets are left
  • Readiness state of the time-slow-down capsule

This already shows the system must offer some capabilities that go beyond simply displaying a value:

  • Objects should be able to dynamically contribute to the UI
    • this means there should be some easy way to declare what data to show
    • the existing data binding mechanism seems like a good fit
    • “Time” implies there must be some sort of regularly updated data binding and a data push capability
  • There should not only be a value but also an optional explanatory subtext
  • The UI should react to special states, most notably a value of zero
    • replace value with info text
    • change subtext
    • hide value or subtext
  • There should be the notion of a default UI which is shown when no objects are grabbed by the player

Implementation

In order to enable objects to show something in the hand HUD all that is needed to do is adding the HUD info component to them. Main text and subtext can react separately to zero with a different text as well as visibility.

HUD placement and definition of default info showing time elapsed when nothing else is grabbed
HUD definition of the pistol

Putting it all Together

And voila, here is a look at the current state of the implementation. You can see it already live in traVRsal. It combines also nicely with the tooltip system that already existed.

The hand HUD in action

Up next I’ll let it sink for a while and then probably look into subtle animations or color cues to guide the players more. I also thought about allowing the players to select a specific HUD they are interested in. This would require some sort of UI catalog or a way to switch by maybe swiping through them. Ideas are always welcome 🙂

Leave a Reply

Your email address will not be published.