narpar.github.io/tut_part_b.html at master · NarPar/narpar.github.io · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
<!doctype html>
<!-- The Time Machine GitHub pages theme was designed and developed by Jon Rohan, on Feb 7, 2012. -->
<!-- Follow him for fun. http://twitter.com/jonrohan. Tail his code on http://github.com/jonrohan -->
<html>
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

  <link rel="stylesheet" href="stylesheets/stylesheet.css" media="screen"/>
  <link rel="stylesheet" href="stylesheets/pygment_trac.css"/>
  <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
  <script type="text/javascript" src="javascripts/script.js"></script>

  <title>Narpar.github.io</title>
  <meta name="description" content="Nick Pettyjohn's website! Will include games I've made/worked on, and tutorials I've created.">

  <meta name="viewport" content="width=device-width,initial-scale=1">

</head>


<body>


  <div class="wrapper">
    <header>
      <h1 class="title">Nick Pettyjohn</h1>
    </header>
    <div id="container">
            <ul class="menu">
                        <li class="menu"><a href="index.html">Home</a></li>
                        <li class="menu"><a href="tutorial.html">Tutorial Part 1</a></li>
                        <li class="menu"><a href="tut_part_b.html">Tutorial Part 2</a></li>
                </ul>

      <div id="main" role="main">
        <div class="download-bar">
        <div class="inner">
                        <h2 class="title">
                                <p>Unity Tutorial Part 2</p>
                        </h2>
        </div>
        <span class="blc"></span><span class="trc"></span>
        </div>
        <article class="markdown-body">


<h3>1. Get Caught Up</h3>

<p>Go <a href="https://www.dropbox.com/sh/g8abp8wwq1snw02/SlzWXygChR">here</a> and grab SpaceFightPart2Start.zip. This tutorial will build upon said project. Unzip the contents into a folder. Start Unity 3D and go <mark>File->Open Project</mark> and find the folder.</p>


<h3>2. Movement</h3>

<p>Create new empty game objects: <mark>Game Object->Create Empty</mark>. Name it "Ship".</p>

<p>Add Sphere Collider component: <mark>Component->Physics->Sphere Collider</mark>. Toggle <mark>Is Trigger</mark> to be on.</p>

<p>Add Rigidbody component: <mark>Component->Physics->Rigidbody</mark>. Disable <mark>Use Gravity</mark> and enable <mark>Is Kinematic</mark>.</p>

<p>From Main Camera, Remove the Collider component: <mark>Right-Click the component->Remove Component</mark>.</p>

<p>In Hierarchy View, drag Main Camera onto Ship, making it a child object. This means when we move Ship, Main Camera does as well.</p>

<p>In Project View, in the Player folder, create a javascript file: <mark>Right-Click->Create->Javascript</mark>, Movement.</p>

<p>Drag Movement, from the Project View, onto Ship, in the Hierarchy View.</p>

<p>Open Movement and add the following code:</p>

<pre><code>#pragma strict

private var speed:float = 0.0f;

private var targetSpeed:float = 0.0f;
private var maxSpeed:float = 60.0f;

private var speedInc:float = 1.0f;
private var acceleration:float = 3.0f;

private var rotateSpeed:float = 1.0f;


function Update () {

	HandleRotate();
	HandleSpeed();
}

function HandleSpeed(){


	if(Input.GetKey(KeyCode.W) && speed < maxSpeed){
		speed += acceleration * Time.deltaTime;
	} else if(Input.GetKey(KeyCode.S) && speed > 0) {
		speed -= acceleration * Time.deltaTime;
	}

	transform.Translate(Vector3.forward*speed*Time.deltaTime);
}

function HandleRotate() {

 	// Generate a plane that intersects the transform's position with an upwards normal.
    var playerPlane = new Plane(transform.forward, transform.position + 100 * transform.forward);
    Debug.DrawLine(transform.position, transform.position + 100 * transform.forward);


    // Generate a ray from the cursor position
    var ray = Camera.main.ScreenPointToRay (Input.mousePosition);
 	Debug.DrawRay(ray.origin,ray.direction,Color.red);


    // Determine the point where the cursor ray intersects the plane.
    // This will be the point that the object must look towards to be looking at the mouse.
    // Raycasting to a Plane object only gives us a distance, so we'll have to take the distance,
    //   then find the point along that ray that meets that distance.  This will be the point
    //   to look at.
    var hitdist = 0.0;
    // If the ray is parallel to the plane, Raycast will return false.
    if (playerPlane.Raycast (ray, hitdist)) {
        // Get the point along the ray that hits the calculated distance.
        var targetPoint = ray.GetPoint(hitdist);

        // Determine the target rotation.  This is the rotation if the transform looks at the target point.
        var targetRotation = Quaternion.LookRotation(targetPoint - transform.position);

        // Smoothly rotate towards the target point.
        transform.rotation = Quaternion.Slerp(transform.rotation, targetRotation, rotateSpeed * Time.deltaTime);
    }
}

function OnTriggerEnter (other : Collider) {
	if(other.tag == "Asteroid") {
		GetComponent(CameraShake).Shake();
	}
}</code></pre>

<p>Test the project! Return to Unity 3D and it the <mark>Play</mark> button.</p>


<h3>3. Starfield</h3>

<p>Add a Particle System component to Ship: <mark>Select Ship in Hierarchy View</mark> then <mark>Component->Effects->Particle System</mark>.</p>

<p>Open the Particle Systems properties, if it's not open already.</p>

<p>Set <mark>Start Speed to 0</mark>.</p>

<p>Set <mark>Simulation Space to World</mark>.</p>

<p>Set <mark>Max Particles to 10000</mark>.</p>

<p>Click <mark>Emission</mark> to open more parameters.</p>

<p>Set <mark>Rate to 40</mark>.</p>

<p>Click <mark>Shape</mark> to open more parameters.</p>

<p>Set <mark>Shape to HemiSphere</mark>.</p>

<p>Set <mark>Radius to 50</mark>.</p>

<p>Click the circle next to <mark>Color Over Lifetime</mark> to enable it. Then open it's parameters.</p>

<p>Click <mark>Color</mark> to open a window to edit the color over time.</p>

<p>Click above the color field to create a new mark. Drag it to 1/4 of the rectangle. Create a second one, and drag it to 3/4 of the rectangle.</p>

<p>Click the left-most tab on the top, and modify it's alpha value to 0. Do the same with the right-most tab.</p>

<p>Test the project! See if it looks as though you're moving through a starfield.</p>


<h3>4. New Spawner</h3>

<p>Open up the Spawner.js in the Project View. Replace it's contents with the following code:</p>

<pre><code>#pragma strict

var asteroid:GameObject;

var mobSpawnRadius:float = 200.0f;

var numAsteroids:int = 20;

function Start () {


	for(var i:int = 0; i < numAsteroids; i++) {
		var ran = Random.insideUnitSphere * mobSpawnRadius;
		//ran.y = 0.0;
		var mobSpawnLocation : Vector3 = transform.position + ran;

		var a = Instantiate(asteroid, mobSpawnLocation, Quaternion.identity);

		var randomDirection = new Vector3(2.0*(Random.value-1.0), 2.0*(Random.value-1.0), 2.0*(Random.value-1.0));

		a.GetComponent(Asteroid).SetDirectionalVelocity(randomDirection,Random.Range(0.0f,2.0f));
	}
}</code></pre>

<p>Click the <mark>Spawner</mark> in the Hierarchy View, and set it's position to <mark>X:0 Y:0 Z:500</mark></p>

<p>Test the project! You should see a field of slowmoving, randomly directed asteroids!</p>


<h3>5. HUD Objective Pointer</h3>

<p>Create a Cube Game Object: <mark>Game Object->Create Other->Cube</mark>, and name it Objective.</p>

<p>Add a Rigidbody component to Objective: <mark>Component->Physics->Rigidbody</mark>. Disable <mark>Use Gravity</mark>. Enable <mark>Is Kinematic</mark></p>

<p>Create new Javascript file in Project View: <mark>Right-Click->Create->Javascript</mark>. Name it <mark>ObjectiveMarker</mark>.</p>

<p>Click <mark>Ship</mark> to open it's children, and find Main Camera. Drag this file onto <mark>Main Camera</mark> in the Hierarchy View.</p>

<p>Open the file and add the following code:</p>

<pre><code>#pragma strict

var objective:GameObject;
var indicator:Texture;

private var screenPosition:Rect;
private var width:int = 50;
private var height:int = 50;

function Start () {
 	screenPosition = Rect(0,0,width,height);
}

function Update () {
	var pos = Camera.main.WorldToScreenPoint(target.transform.position);
	pos.y = Screen.height - pos.y;

	screenPosition.x = pos.x - width/2;
	screenPosition.y = pos.y - height/2;
}

function OnGUI() {
	if(target.renderer.isVisible){
		GUI.DrawTexture(screenPosition,indicator);
	}
}
</code></pre>

<p>Return to Unity 3D. Select <mark>Main Camera</mark> object in the Hierarchy View: Click <mark>Ship</mark> to open it's children, and find Main Camera.</p>

<p>Onto the script parameters in the Inspector View, drag the <mark>Objective</mark> game object onto the <mark>objective</mark> parameter. Also drag the <mark>hp</mark> texture from the Project View onto the <mark>indicator</mark> parameter.</p>

<p>Create new Javascript file in Project View: <mark>Right-Click->Create->Javascript</mark>. Name it <mark>Objective</mark>.</p>

<p>Drag this file onto the Objective game object in the Hierarchy View</p>

<p>Open the file and add the following code:</p>

<pre><code>#pragma strict

function OnTriggerEnter (other : Collider) {
	if(other.tag == "Player") {
		Application.LoadLevel("upgrade");
	}
}
</code></pre>


<h3>6. Upgrade Scene</h3>

<p>Create a new Scene: <mark>File->New Scene</mark> and save this as <mark>upgrade</mark> and place it into the <mark>scenes</mark> folder in the Project View.</p>

<p>Add this scene to the Build Settings: <mark>File->Build Settings->Add Current Scene</mark>.</p>

<p>Create a new Javascript file in the <mark>Menus</mark> folder: <mark>Right-Click->Create->Javascript</mark>. Name it <mark>Upgrade</mark>.</p>

<p>Drag this file onto the <mark>Main Camera</mark> object in the Hierarchy View.</p>

<p>Open this file and add the following code:</p>

<pre><code>#pragma strict

var gameData:GameData;
var guiStyle:GUIStyle;

function Start () {
	gameData = GameObject.Find("Data").GetComponent(GameData);

	gameData.points += 5;
}

function OnGUI() {
	// Make a background box
	GUI.Box(Rect((Screen.width / 2) - 300, Screen.height / 8, 550,300), "Level Complete!");

	//GUI.Label(Rect((Screen.width / 2) - 250, Screen.height / 5, 500,100),"Level Complete!",guiStyle);

	// Display stats of level
	GUI.Label(Rect((Screen.width / 2) - 250, Screen.height / 8 + 40, 500,30),"Asteroids Survived: " + gameData.asteroidsSurvived);

	GUI.Label(Rect((Screen.width / 2) - 250, Screen.height / 8 + 80, 500,30),"Shots Fired: " + gameData.shotsFired);

	GUI.Label(Rect((Screen.width / 2) - 250, Screen.height / 8 + 120, 500,30),"Asteroids Collided: " + gameData.asteroidsCollided);

	// Make a background box
	GUI.Box(Rect((Screen.width / 2) - 300, Screen.height / 2, 550,200), "Upgrade Your Ship");

	GUI.Label(Rect((Screen.width / 2) - 250, Screen.height / 2 + 50, 100,30),"Total Points = " + gameData.points);

	// Speed
	GUI.Label(Rect((Screen.width / 2) - 150, Screen.height / 2 + 100, 100,50),"Speed = " + gameData.speed);


	if (GUI.Button(Rect((Screen.width / 2) - 250, Screen.height / 2 + 100, 50,50),"+")) {
		if(gameData.points > 0) {
			Debug.Log("Increased Speed!");
			gameData.speed += 1.0f;
			gameData.points -= 1;
		}
	}

	GUI.Label(Rect((Screen.width / 2) - 50, Screen.height / 1 - 200, 500,100),"Press Space Bar to Continue");

}

function Update() {
	if(Input.GetKeyDown(KeyCode.Space)) {
		gameData.asteroidsSurvived = 0;
		gameData.shotsFired = 0;
		gameData.asteroidsCollided = 0;

		Application.LoadLevel("game");
	}
}
</code></pre>

        </article>
      </div>
    </div>
    <footer>
      <div class="owner">

      <p><a href="https://github.com/NarPar" class="avatar"><img src="https://1.gravatar.com/avatar/856a43b221d0288eac434883b14952ec?d=https%3A%2F%2Fidenticons.github.com%2F7258e0dfa82db1400d9e001160b6f378.png&amp;s=30" width="48" height="48"/></a>View <a href="https://github.com/NarPar">NarPar</a> on <a href="https://www.github.com">GitHub</a></p>

      </div>
      <div class="creds">
        <small>This page generated using <a href="https://pages.github.com/">GitHub Pages</a><br/>theme by <a href="https://twitter.com/jonrohan/">Jon Rohan</a></small>
      </div>
    </footer>
  </div>
  <div class="current-section">
    <a href="#top">Scroll to top</a>
    <a href="https://github.com/NarPar/narpar.github.io/tarball/master" class="tar">tar</a><a href="https://github.com/NarPar/narpar.github.io/zipball/master" class="zip">zip</a><a href="" class="code">source code</a>
    <p class="name"></p>
  </div>


</body>
</html>