ClickPopMedia » Asteroids

Collision Detection and Game Design

Paul — Mon, 07 Jul 2008 23:58:21 +0000

This is the second step in my series of tutorial, the first being Easy Keyboard Controls and Game Design. In this tutorial I will be building on what we already have, adding asteroids and the ability to crash into them.
I’ve made a few minor changes to the original code and graphics since the last tutorial, but nothing big.

So I create a MovieClip with 3 frames and a different asteroid shape on each frame (you could have more or less if you wanted). I give the asteroids their own class since each is going to have to move independently.

public static const LARGE:String = "large";
public static const MEDIUM:String = "medium";
public static const SMALL:String = "small";

public var speedX:Number;
public var speedY:Number;
public var size:String;
…
public function Move():void {
this.x += speedX;
this.y += speedY;
if(this.x > 550 + this.width/2) this.x = -this.width/2;
if(this.x < -this.width/2) this.x = 550 + this.width/2;
if(this.y > 400 + this.height/2) this.y = -this.height/2;
if(this.y < -this.height/2) this.y = 400 + this.height/2;
}

What I’ve done here is give my Asteroid class X and Y speed properties that work with the Move() method for motion. I intend to call the Move() method for each asteroid in the MainLoop() function.

On creation (in the constructor) I want to know if this asteroid is actually a piece of a larger asteroid or not. If it is I’m going to be passing it the base asteroid that this one is breaking off of to use it’s X:Y coordinates and speed, plus to know what size to make the new asteroid.

Now back to the Main class (in the last tutorial I called this the Asteroids class but changed it to Main since I wanted an Asteroid class).

We need to keep track of our asteroids. To do that we will use an Array. We will add this to the Main constructor:

public function Main() {
dCount = 0;
…
refresh_tf.addEventListener(MouseEvent.MOUSE_UP, resetGame);

asteroids = new Array();
for(var i:int = 0; i<6; i++) {
asteroids.push(new Asteroid());
stage.addChild(asteroids[i]);
}
}

This is just adding 6 asteroids to the stage and giving a click event to a reset button I decided to add.
dCount stands for Death Count with an obvious purpose.

The resetGame() function is just resetting all the properties to the default. I still have to make sure to remove all the asteroids before adding all new ones, but that’s it.

I moved the contents of the MainLoop() from the previous tutorial into a function called shipControl() which is now being called from the new MainLoop();

Our revised MainLoop() method is as follows:

protected function MainLoop(e:TimerEvent):void {
for(var i in asteroids) {
asteroids[i].Move();
}

if(dead){
deathTime–;
if(deathTime <=0){
dead = false;
invincibleTime = 150;
invincible = true;
addChild(ship_mc);
}
}else {
shipControl();
if(!invincible) {
collisionCheck();
}else {
if(e.currentTarget.currentCount%10 == 0){
ship_mc.visible = (ship_mc.visible)? false: true;
}

invincibleTime–;
if(invincibleTime <= 0) {
ship_mc.visible = true;
invincible = false;
}
}
}
}

These nested if..else statements are here to handle death and resurrection (RIGHT ON!).

So we have our asteroids flying about the screen, but we have yet to make them destroy your ship. You should notice above the call for to a method call collisionCheck();
Here is that function now:

protected function collisionCheck():void {
var p1:Point = new Point(ship_mc.p1.x, ship_mc.p1.y);
p1 = ship_mc.localToGlobal(p1);
var p2:Point = new Point(ship_mc.p2.x, ship_mc.p2.y);
p2 = ship_mc.localToGlobal(p2);
var p3:Point = new Point(ship_mc.p3.x, ship_mc.p3.y);
p3 = ship_mc.localToGlobal(p3);
var p4:Point = new Point(ship_mc.p4.x, ship_mc.p4.y);
p4 = ship_mc.localToGlobal(p4);
var p5:Point = new Point(ship_mc.p5.x, ship_mc.p5.y);
p5 = ship_mc.localToGlobal(p5);
for(var i in asteroids){
if((asteroids[i].hitTestPoint(p1.x, p1.y, true) ||
asteroids[i].hitTestPoint(p2.x, p2.y, true) ||
asteroids[i].hitTestPoint(p3.x, p3.y, true) ||
asteroids[i].hitTestPoint(p4.x, p4.y, true) ||
asteroids[i].hitTestPoint(p5.x, p5.y, true)) && !dead) {

destroyShip();
remove(i);
}
}
}

Each asteroid does a hitTest with each point on my ship_mc. It’s important that I’m using hitTestPoint() here because it is capable of checking based on the actual shape of the movie clip. A regular hitTest between two MovieClips will only check to see if the bounding boxes are overlapping… in our case that could still be quite 20 pixels or more away from an actual collision. This is exactly what makes realistic 2D physics so difficult in ActionScript.

Anyways, the Hit Test may be a little buggy in some cases, but hitTestPoint works pretty well for us here. After we detect a hit of course we have to destroy the ship and asteroid and set the death timer. the destroyShip() function is trivial enough, but I would like to take a quick look at a line from the remove() method:

stage.addChild(asteroids[asteroids.push(new Asteroid(asteroids[num]))-1]);

I really just need to explain how this slightly complicated jumble works. Reading this from the inner most parenthases out;

We are creating a new Asteroid object (passing it our parent asteroid that has just been destroyed).
new Asteroid(asteroids[num])

We add that Asteroid object to the end of our asteroids Array which is returning the new length of the Array.
asteroids.push(…)

We then use that new length (minus 1) to add our newest asteroid to the stage.
stage.addChild(asteroids[...-1]);

Eh, see now? Collision detection is easy! I think my next installment might be a little more interesting when I add levels, lives, and a scoring system.

… No bullets you ask? Well that’s just an extension of what I’ve already written here right? The only extra thing you have to remember is that the bullets have a limited lifespan.

If you are still confused and can’t do it on your own (if you want to learn you really aught to at least try) then you can always check out the finished source when it’s released.

The source code for the example in this tutorial can be found here: Asteroids – V2 Source

< Lesson 1: Easy Keyboard Controls and Game Design

Easy Keyboard Controls and Game Design

Paul — Thu, 26 Jun 2008 01:21:07 +0000

In this tutorial I will be going over some of the basic elements to making a game in Flash. This being the first in a short series of tutorials on the subject, I will cover the main game loop and keyboard controls.

First off we need to set up some simple graphics. I did some REALLY simple graphics as you can see. The ship_mc being just a triangle and on the 3rd frame of the ship movie clip it get’s a little fire tail. Since I am just imitating Atari Interactive, Inc.’s Asteroids, we don’t really need anything more then that for now.
Now, to get our initial code setup:

package {
import flash.display.*;
import flash.events.*;
import flash.text.*;
import flash.utils.Timer;

public class Asteroids extends MovieClip {
protected var mainTimer:Timer;

public function Asteroids() {
mainTimer = new Timer(20);
mainTimer.addEventListener(TimerEvent.TIMER, MainLoop)
ship_mc.stop();

this.addEventListener(Event.DEACTIVATE, deactive);
this.addEventListener(Event.ACTIVATE, active);
stage.addEventListener(KeyboardEvent.KEY_DOWN, kDown);
stage.addEventListener(KeyboardEvent.KEY_UP, kUp);
}

protected function MainLoop(e:TimerEvent):void {
}

protected function deactive(e:Event):void {
mainTimer.stop();
}
protected function active(e:Event):void {
mainTimer.start();
}
protected function kDown(e:KeyboardEvent):void {
}
protected function kUp(e:KeyboardEvent):void {
}
}
}

So far this is just a skeleton of our game. We have our KEY_DOWN and KEY_UP events which will handle all of our keyboard controls later. But, more importantly, we have our mainTimer. By setting up our game engine to run based on a timer I can later change the frame rate without changing the game dynamics (I left the frame rate at 12/sec for the example above). This is also useful if your game has too many graphical elements and the frame rate drops on some machines, this will preserve the speed of the game itself.
So, please notice that I have the Timer set to “tick” every 20 milliseconds (1000 milliseconds to 1 seconds) which is about 50 ticks per second. Because of that, we are going to have some small values to work with when playing with flight speed and rotation in our ship.
But, first let us think about keyboard controls:

protected var thrust:Boolean;
protected var rpm:Number;
protected function kDown(e:KeyboardEvent):void {
// trace(e.keyCode);
if(e.keyCode == 37 || e.keyCode == 65 || e.keyCode == 100){
rpm = -4;
// trace("LEFT");
}
if(e.keyCode == 38 || e.keyCode == 87 || e.keyCode == 104){
thrust = true;
// trace("UP");
}
if(e.keyCode == 39 || e.keyCode == 68 || e.keyCode == 102){
rpm = 4;
// trace("RIGHT");
}
}
protected function kUp(e:KeyboardEvent):void {
if(e.keyCode == 37 || e.keyCode == 65 || e.keyCode == 100){
rpm = 0;
// trace("LEFT");
}
if(e.keyCode == 38 || e.keyCode == 87 || e.keyCode == 104){
thrust = false;
// trace("UP");
}
if(e.keyCode == 39 || e.keyCode == 68 || e.keyCode == 102){
rpm = 0;
// trace("RIGHT");
}
}

rpm and thrust are going to control our ships flight in the MainLoop later. The keyCode is a number which represents the key being pressed or released on the keyboard. I prefer to set a value on down because the KEY_DOWN event will be fired off numerous times very quickly if the key is held too long. I have the controls set up to work with WASD, the arrow keys, or the num pad.
To find the key values I just traced e.keyCode in the kUp() function and tried pressing the keys in question. This got me the numbers you see in the code above. The commented out traces are there to make sure we have the correct keys, since we don’t have any other indicator yet.

The next step is a simple one (except for some of the math):

protected const TOP_SPEED:Number = 10;
protected const ACCELERATION:Number = .1;
protected const FRICTION:Number = .995;

protected var mainTimer:Timer;
protected var speedX:Number;
protected var speedY:Number;

public function Asteroids() {
rpm = 0;
speedX = 0;
speedY = 0;
…
}

protected function MainLoop(e:TimerEvent):void {
ship_mc.rotation += rpm;

var dx:Number = ACCELERATION * Math.cos((ship_mc.rotation*Math.PI)/180);
var dy:Number = ACCELERATION * Math.sin((ship_mc.rotation*Math.PI)/180);

if(thrust){
speedX += dx;
speedY += dy;
//We want to have a max speed in any direction of the compass
var speed = speedX*speedX + speedY*speedY;
if(speed >= TOP_SPEED*TOP_SPEED) {
speedX *= (TOP_SPEED*TOP_SPEED)/speed;
speedY *= (TOP_SPEED*TOP_SPEED)/speed;
}
ship_mc.gotoAndStop(3);
}else {
ship_mc.gotoAndStop(1);
}
//I know there is no friction in space, but I can’t remember if Asteroids had it or not.
speedX *= FRICTION;
speedY *= FRICTION;

ship_mc.x += speedX;
ship_mc.y += speedY;

if(ship_mc.x > 560) ship_mc.x = -10;
if(ship_mc.x < -10) ship_mc.x = 560;
if(ship_mc.y > 410) ship_mc.y = -10;
if(ship_mc.y < -10) ship_mc.y = 410;
}

Here we have initialized some variables in the constructor first. Then we filled in our MainLoop to give our spaceship some life. I would think the rotation is self evident… it’s the first line of the method. I used some constants in my math (ACCELERATION, TOP_SPEED, and FRICTION) so that I can easily adjust the game settings all in one place, without searching for the parts of the code that I need changed.
The last group of if statements above are checking to see in our ship has flown off the screen and if it has it will be moved to the other side.

That’s all for now. Next time I will probably add some asteroids and talk a little about collision detection.

You can download the source for this example here: AsteroidsSource.rar