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:
Download available at the bottom!
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:
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!
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.
The effect is inspired by and a re-creation of Dirty Bomb’s Health Station. The material is a decal, meaning you must apply it to the world through a DecalActor instead unlike a surface material.
Engine Version: 4.7
Note: There is a jitter bug in 4.8 when the input Radius-pin of the SphereGradient contains a ScalarParameter instead of a static value somewhere in the chain.