UI Developer Update

Posted November 7, 2016 by Cathy Schneider

Luke Schneider, Designer:

We’ve been thinking about how we want our UI to look and feel for a long time, but have been putting off doing anything to it until we were ready to do all the major stuff at once. Though we don’t plan on having a UI that blows people away, we knew we had a few requirements heading into a re-design:

1) The UI needs to work well in VR.
2) The UI needs to fit the overall modern/retro look of the game.
3) It needs to be fairly simple to add new elements/screens/etc.

Before starting on the UI, we had a general idea of what we wanted to do based on some reference art. Here’s a screenshot of a nice UI from Elite Dangerous that we felt was close to what we wanted to do:

Elite Dangerous UI sample:

We didn’t expect to have quite that much complexity or volume of text, but the overall vibe of futuristic sci-fi with a mostly mono-chromatic 3D display felt like the right direction. We also took a look at some fighter jet-like displays, such as this one:

 Reference UI sample:

It’s basically a vector-based projected display. The simple shapes, hash marks, and slight glow all work pretty well and create a pseudo low-tech-but-reliable style, though the amount of info is a bit overwhelming when bunched together. Overall, we wanted our UI to come somewhere in-between the two images above.

For the upcoming November demo, I knew I’d probably have enough time to work on the UI for a couple weeks, and had a fairly solid plan of how to change the visual style based on the above images (and more) and some preliminary tests. The old UI worked by drawing a bunch of quads (images/text/etc) to a 2D plane, using a camera that renders after the rest of the game. But we’d need to do things differently to achieve the look we wanted.

In the new UI, we still have a separate camera and draw to a 2D plane, but now that camera is rendering to a texture instead of the screen. That texture is then rendered onto a custom generated mesh that we control in code. Different parts of that mesh are placed where we want them within the cockpit/world, and rendered using a custom shader that works nicely with HDR/bloom.

Here’s the main menu in its current form with the new UI system:

There will still be more visual touches added, and the amount of curvature is subject to change, but this is the overall style we’ll be going with. There were lots of minor technical obstacles along the way to getting the system working the way we wanted. But the menu is just one part of the equation.

Let’s take a look at the current HUD:


The challenge mode info has not been updated to fit the style, but the weapon display, reticle, and stats have been. The reticle in particular took multiple iterations to reach the point it’s at now, but I’m happy with the result.
Each weapon changes the arrangement of brighter hash marks in the reticle, with the Cyclone being shown. The 3 inner marks rotate to align with the shots you fire. Not all the weapons have animating portions like that, but the ones that need something extra have that option.

In VR, the 3 lower displays are all in 3D space within the ship and look great. The reticle is actually a special case though, because it was not working in its intended location. When it was within the ship, it would be difficult to focus on it because it was too close. It’s about the same distance as the weapon displays, but you’re often focused on a robot much further away, and the reticle would look doubled unless you focused your eyes at a close distance, which is very uncomfortable.

So instead, the reticle renders as if it’s about 60 meters away, and is scaled up appropriately to be the right size in your view. It’s also more faded, so it doesn’t block your view quite as much. And if you’re wondering why the UI is mostly green instead of orange (or sci-fi light blue), one major reason is because of VR. Oculus and Vive both use a pentile display, which has twice as many green sub-pixels as red/blue. So green text/lines are quite a bit clearer in VR. Green also fits the retro-modern aesthetic nicely, so that didn’t hurt.

And that’s pretty much it for now. You’ll get a better look at it in motion in the upcoming demo.