I have experimented with a few techniques to create a helmet HUD. This involves using a 2D shader material to deform the display and achieve smooth movement. This is my first HUD project utilizing shader materials and the Unreal Engine.
Features
- Health bar
- Fullscreen Damage Effect
- Energy bar
- Flash Light
- Thermal Vision
- Compass
- Minimap
- Screen-Dot effect on UI (UMG and In-World)
- Objective Marker
- Objective Marker Details
- Objectives in the HUD (Can be toggles on/off)
- Notifications / Warnings
- Crosshair with Spread
The Idea
Almost every soldier in space must wear some type of helmet, so I aimed to design one that feels high-tech without appearing overly mechanical,. The helmet’s shapes are crafted to give the player an immersive experience, making them feel as though they are inside a mech or wearing an advanced suit.
The suit features a toggleable thermovision and flashlight. It also includes displays for the suit’s energy and the player’s health. Using the thermovision or flashlight consumes energy, which will automatically turn off when depleted. The energy will slowly regenerate over time.
Additionally, there are conceptual suit modes for various scenarios:
- Strategic Mode (represented by chess pieces)
- Underwater Combat Mode (represented by a trident)
- Combat Mode (represented by knives)
- Shield Mode (represented by a shield)
- Speed Mode (represented by speedy shoes)
However, these suit modes are currently just ideas and have not been implemented gameplay wise.
Some insights
The helmet
The base helmet was designed in Illustrator and afterwards I used Photoshop to add some vignette and blur the edges. Then I imported this as simple texture into the HUD.
On top of the helmet I have placed the UI elements as separate widgets (Objectives, Notifications, Minimap, Compass, Interaction Prompts, Health and Engerybar etc.
For the final touch, I’ve added a texture with some scratches, giving it a worn look rather than appearing brand new.
Here is a final look of this helmet HUD.
Fullscreen Damage Effect
For the fullscreen damage effect I simply used a free bloody overlay texture which changes the render opacity based on your health.
I calculated the texture’s alpha value based on the health level. For instance, if the health is at 20, I subtract 20 from the maximum value (100), resulting in an alpha value of 80. This is then divided by 100, giving me an alpha value of 0.8.
The Objective
On looking at the objective marker you will get details about the objective itself.
The objective icon looks for the distance of the icon on screen and the crosshair. If you below a specific treshhold I will show the details otherwise I hide it.
The Crosshair
The crosshair is built dynamically, allowing me to easily adjust its size and spread as needed.
The Compass
The compass uses a simple texture (lines and numbers) that shifts left and right based on the player’s rotation.
Here you can see the logic for the compass shifting and the creation of a smooth mask for the fade-out effects. Special thanks to Uriah for his excellent tutorials.
The Minimap
The minimap is created using a render target that employs a second camera (Using an Orthographic projection type) on the player. It is then displayed as a UI material on the HUD. I haven’t explored the posibility of shaders on the minimap itself yet but I guess this could be stylized a bit more to fit the design even better.
Thermovision
This is the logic behind the thermovision UI shader. It utilizes the custom depths of objects to highlight them. You can enable this on any object with a mesh in the scene, including characters and objects, though it doesn’t work with particles yet. (If someone has a tip on how this could work with particles please reach out to me)
Note
I’ve only been working with Unreal Engine for a 2-3 month, and my knowledge is growing daily. There are undoubtedly some aspects that might not be optimally addressed or could be further refined. If you have any feedback, I would greatly appreciate it. I’m extremely grateful for all comments and feedback.