Get STARTED With Shadergraph in Unity

hey guys if you want to create anything more than just really basic visual effects for your game then you're going to need to learn how to work with shaders it's a really intimidating topic but my hope is that by the end of this video it's going to click for you and you're going to feel comfortable enough to go in and start experimenting and creating your own shaders so this video is for you if you are brand new to shaders or if you're still a beginner working with shaders ready let's go so I'm going to be showing you 2D shaders since we're working with Sprites and with 2D shaders for 95% of what we'll be doing in Shader graph there are only three things your Shader is going to be doing it'll tell Unity whether or not the texture is affected by light it's going to determine what parts of the texture are opaque or transparent and it's going to determine what color the texture or certain parts of the texture are that's really it for 95% of what you're going to be doing with shaders now you can go really deep with shaders there's definitely a lot more that you can do but to get started the majority of what you need to know is actually very simple you just need to be creative with a few basic principles and know a small handful of really really useful nodes so let's get into it by first creating a new game object and I'll add a Sprite renderer to it and give it a circle Sprite here if we are using the universal render pipeline which we are here the default material is Sprite lit default always so let's just recreate that and then we'll do some more fun stuff soon enough create a new Shader graph under the urp section and we'll select Sprite lit graph and let's open it this area over here is for your properties which will act similar to variables in your code what you put here if you mark them as exposed will show up in the inspector we've got some graph settings here and our node inputs over here for most of what you will be doing base color and Alpha is all you're going to need to get by I'm not even going to talk about the rest because they're a bit more advanced and honestly I still don't know what they all do so we're trying to recreate the Sprite lit default Shader we said which means all we want to do is have this Shader read the Sprite from the Sprite renderer and show that on our screen very very basic stuff so to do that we need a texture for the Sprite renderer to read so let's create a new texture 2D here and I'm going to choose my circle texture okay let's drag that in now to see it we need to sample it and here is one of my biggest gripes with Shader graph sampling textures some sometimes looks wrong I'm going to go ahead and plug in my character instead to show you what I'm talking about but when you're looking at it there's actually nothing wrong here what we're seeing is the actual real RGB values of our texture without Alpha so just know that when you're sampling your texture it's often going to look a little bit strange but that doesn't mean there's anything wrong all right anyways to get this showing drag the rgba into the base color and the alpha into the alpha here and save so let's create a new material from that Shader and apply it to our Sprite now you'll notice up here there's an error saying that we don't have an underscore main text property and this also isn't going to do what we want because if I change the Sprite on my Sprite renderer it's not actually updating the texture properly to get this texture to read from the Sprite renderer automatically we have to go back into our Shader and rename this texture to main text and it's worth noting it's not actually the name that matters it's the reference here whatever you name a property it's going to be called the same thing with an underscore in the reference so underscore main text is what we want in the reference so save that now when we change our Sprite the texture down here changes as well okay now let's talk about light really quickly when we created this we created a new Sprite lit Shader graph what exactly does that mean well I have a 2d light in my scene here and if I dim that my Sprite will slowly start to turn black meaning this Sprite is affected by 2D lights we could turn it into an unlit Shader like this now once I've done that no matter what I do with the lights the Sprite is just always going to show meaning it's not affected by the lights so whichever one you want depends on your use case but if you are making a Shader for fire or Sparks or you know most kinds of magic effects you're probably not going to want them to be affected by light now let's take a look at controlling which parts of the Sprite are transparent and which parts are not I'm going to close this because I hate that it doesn't look like a circle but if we preview it this is what Shader graph is actually going to display okay all right so Alpha is just a value between 0 and one all colors are actually you've got red green blue and Alpha each of those is a value between 0 and one and Alpha is very easy because black is zero and white is one so once you get a feel for what adding and subtracting or multiplying and dividing these color values actually does you can start getting creative pretty fast it's just hard to wrap your head around at first so to give you an ex example of what I'm talking about I'm going to bring in a gradient noise node noise is very common in shaders these are your three main noise functions and you will probably use all of them a lot but for now I'm just going to stick with the gradient noise now if I multiply this Alpha by this noise suddenly our circle gets filled in with this noise why does that happen when we multiply them remember that black is 0o so 0 * anything is 0 so this stays the same and then all these blacks and Grays are getting added in because they are multiplied by white which is one anything * 1 equals the original thing you multiplied it by right it's just simple math but it is hard to wrap your head around it because they're colors so it's hard to visualize it until you get used to it so if we had added them instead of multiplying the middle was already all white so it'll just go into a more intense white in certain sections of the circle which will make more sense before the end of this video meaning by the end of this video you'll understand what happens when you have a color value that is greater than one now we've got some options here so let's just have a little bit of fun we could plug this into the color and have our Circle have this nice noise pattern on it or we could plug it into the alpha again we have to remember that Alpha is just a color between zero and one zero is black white is one so now all the black parts will be the most transparent when you plug something into the Alpha Black equals fully transparent white Parts being fully opaque okay so to Showcase this a little bit better I'm going to bring in my character actually and get rid of this circle now bear in mind if you have a character with multiple body parts with their own Sprite renderer each of those Sprite renderers are going to need their own material on it but see now because of that noise that we plugged into the alpha he's partially transparent in certain areas okay so let's take a second to talk about UVS you'll notice our noise has a UV input here scale does what it sounds like but what is a UV a UV is is basically like a vector to position on a texture you can think of the bottom left to be zero on the X zero on the Y and the top right to be one on the X and one on the Y so how does this help us let's add a tiling and offset node in here which is arguably one of the nodes you'll use the most in your shaders ever the tiling and offset node is a UV node meaning it contains our entire texture but it has a few more options that we can play with so what happens if we stretch the UV of our texture and if we plug this in over here here it will literally stretch this noise and if we offset it we can just keep on scrolling noise is procedural so you can do this infinitely to get a random noise pattern so here is where you can start getting really really creative with stuff and let's say what if we wanted to animate this if we add in a Time node and we want to be able to control our scroll speed this is an X and Y over here so let's create a vector 2 up here called scroll speed and default the X to 0.1 and we're going to multiply Time by this Vector 2 and plug that into the offset now suddenly you have this nice infinite scrolling noise and you can do the same with any of our noise nodes and actually you can plug this into the angle offset in the voro node as well to get some really interesting effects going on all right let's have a little bit more fun with this let's say we don't want any gray we just want it to be either fully transparent or fully opaque the step node is really great for that because it will display anything in full white only if the value is below this threshold so if we plug this in over here instead you have the beginnings of a really cool dissolve effect starting to happen now if we were going to make a proper disolve effect what would really make this look better is if we had a nice glowing outline around the dissolving parts so knowing the very basics of what we've already covered in this video we can already do this because we just need to get a little bit creative with some very basic math we can take a look at this and say okay if we take this but expand it to be just a little bit bigger and then subtract those two values from each other maybe that will give us a really nice looking line let's go ahead and try it I'm going to turn this into a float called dissolve threshold then I'm going to do this again but also add another float called line thickness so we've got dissolve threshold plus our line thickness it's going into a step node from the same noise and then subtract this one from the other one and there you go that worked and since this expands out further than the original we want to plug in the second step into our multiply here since that gets plugged into our Alpha because this line is white we actually want it included in our Alpha right because anything white in the alpha is what actually shows up on our texture that's what makes it opaque I hope that makes sense we want the line to show so we want it showing in the alpha as well so we have to add it in so that's the alpha but to actually get it to show as a color let's add it with the original texture color we're just adding this on top of the original there you go right it seems really complicated but if you look at this Shader a good chunk of all the nodes we're using are just basic math adding and multiplying Etc all right next how can we make it so that we can change the color of this line we want to be able to control the color of it we use multiply you want to change the color of something use a multiply node then once that's done we need to swap out the connections so that we're using the colored version instead of the white one okay so this is a good time to talk about a mission because I'm seeing that happening on our character right now and actually I want to get away from this example because this is not a dissolve Shader tutorial I have a much more in-depth tutorial on that topic which you can watch right here what we're doing right now is just learning the very basics of Shader graph I don't want to get too complicated with this so we're going to work with the new example let's say you have some particles and you want to make them glow in your scene how can you do that let's create another Shader and we're going to start exactly the same we need a main text and we need to sample it now there are two ways to use a mission when we're working with 2D shaders number one is you can multiply this by an HDR color which is a method you will see very very very very commonly HDR means High dynamic range which means this color can have an intensity value applied to it between minus 10 and 10 so if we multiply the texture by this HDR color and plug that into our base color and use the alpha for the alpha you'll see that yes in combination with our Global volume these particles are glowing once we swap out their material for the one we just made and there's nothing wrong WR with this approach but in this particular scenario this is for a particle system I want the color to derive from here or from here not from our Shader itself so again everything is just math it doesn't have to be a color you don't have to use HDR color the value just has to be greater than the threshold on our Bloom so we can literally just create a float and multiply this color by that emission multiplier and there you go this one also doesn't have an arbitrary limit of 10 and we can use the color up here or the color over Lifetime and still get that nice emission on top of it really quick I want to bump this back and show you the different blend modes that you've got everything we have been doing is on the alpha blend mode meaning each Sprites Alpha is controlled by only the material from this Shader but we have other options at our disposal let's change this to additive real quick notice I've set the emission to one so we wouldn't really expect a glow but if we duplicate this particle system they start glowing when particles go over top of other particles literally meaning the alphas add together the alphas add what is in the background so this can be a great blend option for fire or magic and different effects like that I'm going to go ahead and be honest and just say I have no idea what premultiply or multiply or for or why I'd use them if you know then leave a comment down below because I'm really curious to know particularly if you have a specific use case for when they would be good to use okay and since we're covering the basics and one of the most important things you're going to want to know is how to actually affect this Shader with code remember how I said the name isn't important it's the reference when we renamed our texture to main text remember that's true when you're coding as well so let's copy this reference here and create a new script called change emission what I like to do is use the Shader do property2 ID function which just lets us save that string we just grabbed as an integer that we can now reference so first to change a Shader we change it on the material Level not the Shader level so let's get a reference to our particle system renderer and get the material from there next I'm just going to set our emission value based on an arbitrary increment value that'll get brighter and brighter over time because this is just a really simple example so to actually change this emission multiplier property we created we get the reference to our material and say dot set float if it was a color we'd say do set color etc etc right there's lots of different functions but we set up a float so we're changing a float and we'll use this int we created up here and set it to our incrementer value and let's place that script on our particle system and there you go I hope you found this tutorial helpful like the video if you liked and thanks so much for watching bye I'd like to give a very special thank you to all of our Hall of Fame patrons yakob yandu Christopher Nichols zandre Kesler fontain weight brain waves to Binary couch KB at bird Tech games and Ian oral as well as our Early Access patrons Ken wa Mason Crow liquid egg Alexander prus Jude gaves Felipe gamos do Santos obber Franchesco lamata Bill guo Al Mars Alex fredman Danny rli Neil Ben kerger Minon Tran maurio TOA Stephan Jamie Kev Connor Burnham kandros and r e if you choose to support us on patreon you can get early access to all of our YouTube videos monthly Alpha bills and more

Channel: Sasquatch B Studios

Views: 5,765

Keywords: unity, unity2d, unity tutorial, sasquatch b, unity beginner tutorial, unity learn shadergraph, unity shadergraph tutorial, unity shadergraph for beginners, unity how to make shaders, unity shader graph, unity shader graph 2d, unity shader graph basics, unity shaders 101, unity shaders 2024, unity shaders for noobs, unity shaders for beginners, unity how to use shadergraph, shaders, unity materials, unity particle glow effect

Id: 3nyi2pv18fQ

Length: 16min 27sec (987 seconds)

Published: Thu Jan 11 2024