DPP B2 (c)

Page | 1

JOB SHEET

COURSE : DIPLOMA IN DIGITAL MEDIA DESIGN

SESSION : JAN - JUN 2012 SEMESTER : 4

CODE/SUBJECT : DDM 4323 - GAME DESIGN SHEET NO : JS-8

NO OF STUDENTS : 30 WEEK : 8

LECTURER : AZMI BIN MOHAMED

TOPIC : 8.0 SPACE SHOOTER

SUB-TOPIC :

8.1 Research and create a basics of movie clips and character movement for space shooter game 8.2 Add an interactive elements; lives and score for game 8.3 Add sound effects using ActionScript.

LEARNING OUTCOME :

After completing this topic, students should be able to:

1. Develop their own space shooter games with random enemies. 2. Create an interactive element; lives and score for their games. 3. Add a sound effects using ActionScript

TOOLS / EQUIPMENTS / MATERIALS :

1. Computer 2. Projector 3. Adobe Flash CS4

INSTRUCTION :

1. Research the ActionScript for creates a space shooter game, character movement and

shoot control using keyboard.

2. Follow step-by-step tutorial below to create a space shooter game.

DPP B2 (c)

Page | 2

PROCEDURE :

STEP KEY POINT Movie Clip and Movement 1. Open Adobe Flash and create new

document (ActionScript 2.0) Size: 800x600px Frame Rate : 24fps Background Color: Black

2. Create a Movie Clip by right clicking your library tab and selecting "New Symbol...", make sure "Movie Clip" is selected and choose a name.

3. Flash will create and open the Movie

Clip for editing, so just paste an image or draw a space ship with Flash's drawing tools. After drawing your ship, get back to the main timeline by click on "Scene 1": At properties panel; put a variable name as “ship”.

4. Right click the first frame in your timeline and select "Actions". Type this:

this.onEnterFrame = function() { if (Key.isDown(Key.RIGHT)) { Ship._x += 10; } else if (Key.isDown(Key.LEFT)) { Ship._x -= 10; } else if (Key.isDown(Key.UP)) { Ship._y -= 10; } else if (Key.isDown(Key.DOWN)) { Ship._y += 10; } }

DPP B2 (c)

Page | 3

Shooting

5. This is the second part of the tutorial

and we are going to enable the ship to shoot. Previously we made our ship fly; now we are going to make it shoot and set limits to where it can go. First we need to make our bullets, right click the library tab, select "New Symbol" and give it the name "Bullet". Before clicking OK, click Advanced, select "Export for Actionscript" and

make sure the identifier is "Bullet".

6. We do this because we need to export the Bullet Movie Clip during running time to create many bullets and we will use the name determined in identifier to call it later. Draw a small bullet, and position it like this: This is called registration point, in the stage this is the position of the Bullet Movie Clip.

7. Now open the actions window of the first frame of the Movie Clip, insert this code:

8. Now go to the main timeline, select the first frame and open the actions windows. You will see the previous codes that we have written. Add this code to the old one so we can fire our bullets:

this.onEnterFrame = function()

{

this._x += 12;

if (this._x > 800)

{

this.removeMovieClip();

}

} var i = 0; this.onEnterFrame = function() { . . . else if (Key.isDown(Key.DOWN)) { Ship._y += 5; } if (Key.isDown(Key.SPACE))

DPP B2 (c)

Page | 4

9. Before we finish this tutorial, let's put some limits to where our ship can go, we don't want it to get off the screen. Make these changes:

{ i++; _root.attachMovie("Bullet", "Bullet" + i, _root.getNextHighestDepth()); _root["Bullet" + i]._x = Ship._x + 3; _root["Bullet" + i]._y = Ship._y; } } if (Key.isDown(Key.RIGHT)) { if (Ship.hitTest(800, Ship._y, true)) { Ship._x -= 5; } Ship._x += 5; } else if (Key.isDown(Key.LEFT)) { if (Ship.hitTest(0, Ship._y, true)) { Ship._x += 5; } Ship._x -= 5; } else if (Key.isDown(Key.UP)) { if (Ship.hitTest(Ship._x - 40, 0, true)) { Ship._y += 5; } Ship._y -= 5; } else if (Key.isDown(Key.DOWN)) { if (Ship.hitTest(Ship._x - 40, 600, true)) { Ship._y -= 5; } Ship._y += 5; } if (Ship.hitTest(800, Ship._y, true)) { Ship._x -= 5; }

DPP B2 (c)

Page | 5

Enemies 10. This is the third tutorial of a series about

developing a Space Shooter game, in this tutorial we are going to make enemy ships. Create a new Movie Clip and draw your enemy ship, don't forget to set the identifier to "Enemy" and select "Export to Actionscript".

11. Now drag the enemy Movie Clip to the

stage, give it an instance name of "Enemy0", right click it and select "Actions". Insert this:

12. Then, insert this code:

onClipEvent(load)

{

function reset()

{

var timer = 12;

this._y = Math.random() * 300

this._x = 550

mySpeed = Math.ceil(Math.

random() * 6) + 1;

}

reset();

} // This part of the code creates a function called reset() when the Movie Clip loads for the first time. Inside reset() we set this._y to a random number between 0 and 600, this._x to 800 and the speed of our enemy to a random number between 1 and 6. onClipEvent(enterFrame) { this._x -= mySpeed; if (this._x < -10) { reset(); } if (timer >= 12) { Math.ceil(Math.random() * 2) timer = 0;

DPP B2 (c)

Page | 6

13. Add this code in the main timeline before

the rest of the code. Lives and Score 14. This is the forth part of the development

of a Space Shooter game. In this tutorial we will add lives, scores and game over to our game. Let's start with score.Open the main timeline code and add this variable:

15. Now open the Bullet's code and add this:

} if (dir == 1) { this._y -= 3; } else if(dir == 2) { this._y += 3; } timer++ }

var nrEnemies = 3; for (i = 1; i < nrEnemies; i++) { _root.Enemy.duplicateMovieClip ("Enemy" + i, _root.getNextHighestDepth()); }

var score = 0; this.onEnterFrame = function() { this._x += 9; if (this._x > 550) { this.removeMovieClip(); } for (i = 0; i < _root.nrEnemies; i++) { if (this.hitTest (_root["Enemy" + i])) { _root["Enemy" + i].reset(); _root.score += 10; this.removeMovieClip(); } } } // This is the code we used before to know if a bullet hits an enemy, so we can put the score for killing an enemy there.

DPP B2 (c)

Page | 7

16. The score is done; we just need to show

the player his score. To do that, select the Text Tool and draw it on the stage. Write "Score:"

17. Now draw another Text box on the

stage. Select this new Text box and change these properties:

18. Now let's make our ship have lives. Add another variable in the main code:

19. And make these changes in the code that checks if the player crashed with an enemy:

var lives = 3; if (this.hitTest(_root["Enemy" + i])) { _root.lives -= 1; reset() for(k = 0; k < _root.nrEnemies; k++) { _root["Enemy" + k].reset(); } }

DPP B2 (c)

Page | 8

20. Draw two text boxes again

21. We can see the ship losing lives now, but nothing happens when it goes lower than zero. To change that we tell the player when its game over. Create a new movie clip.

22. Write "Game Over" using the text tool and go back to the main timeline.

DPP B2 (c)

Page | 9

23. Add this to the Ship's code:

Timer 24. Before we start with sound we need to

make some changes. You may have noticed that our ship shoots bullets as much as the player press the space bar, that's not right as it makes the game much easier. To prevent that, we are going to add a timer and the ship will shoot as much as we want. First add a new variable: Then, make this changes:

if (this.hitTest(_root["Enemy" + i])) { _root.lives -= 1; if (_root.lives <= 0) { _root.attachMovie("GameOver", "GameOver", 100) _root.GameOver._x = 275 _root.GameOver._y = 150 this.swapDepths(10); this.removeMovieClip(); } reset() for(k = 0; k < _root.nrEnemies; k++) { _root["Enemy" + k].reset(); } } var timer = 8; this.onEnterFrame = function() { timer++; . . . if (Key.isDown(Key.SPACE)) { i++; if(timer >= 8) { _root.attachMovie("Bullet", "Bullet" + i, _root.getNextHighestDepth()); _root["Bullet" + i]._x = Ship._x + 3; _root["Bullet" + i]._y = Ship._y; timer = 0; } } }

DPP B2 (c)

Page | 10

The code runs like this: If timer >= 8 then shoot a bullet and set

timer to 0 Now that timer = 0, the bullet wont shoot,

so the player has to wait all the code to run at least 8 timer to shoot again (timer++ will increase timer by 1 every frame)

Timer will be bigger than 8 again and the player can shoot.

Sound 25. We can add the sound now. You need to

have an mp3 file that's going to be the sound played when you fire. Now that you have your sound, click File > Import > Import to library...Select your mp3 file and click open, a new file should appear on the library. Right click it and click "Linkage..." Check "Export to ActionScript..." and set the Identifier to "shoot". This is the same thing we did previously with the Bullet Movie Clip, we need the linkage to call this on the code.

Before:

After:

DPP B2 (c)

Page | 11

26. Add this to the shooting code:

27. The game is done! Hope you enjoying

developing and playing it.

if (Key.isDown(Key.SPACE)) { i++; if(timer >= 8) { _root.attachMovie("Bullet", "Bullet" + i, _root.getNextHighestDepth()); _root["Bullet" + i]._x = Ship._x + 3; _root["Bullet" + i]._y = Ship._y; var shoot_sound = new Sound(); shoot_sound.attachSound("shoot"); shoot_sound.start(); timer = 0; } }

REFERENCES :

1. Andrew Rollings, Ernest Adams (2003). Andrew Rollings and

Ernest Adams on Game Design. USA: New Riders Publishing.

2. Andrew Rollings, Dave Morris (2004). Game Architecture and Design:A New Edition. USA: New Riders Publishing.

3. Patrick O’luanaigh (2006). Game Design Complete. USA: Paraglyph Press.