Sep 25, 2011
Posted on Sep 25, 2011 in Hints and Tips | 10 comments
In this tutorial I will introduce a class by Senocular.com that allows easy movement of game characters with minimal code.
Final Result Preview
In the SWF you’ll see a spaceship; use your Left, Right, Up, and Down arrow keys to move it.
Step 1: Explanation of KeyObject.as
When ActionScript 3.0 came out we lost the functionality of AS2′s Key.isDown() method. Senocular has coded a great little class that will let us emulate this functionality within actionscript 3 and that is what we will look at in the tutorial.
Step 2: Setting Up the Project
Go to File > New and create a new Actionscript 3.0 document, with the following properties:
- Size: 550 * 400
- Background Color: White
- FPS: 24
Save this file as "KeyObject.fla"
Step 3: Downloading KeyObject.as
Before we can code our application we need to get the "KeyObject.as" file, so head over to Senocular.com. Under the Flash Menu, click on Actionscript. Once there you will want to drill down to "KeyObject.as" and download it. Get there by going to Actionscript 3.0 > com > senocular > utils.
You can right-click on the download link and save it as "KeyObject.as".
Once you have done this you need to remove com.senocular.utils right after the package declaration in the file, since we are not using the com.senocular class path.
Change this:
package com.senocular.utils {
import flash.display.Stage;
import flash.events.KeyboardEvent;
//Rest of Class
To this:
package {
import flash.display.Stage;
import flash.events.KeyboardEvent;
//Rest of Class
Step 4: Importing the Player Graphic
In the download files there is a spaceship image called player.png. In Flash, import this to the stage, by going to File > Import > Import To Stage. Right-click on it and choose "Convert To Symbol", give it the symbol name "player", and make sure the registration point is set to the top left. Now give it the instance name of "player" as well.
Step 5: Setting Up the Main Class
Go to File > New and choose ActionScript File.
Save this as Main.as and set it as your Document Class within "KeyObject.fla".
Next add the following code to "Main.as":
package {
import flash.display.Sprite
import flash.events.Event;
import KeyObject;
public class Main extends Sprite{
private var key:KeyObject;
public function Main() {
addEventListener(Event.ADDED_TO_STAGE,setupKeyObject);
}
function setupKeyObject(e:Event){
key = new KeyObject(stage);
stage.addEventListener(Event.ENTER_FRAME,movePlayer);
}
function movePlayer(e:Event){
if(key.isDown(key.LEFT)){
player.x -= 5;
}
if(key.isDown(key.RIGHT)){
player.x +=5;
}
if(key.isDown(key.DOWN)){
player.y +=5;
}
if(key.isDown(key.UP)){
player.y -=5;
}
if(player.y<0){
player.y =0;
}
if(player .y > (stage.stageHeight - player.height)){
player.y = stage.stageHeight - player.height;
}
if(player.x<0){
player.x = 0;
}
if(player.x > (stage.stageWidth - player.width)){
player.x = stage.stageWidth - player.width;
}
}
}
}
Here we set up our package and import the classes we will be using. Next we set up the key variable as type KeyObject, and within our Main constructor we add an ADDED_TO_STAGE Event Listener. This gets called when the movie is fully loaded and the stage is ready.
Inside the setupKeyObject function, we set the key variable to be a new instance of the KeyObject class and add an ENTER_FRAME Event Listener to the stage.
Within the movePlayer function we check which key is being pressed by using key.isDown() and move our player accordingly.
Finally, we check to see whether the object has moved outside the bounds of the stage, and if it has we put it back just inside the stage.
Conclusion
Using Senocular's KeyObject class makes it dead simple to move your game characters! I hope this tutorial has helped; thanks for reading.
View full post on Activetuts+
Sep 25, 2011
Posted on Sep 25, 2011 in Hints and Tips | 10 comments
Picturing animation in terms of vectors is intuitive, but understanding vector mathematics is a pain. In this tutorial, I hope to ease that pain and provide a solution to animation problems using a custom written Vector2D class. We will look at some fundamental concepts of linear kinematics in the Eulerian approach: displacement, velocity and acceleration. Then, we’ll build a simple application with it.
Final Result Preview
Let's take a look at the final result we will be working towards. Click on the Flash panel below and control the arrowhead by pressing the four directional keys.
Step 1: Vector Quantity
All vector quantities have two components: magnitude and direction.
Step 2: Change in Vector Quantity
A change in vector quantities refers to one of these cases:
- Change in direction
- Change in magnitude
- Change in both magnitude and direction
Step 3: Displacement as a Vector Quantity
Displacement, velocity and acceleration are vector quantities. Their definitions are as follows:
- Displacement – Vector of the shortest path pointing from origin to destination. I define origin as point (0, 0) and destination as the particle's location relative to this point. Basically, it refers to the Cartesian Coordinate system as implemented by Flash.
- Velocity – Velocity is the change of displacement over time.
- Acceleration – Acceleration is the change of velocity over time.
The animation below shows displacement as we are going to implement in Flash later.
Step 4: Velocity as a Vector Quantity
Velocity is illustrated by the animation below. Note velocity is constant, which means acceleration is absent in this scenario. If velocity is zero, displacement will remain constant throughout.
Step 5: Acceleration as a Vector Quantity
Acceleration is illustrated by the animation below. Note: kinematics implies constant acceleration. If acceleration changes over time, it falls under the topic of dynamics. Dynamics is the study of forces that cause of acceleration to vary over time. One such force is gravity, and I’ve written a post on animating that.
Step 6: Start Building a Projectile
Now that you have gotten a brief understanding of linear kinematics quantities and able to related them to vectors, we can start building our Projectile class. We would like the projectile be able to capture all these quantities: displacement, velocity and acceleration – so that it can be manipulated on each frame.
Below is the data we shall record in our Projectile class:
private var displace:Vector2D;
private var velo:Vector2D;
private var acc:Vector2D;
Step 7: Initialize Projectile
Upon initiation of this Projectile class, we shall initialise the mentioned variables and draw its graphical representation.
public function Projectile()
{
//draw graphics
this.draw();
//init all vector quantities
displace = new Vector2D(this.x, this.y);
velo = new Vector2D(0, 0);
acc = new Vector2D(0, 0);
}
protected function draw():void
{
//drawing the arrowhead
var height:Number = 30;
var width:Number = 60;
graphics.beginFill(0x0000FF);
graphics.moveTo(0, 0);
graphics.lineTo(width / -3, height / -2);
graphics.lineTo(width / 2, 0);
graphics.lineTo(width / -3, height / 2);
graphics.lineTo(0, 0);
graphics.endFill();
}
Step 8: Accessors of Vector Quantities
The following are accessors of our private variables – displace, velo, acc – in the Projectile class.
public function setDisp(mag:Number, angle:Number):void
{
displace.redefine(mag, angle);
}
public function getDisp():Vector2D
{
return displace;
}
public function setVelo(mag:Number, angle:Number):void
{
velo.redefine(mag, angle);
}
public function getVelo():Vector2D
{
return velo;
}
public function setAcc(mag:Number, angle:Number):void
{
acc.redefine(mag, angle);
}
public function getAcc():Vector2D
{
return acc
}
Step 9: Updaters of Vector Quantities
Upon refreshing every frame, we need to update velocity (using acceleration) and update displacement (using the said velocity). This can be achieved using the following functions. For a thorough explanation on Vector addition, do visit this great post from Daniel Sidhon.
public function applyVelo():void
{
this.displace = this.displace.add(velo);
}
public function applyAcc():void
{
this.velo = this.velo.add(acc);
}
//update sprite's position by displacement.
public function animate():void
{
this.x = this.displace.x;
this.y = this.displace.y;
}
Step 10: Updater for Sprite'S Orientation
We will also need to update the orientation of the Sprite. This can be achieved through the rotation property of Sprite.
public function orient():void
{
this.rotation = Math2.degreeOf(velo.getAngle());
}
I have also implemented a Math2 static class, in which I’ve written a function to easily convert back and forth from the angle’s units of degrees and radians.
public static function radianOf (deg:Number):Number
{
return deg/180*Math.PI;
}
public static function degreeOf (rad:Number):Number
{
return rad/Math.PI*180;
}
Step 11: The Main Class
Now that we have established our Projectile and Math2 class, we can start to code our Main class. We will need a Vector2D class as well although thorough explanation is not included due to the aforementioned article on Vectors by Daniel Sidhon. I assume readers understand the Vector2D class after reading it. However, if clarifications are needed, do prompt me with your queries.
First of all, we need to know private variables of this class.
private var b1:Projectile;
//keypress flags
private var UP:Boolean = false;
private var DOWN:Boolean = false;
private var LEFT:Boolean = false;
private var RIGHT:Boolean = false;
Step 12: Initializing Main
Upon initialization of Main, function init will be launched. This function will create a new Projectile and set its initial velocity. Then, listeners to events will be assigned.
private function init(e:Event = null):void
{
removeEventListener(Event.ADDED_TO_STAGE, init);
// entry point
b1 = new Projectile();
stage.addChild(b1);
//setting initial velocity
b1.setVelo(5, Math2.radianOf(30));
//setting event listeners
b1.addEventListener(Event.ENTER_FRAME, proj_enterFrame);
stage.addEventListener(KeyboardEvent.KEY_DOWN, handle_keyDown);
stage.addEventListener(KeyboardEvent.KEY_UP, handle_keyUp);
}
Step 13: Keyboard Event Listeners
I have defined user control as keypresses of Up, Left, Down and Left arrow keys. Upon pressing and releasing those keys, flag variables of Main (Step 11) will be turned true and false. Based on these flags, the Vector quantities will be manipulated on every frame. Note as well I have divided controls into horizontal and vertical axis manipulators.
private function handle_keyDown(e:KeyboardEvent):void
{
if (e.keyCode == Keyboard.UP) UP = true;
else if (e.keyCode == Keyboard.DOWN) DOWN = true;
if (e.keyCode == Keyboard.LEFT) LEFT = true;
else if (e.keyCode == Keyboard.RIGHT) RIGHT = true;
}
private function handle_keyUp(e:KeyboardEvent):void
{
if (e.keyCode == Keyboard.UP) UP = false;
else if (e.keyCode == Keyboard.DOWN) DOWN = false;
if (e.keyCode == Keyboard.LEFT) LEFT = false;
else if (e.keyCode == Keyboard.RIGHT) RIGHT = false;
}
Step 14: EnterFrame Event Listeners
Upon refresh of each frame the following code will be executed. It is long, but don't worry; just read on.
private function proj_enterFrame(e:Event):void
{
//define acceleration
var accMag:Number = 0.1;
if (UP) {
b1.setAcc(accMag, Math2.radianOf(-90));
b1.applyAcc();
}
else if (DOWN) {
b1.setAcc(accMag, Math2.radianOf(90));
b1.applyAcc();
}
if (LEFT) {
b1.setAcc(accMag, Math2.radianOf(180));
b1.applyAcc();
}
else if (RIGHT) {
b1.setAcc(accMag, Math2.radianOf(0));
b1.applyAcc();
}
//decelerate as nothng is pressed to simulate friction.
if (UP + DOWN + LEFT + RIGHT == 0) {
var currentVeloMag:Number = b1.getVelo().getMagnitude();
var currentVeloAng:Number = b1.getVelo().getAngle();
if(currentVeloMag > 1){
b1.setAcc(accMag * -1, currentVeloAng);
b1.applyAcc();
}
}
b1.applyVelo();
//restricting sprite to borders of the stage
b1.getDisp().x = Math2.implementBound(0, stage.stageWidth, b1.getDisp().x);
b1.getDisp().y = Math2.implementBound(0, stage.stageHeight, b1.getDisp().y);
b1.animate();
b1.orient();
}
Step 15: Update Motion
Updating the motion should be done in the following order:
- Define new acceleration according to user keypress.
- Using acceleration, update current velocity.
- Using current velocity, update current displacement.
- Refine displacement to keep object inside boundaries.
I’ve highlighted the codes for easy identification of these steps.
private function proj_enterFrame(e:Event):void
{
//define acceleration
var accMag:Number = 0.1;
if (UP) {
b1.setAcc(accMag, Math2.radianOf(-90));
b1.applyAcc();
}
else if (DOWN) {
b1.setAcc(accMag, Math2.radianOf(90));
b1.applyAcc();
}
if (LEFT) {
b1.setAcc(accMag, Math2.radianOf(180));
b1.applyAcc();
}
else if (RIGHT) {
b1.setAcc(accMag, Math2.radianOf(0));
b1.applyAcc();
}
//decelerate as nothing is pressed to simulate friction.
if (UP + DOWN + LEFT + RIGHT == 0) {
var currentVeloMag:Number = b1.getVelo().getMagnitude();
var currentVeloAng:Number = b1.getVelo().getAngle();
if(currentVeloMag > 1){
b1.setAcc(accMag * -1, currentVeloAng);
b1.applyAcc();
}
}
b1.applyVelo();
//restricting sprite to borders of the stage
b1.getDisp().x = Math2.implementBound(0, stage.stageWidth, b1.getDisp().x);
b1.getDisp().y = Math2.implementBound(0, stage.stageHeight, b1.getDisp().y);
b1.animate();
b1.orient();
}
Step 16: Slowing Down Motion
You may find that there are other functions slotted in between these highlighted codes. What are they? One is to apply another vector to slow down our projectile as the user does not press on any keys. This is applied before we add velocity to our displacement.
//decelerate as nothng is pressed to simulate friction.
if (UP + DOWN + LEFT + RIGHT == 0) {
var currentVeloMag:Number = b1.getVelo().getMagnitude();
var currentVeloAng:Number = b1.getVelo().getAngle();
if(currentVeloMag > 1){
b1.setAcc(accMag * -1, currentVeloAng);
b1.applyAcc();
}
}
Step 17: Stay Inside
The next one is to restrict our projectile to always stay on the stage, otherwise it will fly out of the screen. Again, implementBound is a function I’ve included in the Math2 static class. Given an upper bound, lower bound and a random value, implementBound will return a value that is within the boundaries.
After applying this constraints onto our displacement (and only after that), we update the Sprite's position with this displacment value.
//restricting sprite to borders of the stage
b1.getDisp().x = Math2.implementBound(0, stage.stageWidth, b1.getDisp().x);
b1.getDisp().y = Math2.implementBound(0, stage.stageHeight, b1.getDisp().y);
Step 18: Orient Sprite
Before we leave this sprite as it is, we should orient it so that it always points in the position it's heading using function orient.
Step 19: Get Set and Go!
Now everything is set to go. As you launch this piece by pressing on Ctrl + Enter, you will see an arrow that gradually slows down as it heads diagonally down the screen. Press on the four directional keys to move the arrow about. Don't worry about losing your arrow; it'll stay inside your view.
Conclusion
This article should get you familiar with using vectors to animate motion. Once you have understood kinematics, do proceed to read up on my post on dynamics. Let me know how it goes. Terima Kasih.
View full post on Activetuts+
