Space Shooter - Movie Clip and Movement

Transcription

1 Space Shooter - Movie Clip and Movement Type : TextSource File: space-shooter-movie-clip-and-movement.zip Result : See the result Index Series Next >>> In this tutorial series you will learn how to create a simple space shooter game from scratch in flash. It is a good and - more importantly - fun way to get to grips with using actionscript and flash. If you like gaming try out this great website and you can actually earn money while playing games! Click Here! This tutorial is series of tutorials that will teach you how to create Space Shooter Game. The tutorial is divided in 5 parts. To see the complete tutorials, please see Space Shooter Flash Game This is the first part of a series of Space Shooter tutorials. In this part we are going to learn the basics of Movie Clips and character movement. First create a new document in Flash, click "File" > "New...", select "ActionScript 2.0" and click Ok. Create a Movie Clip by right clicking your library tab and selecting "New Symbol...", make sure "Movie Clip" is selected and choose a name. 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":

2 Now drag your Movie Clip from the library to the Stage, select it and give it an instance name. I am going to name it "Ship". So "Ship" is how I am going to call this Movie Clip instance inside my code. We just made our ship, so let's make it move. 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; } } Press Ctrl + Enter and test it, use the arrow key to move your ship around. Here is how this code works: this.onenterframe = function() {... } This is a very simple event from flash; the code inside it will be executed every time flash enters this frame.

3 if (Key.isDown(Key.RIGHT)) { Ship._x += 10; //_x -= 10 would move the ship to the left. } This check if the right key is pressed, then move the Ship 10 pixels to the right. else if (Key.isDown(Key.Up)) { Ship._y -= 10; // _y += 10 would move the ship down. } If the up arrow key is pressed, the ship will move up. It's the same thing as before, but this time we added "else" before "if" because we don't want the ship to move in two directions at the same time. In case you want the ship to move freely remove the "else" and try to move it. We are done with movement! In the next tutorial we are going to make our ship fire bullets. Index Series Next >>> This tutorial is a series of tutorials that will teach you how to create Space Shooter Game. The tutorial is divided in 5 parts. If you haven't learned the previous tutorials, please see Space Shooter Flash Game 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 the name "Bullet". " and give it Before clicking OK, click Advanced, select "Export for Actionscript" and make sure the identifier is "Bullet".

4 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. Now open the actions window of the first frame of the Movie Clip and paste this code: this.onenterframe = function() { this._x += 12; if (this._x > 550) { this.removemovieclip(); } } "this" is the Movie Clip instance, so if we duplicate 100 bullets each bullet will have the same code. this._x += 12; Every frame, the bullet will move 12 pixels to the right. if (this._x > 550) { this.removemovieclip(); } If the bullet passed the limits of the screen (550px) it's no longer visible, so we remove it by using this method "removemovieclip()" 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: var i = 0; this.onenterframe = function() {... else if (Key.isDown(Key.DOWN)) { Ship._y += 5; } if (Key.isDown(Key.SPACE)) { i++; _root.attachmovie("bullet", "Bullet" + i,

5 _root.getnexthighestdepth()); _root["bullet" + i]._x = Ship._x + 3; _root["bullet" + i]._y = Ship._y; } } <<< Previous Index Series Next >>> This tutorial is a series of tutorials that will teach you how to create Space Shooter Game. The tutorial is divided in 5 parts. If you haven't learned the previous tutorials, please see Space Shooter Flash Game 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". Now drag the enemy Movie Clip to the stage, give it an instance name of "Enemy0", right click it and select "Actions". Paste this: 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 300, this._x to 550 and the speed of our enemy to a random number between 1 and 6. And paste this: onclipevent(enterframe) { //in every frame the enemy move left in the speed defined in the reset function. this._x -= myspeed; if (this._x < -10) { //if the enemy is not on the screen, we reset it. reset(); } //if our timer is bigger than 12 we get a new if (timer >= 12) { //direction to the Ship. var dir = Math.ceil(Math.random() * 2) //We get a random number, 1 or 2. 1 is up, 2 is down. //Then we set timer to 0, so we only get a new dir when timer is bigger than 12 timer = 0; } if (dir == 1) { //if dir = 1, we move the ship up. this._y -= 3; } else if(dir == 2) { //if dir = 2, we move the ship down. this._y += 3; } //increase timer by 1, so the timer gets equal to 12 and we get a new direction. timer++ } This is a VERY basic AI that will be improved when we let the enemy know when it killed our ship or if it was killed by us. We only have one enemy, so let's make more. Add this code in the main timeline before the rest of the code.

6 var nrenemies = 3; for (i = 1; i < nrenemies; i++) { _root.enemy.duplicatemovieclip("enemy" + i, _root.getnexthighestdepth()); } The variable nrenemies represents the number of enemies in the screen at the same time. for (i = 1; i < nrenemies; i++) {... } The "for loop" will run the code inside it depending on nrenemies. <<< Previous Index Series Next >>> This tutorial is a series of tutorials that will teach you how to create Space Shooter Game. The tutorial is divided in 5 parts. If you haven't learned the previous tutorials, please see Space Shooter Flash Game 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: var score = 0; Now open the Bullet's code and add this: 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. If you want the player to lose points for getting killed, just add "_root.score -= PointsToLose" to the code that checks if the player was killed. 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.

7 Write "Score:" Now draw another Text box on the stage. Select this new Text box and change these properties: Run the game and see how it works. Now let's make our ship have lives. Add another variable in the main code: var lives = 3; <<< Previous Index Series Next >>>

8 This tutorial is a series of tutorials that will teach you how to create Space Shooter Game. The tutorial is divided in 5 parts. If you haven't learned the previous tutorials, please see Space Shooter Flash Game This is the last part of our game and we are going to add sound and a pause key. 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: var timer = 8; Now make these changes: 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; } } } The code runs like this: 1. If timer >= 8 then shoot a bullet and set timer to 0 2. 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) 3. Timer will be bigger than 8 again and the player can shoot. Before: After:

9 We can add the sound now. You need to have an mp3 file that's going to be the sound played when you fire. You can download one right here. Or simply download the source file that contains sound file. 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. Add this to the shooting code: 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; } } <<< Previous Index Series

10 Space Shooter - Game Pause and Sound Type : TextSource File: space-shooter-pause-game-sound.zip Result : See the result <<< Previous Index Series The first thing we do is declare a new Sound(): var shoot_sound = new Sound(); Then we attach the sound we have on our library to this variable: shoot_sound.attachsound("shoot"); And we tell our sound to play using the start() method: shoot_sound.start(); Run the code (Ctrl + Enter) and see the results. Now we are going to add a pause to our game. Add a new variable to know whether we are paused or not: var gpause = false; Then make some changes to ALL codes. Main code: this.onenterframe = function() { if (!gpause) { //this is the rest of the code we did previously. } } Enemy's code: onclipevent(enterframe) { if (!_root.gpause) { this._x -= myspeed; if (this._x < -10) { reset(); } } } Bullet's code: this.onenterframe = function() { if (!_root.gpause) { //rest of the code we did } } It's pretty simple; if gpause is false the code will run normally, but if gpause is true the code will not run. Add another code to the main timeline: this.onenterframe = function() { if (!_root.gpause) { //rest of the code we did } if (Key.isDown(Key.CONTROL)) { if (gpause) { gpause = false; } else if (!gpause) { gpause = true; } } } If the players press "ctrl" we set gpause to true or false depending on the value of gpause. This needs to be outside "if (!_root.gpause)" because we need to check if the user pressed the

11 pause key even if the game is paused. The game is done! I hope you enjoyed developing it. And see you in the next series! <<< Previous Index Series