Sprite Dissolve - 2D Shader Graph Tutorial

in this video we're going to make an awesome sprite the song shader using shadow bruh we're going to have our character use the shader and through a simple script we're going to make it to solve and reappear let's begin [Music] hello and welcome I'm your code monkey and this channel is all about helping you learn how to make your own games with nf2 torrents made by a professional indie game developer so if you find the video helpful consider subscribing okay so this is what we're trying to make over here I have my player character looking normal and I can press a key and there it is the player sprite dissolves with a very nice good looking effect and press another key and there you go he starts and reappears as you can see the song effect looks very nice and even as a great-looking outline glow the glow color is nicely customizable as is the speed of the dissolve as an example over here I have two objects these are meant to represent teleporters so I can go all the way over to the input teleporter and there you go he starts to solving teleports and reappears and there it is a very nice use case for this effect so I go there and search disappearing and reappears and it looks very nice so here you can see a great effect all done through graft and control using a very simple script alright so this circle let's get to it okay so here I am in my starting empty scene let's go into the project files and in here right-click we're going to create a new shader go into the 2d renderer and make a sprite lit graph let's call this the this song Taylor alright let's open it up so here we are in our shader graph and we have our nice sprite master node so the first thing we need is our texture so we go up here create a new property for a texture 2d let's call this the main text since this is our main texture and in here let's make sure we set the reference to underscore main text this is the default name for the primary texture okay now here on let's choose the default so I chose my spreadsheet and here on the preview and let's swap it into a quad okay so far so good now let's drag the texture onto our board and now in here as you can see we cannot drag it directly into the Congo right so we first need to add a simple texture node then we drag our texture onto it here's our texture and we have the RGB and we can pass into the color and there you go there's our nice preview so just like this we have our texture being rendered some what's tested so here in my scene I have my play your script then in here I have the body which contains the material the material is this one in here so you appear to some like the shader going to shader grafts and let's select the dissolve shader and there it is with our texture okay let's test and if there's a character just standing around okay so far so good back in the shooter graph the way we're going to do our this sound effect is with using some noise so let's go here to make a simple noise pattern so we use simple noise there it is now here we can play around with these valleys to get something that looks good relative to our texture so in here and let's just put 100 now we want to apply this noise onto the texture alpha so here on the sample we can grab our texture alpha and let's multiply it with our noise output and just like that you can see what the texture looks like so without it our alpha is completely full and with the noise applied there it is just like that so then we can take our calculated alpha and let's make a combined node and with this combined Nodin let's combine this calculated alpha with our original color so drag the our DG and the P and there it is there's our texture and now we can pass in the RGB a onto there and just like that you can already see the preview is no longer around for alpha some parts are more transparent and somewhere less so let's see it in game and there it is as you can see some parts are more transparent and some are less so right here we kind of have just one frame of our dissolve animation now we want to start with it completely visible and end with it completely invisible so back in the shadow graph in here before we apply our noise directly we can use something called a step node here we have an edge and an input value and we have our output so let's put the noise into our input and over here we have a value that we can change from 0 to 1 now what this does is it steps through all the values in our noise and shows the values that are under this threshold so if I put 0 you can see that the whole thing is black so everything is at 0 and if I put point 1 then you can see only the values under point 1 show up in here so if I put 25 you can see it starts to appear more and if I put 1 we have pure white so using this value here essentially we can animate our way through the noise now we need this to take this output and multiply it in there and there you go just like that you can already see it working so in here if we start off at zero then the sprite is commonly invisible and if we put that one it's completely visible so there you go just like that and here's how it looks in game as you can see some parts are fully white and some are only transparent okay now instead of having a fixed value in here we can make this into a properly so it's making you vector one let's call this the the song amount let's set the reference name to the same thing this whole amount okay by default let's put it at 0.5 and here on the mode and let's put it a slider slide from zero to one just like that okay so now let's drag the song mount in here and we connect this directly into there okay so now let's see how this property looks in game and yep there's a sprite somewhat visible somewhat invisible and here in the inspector you can see our shader with this song of amount using our nice slider so in here as I increase it there you go the sprite is fully visible and as I decrease it it starts to dissolve and couple it vanishes all right awesome this is exactly the effect that we want so now that we have this nice value let's make a script to change it through code so let's make a simple C sharp script let's call this Li the song effect and drag it on to the player okay now in here this is going to be an extremely simple script so first of all the first thing we need is our material so let's add a serialize field for our material so just like that we have our films on let's drag our spreadsheet material and if there's our field for the material so let's just drag the spreadsheet material okay so far so good now in our script let's also define a float for the song amount and a simple boolean call is dissolving okay now let's make a party boy update and honor update on let's first test it is the something is true if so then let's simply increase it the sound amount by time.deltatime then let's make sure we clamp it between 0 & 1 okay so we have our dissolve amount constantly increasing if this is set to true and now we need to do is apply this into our shader so the way we do that is we go into our material and we call the function set float and in here as you can see it takes a name and a value so the name is a reference that we set in our shader so here you can see that we set the reference to be underscore the song of amount so this is the name that we use so we set the float on the the sound amount to be this the song amount alright so that should do it now for testing let's just simply go down here and do a simple input so when we press T we similarly set is the solving to true so then this increases the dissolve amount by the time dot all the time and since the float on the shader alright so there it is very simple let's test ok so here we are and the character is actually invisible because we said our this song amount to be inverse so won't fix that later but in here with it invisible now if I press T and there you go it started to appear and it's fully visible alright awesome this is our effect now it's just as the opposite so if it is something we increase it and if not we decrease it so just like that very simple now here just add another input okay there it is let's test okay it's invisible press T and there you go it starts to show up press Y and there you go advantages so it shows up and it goes what all right there it is there's not a nice effect now let's just swap out the the self amount to work as it should be so here we called it the self amount so it makes sense for it to be fully dissolved when the value is at one rather than when it's at zero so we can fix this very easily we just had a 1 minus node and we simply take our the self amount and we do a 1 minus then we use this output in our step so now with the solve amount of 0 these price is fully visible and with a 1 it's fully invisible alright let's test it in game okay there it is fully visible now I press team and there you go it starts to vanish now press Y and it comes back so it goes away and regenerates right there's our very nice effect awesome all right so another we have this working let's polish our effect a little bit we're going to very nice corn outline when the sprite is the solving so here's our working shader graph we do a step and then we multiply the Alpha by the step amount and we apply it into the final color alpha now in order to have an outline what we really need is to have a color that is essentially one step further than the normal alpha so let's go here into our dissolve amount except we never use it we use it after the one - okay so in here let's add a add node this one takes a value and adds another one so we take this output in here and we're going to add it by a tiny amount so let's put 21 what value we put here is essentially the thickness of our outline so then with this value we can do another step and we use the exact same input and use this one as the in value and just like that you can kind of see the effect working so you can see that this one in here has a bit more areas visible than this one so if I put this on mount a bit more there we go you can see this one has this amount in this one has this amount so with this one being bigger than this one we can do a simple subtract so we're going to subtract this one by this one so in here essentially we have the edges the difference between this one and this one so then we can simply use a nice multiply node and we're going to grab the Alpha from there multiply it with this one and just like that you can already see kind of the effect and over here you can already see that this one has a bit more than that one so we can now multiply this by a nice cone so let's make a properly a new car come with me the salt color let's make this HDR so it looks very nice with a nice glow and by default let's put it on some blue okay so we can now take this color and essentially we just have another a multiply node and we multiply this color by this one and there you go you can now see the outline with our cone and finally when we need this to add this one on top of this one so let's push this to the side and in here we're going to make an add node and we add this one onto this one and there it is you can already see the preview and let's put the output in there and just like that on preview you can already see our effect okay so let's test it okay here's my nice character now I press and there you go it vanishes and looks really nice with that nice outer glow so we have a nice dissolve color and it's nicely glowing so there it is a very very nice effect all right awesome all right now one more thing let's improve our script so in here and let's get rid of this keyboard input and inside let's make some nice functions so we make a public void start this home and in here we're going to receive a point for the the song spin and on we're going to do is set is it something to true we're going to store the dissolve speed and up here we simply multiply the song speed by hour down to time okay now another one to stop this whole thing then you simply set it to false okay so here we have a very nice very simple script you know here on the map I have these two sprites these represents some teleporters so the player goes here and gets so important on there it just has a very simple Tom Porter script and in here we simply test for ontriggerenter and if it's a player we simply teleport them to the target position let's see okay here I am with the player let's go in here and after a while boom there you go nice thumb part okay great so now in here in order to make the teleport look better when the player enters and let's start our dissolve so we can go into the collider to get the component of type dissolve effects and we simply call start this only and then after we teleport we stop the Sony alright that's it very simple let's test okay here we are there's the nice character now let's go in here in there Yotam poor starts and he shows up and it appears so let's go just like that go and boom there you go all right very nice we can also play around in the corner if we like okay so here we are I've just published a bit more so in here I have the start dissolve and they stopped self corners the way it's a point is very simple on these functions we also receive the color and we simply go into the material we call set color to set our the self corner to this corner alright so very simple let's see what this looks like okay here's my player character know what's going enter into the teleport and there you go starts to solving and teleports and reappears and there you go the effect was very nice so go in there starts to solving with a nice blue and appears with a nice green so just like this we have a very nice effect and looks very cool there it is and he shows up and yep just like that awesome and again here is the final shader and as you can see it's actually very simple all that we really need to learn is how these step works so we use noise we go through the step so we multiply it by the Alpha which n modifies our output and by making a second step that is a bit ahead of the other one then we can multiply it by a color and we have a very nice outline and here it is again we have a very nice very good looking effect just like that awesome as always you can download the project files in utilities from unity code monkey comm subscribe the channel for more unity tutorials post any questions you have in the comments and I'll see you next time [Music]

Channel: Code Monkey

Views: 53,473

Keywords: unity shader dissolve, unity 2d dissolve shader, unity shader graph, unity 2d shaders, unity shader graph sprite, unity shader graph tutorial 2019, unity dissolve sprite, unity shader graph tutorial, unity shader tutorial, unity 2d shader tutorial, unity shader graph 2d, unity 2d shader graph, code monkey, brackeys, unity tutorial, unity game tutorial, unity tutorial for beginners, unity 2d tutorial, unity 3d, unity, game development, game dev, shader graph, shaders, shader

Id: auglNRLM944

Length: 14min 38sec (878 seconds)

Published: Thu Nov 07 2019