Aeroplane Shooting Game Tutorial – Player Movement

This is the first part from the aeroplane shooting game tutorial. Here are the other sections:

1. Player Movement

2. Shooting Bullets

3. Adding Enemies

4. Collisions

5. Scoring and HUD.

1. Player Movement

1.1. Adding The Player Plane.

From the beginning in an aeroplane shooting game we need of course and aeroplane. In this tutorial we are going to use the oldie but goodie sprite library by Ari Feldman(download here and preview the contents here). A sprite is a sequence of images which are composing an animation.

In flash there are 2 options add graphic resources to project. In case you are are using flash you can import them in a flash project and to use them inside that flash project or to export them as a swc library. The other option is to embed the files in the actionscript code. We are going to use the first option in this tutorial

For the beginning we are going to import an aeroplane sprite in flash. Don’t confuse it with the actionscript sprite class. In game terminology a sprite is an image containing one or several frames which forms an object. Each frame from the sprite is displayed once on the screen so if there are several frames they will form and animation. In flash terminology the closest term is the MovieClip class. For this tutorial we have to follow these steps(you can see a more detailed explanation with screenshots here):

1. Create a flash project and import the image there.
2. Create a rectangle of the 59×43 with no borders and bitmap fill.
3. For that rectangle Right-Click and convert it to symbol. For the name select PlayerPlaneRes and check the export to ActionScript option.
4. Add 2 more frames.
5. For the first frame click on the rectangle and open the Gradient Tranform Tool and move the bitmap fill in such a way that it displays the first image frame. Repeat the operation for the 3rd frame so now we’ll have an animation formed from 3 frames.
6. Open File > Project Settings… and check the SWC option so the classes marked to be exported to AS at point 3 will be exported in the swc.

After you get the swc file create a lib folder in Flash Builder project and copy the file there. Then go to Project Properties > ActionScript Build Path and there in the Library Path tab add the swc folder which contains the exported swc.

package
{
    import flash.display.Sprite;
    import flash.events.Event;
    import flash.events.KeyboardEvent;

    
    [SWF(width=440,height=480,frameRate=60)]
    public class AeroplaneGameTutorial extends Sprite
    {
        private var plane:PlayerPlaneRes = new PlayerPlaneRes();
        
        public function AeroplaneGameTutorial()
        {
            this.addChild(plane);
            this.addEventListener(Event.ENTER_FRAME, enterFrame);
        }
        
        private function enterFrame(e:Event):void
        {
            // the game loop, empty for the moment
        }
    }
    
}

1.2. Moving the Plane

In order to move the plane we need to know which of the arrow keys are down. We have to use a small workaround because in actionscript/flash we don’t have an option to check whether a key is down or not, but we have 2 events which are triggered when a key is pressed respectively released.

We are going to instantiate a keys vector which keeps the states of all pressed keys. When a key is pressed down, the corresponding value in keys vector is set to true, meaning is pressed, and when the key is released the value is set to false.

We are going to create as well several helper functions which returns is the plane should go down/up/left/right. The plane will react to arrow keys as well to awsd control scheme.

public class AeroplaneGameTutorial extends Sprite
    {
        private var plane:PlayerPlaneRes = new PlayerPlaneRes();
        
        private var keys:Vector. = new Vector.(255);
        private var SPEED:Number = 3;
        
        public function AeroplaneGameTutorial()
        {
            this.addChild(plane);
            
            for (var i:int = 0; i < 255; i++) 				keys[i] = false; 			 			plane.x = stage.stageWidth / 2; 			plane.y = stage.stageHeight - 50; 			 			stage.addEventListener(KeyboardEvent.KEY_DOWN, keyDown); 			stage.addEventListener(KeyboardEvent.KEY_UP, keyUp); 			this.addEventListener(Event.ENTER_FRAME, enterFrame); 		} 		 		private function enterFrame(e:Event):void 		{ 			water.y += 1; 			if (water.y > 0)
                water.y -= 512;
            
            if (isUp()) plane.y = Math.max(plane.height / 2, plane.y - SPEED);
            if (isDown()) plane.y = Math.min(stage.stageHeight - plane.height / 2, plane.y + SPEED);
            if (isLeft()) plane.x = Math.max(plane.width / 2, plane.x - SPEED);;
            if (isRight()) plane.x = Math.min(stage.stageWidth - plane.width / 2, plane.x + SPEED);			
        }
        
        private function keyUp(e:KeyboardEvent):void{
            keys[e.keyCode] = false;
        }
        private function keyDown(e:KeyboardEvent):void{
            keys[e.keyCode] = true;
        }
        
        private function isUp():Boolean{
            return (keys[38] || keys[87]);
        }
        
        private function isDown():Boolean{
            return (keys[40] || keys[83]);
        }

        private function isLeft():Boolean{
            return (keys[37] || keys[65]);
        }

        private function isRight():Boolean{
            return (keys[39] || keys[68]);
        }
        
        
    }

1.3. Setting the limits of player movement.

Now that we have a moving plane we have to make sure it stays in the screen bounding limits. We have to change the code in enterFrame accordingly:

private function enterFrame(e:Event):void
{
     if (isUp()) plane.y = Math.max(plane.height / 2, plane.y - SPEED);
     if (isDown()) plane.y = Math.min(stage.stageHeight - plane.height / 2, plane.y + SPEED);
     if (isLeft()) plane.x = Math.max(plane.width / 2, plane.x - SPEED);;
     if (isRight()) plane.x = Math.min(stage.stageWidth - plane.width / 2, plane.x + SPEED);              
}

4. Adding a Moving Background.

Now that we have a plane that we can move on the screen we need to show the movement of the plane. Not only that the plane is moving on the screen but also to give the sensation of flying. For that we need to create a moving background. In this example we are going to use a water texture to create the impression that the plane flies over the sea. We need to create a MovieClip and export it in the same way we did it for the plane. The MovieClip height should be double of the screen size and it should contain 2 vertically tileable images. We can compose it from the same texture repeated until it exceeds the screen size.

Once we have the water background exported as WaterTextureRes we have to add it in the display list and to adjust its position( considering in our case the speed of 1). The texture can be repeated after 512 pixels.

public class AeroplaneGameTutorial extends Sprite
{

    private var water:WaterTextureRes = new WaterTextureRes();

    public function AeroplaneGameTutorial()
    {
        this.addChild(water);
        ...
    }

    private function enterFrame(e:Event):void
    {
        water.y += 1;
        if (water.y > 0)
            water.y -= 512;
        ...
    }
...
}

Now the code looks like this:

package
{
    import flash.display.Sprite;
    import flash.events.Event;
    import flash.events.KeyboardEvent;

    
    [SWF(width=440,height=480,frameRate=60)]
    public class AeroplaneGameTutorial extends Sprite
    {
        private var plane:PlayerPlaneRes = new PlayerPlaneRes();
        private var water:WaterTextureRes = new WaterTextureRes();
        
        private var keys:Vector. = new Vector.(255);
        private var SPEED:Number = 3;
        
        public function AeroplaneGameTutorial()
        {
            this.addChild(water);
            this.addChild(plane);
            
            for (var i:int = 0; i < 255; i++) 				keys[i] = false; 			 			plane.x = stage.stageWidth / 2; 			plane.y = stage.stageHeight - 50; 			 			stage.addEventListener(KeyboardEvent.KEY_DOWN, keyDown); 			stage.addEventListener(KeyboardEvent.KEY_UP, keyUp); 			this.addEventListener(Event.ENTER_FRAME, enterFrame); 		} 		 		private function enterFrame(e:Event):void 		{ 			water.y += 1; 			if (water.y > 0)
                water.y -= 512;
            
            if (isUp()) plane.y = Math.max(plane.height / 2, plane.y - SPEED);
            if (isDown()) plane.y = Math.min(stage.stageHeight - plane.height / 2, plane.y + SPEED);
            if (isLeft()) plane.x = Math.max(plane.width / 2, plane.x - SPEED);;
            if (isRight()) plane.x = Math.min(stage.stageWidth - plane.width / 2, plane.x + SPEED);			
        }
        
        private function keyUp(e:KeyboardEvent):void
        {
            keys[e.keyCode] = false;
        }
        private function keyDown(e:KeyboardEvent):void
        {
            keys[e.keyCode] = true;
        }
        
        private function isUp():Boolean{
            return (keys[38] || keys[87]);
        }
        
        private function isDown():Boolean{
            return (keys[40] || keys[83]);
        }

        private function isLeft():Boolean{
            return (keys[37] || keys[65]);
        }

        private function isRight():Boolean{
            return (keys[39] || keys[68]);
        }
        
        
    }
    
}

Here you can play the result of this tutorial:

You can grab the code for this tutorial from github.

Aeroplane Shooting Game Tutorial – Player Movement

Aeroplane Shooting Game Tutorial – Player Movement

Aeroplane Shooting Game Tutorial – Player Movement

Aeroplane Shooting Game Tutorial – Player Movement