First thing you are going to need is the zip archive.
Download the AS3 Character Movement: Helicopter Games ZIP Archive
It’s simply the fla and the as files we are going to use to create our game. Once extracted you will notice the helicopter.fla and the com folder. Inside the com folder is an asgamer/helicopter folder that has our document class, Engine, and our Helicopter’s class, Helicopter. There is also a senocular folder that has his KeyObject class in it. It’s a great class that we will be using to control our keyboard presses for our game.
Step 1: Getting Started
Okay so open up helicopter.fla, Helicopter.as, and Engine.as in Flash. If you look at the fla file you’ll notice in the Library (CTRL+L) we have three movieclips. Background is the sky, that you see on the stage. Blade is the rotating blade at the top of our helicopter and last we have a movieclip of our helicopter altogether. The Helicopter movieclip is linked to the Helicopter class in our helicopter.as file. You’ll also notice our document class is pointing to the Engine class in our Engine.as file (If you don’t understand document class and linkage you need to read my AS3 Flash Games for Beginners tutorial to familiarize yourself with the basics.)
Here’s what our Engine.as should look like:
package com.asgamer.helicopter
{
import flash.display.MovieClip;
public class Engine extends MovieClip
{
public function Engine() : void
{
var heli:Helicopter = new Helicopter();
addChild(heli);
}
}
}
Very simple document class. We just create an instance of Helicopter and add it to the stage…. We need to do one thing first though. we need to pass the stage into our Helicopter class so we can use our keyboard to control our helicopter through the Helicopter class. So just var heli:Helicopter = new Helicopter(); to var heli:Helicopter = new Helicopter(stage);.
Now here’s our Helicopter class:
package com.asgamer.helicopter
{
import flash.display.MovieClip;
public class Helicopter extends MovieClip
{
}
}
Even simpler. But now we need to catch our stage reference that is passed through from Engine. So let’s add our constructor function… catch the stage being passed in a class variable called stageRef and make sure to import flash.display.Stage. If you understand what I am talking about try to do this yourself… if not here’s what your class should look like now.
package com.asgamer.helicopter
{
import flash.display.MovieClip;
import flash.display.Stage;
public class Helicopter extends MovieClip
{
private function stageRef:Stage;
public function Helicopter(stageRef:Stage) : void
{
this.stageRef = stageRef;
}
}
}
Makes good sense right? If not you definitely need to read AS3 Flash Games for Beginners tutorial.
Step 2: What do we want our Helicopter to do?
Okay so what kind of movement do we want our helicopter to have? When we press an arrow key it moves in the direction of the arrow key. Gravity will constantly be pulling our helicopter down so we will have to press up often to keep it in air. Left and right will move our helicopter in those directions and flip him around so it points in the directions we want it to face. Also we want it to speed up gradually in whatever direction it is going and cap at a certain speed. And finally we want it to slow down when no keys are being pressed to move it in a certain direction.
Wow that’s a lot of details… let’s think about all the variables it’s going to take to make this work. We know we have x and y which controls our helicopter’s postion. But what other ones will we need?
* gravity. a number so we can pull our ship downward every frame
* vy and vx. This is the velocity of our ship in the x and y directions… so we can speed up and slow down our helicopter.
* maxspeedG and maxspeed. I created two maxspeeds because I want our helicopter to be able to fall faster than in can fly up and horizontal. the falling maxspeed is maxspeedG… the G representing gravity.
* friction. a number unlike real friction but having a friction like effect. We’ll use our friction variable to slow our ship down in x when no keyboard keys are being pressed.
* key. This will be our object of the keyObject class. We’ll use it to determine if any keys are being held and what to do if so.
Alright so let’s add these to our helicopter class.
package com.asgamer.helicopter
{
import flash.display.MovieClip;
import flash.display.Stage;
public class Helicopter extends MovieClip
{
private var gravity:Number = .4;
private var vy:Number = 0;
private var vx:Number = 0;
private var key:KeyObject;
private var stageRef:Stage;
private var maxspeedG:Number = 9;
private var maxspeed:Number = 6;
private var friction:Number = .92;
private function stageRef:Stage;
public function Helicopter(stageRef:Stage) : void
{
this.stageRef = stageRef;
key = new KeyObject(stageRef);
}
}
}
The breakdown of these is simple. We just added all the variables we discussed above as private class variables. There initial values are simply values that I feel will work great for our helicopter… we’ll discuss them more as we put them to use later.
We also added the key = new KeyObject(stageRef) line to our constructor function. This just creates a new object of KeyObject and assigns it to key. Now we can check for keypresses :)
Step 3: Making our Helicopter Move
Okay so before we make our helicopter move we have to take care of a couple things. First of all we’re missing 3 imports that we must have. So go up to your imports and import these 3 classes.
* import flash.events.Event; //so we can use events and listeners
* import com.senocular.utils.KeyObject; //senocular’s keyobject class
* import flash.ui.Keyboard; //the keyboard class so we know what keys to map.
Perfect. Now we need to add an on enter frame event listener to our helicopter and place our helicopter dead center when our game loads. So we add the event listener and center our helicopter and our class looks like this.
package com.asgamer.helicopter
{
import flash.display.MovieClip;
import flash.events.Event;
import com.senocular.utils.KeyObject;
import flash.display.Stage;
import flash.ui.Keyboard;
public class Helicopter extends MovieClip
{
private var gravity:Number = .4;
private var vy:Number = 0;
private var vx:Number = 0;
private var key:KeyObject;
private var stageRef:Stage;
private var maxspeedG:Number = 9;
private var maxspeed:Number = 6;
private var friction:Number = .92;
public function Helicopter (stageRef:Stage) : void
{
this.stageRef =stageRef;
key = new KeyObject(stageRef);
addEventListener(Event.ENTER_FRAME, loop, false, 0, true);
x = stageRef.stageWidth/2;
y = stageRef.stageHeight/2;
}
}
}
Nothing too drastically new here. we use addEventListener to setup our AS2 equivalent of onEnterFrame. So now every time we enter a frame our class is calling loop(which we need to hurry and create). We set our x to half the stage’s width and our y to half of the stages height. Which logically should be dead center. So let’s create that loop function. I’ll write out all the code then we’ll break it down line by line.
package com.asgamer.helicopter
{
import flash.display.MovieClip;
import flash.events.Event;
import com.senocular.utils.KeyObject;
import flash.display.Stage;
import flash.ui.Keyboard;
public class Helicopter extends MovieClip
{
private var gravity:Number = .4;
private var vy:Number = 0;
private var vx:Number = 0;
private var key:KeyObject;
private var stageRef:Stage;
private var maxspeedG:Number = 9;
private var maxspeed:Number = 6;
private var friction:Number = .92;
public function Helicopter (stageRef:Stage) : void
{
this.stageRef =stageRef;
addEventListener(Event.ENTER_FRAME, loop, false, 0, true);
key = new KeyObject(stageRef);
x = stageRef.stageWidth/2;
y = stageRef.stageHeight/2;
}
public function loop(e:Event) : void
{
vy += gravity;
y += vy;
x += vx;
if (vy > maxspeedG)
vy = maxspeedG;
else if (vy < -maxspeed) vy = -maxspeed; if (vx > maxspeed)
vx = maxspeed;
else if (vx < -maxspeed) vx = -maxspeed; if (vx > 0)
scaleX = 1;
else if (vx < scalex =" -1;"> stageRef.stageHeight)
{
y = stageRef.stageHeight;
vy = 0;
}
rotation = vx*2;
if (key.isDown(Keyboard.RIGHT))
vx += .5;
else if (key.isDown(Keyboard.LEFT))
vx -= .5;
else
vx *= friction;
if (key.isDown(Keyboard.UP))
vy -= 1;
else if (key.isDown(Keyboard.DOWN))
vy += .5;
}
}
}
Okay the breakdown:
* vy += gravity; Very simple… on every enter frame we want gravity to pull our helicopter down. So we add gravity to our helicopter’s vertical velocity.
* y += vy; x += vx; Add the velocity of our helicopter to our helicopter’s position.
* if (vy > maxspeedG) If our helicopter’s speed is greater than the maxspeedG then we set it back to maxspeedG. You’ll notice vy <> 0) scaleX = 1; If our velocity is greater than zero then we are moving right so scaleX our ship to 1. Which is it’s default scale. If our helicopter’s vx is less than zero we must be moving left so change the scaleX to -1. Which is the same as flipping it’s direction.
* if (y > stageRef.stageHeight) If our helicopter has fell off the stage then we set it back to the bottom of the stage and set it’s y velocity to 0. We could set it to -2 or so if we wanted it to bounce. Give it a try later.
* rotation = vx*2; So when our helicopter is moving fast we want it to tilt in the direction it is going. Making the rotation do this will create the desired effect.
* if (key.isDown(Keyboard.RIGHT)) Using senocular’s class we can check if a key is down. So here we check if the right arrow key is down… if so we add to our vx. We do the same the left arrow key is being pressed. If neither are being pressed we add friction. Since our friction is less than one (and greater than zero) if we multiple it by any number that number will get smaller. Continually doing this will make the number get closer and closer to 0 which makes our helicopter slow down. Simple huh?
Alright… we just created movement for our helicopter character! Here’s the final swf, now go use this in your next game.
No comments:
Post a Comment