Shader - Dissolve Effect - [Tutorial][C#]

hey what's up guys welcome back to another shader tutorial today we're taking a look at a nice dissolve effect as you can see right here on the screen and this one is controlled by a script which means that you can call this at pretty much any time you want in your game such as set press on my button again you're going to see a devote dissolving the land again and again so we're gonna be taking a look at how to do this today it is quite a simple process actually and we're going to be seeing a new function that we haven't seen before on inside of the hlsl language or sorry CG CG language so as always with these video I tend to just get rid of everything you have right now put all this away and we're going to start over again so let's start by creating in you dissolve folder which I have right there and then I will go ahead and create a new material let's call this one result and I'm going to put it on top of this thing my kind of little island that I've been playing around with for a long time now and on this thing I'll also create another material so so you have a material a shader so shader on my shader it's been a very long time since I haven't made a video so I'm messing up a little bit but don't worry about that it is easy to pick up again okay so first thing we have our shader right here as always we're going on the very top and change your name of it let's put that in the n3k folder and then just call it dissolved in terms of property we're gonna need few things in here we're going to need the main texture as always these is sole texture and this one is quite funny but you'll see what it does a little bit later on actually gives a shape to your kind of dissolve so this is a dissolve texture and then this is going to be 2d because it's a texture default on white just like the just like the main texture always the same exact thing and then we'll go with another property called dissolve why this is going to be some kind of um when we do when we do alerts we use a transition float the dissolve Y is going to be what keeps track of the current point in the world we're currently dissolving so current y of the dissolve effect and this is a float we assay by default is going to be equal to zero because we haven't started yet and then we're also going to have something else here the sole size which is going to be the height or oh I'm sorry another height bug the length of the dissolve so size of the effect is what I wrote here it's going to be a float and by default I'm going to put that on site two that's two meter by the way okay and I'm also going to have another another property dollar called starting why you know exactly where we can start our effect because in my in my actual map right here now the starting Y property is going to be used so in case I have object that go beyond the l sorry but beneath zero we can also start dissolving them a little bit earlier so if you have a look right you have my player if I bump is y to zero that would be fine like he would start actually that wouldn't be fine because the pivot point is the center but just as human things like that so he is literally just standing on top of the grid what would happen is would get a perfect there's all starting at frame one and then it would go up but now if we have object that go beneath that just like my piece of land right here this all defect would start right here in that one so it kind of be like not good-looking so the starting wise can like give us a point in the world say we say minus ten like we did in the default it's going to start at approximately here so the effect is going to start right there and then go up so that's what am I starting Wyatt is for enough enough talking about this let's go back and code this thing so starting Y is the starting point of the effect it's going to be float and like I mentioned I'm going to default that on minus 10 which is like a safe zone I guess not a lot of my scene go beyond or sorry be neat minus n because that's you know that's minus 10 meters okay if we go down a little bit in terms of friend or type we're going to keep that on a buck that's fine and now for the bus it is a fairly simple shader we only need one pass there is only like one function that's going to make everything happen basically so let's just keep it that way CD prime is fine this is line I don't like playing around with fog she must know that by now we're including unity CG CG Inc of course AB data we want to keep the vertex position that's fine let me zoom in on that a little bit sorry about that we want to keep the UV just we're drawing our texture I am NOT going to keep the fog in v2 F we're going to keep this that's fine a vertex position also very important in our case but we're going to keep another position a float 3 weld position and since this one isn't really given to us by semantics we're going to put it under text chord 1 so we're going to overwrite text coordinate 1 just to put our data in it we're not using text chord 1 ok so if we go down a little bit we have a bunch of you know we have a bunch of property that we declare on top let's keep these two because that's we're drawing our texture but we also have more we have the assembler 2d the dissolve texture and what I like doing here when I'm not sure I'll just grab all this copy it paste it and then I'll remove it afterward so we have like the sample 2d dissolve texture that's fine now we need the dissolve why so float these old why and right after that we've got D float this is old size and finally D float starting why we're going to be using all of these in that single pass that's why I declare well basically that's why I declared them all here ok now to the vertex shader the vertex shader is going to be the same exact thing as we always do but we have one thing to calculate first we have to calculate the well position this is what I put right here so to do this we're going to be using the same exact matrix as we always do we say oh well boss which is where we declare up top is equal to multiply we multiply by unity object to world just like this and we take in the V dot X XYZ oh sorry this has to be outside actually and just like this we now have our world position what I'm also going to be doing is get rid of the fog all right so fix for frag this is for drawing the actual pixel on top let's get rid of the fog and this is where the magic happens so the function I was mentioning earlier is a simple function called clip now clip what it's going to do basically is some clip takes in a number right here so a decimal number say float and if that number is beneath 0 it's not going to render a pixel on the screen so that means if we put that on say -1 just like this and we say and then it hit save we go back in here oh we do having a little hair here forgot my semicolon ok so we go back in here and then we apply this shader to this object so I drag and drop my dissolve shader on this technically I should not be able to see anything now for some reason but oh I forgot to put my dissolve shader on n3k this old here it is so technically just like this we don't actually see any color on this and that's something have a texture we can put a texture on it that's fine same texture as always the problem here is that since we have minus 1 in here nothing is being render if we put that on 0 then everything is rendered so as long as it's above all right above or equal to 0 then it's going to render the pixel so this function gives us a really nice way to just play with what we see on the screen so I'll just make a quick example like this let's use a random random example we're going to take the vertex position in the screen so say i dot vertex dot we can do X so I invert X dot X is equal to basically um the pixel is going to be say we're on that pixel right here that I'm pointing at right on with my cursor that pixel right now is on 0 and if we go right there then it's half of the screen in pixels I don't know how big this is this would be say a hater it takes also right here would be the 400 pixel line now what I'm going to do right here is just say modulo then see what happens nothing actually oh sorry one - all of this there we go and as you can tell we just got bunch of pixel that we could see on the screen now I don't know if it's clear as clear to you as it is to me because of the video compression let me just bump that down a little bit maybe five there that's that's much clearer so as you can tell it's just cutting the pixels so we don't see them anymore now we're going to be using that same exact function to basically emulate a dissolve effect so let's go right back at this and let's start creating a an actual formula and an actual algorithm would use our world position so I look at the very top right here I'll say float on transition is equal to and then take the current dizzle why I'll straight this old why and do - I dot well position dot why none my clip function and it doesn't matter which which order this is I'm going to go ahead and just start with my starting Y and then that's going to be the starting point of our equation so that's starting Y we're going to say it's plus and then we'll use our transition float and we'll go ahead and multiply this by the UV of the dissolve texture so let's do text 2d dissolve texture and then take the UV of that little texture and then we'll say times dissolve size we have enough parentheses I think I messed up my function let's go have a look so undeclared transition it's right here o type on my bad so if we have a look at this now we still have an error we're missing or we have something more let's go and remove this and here we go so our effect right here is a little bit hard to see I'm actually glitched right now for a second there we go we have our dissolve right here and we have this starting point so the starting point of the effect is - if we play around with the starting point as you can tell it goes up and down now if we play with the size of the effect you're going to see that we have more a lot more leverage in this thing so it's logged bigger let's give a smaller effect to say five meters and I'm just going to be putting that back on default values of -10 now what we have to do at this point is play along with the current Y of the dissolve effects so that's the dissolve Y and the code this way it can go up to here and just basically complete the whole thing slowly but surely so we have to do this via code of course we don't want to be dragging our slider manually while the game plays because that's not going to work out when you have some end users so to do this we're going to be controlling it via a script so let's go ahead right-click on the dissolve I'm going to create a new C sharp script call it the dissolve effect trigger or something like that doesn't really matter what name you give it and we're going to jump right into it so it is a fairly simple steps float as you've seen before when we did this kind of script aful we'll need the materials so that's dissolve material we'll need a public float speed and also I'll put a max so it doesn't keep incrementing all the time and then finally those two float right here they don't need to be public they can be private so current Y and start time what I'll do right here create a update and in my update so let's do if this is during the animation so if current Y is bigger should I do bigger or smaller if it's bigger than max actually if it's smaller than max then it means we are currently playing the animation so dissolve material set float and then we get it set the float so send a string the value is going to be current Y so what is the actual string with n in it is the is either a int for name ID which I'm not quite sure what it is or a string for name now the name of this actual parameter want to change is at the very top right here is a property actually we want to change dissolve y so let's go ahead paste it in here and then we can say current y plus equal times a delta time times speed and just like this we managed to create our effect now I'm going to be able to control this actually I want to be able to control this with a public function it could be public could be private really doesn't matter if you want to trigger it from somewhere else and of course you want to make it public so another object in the scene can access it but in my case I'm going to be putting everything into a single script so I'll just go down here type a quick input get key down so if I press on e so key code e I'll do a trigger effect that is a function I currently don't have so it's go ahead and generate it here it is and it's gonna be simple simple thing so start time is equal to time dot time and we'll put the current Y background zero now when I start the game it should actually trigger the animation and what I press on e it should trigger it again of course we need to put our scripts somewhere in the scene so I'll just put it on the object itself I'm on the debug platform which is my piece of flan right here I'll put my dissolve effect trigger and then let's actually set the parameters so we need to put the material here it is the speed we can go with one meter a second and the maximum something crazy like 500 over five five thousand and if we hit play now we actually fall with all their guys let's put our put our guy back in the center there is and as you can tell our effect plays at one meter a second and if we press e is just going to start over again now you could actually configure it so when you press e can go the other way around you can play around with this effect as much as you want really and also just a quick note before we end this let's have a look at the dissolve texture because this one is actually going to affect the way well your dissolve look so if I actually change this for say this one as you can tell it plays with the dissolve effect it plays with the actual UV of this texture and we get a whole different effect actually let's see if we have another one it's not going to work that looks weird actually but as you can tell we get a whole new different effect for every single texture you have and that is actually where we're going to be ending today's episode it was a short one we're making short videos nowadays because we're working on a much bigger project are going to come out quite soon guys so thank you so much for tuning in again like I said bunch of new things are coming really really soon just stay a little bit more patient we have the subway surfer lunching fairly soon and other than that guys I will catch you on discord I hope you guys have a wonderful day and I'll catch you later

Channel: N3K EN

Views: 24,556

Keywords: unity tutorial, unity, unity 5, unity 3d, 3d unity, unity 5 tutorial, unity mobile game tutorial, unity android, N3K, N3K EN, N3K tutorial, dissolve, dissolve shader, outline, pixel, vert, vert shader, pixel shader, unity 5 shader, unity 2017 shader, unity 2018 shader, unity 2018, shader, unity shader, unity shader cg, cg, cg language, hlsl, unity cgprogram, cgprogram, material, deintegrate, deintegrate shader, normal, world, world position, unity shader world, world position shader

Id: Kc2IUveUiZI

Length: 16min 30sec (990 seconds)

Published: Tue Jul 11 2017