Evan's Dev Blog 2/1 - Exploring Shader Graph!

Hello everyone! This week's post is back on schedule and today I'll be talking about shaders! Put simply, shaders are scripts that define how each pixel of an object should be rendered. Shader code has always been a bit of a mystery to me, but I reached a point in "Random Encounter" where it became crucial to understand them. The issues began when I realized I would need a solution to overlay a graphic over a character's sprite for future attack animations. I started with Unity's still fairly new Shader Graph, which provides a nice visual for how shaders work.

The finalized version of today's effect.

As I started to build out my shader, I discovered that the default color blending options (multiply) produced very ugly results when contrasting colors are used. While this does make sense, I needed to be able to tint an entity's sprite red when it is hit with a fire move, and this option simply would not do.

Yuck! It turns our green slime black!

By lerping the sprite's color with my target color, the result is much more in line with what I had envisioned.

Much better. Reminds me of spaghetti...

However, this created another issue. Lerping in shaders is usually done through the color's alpha value, and I still needed the alpha channel for fade outs. To solve this, I defined a separate value in the shader that would control the lerp. This allowed me to use color blending and alpha.

With the color issues solved, it became time to work on the actual overlay effect. I started by defining values for the overlay amount, offset, and tile to increase the control of the effect. The overlay itself was defined as a texture that would be sampled with the given offset and tile values, then blended with the base sprite with the amount controlling how much it should be blended. Blending has a number of different modes, with the default mode being overlay. Sense we want to replace the sprite outright, we'll use overwrite instead.

The difference in blending modes. There's a lot that can be done here!

And there we have it! This is a fairly simple effect, and I have toyed with the idea of adding a glow later to make it more complex, but for now, this will suffice.

Until next week!