Dirty Bomb’s Health Station Effect

merc_family_1920x1200_16x10

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:

db_tiledicon01
db_pulse01

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!

db_healthstationfx_overview01

Sawtooth Wave

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

db_sawtoothwave01

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

saw

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:

db_materialbreakdown01

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.

db_rotatedcross01

Final Result

11 Responses

  1. For anyone viewing this in 2020, use a RadialGradientExponential instead of Sphere Gradient and you won’t have any flickering 🙂

  2. Hello, I have no idea if somebody know that but if you use Result Diameter rather than Result 0-1, the bug is solved :D, Sorry for my english __’

  3. Thanks for another great tut as always, your blog has been a valuable resource. Do you play Dirty Bomb btw? Let me know if you want to square up for a match 😉

  4. Hey Tom, thanks for sharing.
    Unfortunately this isn’t working for in UE4.8.1. The Spherical Ring has a lot of flickering that you can see here: https://imgur.com/Ae8qDuO. Do you have any idea what this is and how to fix it? I’m kinda new to UE4. Thanks!

    • Haven’t upgraded to 4.8 yet with the project, but that might be a bug in the built-in material function. Might be worth reporting @ AnswerHub if it keeps happening.

Leave a comment on this post!