How to make 2D SHADERS in UNITY 2026! [Shader Graph TUTORIAL]

Welcome to a Blackthorn Pro tutorial. In this video, you will learn how to make 2D shaders within the Unity game engine using Shader Graph. And we're going to learn by making a scrolling texture shader, a vanishing shader, a flashing shader, which can be used for damage feedback, for example, and finally a bunch of cool distortion shaders. But most importantly, by the end of the tutorial, you'll have a much stronger understanding of the underlying systems of Shader Graph, so that you can experiment on your own and make your own unique effects. So, with that said, let's get started. So, I have a Unity

project opened up with a scene that has a simple sky sprite. I'd like the clouds to move from left to right in a continuous stream. This is where making a scrolling texture shader can come in handy. Note that you can download every sprite, as well as the shaders we make, with the custom asset pack I've put together. The link is in the description. So, I'll go to Create, Shader Graph, URP, Unlit Shader Graph. I can now double-click on the shader to begin editing it inside of Shader Graph. This whole tool basically works with an awesome node system. You create a bunch of nodes, each of which has input and output slots, and connect them between each other. This is how you make a variety of effects. It's all about the right connections between different nodes. Every single 2D shader will possess the fragment and vertex nodes. In short, vertex moves points on your sprites, while fragment colors pixels on your sprites. Up here, we have what is called the blackboard. This is basically where you make the public variables, which you'll see inside the inspector when viewing the material with the shader applied to it. So, for example, I can make a float variable called speed, a vector two called direction, another vector two called tiling, and lastly a texture 2D called main tex. On each, I can click on them and change the name and default values. Now, if I save my shader with control S, I can now right-click on it and create a new material from it, which I can call scrolling texture material, for example. And you'll see that I can edit the variables I created in Shader Graph. Amazing. Of course, these variables aren't actually used for anything at the moment. Similar to a C# script for gameplay, you can make all of the variables in the world, but if they're not used to move physics or calculate health, for example, then they're basically useless. So, before heading back to Shader Graph, I'll select my sky sprite and add my scrolling texture material to this material slot in the inspector. And since my shader is basically empty except for a few variables, my sky basically vanishes. So, let's head back into Shader Graph. First of all, it is very important that you name this texture 2D variable exactly underscore main tex inside this reference slot. It's just one of those things to memorize. Next, almost all 2D shaders will require you to have a sample 2D texture node. So, hit the spacebar anywhere inside of Shader Graph and type sample texture 2D. You'll see it has a bunch of info. For now, just drag and drop your main texture variable inside of the graph and connect it to the texture inputs. Then connect RGBA to base color. So, now this shader is doing the absolute basics. Main tex is your sprite, sample texture reads it, fragment displays it. So, if I save my shader with control S and head back to Unity, you'll see my sky is back in town. So, remember that whenever you make a 2D shader, you'll likely need this basic to display your sprites normally. Note that if you have a sprite with a lot of transparent empty space, you'll get something that looks like this. So, you'll need to go one step further by going to graph settings and changing surface type to transparent. You'll notice fragment now takes in an alpha, aka transparency input. So, now I can connect the transparency of my image with that. So, if I have a lot of transparent space on my sprites, it will actually show up as transparent. Quick tip, if you double-click on your main text variable, you can add a default image. So, I'll use my sky, and then over here, you can change the main preview to a quad by right-clicking on it. This gives you a helpful preview, so you can see the results of your shader directly within Shader Graph. Okay, great. So, now to actually get a scrolling texture, we're going to want to add a new node to our Shader Graph. So, again, I'll hit the space key, and this time type tiling and offsets. What this node allows us to do is repeat and move a texture, which is perfect for our use case. However, if I connect it with the UV input of Sample Texture 2D and hit save, nothing happens. This is because we need some way of moving the X and or Y values of this Vector 2 offsets. One way of doing this is using our direction Vector 2 variable we created up here. So, I'll drag and drop it into Shader Graph and connect it with offsets. So, now if I save, then begin tweaking the values of direction inside the inspector of my scrolling texture material, you'll notice the texture does indeed begin to move, but in an incredibly weird, stretchy way. So, to get this to work nicely, grab your sprite, and inside the import settings, make sure you set the wrap mode to repeat. This is very important. Now, if I begin to tweak my direction values, the texture scroll works. However, we would like it to move on its own. So, we could edit these values through code, but much quicker would be to use a few more nodes within Shader Graph. So, let's head back there and create a Time node. The Time node is extremely useful whenever you want to animate something within your shader. As I'm at it, I'll also drag and drop my speed variable in here. This will be used to control how fast my texture scrolls. Now, let's make a Multiply node. This is your bread and butter. It's used, as the name implies, to multiply two outputs together. For example, I can multiply speed with time. And if you think of the time node like a moving conveyor belt, then speed controls how fast that conveyor belt will move. Now, we just need to define in which direction it should move in. We're already doing that up here. However, it doesn't move on its own, as we saw. So, let's add a new multiply node and connect the output of time multiplied by speed. And for the second input, let's use the direction. And finally, the output of that second multiply is fed into offsets. And you'll see that by tweaking speed, I can make my clouds scroll really fast or slow and in any direction. Quick tip, if you want to make your own scrolling textures in Photoshop, for example, head to view and enable repeat pattern up here. This way, you can paint your textures and directly see whether it looks seamless or not, which is super helpful. Finally, if I head back to my shader graph, I can plug in my tiling vector two variable with the tiling input. Now, I'll save my shader with control S and you'll see that this quickly allows me to control within my material how often the texture repeats itself, which could maybe come in handy. So, there we go. We've created our very first shader. And don't worry, the more we practice here, the more clear and fun it will all become. So, let's move on to

the second shader, a vanishing shader. So, let's go ahead and create a new URP unlit shader. And like last time, I'll right click and make a new material from it, which I'll call vanishing material. I'll add that to my character sprite and poof, we get the warning message and the character turns into an ugly blob. So, pause the video right here and make the basic setup of your 2D shader. We saw how to do this with the first shader. It's the bread and butter you'll be repeating throughout most of your 2D shaders. Okay, 3 2 1 solution. Head into shader graph and create a new 2D texture variable. Then add that to the graph and connect it with the 2D sample texture node. Finally, plug that into base color. Next, we'll go to graph settings, change this to transparent, and plug the alpha of sample texture right in here. If we save our shader, we can now see that the character is showing up normally. Okay, so how do we make him vanish in a cool way? Well, we can use a simple noise node. I'll reduce the X value here to 10, so it's a little less grainy. So now, what happens if I connect that with my alpha channel? Well, everything that is black will have zero opacity, so it'll be completely transparent, and everything that is white will be opaque. Go back into the scene, and indeed I get parts of my sprites that are transparent and others less so. But, it all looks a bit blurry and smudgy. And again, we have that classic problem where transparent parts of my sprites are rendering weirdly. So, let's head back into ShaderGraph and make sure we multiply the simple noise with the alpha information of our texture. And then feed that into alpha over here. Now, finally, if I wanted a more crisp vanishing effect, I can add a step node. This basically checks if a value is bigger than a limit. So, if I connect simple noise with the edge input of our step node, it converts the blurry grayscale noise into a sharp black and white mask. Lastly, I'll make two new float variables, one called sprite visibility, which if I click on, I'll change this into a slider that goes from zero to one. And then I'll make a second float variable called noise amounts. I can plug noise amounts in here. And sprite visibility in here. Save my shader, head back to Unity, and you'll see that if we play around with our vanish amount slider, we reveal or hide our sprites. And I can bump up noise amounts to add more or less detail to the vanishing effects. Now again, you can edit these values through code if you like. For example, slowly decreasing sprite visibility to zero to make the whole character disappear. Now again, it doesn't matter if you've mastered every node or understood every node here. The key is to simply have fun experimenting, connecting nodes which take in information, usually perform something with that information, and output something new. So similar to components like Unity's particle system, one of the best ways to learn after watching a few tutorials, is to experiment on your own. Connect random nodes between each other and observe what happens. With that

said, let's jump into shader number three, a flash effect. Also super basic. So I've set up the usual main text with a 2D sample texture node, and alpha is plugged into fragment alpha, so I pass on the correct transparency information to my shader. Now for base color, we're doing something a little bit different this time. Instead of directly connecting it with base color, I'm going to add a blend mode in between. So as the name implies, this blend node combines or blends two inputs together using a chosen blending formula, which is the mode right here. For a flash effect, I'll pick the overwrite mode. So I would like to overwrite the normal color of my sample texture with a flash color. So I'll head to my blackboard and create a new color variable I'll call flash color and give it a default color of white, and I'll plug that in there. The third value here is the opacity of my flash color. So if this is at one, my sprite will show up completely white, and if it's at zero, it will be at its normal color. I can see this clearly if I connect the output of blend with my fragment's base color. Now I would like to have a public variable for the opacity. So, quick challenge, pause the video and add a variable that controls the opacity going from zero to one. Okay, solution. We go to our blackboard, create a float variable called flash opacity, and plug that in there. I'll turn it into a slider with a min value equal to zero and max equal to one. And that's it. If I save my shader and head back to Unity, and then tweak my slider, we get a flash effect. Again, you can tweak this through code by grabbing a reference to the object's sprite renderer, and then typing material. setfloat in a function that looks like this, for example. The key takeaway here is that when you want to reference a variable from your blackboard, you use a line like this, and put the name of your variable between quotation marks for the first parameter, and then type in the new value you would like to set it as for the second parameter. Okay, finally, let's make our fourth and final shader

a distortion effect. First of all, I've got my usual basic setup. Next, we can add a simple noise node and connect its output with the UV input on our sample texture. And you can see immediately how that influences the look of our texture. I can change the X value here to change the scale of the simple noise. For another example, what if I made a Voronoi node and plugged that in instead? Now, you can see how that looks. Play around with the angle offsets, which gets our cells moving about, or even change the density. Now, quick challenge. Pause the video and get the cells moving on their own. Hint, you'll need a speed variable, a time node, and a multiply node. Okay, solution. We're going to want to multiply time with speed and plug the result into angle offsets. Now, depending on the speed, your cells will either move quickly or slowly. Now, for me, Shader Graph is all about exploration and having fun. So, explore the tool, experiment. This is how you learn. Imagine, for example, that we multiplied our simple noise node with the Voronoi node and plug the results in there. Now, we get another completely unique-looking effect. Next, what happens if I plop in an add node? This acts similar to multiply, but instead of multiplying, it adds two inputs. So, imagine I add Voronoi with simple noise. What is the result and how does it differ? Well, if I remove the connection between simple noise and add, I seem to get this mosaic effect. Pretty cool. As a beginner, this is how you can explore the tool and understand how nodes connect and their different use cases. For example, how could you use Voronoi to hide cell shapes in your sprites? You can pause the video and try and figure it out yourself. Hint, you'll need to use the alpha channel here as well as the step node, which we saw in our second shader example, and an invert color node. We've never used invert color, but see if you can make this work just by experimenting and trying various connections. Okay, solution. Connect the output of Voronoi with step. This will make a nice crisp mask made up of only black and white information. So, no smudgy grayscale. Then, if I connect that with alpha, you'll see I get cells that are visible and everything in between is transparent. Now, what if I wanted the opposite? So, transparent cells. Well, I could use my invert color nodes, connecting the output of step with invert colors, and then connecting the output of the that with my fragment alpha. And there we have the desired results. So, hopefully this introduction to Shader Graph has got you excited to explore the tool much further and see only as a bunch of scary nodes and mathematical formulas, but more like a giant playground in which fabulous effects can be discovered. Thanks so much for watching, guys. Like the video if this was helpful. Make sure to subscribe to the channel so you don't miss any future game dev videos. And remember that if you want the project files with the sprites and shaders made and used in this video, then the link to that is in the description. Okay, stay tuned. Cheers.