Unity tutorial - Weebly · 2018. 10. 16. · Unity tutorial by Claudio Scolastici 10 Now we move to the Start function on the script and set two basic parameters: the value of c at

Unity tutorial by Claudio Scolastici 1

Unity tutorialDevelop a tool to draw bezier curves with Unity

by Claudio Scolastici – Game designer

[email protected]

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!


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


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/

Bezier curves


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.


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.


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


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;}


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 equationvar c : float;

//vectors to store start and end of each curve segmentvar q0 : Vector3;var q1 : Vector3;

var start : Transform;var end : Transform;var handle1 : Transform;var handle2 : Transform;


Your script should look like the following image.


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);}


Your Start function should look like the following image.


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


Your Update function should now look like the following image.


Coding is over, now go back to Unity. We need to add the four transforms to the environment to define the 4 control points of the bezier.

With a new scene in the editor, in the menu bar select GameObject-->CreateOther-->Sphere.


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


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.


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.


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.


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


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 speedvar startTime : float;


The final aspect your script heading should look like this:


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);}


Finally, we modify the Update function adding the following line which moves the actor we will attach this script to:

//moves actor with given speedtransform.position = Vector3.Lerp(q0, q1, (Time.time-startTime) * 0.5);


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


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.


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.


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


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


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!

Pagina 1Pagina 2Pagina 3Pagina 4Pagina 5Pagina 6Pagina 7Pagina 8Pagina 9Pagina 10Pagina 11Pagina 12Pagina 13Pagina 14Pagina 15Pagina 16Pagina 17Pagina 18Pagina 19Pagina 20Pagina 21Pagina 22Pagina 23Pagina 24Pagina 25Pagina 26Pagina 27Pagina 28Pagina 29

Documents

Unity tutorial - Weebly · 2018. 10. 16. · Unity tutorial by Claudio Scolastici 10 Now we move to the Start function on the script and set two basic parameters: the value of c at