Tools
UMG, Material Graph, Photoshop
Game Engine
Unreal Engine 5
This is a material study where I set out to recreate one of the most iconic and influential UI elements in gaming: the Diablo health orb. As someone who has been playing Diablo for over a decade, I wanted to challenge myself and build my own interpretation of this classic component.
Inside the widget, the material sits between the background texture and the glass texture, both of which I painted in Photoshop to give the orb a layered, dimensional, and polished look.
The material is built in several parts: UV Distortion, Textures, Tinting, Masking, and an Edge Meter.
The core bulge distortion is inspired by a Tuatara tutorial, but I heavily modified it to gain finer control over the curvature and intensity of the effect. On top of that, I use a noise texture that is multiplied with itself, each instance having different panning speeds, tiling, and additional UV distortions. This creates a more organic, fluid motion inside the orb.
All of that runs through a custom color-blend node, which functions similarly to a gradient map in Photoshop. It allows me to remap the grayscale values inside the orb to specific colors, and gives me control over which grayscale ranges each color influences in the final look.
I also added a thin edge line around the shape, this acts as an “edge meter” to indicate the current health amount along the perimeter of the pool.
Finally, the whole effect is contained inside a circular mask, keeping everything clean and perfectly round.
Unreal Material Instance
Unreal Material Graph
I was fortunate to have this material featured on 80lv, which meant a lot to me since this was a personal study inspired by games I love. You can check it out here:
