Unity tutorial - Weebly

Unity tutorial Develop a tool to draw bezier curves with Unity by Claudio Scolastici – Game designer [email protected] cscolastici.weebly.com

Hello everybody. In this simple tutorial I will show you how you can create a tool to draw bezier curves in Unity 3D. The operations required to complete the tutorial are pretty simple. It still requires some basic knowledge of Unity interface and how to carry on basic operations. If you don't know how to create game objects, script files or how to instantiate a variable with an object in the scene, please get those basics before trying this tutorial. Bezier curves can be very useful to prototype paths for AI or trajectories for game objects. Once you got the basic with this tutorial, you can then upgrade the model and adapt it to other tasks. Enjoy! Unity tutorial by Claudio Scolastici

1

Bezier curves First a little bit of theory. I am no matematician, so I am going to make it fairly simple. Beziers are cubic curves described through a matematical function (as any other curve) and as such they require 4 parameters to be defined: the starting and ending points and two extra control points called handles. Handles are exactly what their name means: they define the specific trajectory of the curve between points start and end and the actual curve never passes from the handles: it goes from start to end by a specific trajectory defined by the relative position of the two handles. The equation of a bezier curve in the 3D space is: [x,y,z] = (1-t)3 p0 + 3(1-t)2 t p1 +3(1-t) t2 p2 + t3 p3

Unity tutorial by Claudio Scolastici

2

Bezier curves t represents a value which ranges from 0 (starting point of the curve) to 1 (ending point of the curve) p0 is the starting point of the curve p3 is the ending point of the curve p1, p2 are the handles of the bezier If you want to delve into the mathematical aspect of beziers you can check: http://devmag.org.za/2011/04/05/bzier-curves-a-tutorial/

Unity tutorial by Claudio Scolastici

3

Now that we're done with theory, we turn the equation into a Javascript function for Unity. Start a NewProject in Unity, create a folder and click Create. You don't need any asset to be added to the project, so no need to flag any option in the new project screen.

Unity tutorial by Claudio Scolastici

4

With your newly created project open in Unity, go to the Project panel, click the Create button and create a new Javascript file. Name the file “bezier_01” or whatever you like it. This file will contain the code to draw our beziers.

Unity tutorial by Claudio Scolastici

5

Double-click on the newly created script to open it in MonoDevelop.

Unity tutorial by Claudio Scolastici

6

Add the following code at the end of the script (outside both the Start and Update functions!): /** this funct. calculates points coordinates on a quadratic curve */ /** DONT TOUCH EVER !!! */ function CalculateBezierPoint(t:float, p0:Vector3, p1:Vector3, p2:Vector3, p3:Vector3):Vector3 { var u : float; var uu : float; var uuu : float; var tt : float; var ttt : float; var p:Vector3; u = 1 - t; uu = u * u; uuu = uu * u; tt = t * t; ttt = tt * t; p = uuu * p0; //first term of the equation p += 3 * uu * t * p1; //second term of the equation p += 3 * u * tt * p2; //third term of the equation p += ttt * p3; //fourth term of the equation return p; } Unity tutorial by Claudio Scolastici

7

This is the function we will call to draw the bezier in Unity. Now that we have a function to calculate the points on a bezier, we add some variables at the beginning of our script. We need a float variable named c to store each subsequent point on the bezier (equivalent to the parameter t we discussed above), two vectors to store the starting point of the bezier and its ending point at each step of the drawing procedure and 4 transforms to be used in Unity to define starting and ending positions of the bezier and its two handles, named start, end, handle1 and handle2. Add the following code at the beginning of the script (outside any other function!) //value for t parameter of quadratic curve equation var c : float; //vectors to store start and end of each curve segment var q0 : Vector3; var q1 : Vector3; var start : Transform; var end : Transform; var handle1 : Transform; var handle2 : Transform; Unity tutorial by Claudio Scolastici

8

Your script should look like the following image.

Unity tutorial by Claudio Scolastici

9

Now we move to the Start function on the script and set two basic parameters: the value of c at the beginning of our drawing process and the starting position of the bezier. Get to the Start function and add the following code: function Start () { c = 0.0; //for first curve c is set to 0 q0 = CalculateBezierPoint(c, start.position, handle1.position, handle2.position, end.position); }

Unity tutorial by Claudio Scolastici

10

Your Start function should look like the following image.

Unity tutorial by Claudio Scolastici

11

Finally, we move to the Update function of our script. First we increase at each step the value of c to draw the bezier from start to end. Then we use our function to calculate bezier points to define the partial end point of the bezier, for each value of c. Then we draw a segment of the curve at each step and store the value of the partial end point as new starting point for the next segment. This action is repeated for 100 times, enough to draw an acceptable curve. If you want your bezier to be even more accurate, use more steps. To do so, add a smaller value to c at each step. Add the following code inside the Update function of the script: function Update () { if (c CreateOther-->Sphere.

Unity tutorial by Claudio Scolastici

14

Put the newly created sphere at coordinates 0,0,0 as shown in the picture.

Unity tutorial by Claudio Scolastici

15

Create another sphere and put it wherever you please in the environment. This will be the ending point of the bezier. Also name the first sphere start and the second sphere end.

Unity tutorial by Claudio Scolastici

16

Now create 2 cubes: name the first handle1 and the second handle2 and put them wherever in the environment. The bezier won't pass through these points, but its trajectory is influenced by their position. The following image represents the four elements from the top perspective.

Unity tutorial by Claudio Scolastici

17

The last step is to attach the script to the game camera by dragging it on the Main Camera in the Hierarchy panel and then to instantiate the four transforms in the script by dragging them in their respective slots. Refer to the following image to check you did it properly.

Unity tutorial by Claudio Scolastici

18

Save your scene and now run the application. You should see your bezier drawing from start to end as shown in the following picture.

Unity tutorial by Claudio Scolastici

19

Well done. Now you have a tool in Unity to draw your own bezier curves. You just need to define the position of the start and ending points for the curve and its handles and the script will take care of the rest. You can also add a game object to follow the bezier trajectory. To do that first we need to add a few lines to our script. In the heading of the script, add the following variable declaration: //float to define movement speed var startTime : float;

Unity tutorial by Claudio Scolastici

20

The final aspect your script heading should look like this:

Unity tutorial by Claudio Scolastici

21

Now to the Start funcion. Add the following line at the beginning of the Start function: startTime=Time.time;

This is the final aspect of the Start function: function Start () { startTime=Time.time; c = 0.0; //for first curve c is set to 0 q0 = CalculateBezierPoint(c, start.position, handle1.position, handle2.position, end.position); }

Unity tutorial by Claudio Scolastici

22

Finally, we modify the Update function adding the following line which moves the actor we will attach this script to: //moves actor with given speed transform.position = Vector3.Lerp(q0, q1, (Time.time-startTime) * 0.5);

Unity tutorial by Claudio Scolastici

23

The final aspect of the Update function should look like the following:

Unity tutorial by Claudio Scolastici

24

Now we go back to Unity. In the editor add another game object. I created a simple ship model with 3D Studio Max for this tutorial.

Unity tutorial by Claudio Scolastici

25

Name the object something like "actor" or whatever you like. Then attach the script to this object and drag the 4 control points again to instantiate the variables in the script. Also remove the former script connected to the Main Camera.

Unity tutorial by Claudio Scolastici

26

This is what the script attached to the actor should look like:

Unity tutorial by Claudio Scolastici

27

Now run the project. The actor should move on the trajectory defined by the 4 control points we set: start, end, handle1 and handle2.

Unity tutorial by Claudio Scolastici

28

With this visual tool you can make your own experiments to draw characters paths, space ship attack patterns or anything else you may see fit. My suggestion is never quit experimenting, prototyping is a crucial activity for a designer. Thanks for your time!

Unity tutorial by Claudio Scolastici

29