Astrolander

June 26th, 2008

I would like to demonstrate how to make my version of an Astrolander game. My version consists just the basics of movement through space, collision detection with the ground, and collision detection with the platform which you must land softly and vertically or your ship will crash. Hopefully with this basic tutorial you will be able to grasp the concept and expand more ideas into this type of game. So lets begin by setting up the 3 movie clips we will be using, the Rocket, the Ground/Level, and the Platform.

Create a new movie clip symbol and give it a name of “Rocket”. I made a simple Rocket for this tutorial, as I do for all my tutorials, and made a green triangle with the nose of the ship pointing up. On the first frame open the Actions Panel and write stop();. Create another 10-15 frames after our rocket and create a motion tween for each line. With each line, have the it move away from the center of the Rocket, fading into an alpha of 0. This will represent the Rocket blowing up if the Rocket crashes on the Level or Platform. Here is my sample Rocket with onions turned on so you can see how my explosion works (I zoomed in quite a bit, the original size of my Rocket is 30×26).

Drag and drop the Rocket movie clip onto the Stage and give it an instance name of “Rocket”. Now lets create our Level.

Create a new movie clip symbol and give it a name of “Level”. And instead of drawing the level from within the movie clip it self, we are going to draw it from within the stage. Drag and drop the “Level” on to the Stage and double click on it to open it within the Stage. For our level, lets keep it real simple. Click on the paintbrush and draw a steep hill in the middle of the Stage. This is what my Level movie clip looks like:

Don’t make anything too complex because this is just a sample and understanding of the game. Go back to the main Stage/Scene 1 and give the Level movie clip an instance name of “Level”. Finally, lets create our Platform.

Create a new movie clip symbol and name it Platform. Using the Rectangle drawing tool, draw a white rectangle in the middle of the movie clip roughly 60×15 dimensions. Drag and drop this movie clip onto the Stage and give it an instance name of “Platform”. Now we have every thing set up and you should have something similar to this:

Now lets start the code. On the first frame of the main timeline, open the Actions Panel and place this code.:

[as]

// game object
var game:Object = new Object();
game.sw = Stage.width;
game.sh = Stage.height;
game.gravity = .3;

// rocket object
var rocket:Object = new Object();
rocket.mc = this.Rocket;
rocket.pos_x = 0;
rocket.pos_y = 0;
rocket.vel_x = 0;
rocket.vel_y = 0;
rocket.rot = 90;
rocket.turn_speed = 6;
rocket.live = true;

// level object
var level:Object = new Object();
level.mc = this.Level;

// platform object
var platform:Object = new Object();
platform.mc = this.Platform;

// collision detection with level
function hit_test_level():Void {

var flag:Boolean = false;
if(level.mc.hitTest(rocket.mc.getBounds(_root).xMax, rocket.mc._y, true)) { flag = true; }
if(level.mc.hitTest(rocket.mc.getBounds(_root).xMin, rocket.mc._y, true)) { flag = true; }
if(level.mc.hitTest(rocket.mc._x, rocket.mc.getBounds(_root).yMax, true)) { flag = true; }
if(level.mc.hitTest(rocket.mc._x, rocket.mc.getBounds(_root).yMin, true)) { flag = true; }
if(flag) {
rocket_die();
}

}

// collision detection with platform
function hit_test_platform():Void {

var flag:Boolean = false;
if(platform.mc.hitTest(rocket.mc.getBounds(_root).xMax, rocket.mc._y, true)) { flag = true; }
if(platform.mc.hitTest(rocket.mc.getBounds(_root).xMin, rocket.mc._y, true)) { flag = true; }
if(platform.mc.hitTest(rocket.mc._x, rocket.mc.getBounds(_root).yMax, true)) { flag = true; }
if(platform.mc.hitTest(rocket.mc._x, rocket.mc.getBounds(_root).yMin, true)) { flag = true; }
if(flag) {

if(rocket.vel_y < 2 || rocket.vel_y > 0) {
if(rocket.mc._rotation < 20 && rocket.mc._rotation > -20) {
game_won();
} else {
rocket_die();
}
} else {
rocket_die();
}

} // end if

}

// move the rocket
function rocket_move():Void {

// thrusting
if(Key.isDown(Key.SPACE)) {
rocket.vel_x -= Math.cos((rocket.rot / 180) * Math.PI);
rocket.vel_y -= Math.sin((rocket.rot / 180) * Math.PI);
}

// turning
if(Key.isDown(Key.LEFT)) { rocket.rot -= rocket.turn_speed; }
if(Key.isDown(Key.RIGHT)) { rocket.rot += rocket.turn_speed; }

// gravity and air friction
rocket.vel_y += game.gravity;
rocket.vel_x *= .98;
rocket.vel_y *= .98;

// update positions
rocket.pos_x += rocket.vel_x;
rocket.pos_y += rocket.vel_y;

// move it visually
rocket.mc._x = rocket.pos_x;
rocket.mc._y = rocket.pos_y;
rocket.mc._rotation = rocket.rot – 90;

// too far high, or too far left or right
if(rocket.mc._x < 0 || rocket.mc._x > game.sw || rocket.mc._y < 0 || rocket.mc._y > game.sh) {
rocket_die();
}

}

// too bad
function rocket_die():Void {
rocket.live = false;
rocket.mc.gotoAndPlay(2);
}

// great job
function game_won():Void {
trace(‘GREAT’);
delete this.onEnterFrame;
}

// sets up level
function game_begin():Void {

// set starting position for rocket
rocket.pos_x = 65;
rocket.pos_y = 70;

// game loop
this.onEnterFrame = game_loop;

}

// main game loop
function game_loop():Void {

// if rocket not alive, don’t go any further
if(!rocket.live) { return; }

// move rocket
rocket_move();

// collision with level
hit_test_level();

// collision with platform on level and landing
hit_test_platform();

}

// lets begin!
game_begin();
[/as]

2. Declare a new game object
3 – 4. Get and set the Stage.width and Stage.height into the game object game.sw and game.sh
5. Set the gravity of the game
8. Declare a new rocket object
9. Have rocket.mc contain the Rocket movie clip that is currently placed on the stage.
10 – 11. Set the rocket object position x and y to be 0
12 – 13. Set the rocket object velocity x and y to be 0
14. We set the rocket object rotation, or “rot” for short, to be 0
15. Set the rocket object turning speed to be 6
16. Set the rocket object live status to true. if true, the user can control the Rocket, otherwise, will not be able to
19. Declare a new level object
20. Have level.mc contain the Level movie clip that is currently placed on the stage
23. Declare a new platform object
24. Same as before, have platform.mc contain the Platform movie clip that is currently placed on the stage

Now we have objects set up, lets start writing the functions. Please note, when I write functions, I don’t in order of what gets initiated firstly… I usually have my set up functions at the bottom, and object functions on top (hero/rocket movement, enemy movement), with collision detection on top of that, and misc functions at the most top… which may be backwards to a lot of programmers, but this has made it more clean for me to program.

27. Create a function hit_test_level
29. Declare a local boolean variable flag and set it to false. If this variable is set to true at any time, the Rocket will blow up/die
30 – 33. These 4 if statements are calculating if our rocket movie clip has hit the level mc at anytime. The first if statement is for the right side, the second is the left, third is the top, and finally the bottom, of the rocket movie clip. If any of these if statements become true, we then set the variable flag to true
34 – 36. If the variable flag is true, then execute the function rocket_die()
38. Close the function hit_test_level
41. Create a function hit_test_platform. This function will do 98% of the last function hit_test_level, but instead checking a collision between the level and rocket movie clips, its the platform and rocket movie clips. Also, in this function we test whether the rocket is descending to quickly and is aligned vertically enough to land
43. Declare a local boolean variable flag
44 – 47. Go through a series of if statements to check it our rocket movie clip has hit the platform movie clip.
50 – 58. Here we are doing a couple of if statement checks to see if the rocket movie clip is landing safely.
50. If the rocket.vel_y, vertical velocity, is less than 2 and greater than 0, proceed to line 51; otherwise, execute the function rocket_die()
51. If the rocket.mc._rotation is less than 20 and greater than -20, than execute function game_won(); otherwise we execute the function rocket_die(). We check if the actual rocket movie clip’s rotation and not the rocket objects rotation (rocket.rot), because the rocket object rotation can be greater than 1000, or less than -1000. If we check the rocket movie clip rotation, we know it won’t be any of these possible values.
62. Close the function hit_test_platform
65. Create a function rocket_move
68 – 71. If the key SPACE is pressed/down, we then accelerate the rocket.vel_x and rocket.vel_y in the direction of the rocket.rot value
74 – 75. If the keys LEFT or RIGHT are pressed, we rotate the rocket movie clip by decreasing and increasing the rocket.rot value
78 – 80. Here we apply the gravity and air friction. This part is optional, but used in this tutorial as an example.
78. Increment the game.gravity to the rocket.vel_y. This will constantly move the rocket movie clip towards the bottom of the Stage. I know there isn’t gravity in outer space, but again, just demonstrating for purposes.
79. Apply air friction for horizontal movement rocket.vel_x
80. Apply air friction for vertical movement rocket.vel_y
83 – 84. Update the rocket.pos_x and rocket.pos_y from the rocket.vel_x and rocket.vel_y values
87 – 89. With the updated rocket.pos_x and rocket.pos_y, we set the rocket movie clip’s x and y position (_x and _y). We also are setting the rotation of the rocket movie clip (_rotation) through the rocket.rot value subtracting 90. The reason we are subtracting 90 is because when we drew our rocket movie clip, we drew the nose pointing up. Remember Flash starts the default angle to the right.
92 – 94. Here we are doing an if statement to check if our rocket movie clip’s _x or _y position is too far off the stage. If the rocket movie clip’s position is too far off the stage, we execute the function rocket_die(). These few lines of code are optional, but I used them because I don’t my rocket movie clip to flying off the stage and the user to be clue less on where the rocket is
96. Close the function rocket_move
99 – 102. Create a function rocket_die. This will set the rocket.live boolean value to false and play the rocket movie clip explosion animation by telling it to gotoAndPlay(2)
105 – 108. Create a function game_won. This function right now will just trace the string “GREAT” and stop/delete the this.onEnterFrame. Of course, you will probably want it to display a congratulations screen or something
111. Create a function game_begin
114 – 115. Set the rocket.pos_x and rocket.pos_y to the desired starting position for the level. In this case, it will start at x position of 65 and y position of 70
118. Set up an onEnterFrame on the main time line, telling it to execute the function game_loop
120. Close the function game_begin
123. Create a function called game_loop. This function will be executed every frame the Flash player is set to (aka, Frames Per Second, or FPS)
126. First we check to see if the rocket.live is still set to true. If rocket.live is NOT (!) set to true, then we just return without having to continue running the rest of the functions script
129 – 135. Execute the functions rocket_move, hit_test_level, hit_test_platform
137. Close the function game_loop
140. Begin the game by executing the function game_begin

Here is what you should get at the end (if you don’t see the Rocket you will have to refresh the browser)

Here is the fla for download.

AS2 > Games

One Response to “Astrolander”

  1. http://www.healthyliving4u.org Says:

    My Blog…

    Great information. I’m going to link back to it….

Leave a Reply

Enter code snippets inside of <pre> and </pre>