Simple Wind Shader Effect in Unity!

in this video we're going to make a really simple but really nice wind shader effect you can easily apply this to grass leaves trees or really just about anything you want to make its way back and forth there's also exposed parameters to play around with the intensity of the wind let's begin okay so here let's check out how to make a very simple grass wind shader effect now this is really simple to do and it will really make your game stand out for example here in my scene i have my basic player character and there's some random bushes in the world everything looks way too static which makes it quite uninteresting so let's make our bushes way back and forth with the win by the way i also use this exact effect in my course for the builder defender game the course is 10 hours long with over 15 lectures nicely organized into distinct topics it teaches you everything on how to make a game starting completely from scratch until the final polished game the lectures are all presented as clear step-by-step tutorials just like these normal videos it teaches you about how to make a building system resource management enemy ai world building post processing polish and much much more so if you're looking for a guided step-by-step course on making a complete game from start to finish then check the link in the description to pick up the course alright so let's make it this video is made possible thanks to these awesome supporters go to patreon.com unitycodemonkey to get some perks and help keep the videos free for everyone on the project files let's right click go into create we're going to create a shader and in this case go into the 2d renderer and we're going to create a sprite like graph however everything we're going to do works the same in any other graph so if you're working on a 3d game it won't work pretty much exactly the same let's name it wind effect now here's a quick tip for making a material using shader instead of right clicking on top of a folder or something right click directly on top of the shader and going to create create a material and it will automatically create using that shader so just a very simple quick tip so just this for our wind effect and now if these bushes in my case are set up inside prefab so just open up the prefabs and inside this is just a normal sprite render so just apply the wind effect material okay i've applied the material to all the different grass types however right now we can't really see anything we just see some white blobs so let's open up the shader so double click and in here hit shift space in order to make our shadowgraph phone screen and now in here if you're not familiar with shadowgraph check out my quick getting started video it will teach you the absolute basics now in here the first thing we want to make is make our basic visual so we need a basic texture so a new texture 2d for the main text and with the reference underscore main text and let's default it to one of these bushes then we just drag the texture we need to sample it and then we pass in the colors into the color field alright that's it let's also enable the main preview and right click and swap it onto a quad all right that's it let's hit save and yep we have all of our nice static bushes okay so far so good now the way we're going to make this way back and forth is by moving the vertices so if we go back into the scene view in here you have a little drop down menu so you click on it and instead of shaded we can select wireframe and if we do now we can see the actual vertices that make up each of our meshes so down here let's zoom into this bush and you can see all these tiny vertices so if you go back into shaded if there you go and if we go into our frame yep there it is we can see all the vertices now since this effect will be based on moving vertices it's very important for the mesh to actually have these vertices so if you go into the sprite import settings here it is and yep it's a normal sprite and in here you can see a film for the mesh type so you have two options tight or phone wrecked so if it's unlike tight it will create a complex mesh with the shape of the visual sprite or you can set it to phone rect hit apply and there you go now it just takes the shape of a normal quad so again since this effect will be based on moving vertices we want as many vertices as possible so in order to make this work we need to make sure that we are using tight and there you go we have all these vertices all right so back in shader over here on the master node we can see a parameter for the vertex position so this will impact the position of each specific vertex and now the way that we get that position the position that is in there by default let's just add the position node and okay here it is then on this drop down menu we can choose which space we want to use so you can get the world space position which will give you the absolute position of the vertices in the world space or we can choose object for the actual positions only the object local space which is what this one is by default so if we connect this one to this one nothing changes since that's what was already being used but in our case yep that's what we want we want the object then we just want to play around with this so we can test to see what this is doing let's create an add node and we're going to add this position and let's set it just by one on the x and then use this as our vertex position and right away in there you can see that the sprite shifted to the right and if we save there it is every sprite is slightly moving to the right you can see compared to the shadow position so every one of those has moved to the right by one unit so that's what modifying the object space position does it modifies the actual position of each vertex so with this you can already imagine how we're going to achieve this effect we just need to apply some swaying movement over here to our object space position now the way we make them sway back and forth is using some really nice scrolling noise so let's position this correctly place the collar down here since we're not going to touch the collar and now up here let's add node of gradient noise there you go you can see that now again always remember that colors really equal numbers so in here on the black we have zero and on the white we have one so we have noise going from zero to one and now if we take this and we add this to our add node in there you can see that all of the vertices moved according to the value on the noise gradient so by modifying the scale you can see yep there you go it's changing quite a lot and again this goes from zero to one that is why that one is shifted to the right and up by one on each side however in order to do that we're not going to modify the scale but the uv in here which will make a scrolling texture so in order to see this in action let's add a time node so this one has various parameters related to the time so the first one is just a constantly increasing float so we can take this and connect this into the uv2 and if there to go now you can see that it's constantly moving however with this we are shifting all the vertices by exactly the same amount so let's sample the gradient noise on different positions depending on the object space so let's actually move this and make another one in here and we add these two and then sample the gradient noise so now each vertex is grabbing a different position from the gradient now if you want you can play around in here with the scaled noise if you want more or less separate areas on each vertex so for example if you put it less there you go it looks much more smooth and you put it insane then it looks well insane so just like this looks pretty good so if we save and look and if there it is we have all of our bushes swaying indeed back and forth however you can obviously see the issue which is they are swaying but they are swaying on the x on the y and also on the z so over here in the scene view in a 3d view we can actually see what is going on so each vertex is being moved up down left right and front and back however in our case we really only want to move on the x we don't want to touch the y and the z so let's do that over here on the object position instead of adding them to all of them what we're going to do is we take this we make a split node and that will split that vector 3 into our three components and now in here it says rgb but in reality this represents x y z so again we only want to apply it to the x so we take our add node instead of using all of them we just take the x so we just add on to the x okay and then we need to combine them back so combined use the x that we call it in here and the original y and the original z and now we place all these in there and there you go now it does only sway back and forth on the x axis so yep you can now see the effect in action and now they're only going left and right alright so far so good now the one issue that we can see right away in here is that it's really only swing in one direction so when the noise is at zero then the vertex is on its normal position and when the noise is at one then it goes to the right we want it to sway both left and right so solving that is very simple fix over here we have our green noise and like i said the noise goes from zero to one so if we want to go left and right then we can just take this and we just add a subtract node and we just take this and subtract it by point five so now instead of going from zero to one it will go from minus point five to plus point five so we take this and use it and there you go now it is in the center and goes left and right all right so far so good now the other thing is the effect might be a bit too intense obviously that's going to spin on the scale of your game but if you want to modify that we just add a multiply node and we take this and multiply this by a certain value and then we add it so with this with 2 now the wind is very intense but at 10 it's even more intense and if we put it at something like 0.5 then now it's much more smooth so now we can even make this an exposed property so in here let's make a vector 1 for the wind intensity let's see fall to 2.5 let's make a mode a nice slider so we can play around with let's make it from that to center line five and just drag it and this will use in here so if we test so there's the wind effect very smooth very small and in here we have the wind intensity and as we increase if there you go now it's a lot more intense and as we decrease and now there's no wind and there's a little bit and a lot so we have a really nice property that we could easily set through code if we wanted our game to have some dynamic wind okay so this is looking good however we have one series issue which is right now the whole sprite is moving but the bottom of the sprite is meant to be connected to the ground so we don't want that to move essentially we want it not to move at the bottom and move a lot the higher we go on the sprite so first we need some sort of mask for that effect so with that we can add a simple uv node so there you go we have our uv and now we can take this and split this and again this says rgb but in reality this means x y z and in here from this gradient let's take the y which is the g and we can easily visualize what we have in here with a preview node and yep there it is so as you can see we have black in the bottom and white on the top so essentially it's going from zero to one so this is exactly the mass that we want and we just want to multiply this by our actual effect so let's move all this a bit to the side get a bit more space and then in here we add a multiply node we multiply this gradient by the output of here and then we add it onto there and if there you go now we have the effect exactly as we want it so down here it doesn't move at all and up here it moves a lot all right so this is pretty much the complete effect let's save and test and if there it is all of them are working exactly as intended so at the bottom there's no movement as we move up there's more movement another property we can add is for the wind speed so the wind speed is essentially over here the scale in our gradient noise so as we increase this if there you go it moves a lot more a lot more intense so let's make the same property so we have the wind speed property and we just use it in here and if there it is now we have our property so let's increase the wind speed and there you go yep now it moves a lot more and we can also modify the intensity and if there you go we have a very customizable very nice looking wind okay so this is working however there's one slight issue in here here if i duplicate this and place a whole bunch of wind effects right next to each other and in there you can see the issue when you've got sprites that look exactly the same right next to each other they all have the exact same wind speed so as this one moves to the right then also moves to the right now wind in real life isn't actually like that it doesn't apply the exact same effect on every single position in the world essentially it's ways along the world so objects on different positions should sway a bit more different so let's fix this now the fix for that is extremely simple we don't even need to add anything over here we already add the position or to get the position of each vertex and instead of using from object space let's use it from world space and yep that's pretty much it now if we want we can also just take this and only apply it to the x so we split it we grab just the x and we add it on there and depending on the scale of your game this might not be enough in order to actually differentiate them so then we just add a multiply node in order to make sprites that are physically very near graph from different positions over here on our gradient so just take this multiply by a certain amount and then grab this all right so with this let's test and yep it's working so the effect is now slightly different on each object making it look a bit more natural and again as we already saw they're only using the same material initiator automatically works with any texture so all these different textures they're all working with the same material and they all have the really nice effect then like i said we expose these properties so we could play around with these through code and make the wind more intense in certain areas and a bit less intense in some other areas so there you go like this is a very subtle effect and like this it suddenly becomes way too intense here's our final scene looking a lot more dynamic than the static scene that we start with so here is a very simple very good looking shader effect again this shader was originally created for the complete bundler defender course so if you want to see how this is used as part of a complete game go check out the course link in the description it teaches you everything on how to make a game starting completely from scratch until the final polish the game if you found this video helpful consider liking and subscribing this video is made possible thanks to these awesome supporters go to patreon.com unitycodemonkey to get some perks and help keep the videos free for everyone as always you can download the project fountain utilities from unitycodemarket.com subscribe to the channel for more ent tutorials post any questions i have in the comments and i'll see you next time [Music]

Channel: Code Monkey

Views: 69,668

Keywords: unity 2d wind effect, unity shader graph wind, wind shader, unity grass shader, grass shader, unity 2d grass shader, shader graph, unity shader graph, code monkey, unity tutorial, unity game tutorial, unity tutorial for beginners, unity 2d tutorial, unity 3d, unity, game design, game development, game dev, game development unity, unity 2d, unity 3d tutorial, programming, coding, c#, code, software development, learn to code, learn programming, unity tutorials

Id: VcUiksxYT88

Length: 13min 52sec (832 seconds)

Published: Thu Sep 17 2020