asteroids - holistic3dfiles.holistic3d.com/tutorials/asteroids.pdf · asteroids in this workshop...

BOND UNIVERSITY Bachelor of Interactive Multimedia and Design

Asteroids

Workshop

F A C U L T Y O F S O C I E T Y A N D D E S I G N

Building an Asteroid Dodging Game

© Penny de Byl Faculty of Society and Design

Bond University [email protected]

B U I L D I N G A N A S T E R O I D D O D G I N G G A M E

1

Asteroids In this workshop you will learn how to control a spaceship game object with the keyboard. The aim will be to develop a simple game with falling asteroids and a scrolling background.

o begin, download the starter file asteroids.zip. Unzip. Open Unity and

open the scene called asteroids. The Main Camera will be looking down the Z axis. Add a plane to the Scene. From the main menu select GameObject > 3D Object > Plane. Position the plane at (0,0,0) with a rotation of (270,0,0) and a scale of (10,10,10). At this position and size the plane should completely cover the camera view. Ensure you don’t move the camera from its X position. The X for the Main Camera should always remain 0. Drag and drop the star-background-seamless-repeating6 texture from the Assets folder in the Project onto the plane in the Scene. This will automatically make a material for you and add it to the plane. To make the plane texture visible WITHOUT lighting set the material’s shader to Unlit/Texture. For more stars, increase the X and Y tiling to 20.

T

STEP 1

STEP 2


2

In this game it will be the background that scrolls. This will give the illusion of movement when in fact there is none. To achieve this we will write some code to cause the texture to roll across the surface of the plane. Create a new Javascript file in the Project called scrolling. Add the following code: #pragma strict private var uvSpeed: Vector2 = new Vector2( 0.0f, -1.0f ); private var uvOffset: Vector2 = Vector2.zero; function LateUpdate() { uvOffset += ( uvSpeed * Time.deltaTime ); renderer.materials[0].SetTextureOffset("_MainTex",

uvOffset); } Save and attach this code to the Plane. Play to see the effect. To modify the speed and direction of the scrolling you can play around with these values. Time to add the space ship. First add a directional light to the scene so you can see the space ship against the background with GameObject > Light > Directional Light. Next, it’s a good idea to position the Game tab next to the Scene tab. This will allow you to place objects in the Scene while ensuring they will be visible to the Game camera. Set the resolution of the Game window to that of your game. You can then be assured you are seeing the entire game view.

STEP 3

STEP 4


3

Now, drag and drop the space frigate prefab into the Scene. It will be the Asset with the icon that looks like this: You’ll need to move the space ship around and rotate it to get it into the game view. In this example it will need to be rotated (0, -90, 90) to be facing up the screen. Play. The space ship will appear to be flying upward although it is actually going nowhere. The scrolling background gives the illusion of movement. We now want to move the space ship from left to right using the arrow keys. To achieve this we need to add some JavaScript. Create a new JavaScript file called controls and add the following: #pragma strict function Update () { if(Input.GetKey("right")) { this.transform.Translate(0,0,-0.1); } else if (Input.GetKey("left")) { this.transform.Translate(0,0,0.1); } } Attach this code to the space ship in the Scene. Play. The ship will now move left and right with the arrow keys. To prevent the player moving the ship off the edge of the screen you’ll want to set some boundaries. We can do this the code. First in the Scene, grab the ship and move it to the extreme left side of the game view. Take note of its X position. This will be the left boundary. Now move the ship to the right. Take note of the X position. In this particular example the values work out to be -4.7 and 4.7 respectively.

STEP 5

STEP 6


4

Now modify the code to include these limiting values thus: function Update () { if(Input.GetKey("right") &&

this.transform.position.x < 4.7) { this.transform.Translate(0,0,-0.1); } else if (Input.GetKey("left") &&

this.transform.position.x > -4.7) { this.transform.Translate(0,0,0.1); } } Save and run. The code is telling the space ship that it can only move right as long as its X position is less than 4.7 and that it can only move left if its X position is greater than -4.7. Time to add some asteroids. In the Scene add a cube (GameObject > 3D Object > Cube). Set the Z position of the cube to the same value as the space ship. Position the cube horizontally in the middle of the game window. The cube will be the spawn point for the asteroids and we want the asteroids to fall in the same plane as the space ship, otherwise they won’t collide. Also, remove the cubes Box Collider.

To spawn asteroids create a new JavaScript file called asteroidspawn and add the following:

STEP 6


5

#pragma strict var asteroidObj: GameObject; function Update () { if(Random.Range(0,1000) < 10) { Instantiate(asteroidObj, this.transform.position,

Quaternion.identity); } } Attach this code to the cube. There are several asteroid prefabs in the project that you can use but before you do they need some small adjustments. Select Rock 01 Prefab from the Project. In the Inspector set its scale to (0.05,0.05,0.05). Remove its Mesh Collider and add a Rigidbody and a Sphere Collider. Both of these components can be found under the Add Component > Physics button at the bottom of the Inspector. Select the cube and locate the asteroidspawn script in the Inspector. Drag and drop Rock 01 Prefab from the Project and drop it onto the exposed Asteroid Obj of the script. Play. The cube will now spawn asteroids that fall down the screen. To have them spawn at the top, move the cube up so that it is just above the top border of the game window and out of view. The asteroids will spawn above the screen and then fall down.

STEP 7

STEP 8


6

The asteroids now fall in a rather uninteresting straight line down the screen when you might prefer they spawn at many locations across the width of the screen. We know from having found the boundaries for the space ship movement that there is a distance of 4.7 on either side of the center of the screen. Note, for this technique to work, the very horizontal centre of the game window should be X=0. This means the Main Camera should have a X position of 0. Modify the spawn script to add a random shift to the asteroids X position thus: #pragma strict var asteroidObj: GameObject; function Update () { if(Random.Range(0,1000) < 10) { var pos = this.transform.position; pos.x += Random.Range(-5,5); Instantiate(asteroidObj, pos, Quaternion.identity); } } Notice the random value has been rounded to 5 instead of 4.7. This will allow the asteroids to fall a little outside the side boundaries of the screen. NOTE: If you’re ship and plane are in different locations you will have values different to 4.7. You’ll need to use the values you determined as the screen boundaries in Step 6. To speed up the rate of asteroids increase the 1000 in the code. Play to see the asteroids fall across the width of the screen. You may have noticed that the asteroids don’t hit the space ship. This is because the space ship doesn’t have a collider on it. To fix this, select the space ship in the Hierarchy. Then from the Add Component button select Physics > Mesh Collider. This will create a collider the same shape as the space ship’s mesh. Ensure the Mesh Collider attached to the space ship has the Mesh set to space_frig.

STEP 9

STEP 9


7

collider. For example, if the asteroids had a mesh collider on them, they would not collide with the ship. The reason being that mesh collider to mesh collider collisions are extremely difficult to calculate. To create an explosion when the ship hits and asteroid, create a new JavaScript called asteroidcollide and add the following code: #pragma strict var explosion: GameObject; function OnCollisionEnter(collision: Collision) { var exp = Instantiate(explosion,

collision.gameObject.transform.position, Quaternion.identity);

Destroy(exp,2); } Attach this code to the space ship. Select the space ship in the Hierarchy and locate the attached code in the Inspector. Drag and drop Explosion 7 from the Project onto the exposed explosion property.

Play. An explosion will occur when an asteroid hits the ship.

STEP 10


8

As you play you will find that the Hierarchy fills up with asteroid clones. Every time an asteroid is created it falls down the screen and then continues to exist forever. This is a bad thing, as the game will soon fill up memory with hundreds of asteroids. Rather, we should ensure that when the asteroids go beyond the view of the camera they get automatically destroyed. To do this, create a new JavaScript called destroyobject and add the code: #pragma strict function OnBecameInvisible() { Destroy(this.gameObject); } Save this script and attach to the Rock 01 prefab by dragging the script in the Project onto the prefab also in the project. Play. Watch the list of objects in the Hierarchy. When an asteroid goes outside the camera’s view it will automatically be destroyed. As you play you may find the explosions tend to unnaturally hang in space where they are created. To make them fall down the screen at the same rate as the asteroids, select the prefab: Rock 01 Prefab and add a Rigidbody (Add Component > Physics > Rigidbody) to it (do not add a collider as well). Let’s add a health bar to the game. Right-click in the Hierarchy, select UI > Slider. This will create a Canvas object with an attached slider and also an Event System.

STEP 10

STEP 11

STEP 12


9

Select the Slider in the Hierarchy. In the Inspector click on the large square in the left top corner of the Rect Transform component. From the pop open window select the TOP LEFT pivot point. This will create an anchor for the health bar that will keep it attached to the top left of the game screen. Now, in the Scene, grab the X and Y axis of the slider and drag it up and across until it is in the upper left corner of your game window. Inside the Slider component, within the Hierarchy you will find an object called Handle Slide Area. This is the white ball on the end of the slider. We don’t need it so just select and delete it. Select the Slider Background from the Hierarchy. Locate its Color in the Inspector and set it to red.

Now select the Fill Area > Fill and set it’s Color to green.

STEP 13

STEP 14

STEP 15


10

To ensure that initially the green health bar is exactly the same size as the red background. Select the Slider’s Background and Fill Area in turn and ensure their Left, Top, Pos Z, Right and Bottom values are all set to 0. Next select the Slider. In the Inspector ensure the Min Value is set to 0, the Max Value is set to 100 and the Value is set to 100. This will have created a health bar that ranges from 0 to 100 with the initial health set to 100 (e.g. full health). To adjust the healthbar on a collision, modify the asteroidcollide script thus: #pragma strict import UnityEngine.UI; var explosion: GameObject; var healthbar: Slider; function OnCollisionEnter(collision: Collision) { var exp = Instantiate(explosion,


Destroy(exp,2); healthbar.value -= 10; }

Select the space ship in the Hierarchy. Locate the asteroidcollide script and the new exposed Healthbar property. Drag and drop the Slider from the Hierarchy

STEP 16

STEP 17


11

onto this variable. This will give the script access to the Slider so it can change its value. Play. The health bar will decrease each time the ship hits an asteroid. Finally, when the health bar reaches zero we will make the ship explode – thus signaling game over. Modify the asteroidcollide script like this: #pragma strict import UnityEngine.UI; var explosion: GameObject; var healthbar: Slider; function OnCollisionEnter(collision: Collision) { var exp = Instantiate(explosion,


Destroy(exp,2); healthbar.value -= 10; if(healthbar.value <= 0) { Instantiate(explosion, this.transform.position,

Quaternion.identity); Destroy(this.gameObject); } } Play. When the health runs out the ship will explode.

1. In the project you’ll find other shaped asteroids. Add more emitters for these different types.

2. Recalling the Audio Source methods used in Slender Granny, can you add a background sound track and explosions? Look for sounds at sounddogs.com, flashkit.com or freesounds.org.

Try this for yourself

STEP 18


12

Like to Learn More? Unity is a free game development engine. It can be downloaded from http://www.unity3d.com.

I’ve two books that can help you get started with programming Unity to create your own desktop and mobile games. The books were written for students and are used in over 40 universities internationally as a text.

They are aimed at the novice and begin gently leading the reader through numerous simple exercises up to complete games.

Read more about them at:

http://www.holistic3d.com

Unity also has a comprehensive set of video tutorials for beginners at:

http://unity3d.com/learn

Contact Me

For more information or help with Unity or associated game creation matters feel free to contact me via email or on social media.

Penny de Byl [email protected] Twitter: @penslayer Facebook: https://www.facebook.com/pdebyl https://www.facebook.com/pages/Holistic3D/272575919455432

More about Bond’s Bachelor of Interactive Media and Design

H T T P : / / W W W . T I N Y U R L . C O M / B O N D B I M D

asteroids - holistic3dfiles.holistic3d.com/tutorials/asteroids.pdf · asteroids in this workshop...

Documents