Sprite Diffuse shader

By 11/07/2018 March 20th, 2019 Shaders

If you want to create a “sprite diffuse” shader using Unity’s Shader Graph , this post might help you.

In this tutorial I used: Lightweight Render Pipeline 2.0.5-preview, Unity 2018.2.0f2.

You need a PBR shader so your objects are affected by lights, but when you create it and apply it to a material you’ll notice that Sprite Renderer components won’t fully work. As you can see in the .gif below you can’t flip sprites or change their colors. Your sprite is also not rendered properly, missing it’s texture and transparency.

error - unity sprite diffuse shader graph tutorial

The sprite diffuse shader that you need to make is really simple and I’m sharing it there. I’m also posting a quick explanation if you’re interested, so you can understand what’s going on.

We’ll achieve this:

final image - unity sprite diffuse shader graph tutorial

Diffuse shader

Quick explanation

step by step - unity sprite diffuse shader graph tutorial

1. As we can see in our Sprite Render component, our shader doesn’t have a texture property called “_MainTex”, which is required for SpriteRenderers.

To solve this, we add the property in our ShaderGraph’s Blackboard. Type: Texture2D, it has to be Exposed and it’s Reference name must be “”, as the warning says.

2. We get the sprite’s texture and elaborate it’s color (works with Sprite Atlas too), using Sample Texture 2D node.

3. We multiply the color with “Vertex Color“, which is basically given by our Sprite Renderer’s “Color” component. This way you can modify your sprite’s color by changing it in the Sprite Renderer Component.
Vertex color documentation

4. We get our Alpha value and connect it to the PBR Master node. To do that I used the node “Split” because after our multiplication we have a value with 4 positions (RGBA: Red Green Blue Alpha) and our Alpha value is stored in the last one. If we connect our “Multiply” node directly to the Master node the Shader Graph will use the “Red” value, ignoring the other ones.
Split node documentation

Even if I didn’t set it in the last “step by step” image I recommend to connect the Alpha value to the AlphaClipThreshold to optimize our shader. (I connected it in the final shader image by the way). From the documentation: “Fragments with an alpha below this value will be discarded”. You can find it’s documentation in a master node page, here.

5. We set our Albedo connecting directly the multiply node to the master node. The Shader Graph will ignore the “A” value, creating a “RGB” one. This way we have our sprite’s color affected by light.
I also changed the workflow to specular and setted it’s color to black, so we don’t have weird lighting effects.
I setted the smoothness and occlusion value to 0 too for the same reason.
The surface is set to “trasparent” and we have to set “Two sided“, this way both our alpha and “flip x and y” will work.

(Remember, value.rgba or value.xywz are the same thing in shaders, it’s just a different way to name values. value.x is the same as value.r).

You can unsubscribe from the newsletter at any time, give it a try!

Support my current and future work ^^ As a thank, you will receive exclusive rewards!

Become a Patron!