Unity

Unity Shader Graph Scripting

This Unity tutorial will teach you the basics of Unity shader graph scripting. You’ll learn how to write C# scripts that modify shader graph properties at runtime.

Back in the 1950s a brilliant psychologist created a model for creative thinking. J.P. Guilford believed that such thinking comprised of two styles of cognitive processing: divergent and convergent—better known as our left and right brains.

Depending on where you stand on the spectrum, you might be more inclined to seek out divergent thinking in your day to day activities.

This poses a challenge to creatives in video game development, often regarded as heavily convergent processing.  Fortunately, there is a coding language created specifically for creative left brains.

Visual Scripting Using Node Based Shaders

The Unity Shader Graph is one of many new features that has been introduced in the Unity LTS & TECH streams. It’s a powerful visual tool for creating shaders without any programming required.

Transforming code into a visual reference makes it easier for artists, animators and designers to quickly grasp the flow of logic. You can see a beginner tutorial on how to create your own node based shaders in Unity.

An example of visual scripting with the Unity Shader Graph

But what if you needed to modify your visual scripts with real-time changes at runtime?  In other words, you need dynamic properties. This tutorial will show you how to modify shader graph properties with code.

Before you proceed with the tutorial, be sure to download the project files , which are available exclusively to tier-2 Patreon subscribers for only $5.

What Shirt Are You Wearing?

This demo is included in the downloadable project files

By way of example, we’re going to create a scenario called the user story (scrum anyone?). As a player, I want to change my outfit so I can customize my character.

The demo scene contains an avatar that’s wearing an outfit, and behind him there’s a display of three different outfits that he can try on.

How do we preview those outfits directly on the avatar? Well, it begins with the creation of a MonoBehaviour, which is a base class that every Unity component must extend.

Open the Assets menu, select Create → C#Script, and name the script “ChangeOutfit”.

TIP: It’s very important you remember the exact names of scripts since you will be referencing them later.  Double-check your spelling!

Now go ahead and open the new script and add the following code:

Unity Shader Graph scripting in action
Unity Shader Graph scripting in action

Unity Shader Graph Scripting

Now it’s time to get to the meat of Unity shader graph scripting. Let’s break this code down line-by-line –

  • 5 references the outfit material as serialized field, which means it be can set directly from the editor.
  • 6 & 7 add references to the color and texture that we’ll use to change the player’s outfit.
  • 9 creates a method that gets called whenever the GameObject that this script is attached to gets clicked.
  • 11 enables modification of the material’s color. “_color” is the name of the visual shader parameter and “_outfitColor” is the variable used in the actual code.

We’ve created two properties (named “Color” and “Texture”) in the shader graph of our custom shader. If we take a closer look the “Color” property, we’ll see a field called “reference”. Reference contains the value “_color”. This is the name we use to reference the shader graph property from our script.

Insert Caption

TIP: Unity automatically puts an “_” under all properties references, so remember to include that in your scripts!

Just like the color property, the texture property needs a reference in the script too!  So let’s go back in our “ChangeOutfit” code and add the line.

TIP: If the name of a variable is changed within the Visual Shader Graph and not updated in the MonoBehaviour, then the script will stop working and Unity will not give an error message.  This produces bugs that are hard to track down!

Now let’s jump into the editor and attach our script to it each to manikin GameObject.

Putting It All Together

Begin by control (or command) clicking all three of the manikin GameObjects (InfallibleCode, Unity, Sykoo).  Once selected, click the add component button and find the “CreateOutfit” script you created. You’ll see three editable properties: material, color and texture.

Reference each outfit material to the “character body” material.

Set the color to white to reflect the default outfit on the manikin.

Link the textures to their individual names. (For this you will have to select each manikin separately.)

Now it’s time to test the code!  Go ahead and hit the play button in your scene and click on each manikin GameObject.

Did your character avatar change his/her outfit?  If so, then congratulations!

Summary

Now it’s time for a pop quiz! What will happen when you stop the scene?

  1. a) The avatar’s outfit defaults to the original
  2. b) The avatar’s outfits remains unchanged

.

..

If you said b) it remains unchanged then you are correct.

Changes made to the shader persist regardless of where the changes are made. This could be good or bad depending on your intended functionality.  For example, say you have multiple saves in your game and each save will reflect the outfit worn at the time it was saved.  That’s a good thing.

But certainly other unaccounted bugs could arise, perhaps saved for another video.

Unity shader graph scripting allows you to modify your shaders during runtime.  This is especially helpful when you want to create more advanced shaders such as ones that have procedurally generated effects.  If you would like to see more or have a suggestion be sure to leave a comment below.