sillycutegirl003

[sillycutegirl003]

An Introductory Look At Shaders for Unity

OVERVIEW

This blog is a documentation for my shader project Florescent, which can be found at (insert project download link). At a glance, Florescent is a simple 2D side-scroller platformer game level, which is true, but it also includes shaders to replicate different hit effects.

Because Florescent was my first attempt at writing Shaders for Unity, I ran into a lot of insightful bugs and issues that I thought would be helpful to share. Thus, this documentation will consist of two parts: an Overview of the Shaders' description and functionality breakdown, and a series of Dev Blogs detailing my development process. It'll give me a chance to share my notes, insights, and useful information for beginners looking to start writing Shaders for Unity Engine.

SHADER DESCRIPTION

Glow Shader

Glow Shader is used to control the Glow color and amount. You can use this Shader on any material that you want to glow.

In the Inspector: Texture is your sprite, Emission Mask indicates which parts should glow (white) and which parts shouldn’t (black), or only dim glow (grey). Color controls the emission color of your sprite.

Step 1:

Right-click, and create a new Material in Unity.

Step 2:

In the Shader dropdown menu, select Custom/GlowShader.

Step 3:

Select or drop in the texture and emission mask for your sprite.

Step 4:

Select the glow color that you want.

Texture Mask Shader

Texture Mask takes the texture and runs the UVs through a cosine function in order to lerp the value up and down, then combines that with Color. You can use this shader to create an animated gradient of your sprite or texture.

In the Inspector: Texture is your unwrapped texture/sprite, and Color is your overlay tint color.

Step 1:

Right-click, and create a new Material in Unity.

Step 2:

In the Shader dropdown menu, select Custom/TextureMaskShader.

Step 3:

Select or drop in the texture for your sprite.

Step 4:

Pick the Tint color.

Shock Wave Shader

Shock Wave takes the UVs of any surface/sprite and distorts it in the shape of a ring which expands from the center. You could use this Shader for a shock wave effect, or modify it to create a ripple effect on your sprite.

In the Inspector: Texture is your texture/sprite, Size controls the thickness of your shock wave, Shock Wave Strength how much the ring will distort things around it. Wave Distance From Center controls the expansion of the shock wave. The variable can be accessed via GetComponent<>() in other classes to control/animate the wave.

Step 1:

Right-click, and create a new Material.

Step 2:

In the Shader dropdown menu, select Custom/ShockWaveShderFULL.

Step 3:

Select or drop the texture of your Sprite into the Texture slot. Set the Size and Strength of your waves.

Step 4:

To spawn or control the wave, you will have to access the Material's properties via another script. The property "Wave Distance From Center" can be accessed through:

Shader.PropertyToID("_DistFrmCenter")

The Material itself can be accessed through:

GetComponent<SpriteRenderer>().material

Use Mathf.Lerp() to control the Wave Distance From Center variable. You can set the value of the variable directly through SetFloat().

[sillycutegirl003]

Dev Log #1

RESEARCHING SHADERS AND SHADERGRAPHS

In the beginning, I knew nothing about shaders. So, naturally, I had to get started with researching shaders themselves. As for any research, I started with Wikipedia. Any decent researcher would tell you that Wikipedia is NOT a credible source. However, it's a good start. Overall, their definition of shaders is standard. It was easy to understand.

That being said, reading alone isn't gonna help me comprehend shaders. I needed a more hands-on approach. So, for my conceptual prototype, I decided to create a simple 2D dissolve shader using Shadergraph! With the help of some Youtube tutorials of course.

If you are curious about how it works, I will link a couple of videos in Resources that go in-depth into the theory behind the effect.

In short, you are manipulating the UVs, adding noise to them, and using the "Step" node to control the threshold.

[sillycutegirl003]

Dev Log #2

LEARNING BASIC HLSL AND CG

After seeing what shaders can do, I was very excited to continue researching for this project. I couldn't wait to learn how to write my first shader and replicate more effects. However, shader language is a very intimidating subject, and I did not realize that at the time. It was only when I had started my research that I realized how few resources there were on this topic. A lot of the information I found was either using Shadergraph, or Pixel Composer.

Then, I stumbled upon a CD series by Ben Cloward centered around shaders and HLSL coding. His explanation was very detailed and easy to grasp. That being said his program compiler was completely different from mine. Turns out, Shaderlab has its own built-in structure and methods that are a little bit different from pure HLSL. However, Shaderlab allows you to use Cg and HLSL code within the editor, as long as you include the correct packages.

After constantly researching and running into dead ends, I eventually came across Freya Holmer's YouTube channel, where she posts live classes and livestreams teaching coding concepts. Luckily, she has a 3-hour video diving deep into the basic concepts around Shaderlab, and writing shaders in Unity. I've hit the jackpot!!

These are notes I've gathered from the research!

If you are looking to learn how to write shaders, you should definitely start with these videos!

[sillycutegirl003]

Dev Log #3

WRITING MY FIRST SHADER

Writing my first shader was absolutely a challenge. Besides struggling with Unity documentation, it was difficult to comprehend fully how mathematical concepts can be visualized on the screen.

Documentations for Cg aren't often found on Unity, I would have to locate the UnityCG.cginc source file because methods' functionalities are only documented within the code itself.

Then, there was the problem of my project being 2D! This problem would ultimately lead to one of the biggest roadblocks I had during this entire project.

2D Unity projects fit into a very specific mold, and you have to know and understand Unity's 2D rendering pipeline to utilize it to its full potential.

At the time, my Sprites would always return jagged, and there would be black patches where the sprite should be transparent. I spent around 2 days researching this issue, and I cannot stress this enough: There is very little information on writing 2D shaders using Unity Shaderlab.

Eventually, I came across this tutorial which tackles the same problem that I had.

Essentially, you have to set the Blend Mode to Blend One OneMinusSrcAlpha and multiply your output's RGB channels by its Alpha channel. It's sort of hacky and I don't fully know why it works but it helped me with my Sprite Shaders.

[sillycutegirl003]

Dev Log #4

CREATING GLOW SHADER!

By the time I got around to writing this shader, I was more or less comfortable working in Shaderlab, and I could pretty much experiment with different unlit shaders on my own.

Note that I said "unlit," because I could not get the shaders to interact with Unity's 2D Lights!

Anyhow, I will go in-depth about that in the next blog. For now, I just created a glow shader using the logic from a Shadergraph tutorial and converted it into Cg code myself.

[sillycutegirl003]

Dev Log #5

ROADBLOCK :(

So, the biggest challenge I ran into during the development of this project was in fact Unity's 2D rendering pipeline. Specifically, Unity's brand new 2D Lights feature was added as a beta in 2019.

Unity's 3D Lights worked normally by casting a ray toward the object to calculate how lit the surface would be, similar to how light rays work in the real world. That way, we could calculate how bright a surface should be, based on the angle of the light ray and the surface's normals.

However, 2D Lights don't work that way, because they are all on the same sorting layer! I suspect that 2D Lights directly interact with the sprites and cast a gradient overlay on top of them.

I ended up spending DAYS researching how 2D Lights work in Unity. And there is absolutely no documentation about this topic. The only article I was able to find was the feature release notes Unity posted years ago.

I even tried running the default sprite shader code through ChatGPT, and rewrote it in Cg, but it still came back broken.

[sillycutegirl003]

Dev Log #6

PUSHING FORWARD

After days of restless research, I came back empty-handed. However, like it or not, I had to make this work. Luckily, Unity included a default sprite shader that works with 2D Lights. So I will just use that! If I ever need to add an effect on a character, it would be specular, meaning that lighting doesn't matter.

I came up with a script that would swap between two materials using different shaders, one regular default lit shader, and the other using my own written unlit shader.

[sillycutegirl003]

Dev Log #7

RESOURCES

Below is a list of all the sources I've used to research and learn in this project.

[sillycutegirl003]

Dev Log #8

TEXTURE MASK SHADER

Now that I've managed to get over my roadblock, I was able to get back to writing my shaders. :)

The Texture Mask Shader came from me experimenting and just playing around with waves, patterns, and textures. Most of the logic and mathematical functions that I use in this code are mentioned in Freya's shader crash course!

[sillycutegirl003]

Dev Log #9

SHOCK WAVE SHADER

This is the last shader I wrote for this project. Through this, I was able to learn about very interesting methods and functionalities included in Unity's Cg program.

The logic I use in the code is largely inspired by Sasquatch B Studios! Specifically, his video on shock wave shaders using Shader Graph. I customized the logic and converted it into code to fit it into my own project.

It went pretty smoothly. I had no issues with the code.