Neon Trigger Devlog #6 - Shaders and Post Processing for Unity

Hello Everyone, and welcome back to another Devlog by me, Braeden! Im excited to share with you the process I've been going through the past few weeks, so let's get right into it.

For the past 2-3 weeks, I've been dealing a lot with Unity Shader Graph and Post Processing. I've learned a lot about making a game look 'retro' and, I can say the result from those weeks of development has led to something pretty amazing. 

My first few props for the game were a few neon signs to throw in the environment here and there. I began by creating a guide to model from, a pretty simple mask made in Photoshop of a few designs I came up with. Here is a screenshot of the signs and the guide to the left:

Through a simple process of following the lines with the bezier curve tool, I was able to create these pretty quickly. After crafting these up in Maya, I exported them to Unity, ready to be textured. I was able to use a tileable texture for the pieces of the signs that aren't the glowing parts, and I created a separate shader for the glowing parts. For the shader graph, the UV's for the neon parts of the signs needed to be lined up and scaled correctly for the shader to work properly. The graph is powered through the time node for the emission texture to scroll, and the texture has a few lines and color variations to allow a flickering effect. This is the chunk of logic that gets the effect, although a few of the other signs has some masks to create different effects like blinking. Here's how it turned out:

Onto additional parts I've had my hands in, I focused a lot on post processing for the past week. It turns out it was a lot more than getting a good mix of bloom and vignette to make the scene feel retro (although they do play a big part). I went through a lot of color correction through several of Unity's built-in post processing options. Getting a good balance of contrast and color was actually pretty fun to work out. Here's a screenshot of some of the settings:

A big part of making the game look retro was not only creating a good balance of color and contrast, but also creating that old style look through a mix of chromatic aberration, screen warp, and depth of field, although the most obvious of these was the film grain scan lines. Aside from the post processing options listed, I also did a few fullscreen shaders to provide that old look to the game, including additional grain. The process took a while to make look right, here are a few screenshots of various environments with before and after post processing:

I had a lot of fun doing the post processing for this project. It really made the visual aesthetic of the game as great as it can be. I also had a lot of fun with lighting and actually building the level, having a solid whitebox really helped the process of course.