The Draft Tech Art Part 1

In this post, I’ll talk about how I made the combat transition post-process material in Unreal Engine 4.


Reference


The initial reference for this transition was the effect when getting into a mech in Titanfall. The transition from the strategy phase to the combat phase is taking control of that unit on the battlefield, so hopping into a mech is a good analogy for that. Plus, the transition is really cool.

Masking

In the Titanfall transition, the screen gets masked into several different sections. A big aesthetic component of The Draft’s art style is hexagons, so I decided to split the player’s screen into a hexagon-shaped pattern.

First, though, we need to get the screen coordinates as UVs.

I decided to have the mask fade in in three separate stages. There is a different texture mask for each stage. The texture fades in according to several lerp parameters which are calculated in the game logic. There is a global lerp that controls the fade in of the entire mask as a whole.

When the mask is fading in, a hexagonal green tiled texture is in the background. Notice that the alpha of the background is the inverse of the mask (see the 1-x node at the bottom of the image).

To actually make the mask work, there is a post process input that is just the screen without any masking. This is multiplied by the mask effect which results in either a complete black or the screen color. Finally, the background color is added for when the mask is fading in.

Scan Line

While this transition was cool, I wanted to push it further. In my head I had this idea for a “loading” bar that opened as the mask was fading in. Eventually this idea turned into a cool sci-fi scan line effect.

The first thing to do was calculate the position of the scan line. This is a value that goes from 0 to 1 over time. Instead of just having one line, I dediced to have the line start in the middle of the screen and diverge into two lines that go up and down the screen. To do this, I take the V coordinate of the UV and get the absolute value to make sure that it contributes both above and below the middle of the screen. This gets me a value from 1 to 0 to 1, where the value will be closer to 1 if the V coordinate is near the top or bottom of the screen.

Next, the value of the scan line position is subtracted, giving us how close to the line the pixel is (where 0 is exactly on the line).

The next step is to take the absolute value and one minus the value. Now we have a value where 1 represents on the scan line, and smaller values are further away. The value is multiplied to create a sharper falloff and multiplied with the scan line color.

To calculate the color, a hex texture is sampled with the classic green color. For extra polish I also allowed the line itself to fade in over time using the scan line amount parameter.

Finally, I used the scan line position to fade in the mask. This way, there is a cool effect of the scan lines revealing the scene mask as they open.

Conclusion

I’m thrilled with how this transition effect came out. It was fun to translate my previous experience of writing shaders into making post process materials. I’m looking forward to more tech art work in the future!