HUD

Lacuna Passage - Devlog #7 - Creating an immersive HUD

Last week we shared a mini-tutorial on how to create effective first-person 3D HUD illusions with only a 2D plane. This week we are going to talk about the important information that the rest of the HUD will convey.

The helmet HUD is one aspect of the game that we are taking very seriously when it comes to balancing believability. We need to provide the player with relevant, contextual information at all times without overwhelming the player or breaking our fictional ruleset for immersion.

There are dozens of background survival and navigational stats in Lacuna Passage that the game is keeping track of; however, not all of these are relevant to the player and some are simply unbelievable. We have a distinct variable that measures your exhaustion level, but it wouldn’t make much sense for your space suit to relay this variable to you directly. Though our game is set in a science fiction universe, we are trying to constrain ourselves by the realities of modern space travel. How would a space suit measure a trait like exhaustion? Well, we can instead filter this information and display it in other ways, like blood pressure, heart rate, and other bio readings that a space suit might be very capable of measuring. In creating an immersive HUD we are trying to avoid abstract forms of information like health bars.

top.jpg

The helmet HUD in Lacuna Passage is your source of primary information - things that are most immediately relevant to the you. Fictionally, we have created a UI that is displayed via light projection onto the inside of your space helmet (think Google Glass, but across your entire visual field). You may notice in screenshots that the projected text is actually a bit pixelated and monochrome. This is accurate to existing technologies that favor function over form (simpler displays require less power and have fewer points of potential hardware failure). This is technology that is not only believable, but highly effective in conveying the information the player needs. It’s bright and stands out from the Martian landscapes extremely well. Right now these are the stats that we are displaying with this method:

bottom.jpg

1. Battery Levels
We have a very simple battery indicator for instant recognition of current battery levels as well as a percentage to give you more granular updates.

2. Oxygen Levels
Perhaps one of the most important survival stats in the game. Keeping this information visible at all times in the helmet HUD ensures that the player won’t be surprised when they run low on oxygen.

3. Compass Heading
Navigation in an open-world environment is critical. This age-old method of wayfinding is made even more useful with the inclusion of the diamond-shaped waypoint to lead you to known locations; however, if you are searching for unknown locations then you are on your own.

4. Latitude and Longitude
Another useful tool for navigation. When traversing terrain with no visible landmarks it can be easy to get lost. With Lat and Long headings you can know exactly where you are at all times. There may also be a need to record Lat and Long headings that you want to revisit later (or add as a waypoint on your compass).

5. Time and Date
Despite the fact that the Martian day is 2.7% longer than a day on Mars, it still has a 24 hour clock. Knowing the exact time allows you to more accurately estimate how long your battery or oxygen might stay within safe levels. It can also be useful to know how much time you have left before dark when temperatures drop to dangerous levels.

The important thing about these stats is that they are constantly updated and available at a glance. Many of our other secondary stats will be displayed via a wrist display that can be brought up to your visor for viewing when necessary. Both our helmet and wrist displays are fictionally and internally consistent helping to create a more immersive experience for the player.

Lacuna Passage - Devlog #6 - Using highly detailed 3D components in your first-person HUD

This week’s devlog is a bit more of a tutorial where we cover our method for creating dynamic, highly detailed 3D HUD elements. The basis for our pipeline involves rendering complex high-poly models onto flat, single polygon planes with a normal map for light interactions.

helmet_in_game.jpg

Pros of this method

  • You effectively have an unlimited polycount for your HUD. By rendering your high poly model to a flat plane you will have no noticeable polygonal curves or sharp edges (if you don’t want them, that is)
  • Extremely low poly count in relation to the quality of the illusion

Cons of this method

  • A change in HUD design requires re-rendering of all your texture bakes
  • The HUD cannot move in relation to the camera or the illusion breaks

So, let’s get started:

1. Setting up your camera angle

In order to model your HUD components you need to setup a camera in your modeling software that is exactly the same field of view as your first-person camera in your game engine. This will help you preview what your HUD will look like in game. It’s also going to be very important later when we need to render out a normal map.

2. Build your model according to the view you want in game

This part just comes down to whatever style you are looking to have with your particular game. In our case we are creating a small visible portion on the inside of a space helmet.

camera_plane.gif

​3. Create a plane to project your model onto

Once your model is finished (no need to texture it yet) you need to create a plane that completely encompasses your model from the point of view of your first-person camera.

camera_plane_orientation.gif

4. Orient the plane to your camera angle

Make sure that the plane is exactly perpendicular to the origin point of the camera. Check the image to see a visual.

5. Quickly unwrap your plane

No frills here. Just unwrap the plane however you like.

camera_plane_normals.gif

6. Render your normal map

Use Render to Texture with a projection modifier on your plane that encompasses your model to create a normal map of the original model. If you’ve never done a normal map bake from a high poly model before check out this guide.

textures_helmet.jpg

7. Create your textures

You can create your textures in Photoshop or texture your original model and do another render to texture for the diffuse instead of the normal map.

8. Create an alpha mask for the model’s texture

Since our projection shape does not perfectly match our plane we need to have an alpha channel somewhere that determines areas of transparency.

dustdevil2.gif

​9. Import your plane and your textures

Bring everything into your game engine and align the plane exactly as you had it in your camera preview in your modeling software. In our case we are using Unity so here are some tips to help you out.

Unity specific directions:

  • Have your plane parented to a HUD camera that is distinct from your scene camera
  • Have the HUD camera render last and mask only the HUD elements
  • Make sure the clear flags are set to Depth Only to preserve your depth buffer
  • Use the same HDR settings on all cameras if you are using image effects
So, there you have it. If you have any questions feel free to leave them in the comments.