Bézier decoration

Now that we have all our movement ready, it is time to visualize our paths in the game scene of Unity.

Currently we can only see how we lay-out or paths in the scene view window, but don't have a visual representation of it in the game view. We fix this by making use of our Crash Bandicoot method of displaying our path layout.

I've created a model that we can use to visualize or paths inside the game scene, but you can use your own models if you want to.

11KB

Path decor model.unitypackage

Open

Setting up the variables

Now let's make a script called path decorator, attach this to or path game object and open it.

Inside the script we'll see the following.

We don't need "void Update();" in our script so we can just remove it. We end up with a script looking like this.

Now we need to create a lot of variables, but only two of them doesn't have to be serialized since we need this value to always be the same and don't need to change it via the inspector. This is one integer and one float variable.

We need the following variables:

Boolean
Float
Float
Integer
Integer
Integer
Transform
Level node reference
Path reference

This may seem like a lot, but in the script, it will look like this, to give you a better perspective to what I meant.

Note: In the future we need to hide the public first time boolean, but for now have to make it visible in the inspector.

Adjusting the level node

Now it is time to set up our start function. If you have followed along with the tutorial and used level node model I've provided you can follow these instructions from start to finish. If you've made your own level node model that is also fine, but certain elements, like change material color, may vary from your own created model. So be aware of that.

First, we need to go back to our level node data script and add a material reference.

Now we need to go back into Unity and into our folder structure where we store our models. Inside that folder we our level node model and our materials folder. We need to rename our materials folder to something else so we know that these are our default materials. For this tutorial I named mine "Default". Now you make a copy of that folder and rename it to "Level x".

X being the level number.

Before we duplicate it, we go into the newly made level folder and delete the "Level node ring" material since we don't need to adjust this one.

Now duplicate that level folder for the amount of level nodes you have, for me, I only have two level nodes so I only need a level 1 and level 2 folder. The reason we do this is when we change our material color, we only want to change it for that particular level node and not all the nodes. That's why we're making different level folders with different materials.

My project folder will end looking like this, but yours may vary depending on how many level nodes you've added to your project.

Now we have to give each level node it's corresponding level material. So level one gets the materials of level one, level 2 gets his, etc. The end result should look something like this.

Now all we have to do is drag our level number node in the level node material reference inside the level node data script for all the levels you have in your scene.

IMPORTANT: If you want more level nodes added to your game you also need to make new level node materials along with them!

Setting up the start function

Now go back to your path decorator script and lets continue setting up our script.

Inside our start function, we need to get our path lay-out reference. To do that we use the get component method of Unity.

Up next we need to get our reference to change our level node's color material to red by default. This is to represent our level node is still locked.

The next thing we need to do is check if our path we want to decorate is unlocked or not.

Now we need to make a coroutine function that will decorate our path for us over time. We also need to start this function inside the if statement when the result is true. Let's make this coroutine public for now since we need to access it later in the tutorial.

Note that there is going to be a red line underneath our coroutine function name. You can ignore this, because we'll sort this out in the next step.

And with that we're now done with setting up the start function.

Setting up our coroutine

Now that we have our start function ready, we can start setting up our coroutine.

First, we need to create a temporarily float value that stores our newly calculated step size. The step size is calculated by first multiplying frequency with spacing and then dividing spacing with the outcome of multiplying frequency with spacing. The result should look like this.

Up next we need to check if the first time boolean is set to true or not. Depending on this outcome we have to wait a couple seconds or not before executing the rest of the code. If this result is true, we wait the amount of time set by our wait before decorating integer value.

Now the next step is to create a for loop. This is going to be used to keep looping until we reached our frequency amount. But this loop takes two integers, one for the frequency and the other for the position of the model on the path.

The first if statement, we need to check is if our "p" value is less than the skip amount value. As long as this is true, we need to return our result so the for loop can increase the value until it is no longer lower than the skip amount value.

Once we past this check we need with another if statement check to see if our "p" value is equal to one value lower then we set frequency value. We do this so the last path we need to place is one before the end of the path. This is to prevent the path display from clipping into our level nodes.

If this is true, we need to call a function that will place the path object on the path. We also need to give this our "p" value and our "stepSize" value in order to correctly place it.

Note: You can ignore the red line underneath the function, we'll solve this issue later on.

Next we need to check if the path is getting displayed for the first time or not. We need both outcomes so the code will look like this.

Inside our if statement, we need to do a couple things. First, we need to wait a couple seconds before executing the rest of the code. We do this by making use of our wait display next path decoration value. Then, we set our level node's material color we want to unlock to green. After that, we set our first time boolean to false and wait a couple seconds again with the same float value we just used.

Inside our else statement we only change the material color of the level node we want to change to green.

Lastly underneath the else statement we call the function "StopAllCoroutines();" because we don't need it to continue any further. Our code should now look something like this.

Underneath our if statement where we check if our "p" value is equal to our frequency minus one, we need to add an else statement. Inside that else statement we need to call the same function, we did when the outcome should be true.

The last thing we need to add is another if else statement underneath the else. In here we check if our first time boolean is true or not. If it is true, we have to wait placing the next path object before placing it, otherwise we can just place it instantly on the next position.

And with that, our coroutine is now done. The last thing left for us to do is create the function that places the path object on the path.

Position path object on the path

The coroutine is ready, but we're still missing thing to make it work and that is our "PlacePathDecoration(p, stepSize);" function. Let's go ahead and add this underneath our coroutine function. This function takes in two float variables, one will be used for the path point position and the other for the step size so we know the distance between two path decorations.

First, we need to instantiate our path decor transform object as a transform. To do this we create a temporarily transform reference to store our path decor object as a transform object.

Then we need to store a temporarily vector3 position that will be our position point on our path layout. We get this by using the "GetPoint();" and giving it's parameter to be our path point times our step size.

After that we need to set our temporarily transform's local position equal to our temporarily stored vector3 position value. This will position our path decoration correctly on the path.

Now we have to rotate our path decoration so it's facing the position of the path. We do this by making use of the "LookAt();" function in Unity.

We need to use our temporarily position and add on the same calculation method as we did to calculate our position. That way the path decoration will face towards the next point on the path.

Lastly, we set our newly created path decor object as a child of the game object we're currently having this script attached to. This step is completely optional, but it helps keeping the hierarchy clean and organized.

The only thing left to do is to go back int Unity en set up everything in the inspector. Depending on your length and positioning of your path you have to adjust the frequency and skip amount to make your path decor display work for your project. Here is an example setup I've done for my path decor display.