Bézier curve

In order to make the player move from level to level, we are going to use bézier curves. A bézier curve is a parametric curve used in computer graphics and related fields. If you want to learn more in depth about the bézier curve click on the link below.

Bézier curveWikipedia

The way I'm going to implement my version of the bézier curve is by following the tutorial I've mentioned on the introduction page.

Introduction

The bézier skeleton

Let's start setting up the skeleton of the bézier curve. This will be used to calculate the points of the bézier editor we will be setting up after this.

First, we can remove "using System.Collections, using System.Collections.Generic" from the top of the script since we don't need any Unity components for this script.

Inside the script you'll see a "void Start" and "void Update". These can also be removed. In the end your script should look something like this.

Since this class will be the foundation of our entire bézier curve, we need to make it a static class. By doing this we can access this script from any other script without having to make a public or serialized private reference for it.

As you can see "Monobehaviour" now has a red line underneath it. This is because we turned our class static. We can now simply remove ": MonoBehaviour" from that line and you'll end up with something like this.

Now that we have our class properly setup, it's time to add our custom vector3.Lerp functionality to it. First, we're making a vector3 That will get the point of the bézier that will later be provided by the path layout script.

Up next we need to be able to calculate the velocity of of the bézier so we can calculate the speed of the player moving along the curve. In order for us to do that we make another vector3 that will do that calculation for us.

And with that our bézier skeleton is setup and ready to be used.

The Path layout

Now that we have our skeleton in place it is time to create our script that will be used to get the transform points that we need to pass through to our skeleton to calculate the point's position, velocity and direction. In this script we need an array of vector3's to store the different positions in.

Again, we don't need "using System.Collections, using System.Collections.Generic" and our "void Start" and "void Update" functions. In the end it should look like this.

Now we need to create a public vector3 array variable that will store our point positions of the curve and a public boolean to check if the path is unlocked or not.

First we create the boolean called "unlocked" and make it public.

Note: We don't have to see the boolean in the inspector, so you can add "[HideInInspector]" either above or in front of it to make it hidden in the inspector.

Then we need to create a vector3 function called "GetPoint" with a parameter of float. The float variable is used for the curve calculation.

Up next we need to calculate our velocity of the curve. To do that, we create a new vector3 function called "GetVelocity" with a parameter of float. The float variable is used for the velocity calculation, but after we've done that we then need to subtract our "transform.position".

The last thing we need to create is a vector3 function called "GetDirection" with a parameter of float. This float variable is used to calculate the direction the player will be facing along the curve. We normalize this so we get a number between zero and one as a return value.

With that in place we are now done setting up the path layout script.

The bézier editor

In order to visualize and and place our bézier curve we need to create a custom editor script that lets us do that. So we create a new script and turn this into an editor script.

First we remove "using System.Collections, using System.Collections.Generic" from the top of our script since we don't need any Unity components for this script. But since we want this script to work as an editor we add "using UnityEditor" at the top. Now you should have something looking like this.

Just like we did in the previous script, we can remove "MonoBehaviour", but we need to replace it with "Editor" so Unity knows that this script is an editor script. We can also remove "void Start" and "void Update" since we don't need to use these functions. Your script should now look something like this.

Now to turn this script into a custom editor script we need to add an extra line above the public class. We need to type "[CustomEditor(typeof(PathLayout))]".

Then we need to declare some variables. We need at least two constant variables that will represent the way the length and thickness of the line.

Now we need a reference to our path layout script with an additional transform and quaternion variable to handle the transform and rotation while adjusting the path layout in Unity itself.

To visualize our bézier curve, we need to make use of the "OnSceneGUI" function of Unity. This will let us see how the curve will be formed in the scene window.

Up next we need to set our path layout variable to itself, set our transform variable to the path layout transform and the quaternion variable to the pivot rotation of the Unity editor tools. This enables us to manipulate the tools used in the scene view inside Unity.

Up next we need to display our points we set up previously in our path layout script. We do this by creating four vector3 variables and set them equal to the outcome of our vector3 function "ShowPoint" that takes in an integer as its parameter.

NOTE: This will give out errors because we haven't created the show point function yet, this will be solved later.

Now we need to draw lines between the different vector3 variables. To do this we make use of Unity's handles functionality. This handles option creates a custom 3D GUI drawing in the scene view so we can see how the lines move from point to point. We can even give it a color so we know which lines are the draw lines of the handles.

In order to display our bézier line, we can use the "DrawBezier" function inside the handles functionality. That way we can see our bézier going from point to point.

Now to actually visualize our points inside the scenic view and being able to adjust their positions we need to give that functionality inside the show point function.

We do this by making use of Unity's editor GUI functionality. With this we can check which point we are currently trying to change and, when we move it around in the scene view, this function will update that change.

We can now back to Unity itself and create an empty game object and attach the path layout script to it.

When you open the console Unity will tell you that there are errors you need to solve. These are quite easy to fix, all you have to do is create four points in the array in order to solve this issue.

To get rid of the error messages in your console simply press the "clear" button.

And with that we now have successfully implemented the bézier curve into our project. We are going to modify the path layout script in the future, but for now we have a good starting point to continue on with the rest of the tutorial.

1KB

Bezier path.unitypackage

Open