Dirty Bomb’s Health Station Effect

Dirty Bomb is a first person shooter currently in open beta. I’ve been playing it for a bit and am really enjoying the game. As usual some of the effects caught my eye and got me thinking how they built these exact shaders. In particular the pulse effect from the Health Station by one of the Medic classes caught my eye and I decided to build a mockup re-creation in Unreal Engine 4. Let’s start off by showing the effect from the original game.

[gumroad id=”ue4dirtybombdecal” text=”Get It Now” type=”embed”]

The reason I tried to re-create this is purely educational. I don’t expect to use this exact material for anything in Switch or my other projects. However, I can say I learned some new tricks that I can use in the future! So let’s move to on to analyzing the original shader effect to see if we can simplify the “problem” into smaller bits.

Analyzing the Effect

There are two distinct elements to the shader. First, The pulse ring moving outwards and secondly, the static pattern of health icons. The pulse ring has the opposite opacity of the static ring and the pulse fills in the health icons with a different color. Finally, the pulse isn’t a complete circle, it’s split into 4 equal parts and fades out towards the edge just like the static circle. Now let’s dive into some of the critical components to make this effect work, I’ll leave the node-by-node exploration to yourself.

Here are the two distinct elements of the effect:

Material Breakdown

Here is the full material to give you a sense of the material’s complexity and flow. (If you squint your eyes enough, you might even be able to read it all when viewed in full size) but don’t worry there is a download link available at the bottom of the page!

Sawtooth Wave

To create a pulsing ring that continuously moves outwards and resets to 0 size every pulse we need a saw-tooth wave.

The resulting wave over time looks something like this (Although it’s not entirely linear as below)

Creating the Pulse Ring

The pulsing ring itself is not sampled from a texture, instead we create the ring at runtime using two sphere gradients (SphereGradient-2D is a built in Material Function in the engine) You can see the result below:

If you’re wondering how you can preview your own nodes like in the material editor, make sure you Expand the node itself and enable “Live Nodes” in the top toolbar.

Splitting the Ring

With the ring created and pulsing nicely we need to split it into 4 pieces. For this we do use a texture, and with a rotator we can turn it into the angled cross we need.

Final Result