narpar.github.io/tutorial.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
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
<!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 1</p>
			</h2>
        </div>
        <span class="blc"></span><span class="trc"></span>
        </div>
        <article class="markdown-body">


<h3>1. Let's get this thing started</h3>

<p>Open Unity 3D and go to <mark>file->New Project</mark>. Call it what you want and don't worry about importing anything.</p>


<h3>2. The interface</h3>

<p>The interface is broken up into 4 parts:</p>

<table>
	<tr>
		<td>Scene/Game view (top-left)</td>
		<td>Allows you to place objects around your scene and preview what the scene will look like.</td>
	</tr>
	<tr>
		<td>Hierarchy view (bottom-left)</td>
		<td>Lists the <i>game objects</i> present in the scene.</td>
	</tr>
	<tr>
		<td>Project view (bottom-middle)</td>
		<td>A file structure of all assets in the project.</td>
	</tr>
	<tr>
		<td>Inspector view (right)</td>
		<td>Displays information on any selected game object.</td>
	</tr>
</table>

<p>We'll be using these as we go.</p>


<h3>3. Making a Scene</h3>

<p>Unity projects are made up of <mark>scenes</mark>. These scenes contain the <mark>game objects</mark> that actually make the game happen.</p>

<p>We'll need 3 scenes for this game: a menu scene, a game scene, and a gameover scene. Create a scene by going <mark>File->New Scene</mark> and hit <mark>ctrl+s</mark> to save it. Do this for our 3 scenes. You'll notice a <i>Main Camera</i> object in the Hierarchy View. We'll be using that later.</p>

<p>Before we go and add some objects to our scenes, let's give them each a <mark>skybox</mark>.</p>

<p>The Unity Asset Store has plenty of assets avaialble to download. Some, however, cost money. You can visit the asset store via <mark>Window->Asset Store</mark>.</p>

<p>I've already downloaded a free skybox from the asset store, so grab it <a href="https://github.com/NarPar/SpaceFightTutorialSeries">here</a> and drag it into your Project View.</p>

<p>The skybox is 6 textures representing the inner faces of a cube, stored as a <i>material</i>. A material has the sphere icon.</p>

<p>To add the skybox to a scene go <mark>Edit->Render Settings</mark>. This will open up some properties in your Inspector View. One of these properties is "skybox". Just drag the skybox material from your Project View onto that property and you're set!</p>

<p>Go a head and do this for our 3 scenes. Just double-click the scene to open it, add the skybox, and hit ctrl-s to save it.</p>

<p>Looks pretty, doesn't it?</p>


<h3>4. HUD</h3>

<p>Open the game scene. Our HUD will include a targetting reticle, which is controlled by the mouse, and a health bar.</p>

<p>We first need to add a reticle graphic and a health bar graphic to the project, then create a script to draw them.</p>

<p>Head <a href="https://github.com/NarPar/SpaceFightTutorialSeries">here</a> and download <mark>reticle.png</mark> and <mark>hp.png</mark> from the project's repository.</p>

<p>Now drag them into the Project View of the Unity 3D interface, adding them to your assets. I recommend creating a folder (<mark>right-click->Create->Folder</mark>) and naming it HUD to place these in.</p>

<p>Now create a javascript file in the Project View: <mark>Right-Click->Create->Javascript</mark>. We'll use this to draw the texture at the center of the mouse position, and display the player's hp.</p>

<p>Open that file (probably in MonoDevelop) and add the following code:</p>

<pre><code>#pragma strict

var reticle:Texture;
var hp:Texture;

private var fullHp:float = 10.0f;
private var currHp:float;
private var fullWidth:float;

private var hpBar:Rect;

function Start () {
	fullWidth = Screen.width / 3;

	currHp = fullHp;

	hpBar = Rect(Screen.width / 3, 18 * Screen.height / 20, fullWidth, 50);
}

function Update () {
	hpBar.width = fullWidth * (currHp/fullHp);
}

function OnGUI() {
	GUI.DrawTexture(Rect(Input.mousePosition.x - 75,Screen.height - Input.mousePosition.y - 75,150,150),reticle);

	GUI.DrawTexture(hpBar,hp);
}</code></pre>

<p>Now don't be afraid. Most of the hubbub is just positioning our textures on the screen, and calculating our hp bar width. I'll be going into detail about this in my physical tutorial, and will later update this tutorial with the details.</p>

<p>Save this file and return to Unity 3D. In this game, our player will be represented by the Main Camera. It is important to note that the OnGUI() in our script will only work when attached to a Camera object.</p>

<p>Drag our HUD script from the Project View onto the Main Camera in the Hierarchy View.</p>

<p>Select the Main Camera in the Hierarchy View, and note its components listed in the Inspection View. You should see HUD at the bottom.</p>

<p>Under the HUD components name you should see the <mark>reticle</mark> and <mark>hp</mark> variables. From the Project View, drag the corresponding textures onto those variables.</p>

<p>Click the Play button at the top of the window to test the game. You should see the reticle following the mouse and a red health bar at the bottom of the screen.</p>


<h3>5. Bullets</h3>

<p>Create a new object: <mark>GameObject->Create Other->Sphere</mark>. This will be the starting point for our bullets. In the Hierarchy View, rename the Sphere to Bullet.</p>


<p>Create a new folder in the Project View: <mark>Right-Click->Create->Folder</mark>, and name it Bullet.</p>

<p>In that folder, create a <mark>Prefab</mark> in the Project View: <mark>Right-Click->Create->Prefab</mark>, and name it Bullet as well.</p>

<p>And finally, also in that folder, create a javascript file in the Project View: <mark>Right-Click->Create->Javascript</mark>, also name it Bullet.</p>

<p>Now drag the new javascript file onto the Bullet object in the Hierarchy View, adding the script as one of it's components.</p>

<p>Add a <mark>Rigidbody</mark> component to the Bullet object in the Hierarchy View. Select the Bullet then go: <mark>Component->Physics->Rigidbody</mark>. This rigidbody component allows it to collide with other rigidbodies. Click on the object and view the Rigidbody component in the Inspector View. Be sure to uncheck the <mark>Use Gravity</mark> box. We won't be simulating gravity in our game.</p>

<p>A sphere is a bit plane, so if you want to make your bullet a bit more interesting, you could add a trail effect and even a particle effect: <mark>Component->Effects->Trail Renderer</mark> and <mark>Component->Effects->Particle System.</mark></p>

<p>Drag the Bullet object in the Hierarchy View onto the Bullet prefab in the Project View. This sets the prefab to that object. Prefabs are objects that we'll instantiate later.</p>

<p>Now that all of that is set up, let's open the Bullet javascript file and add this:</p>

<pre><code>#pragma strict

var speed:float = 10;

private var lifeTime:float = 3.0f;

function Start () {
	rigidbody.velocity = transform.forward * speed;
}

function Update () {

	lifeTime -= Time.deltaTime;
	if(lifeTime <= 0.0f)
		Destroy(gameObject);
}

function Hit() {
	lifeTime = 0.3f;
}</code></pre>

<p>This code is simply setting the initial velocity of the object so it's going forward at it's speed. I've added some simple timer variables to ensure the bullet doesn't go on forever.</p>

<p>Save this code, and return to the Unity 3D window.</p>


<h3>6. Guns</h3>

<p>The following steps will be very similar to the bullets.</p>

<p>Create a new object: <mark>GameObject->Create Other->Cylinder</mark>. This will be a gun that fires the bullets. In the Hierarchy View, rename the Cylinder to Gun.</p>

<p>Create a new folder in the Project View: <mark>Right-Click->Create->Folder</mark>, and name it Gun.</p>

<p>In that folder, create a <mark>Prefab</mark> in the Project View: <mark>Right-Click->Create->Prefab</mark>, and name it Gun as well.</p>

<p>And finally, also in that folder, create a javascript file in the Project View: <mark>Right-Click->Create->Javascript</mark>, also name it Gun.</p>

<p>Now drag the new javascript file onto the Gun object in the Hierarchy View, adding the script as one of it's components.</p>

<p>Drag the Gun object in the Hierarchy View onto the Gun prefab in the Project View.</p>

<p>Now that all of that is set up, let's open the Gun javascript file and add this:</p>

<pre><code>#pragma strict
var bullet:GameObject;

function Update () {

	// Aim the gun!
	var ray = Camera.main.ScreenPointToRay (Input.mousePosition);

	var direction = ray.direction;

	transform.LookAt(direction);

	transform.Rotate(Vector3(90,0,0));

	// Fire the gun with the left click
	if(Input.GetMouseButtonDown(0)) {
		Instantiate (bullet, transform.position + transform.up * 1.0f, Quaternion.LookRotation(direction));
	}
}</code></pre>

<p>The variable <mark>bullet</mark> will hold the Bullet prefab we created. This prefab is instantiated when the <mark>left mouse button</mark> is clicked. The raycasting is to get the direction the bullet should be going in.</p>

<p>Last thing we need to do with the guns is position them by the camera. Since we have a prefab, go ahead and <mark>delete</mark> the Gun object from the Hierarchy View.</p>

<p>Now drag the Gun prefab from the Project View onto the Main Camera object into the Hierarchy View. This will make it a <mark>child</mark> of the Main Camera object. This makes it easier to reference the gun from scripts on the Main Camera, as well as positions the gun relative to the Main Camera, in case we want to move it around later!</p>

<p>Let's give our player 2 guns, so drag another one onto the Main Camera.</p>

<p>Now select one of the guns and change it's position in the Inspector View to <mark>x: -1, y: 0, z: 0</mark>. This will position it slightly left of the camera.</p>

<p>And set the other guns position to <mark>x:1, y: 0, z: 0</mark>. Now you're player is equipped for some double-barreled action.</p>


<h3>5. Asteroids</h3>

<p>I'm no 3D model expert, so i'll take this opportunity to show you how to use 2D images in 3D space!</p>

<p>We'll make a plane which has a texture on its face and will always face the camera. We'll call it a <mark>Billboard</mark>.</p>

<p>Create a new object: <mark>GameObject->Create Other->Plane</mark>.</p>

<p>Create a new folder in the Project View: <mark>Right-Click->Create->Folder</mark>, and name it Asteroid.</p>

<p>In that folder, create a javascript file: <mark>Right-Click->Create->Javascript</mark>, and name it Billboard, and drag it onto the Asteroid object in the Hierarchy View.</p>

<p>Now open the Billboard javascript file and add the following code:</p>

<pre><code>#pragma strict

function Update () {
	transform.LookAt(Camera.main.transform);
	transform.Rotate(Vector3(90,0,0));
}</code></pre>

<p>This script makes the plane always face the camera. Note that the face of the plane faces up, so we have to rotate it 90 degrees.</p>

<p>In that folder, create a <mark>Prefab</mark> in the Project View: <mark>Right-Click->Create->Prefab</mark>, and name it Asteroid as well.</p>

<p>And finally, also in that folder, create a javascript file in the Project View: <mark>Right-Click->Create->Javascript</mark>, also name it Asteroid.</p>

<p>Before we can continue, we'll need an asteroid graphic. Head <a href="https://github.com/NarPar/SpaceFightTutorialSeries">here</a> and download <mark>asteroid.png</mark> from the project's repository.</p>

<p>Drag this graphic onto the Project View of your Unity 3D window, into the Asteroid folder, adding it to the project.</p>

<p>Now drag the graphic onto the Asteroid object in the Hierarchy View. You should see the face of the plane change to the graphic. You should also see a <mark>material</mark> was added to your assets in the Project View. This is the material on the object. The texture cannot be directly mapped to an object, it needs a material which contains that texture.</p>

<p>Select this material and look at the Inspector. At the top there is a <mark>shader</mark> field. Select this and find <mark>Transparent->Diffuse</mark> in the drop-down menu. This will make the transparent parts of the texture also transparent on the plane.</p>

<p>Now drag the new javascript file onto the Asteroid object in the Hierarchy View, adding the script as one of it's components.</p>

<p>Drag the Asteroid object in the Hierarchy View onto the Asteroid prefab in the Project View.</p>

<p>Now that all of that is set up, let's open the Asteroid javascript file and add this:</p>

<pre><code>#pragma strict

var health:int = 5;

private var speed:float = 30.0f;

function Start () {
	rigidbody.velocity = speed * Vector3.Normalize(Camera.main.transform.position - transform.position);
}

function OnCollisionEnter (collisionInfo : Collision) {

	if(collisionInfo.gameObject.tag == "MainCamera") {
		Camera.main.GetComponent(CameraShake).Shake();
		Destroy(gameObject);
	} else if(collisionInfo.gameObject.tag == "Bullet") {

		collisionInfo.gameObject.GetComponent(Bullet).Hit();

	} else if(collisionInfo.gameObject.tag == "Asteroid") {
		var data = GameObject.Find("Data").GetComponent(GameData);
		data.asteroidsCollided += 1;
	}
}

function OnBecameInvisible() {

	var data = GameObject.Find("Data");
	if(data != null) {
		data.GetComponent(GameData).asteroidsSurvived += 1;
	}
	Destroy(gameObject);
}</code></pre>

<p>I will describe the code in more detail in the physical tutorial.</p>

<p>Save this file and return to the Unity 3D window.</p>


<h3>6. Spawner</h3>

<p>To handle the generation of the asteroid, we'll make an blank object with a script.</p>

<p>Create a new object: <mark>GameObject->Create Empty</mark>. Name this object <mark>Spawner</mark></p>

<p>Now create a javascript file in the Project View: <mark>Right-Click->Create->Javascript</mark>, name it Spawner, and drag it onto the Spawner object in the Hierarchy View.</p>

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

<pre><code>#pragma strict

var asteroid:GameObject;

var spawnRange:float = 100.0f;

private var timer:float = 0.0f;
private var startTime:float = 5.0f;

function Start () {

}

function Update () {

	timer -= Time.deltaTime;
	if(timer <= 0.0f){
		SpawnAsteroid();

		startTime = startTime - startTime / 30;
		timer = startTime;
	}


}

function SpawnAsteroid() {
	var x:float = Random.Range(-100,100);
	var y:float = Random.Range(-100,100);

	Instantiate(asteroid, Vector3(x,y,spawnRange), Quaternion.identity);
}</code></pre>

<p>This code instantiates asteroid objects at progressively faster intervals, and in random x,y positions 100 units away from the center of the scene.</p>

<p>Save this code and return to the Unity 3D window.</p>


<h3>7. Scoring</h3>

<p>CREATE DATA OBJECT IN mainmenu SCENE</p>

<pre><code>#pragma strict

// Some stats to show at the end of the game.
var asteroidsSurvived:int = 0;

var shotsFired:int = 0;

var asteroidsCollided:int = 0;


// Make this game object and all its transform children
// survive when loading a new scene.
function Awake () {
	DontDestroyOnLoad (transform.gameObject);
}</code></pre>

<p>ADD SCORE CODE TO GUN.UPDATE AND GUI</p>

<p>ADD THIS TO GUN.UPDATE() IF LEFT MOUSE BUTTON IS DOWN:</p>

<pre><code>var data = GameObject.Find("Data").GetComponent(GameData);
data.shotsFired += 1;</code></pre>

<p>ADD THIS TO GUI:</p>

<pre><code>function OnTriggerEnter(other:Collider) {

	currHp -= 1;
	if(currHp <= 0) {
		Application.LoadLevel("gameover");
	}
	GetComponent(CameraShake).Shake();

}</code></pre>

<h3>8. Main Menu</h3>

<p>Open mainmenu scene.</p>

<p>Create new javascript: <mark>Right-Click->Create->Javascript</mark>, and name it MainMenu</p>

<p>Drag the script onto the Main Camera in the Hierarchy View.</p>

<p>Open the script and add:</p>

<pre><code>#pragma strict
var guiStyle:GUIStyle;

function Update () {
	if(Input.GetKeyDown(KeyCode.Space)) {
		Application.LoadLevel("game");
	}
}

function OnGUI() {
	GUI.Label(Rect((Screen.width / 2) - 250, Screen.height / 2 - 50, 500,100),"PRESS 'SPACE' TO START",guiStyle);
}</code></pre>

<p>Save this and return to the Unity 3D window.</p>

<p>Select the Main Camera and modify the settings of the <mark>guiStyle</mark> variable so that the normal color is <mark>white</mark>, the font is <mark>50</mark>, and the alignment is <mark>MiddleCenter</mark>.</p>


<h3>9. Game Over</h3>

<p>Open gameover scene.</p>

<p>Create new javascript: <mark>Right-Click->Create->Javascript</mark>, and name it GameOver</p>

<p>Drag the script onto the Main Camera in the Hierarchy View.</p>

<p>Open the script and add:</p>

<pre><code>#pragma strict
var gameData:GameData;
var guiStyle:GUIStyle;

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

function OnGUI() {

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

	GUI.Label(Rect((Screen.width / 2) - 250, Screen.height / 3, 500,100),"Asteroids Survived: " + gameData.asteroidsSurvived,guiStyle);

	GUI.Label(Rect((Screen.width / 2) - 250, Screen.height / 3 + 100, 500,100),"Shots Fired: " + gameData.shotsFired,guiStyle);

	GUI.Label(Rect((Screen.width / 2) - 250, Screen.height / 3 + 200, 500,100),"Asteroids Collided: " + gameData.asteroidsCollided,guiStyle);
}

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

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

<p>This script extracts the game data from the data object and displays it on the screen.</p>

<p>Save this and return to the Unity 3D window.</p>

<p>Select the Main Camera and modify the settings of the <mark>guiStyle</mark> variable so that the normal color is <mark>white</mark>, the font is <mark>50</mark>, and the alignment is <mark>MiddleCenter</mark>.</p>


<h3>9. Test and Tweak!</h3>

<p>There are plenty of tweaks you could make to this game. I encourage you to add effects to your objects and tweak the scripts to affect gameplay.</p>

<p>You can find my version of the game <a href="https://github.com/NarPar/SpaceFightTutorialSeries">here</a>, which has a muzzle flash when you fire the guns!</p>

<p>A great idea would be to add player movement as well! Give it a shot.</p>

        </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>