Splines are Awesome!!!

hello and welcome i'm your code monkey and let's learn all about the awesome world of splines this is how you can set up multiple points in your world and easily calculate a nice smooth path between them so it's very useful for making things like roads terrain orbits or really just about anything where you need a nice smooth shape and also use it to move an object along that shape we're going to build a spline based on a bezier curve now you've probably already used bezier curves before even if you didn't know the actual name if you've ever used an image or animation program where you have curves and handles to modify the shape of those curves then you've likely already used bezier curves for example i've already covered another awesome tool previously the animation curves that's an awesome tool and one example of a spline bezier curve in action that one is a spline in a virtual graph and here we're going to build it in the actual world now first of all if you go on wikipedia you can see all the formulas behind it so if you're interested in the math behind it go ahead and check it out but that looks quite intimidating so here let's look at it as a more visual example in order to understand how to make a busier curve you first need to understand basic linear interpolation so let's make a script to try it out and visually see it in action here i am the editor and let's rightly create a new c sharp script let's name this just testing and let's make a game object and attach the script on there okay now let's open so here let's first look at some very basic linear interpolation and the way that we can do that is first of all a simple private void update and here we go into the vector3 class and then we have the alert function verb stands for linear interpolation so as you can see it takes two points a and b and then a t the t is for the interpolation factor so if the last argument if t is set to zero then we get a if t is set to one we get b and if we get a value in between zero and one then we get the position in between a and b so let's visualize this in action just a simple private float for the interpolate amount and here we constantly increase it by time dot delta time and let's actually make it a modular of one so that it loops back so this one so increase it by time dot of the time and then a modulo of one f so as it goes up it loops back into zero and then we're going to use this in our parameter here but we also need our two points so for that let's set up here serialize films private transform for the point a another one for the point b another one for the point a b and then here we're going to do alert between the point a and we grab the position then the point debris grab the position and modified by interpolate amount okay we do this and we place our point av that position on this one so we should be able to visualize this object being positioned in the interpolate amount between point a and point b and it will constantly be moving over time okay so let's just set up all these objects in the editor let's do the simplest thing possible so just a simple sprite let's name this the point a so this is point a then another one for the point b another one for the point a b so here just drag the references and now let's position them so let's put the point a around here then the point b let's put around here and then through code this one won't be moved and it will go from here all the way in there let's see and if there it is exam like that so this is what linear interpolation looks like we take two points then an interpolation factor and when it's zero we got it in here when it's one we have it in there and if we pass in any other value then it gets in in between and obviously this works no matter how you put it so if i move this one if there you go it always goes from that point on to that point okay so here we have basic linear interpolation now let's go up one level so let's add another point and another interpolation so in the editor let's add another point this will be our point c then let's set another one for the point b c and then here we're going to interpolate do pretty much the same thing so we're going to interpolate between point b and point c and move this one on there okay that's it let's test here just make another one for the point c put it down there so this is the point c and just duplicate this one this is the point b c and on testing here we just drag our references let's see and yep now we can see our logic in action so we've got this linear interpolation from a to b and this one from b to c okay so far so good and now here comes the fun part let's add another interpolate point and this one is going to interpolate between this movement and this movement so here let's make another one and for this one let's name it the point abbc and now down here we're going to do another linear interpolation for the point abvc except instead of using either of the original points we're going to use the ones composed by this linear interpolation so we take this one and this one and we interpolate those two so let's see what this looks like here make another one and yep there we have our logic so we have one linear interpolation right here from a to b another one from here from b to c and then we have the yellow one which is interpolating between these two interpolations so here we can already see a really nice smooth curve and obviously by modifying any of these since this is all made by math then everything is very versatile so what we have here is called quadratic interpolation and now in order to achieve our final result we just need to go up one more level so here let's add another point so this will be our point d and let's add another interpolate this one will go from c to d and then another one of these and this one will be the bc cd so i just set these ones up okay there it is we have the point cd going from c to d and the b c c d going from b c to c d and yep this is what we have here so we have one linear one linear one linear then one and two quadratic and now we just need to go one more level so here we add our final one so let's call it a b c d and the logic is exactly the same that we saw in here so we take the abcd and we're going to interpolate between this one and this one so here let's make another one for the abcd put it in a nice purple and let's see and if there it is looking at the purple we can see it in action so here we have a really nice mood curve so the object smoothly moves along the curve which is made up of all of our points and since this whole thing is being calculated using math that means it's adaptable to changes in runtime so as i take this one and i move it slightly down there you can see the purple one the curve of that one and i can take this one and put it somewhere in there and there you go something like this so what we have here is already one of those smooth splines that you see in those animation programs so essentially these two are our anchors and these two are handles so if i place this one and i move it all the way down here and this one put it up there and you have to look at the purple one going through this really nice really awesome smooth curve so by modifying the anchors we can easily modify the shape of that curve that goes in there and then right in there all right so that's all the math behind it now let's just clean up the code a bit to make it more understandable so here let's refactor this let's make two nice functions all right so we have our two really nice functions for the quadratic linear interpolation and the cubic linear interpolation so this one takes an abc this one takes the a b c and d so here we can now clean up all this code and let's position only the final one so let's comment all this out and we're going to take this one and set the position use our nice cubicle function pass in the point a and so on all right that's it very simple just using a function so let's see what this looks like and if there it is we have our really nice really smooth curve so we've got all of our points and as we move them around yeah we can make some really nice shapes so there you go just a nice little smooth curve going from here to here and it looks really nice really smooth so what we have here is essentially a single segment so we have four points to calculate one segment and now in order to make some long useful splines all we need to do is really just add more segments by the way if you find the video helpful please hit the like button and consider subscribing it really helps out the channel now over here i have a proper spine class that i prepared previously it simply builds upon what we just saw specifically it has a list of all of the anchors and each anchor is just a simple object that contains a position and the handle for the left and right side then it also has a simple editor script so with this i can position each handle and each anchor wherever i want so very easy to use and then i've got a spline follower script which takes a reference to the spline and simply grabs the position from it so here it is in action the object following along with the spline and on the spine i also have the option to make it a closed loop so if i do yep it connects the last anchor to the very first one and here we have something really nice really close also in this more advanced version i also have some rotation the way that's handled is the spline also has a list of points so these are dynamically generated at runtime each point simply contains its position a forward and a normal vector so using that i can make my nice spline and then enable a car object and if there you go the car correctly interpolates along the spline and it also has the correct rotation and the last thing that i have is a script to make a spline mesh so once again it takes the underlying spline and then what it does is simply dynamically creates the mesh by going through every single point on the spline so for every point it adds two vertices and connects them to the previous two so that way it creates a mesh alongside of the length and the shape of the spline so if you combine that with a very simple road sprite and yep here is the outcome so we can see over here instead of shaded put it on wireframe and we can see how this whole mesh is constructed so for every single point it adds another two vertices and connects them to the previous one and goes all the way over so just take this then enable the car on top and here we have a really nice scene so we've got a road mesh and we've got the car driving along the road and yep it goes along perfectly and of course this whole thing is being driven by math so i can just modify any of these points and it all connects perfectly so i can modify the shape and whatever i give it it perfectly follows along the path and yep just like that alright so here you can see how splines are an awesome tool you have at your disposal whenever you need to set up some really nice mood curves as always you can download the project files and utilities from unitycodemuck.com 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 if you found this video helpful consider liking and subscribing post any questions i have in comments and i'll see you next time

Channel: Code Monkey

Views: 63,171

Keywords: unity spline, unity spline tutorial, unity spline mesh, unity spline movement, code monkey, unity bezier curve, unity bezier curve path, unity curved road, unity bezier, unity curves, unity curve editor, unity road, unity road mesh, unity smooth path, unity tutorial, unity game tutorial, unity tutorial for beginners, unity 2d tutorial, unity 3d, unity, game development, game dev, game development unity, unity 2d, unity 3d tutorial, unity tutorials

Id: 7j_BNf9s0jM

Length: 11min 12sec (672 seconds)

Published: Fri Dec 11 2020