2D Water Tutorial with Sprite Shape in Unity

hey guys in this tutorial I'm going to show you how we can create this interactive 2D water with spread shape in unity when our character interacts with it we are creating waves and also if we try to submerge it it's pushed to the top and floats there are many ways we can approach creating interactive water but in this case I have decided to use Sprite shape because I have not seen example using it and as you see in the video by using this method we will be able to use it as a tool to create water very easily to make our water interactive the method we are going to use is by simulating Spring movement if you have researched or worked with water before it might be very familiar first let's create a circle I have put the Y position to two for this example but we will not be needing it in the future as you see shortly then add a script to it which we will call water spring to make it move up and down like a Sprinkle let's add couple variables to it for velocity Force height and Target height and set all of them as zero next we have a water spring update function in which we are calculating the movement for the height we will always be getting the Y position which is our current position then to calculate how much we want to move we just subtract the current height from the Target in my case because the height is starting at 2 and the target height is zero it is like our spring starts from the extended position and we're moving it downwards first to actually move it calculate the fourth step by having a stiffness multiplied by the result from our height also having minors in front of the stiffness creates our spring effect so when in our case the circle starts at 2 and goes to 0 then goes to -2 and then back at 0 and 2. so we have our spring effect then add everything to the velocity which we are going to add to the current y position usually to execute our function we can put it in our update method but because we are going to have multiple Springs let's create another script and call it Watershed controller then inside fixed update we Loop through the springs and call the function we just made for this example we have only one spring that moves infinitely now let's make it so it actually stops after some time go to our spring update function and pass another variable to it dampening with which we are going to calculate how much to slow down our spring we create a new variable called loss make our dampening negative because we are slowing down the movement of the spring and multiply it by the velocity then just add the loss variable to the force that's it now just go to the shape controller and create a dampening variable that we're passing as you can see now our spring is being slowed down in time for the next example let's add more Springs and create a wave-like effect where if we have impact on one of the Springs the rest will move accordingly after the impact in the shape controller let's create a new variable spread to calculate how the water splash should affect the springs around now create a function with which we are going to update the Springs accordingly the idea here is That We're looping between all the springs and calculating the velocity accordingly for example if we have a splash on our second spring to affect the left one we subtract the height of both and multiply it by the spread and that's it the only thing we need to consider here is the index of our Springs so we don't go out of bounds then pass the function inside our fixed update to create a splash at a specific spring let's create a new function Splash and pass the index and speed which I give the spring actually exists just in case and then add the speed to the velocity of that spring and now we have our wave animation next let's create our water because we're using Sprite shape first we need to install the package for it so go to the package manager and get it from there then create a new game object for our water and add spreadshape renderer and Sprite shape controller to it if you have not used this before basically it's a Sprite that we can manipulate freely to do that click on the edit spline and you'll see multiple dots around our spread by moving them we manipulate the shape of our Sprites we can also add or remove dots as well here what is important is to note that when we select a DOT a window appears with couple of options for every dot set the height for 0.1 which is the minimum and for the tangent mode set the first one which is going to create these sharp edges which is exactly what we need for the corners of the water of course if you find something else more suiting in your case you can always change that but at least for the top two corners that interact as a water it should be like that the second option is if we want rounded corners and the third one is if you want one side to be rounded or the other side to make things more clear just play with them and you'll see for yourself now that we have this basic shape let's create our wave points in our Watershed controller add couple of new variables for the shape controller that we just created how many waves do you want to have and the number of top corners that we have it will always be two of course but we'll need it in multiple places later on so that's why we created here then make a new function that will create our waves first let's access the points in our shape and the next part is not actually necessary but they've made it so that if we have points between the top two corners I would like to First remove them before creating the new ones then to have our wave separated at equal distance let's get the full width between the top two corners and calculate what should be the spacing after that create a loop for the number of waves we would like to have to add new points to our shape we can use insert pointer which first accepts index at which we would like our point to be created and Vector 3 for the position as you can see we're always passing the corners count for the index this is because the position of our shape starts from the bottom left corner which is at position zero the top left corner is at position 1 and the next point that will be next to it should be at position two so every time we insert the new point at position 2 every next point is being pushed with one index that's why we're actually having our Loop backwards because we are inserting the points from last to First it doesn't actually matter the way you do it as long as it works and then as you can see we just set the points we are creating that are not corners so we give it as false and set the height variable to 0.1 as we did before for now just to test it you can put this on start to see how it works now let's combine both our spring movement with the points of the Sprite shape until now we have the Springs created manually just to display the movement so let's create them dynamically like we do with the wave points make a new function create Springs and pass as a parameter display from our Sprite shape you need to also make a for Loop for all the point Springs we want to create when instantiating new wavepoint let's have a parent game object inside our watershape that we are going to call wave points this will do nothing else but hold our points in it then set the position of the point we just made by getting this plan Point position from that same index after that we are adding this to our spring list before we were doing it manually but this time we do it after we instantiate it we also need to have two more functions in our water spring and one of them as you can see will be in it which we're calling every time we're creating our water points in it we're passing the Sprite shape controller setting our variables to their default values and very important here is to set our index which we're going to be storing in our wave index variable and the other function we need here is to actually animate the points in the spline we just created let's call it wavepoint update and in it we'll just set the position of our spline point for the specific index to be the same as our moving spring then call this function next to our spring update as we can see the points in our spline are moving the same way our Springs are but as you can notice our waves are with pointy edges which we would like to fix first next to setting the default values for our spline points we are going to add another one that will change the tangent mode as we saw before for all the middle points we are going to set them as continuous which will make our waves rounded then in the create Springs function we are going to call a new one that we call smooth and pass the water spline and index I actually found this script from one of the unity's examples of sprite shape and the idea here is to calculate the tangents of the current Point based on the previous and next Point positions and then set them I'll give a link to the description to all the materials that were helpful to me while doing my research for this tutorial by doing that now our waves have a nice rounded look a lot of the times you would like to create the water in the editor itself with all the points there so you don't have to actually play the game to have them so let's do that now above the Watershed controller class at execute always which means we would like to execute the script while in editor mode as well also add to the waves count a range slider just to make it easier for us when changing the number now instead of calling the function that creates the waves from start let's call it from on validate this means every time we make a change to our wave number on validate will be called here we are using curtains this is very important because before we create the new waves we would like to remove the old points first and to do that specifically in on validate we cannot just call destroy that's why we must use cortins other than that there is nothing else now when we slide we can see our points being created accordingly next let's make it so instead of having specific Splash we create a falling object that when it collides with one of the points it should do a splash for that purpose create a 2d collider for our wave points and set the force and layers to nothing this means that when our box hits the water it will go red and not stay on top of it like a normal ground for the box that will hit the water create a rigid body and take a collider as well and under attack to it that we will call falling object Also let's create a new script that will just push the Box downwards with some kind of force now go to our water spring script and add on collision enter to the function that will detect when the Box collides with the spring we do it by checking if the attack is our falling object and if it is we just add the velocity that our object is falling to the velocity of the spring I have also created a new variable resistance to smooth out the impact currently it's only some static number but you can make use of comf function or anything else just to ensure that you have some minimum and maximum wave size because we don't want our waves to go out of control if something hits them very hard as we can see when the Box Falls and collides with the water spring it creates a splash what is left is to take care of the water itself so when the object falls it doesn't just go through the water itself and this is actually way easier than you might think in our water shape and another component that is called buoyancy effector and also a polygon collider based on how you want the object to react to the water you can set different values for example how dense should the water be or what is the surface of that water you can also add damping or flow of the water so again just based on what your needs for your game are just by doing that our object can stay on the water and when submerged it will just go back to the surface well this was it guys this video consists of 10 steps how to create an interactive 2D water with Sprite chip I hope you liked it I will put all the materials I found from my research for this tutorial in the description and very soon I will release the full project in the git as well so you can test the water yourself if you have any ideas for future tutorials that you would like to see step by step or just maybe something completely different don't hesitate to tell me in the comments below I would also really appreciate if you hit that like And subscribe button because it helps me a lot but even if you don't thank you for watching and see you next time

Channel: Memory Leak

Views: 16,998

Keywords: devlog, tutorials, gamedev, gamedevtutorials, gamedevelopment, programmingtutorials, programming, unity, unitytutorials, how to make a game, how to create a game, how to make water, how to make 2d water, how to create water, unity water, water in unity

Id: 69sBjqMtZCc

Length: 12min 57sec (777 seconds)

Published: Tue Feb 07 2023