Hellow Guys, the next step we will be moving our Spaceship. We are gonna do 2 different kind of “moving”, the first is with the keyboard if you prefer to make a game for desktop and the second is a simple “touch” moving. You can read the previous tutorial HERE. Well… time to Begin.

I – Posicioning your Spaceship.

First of all let’s position our spaceship in our Screen, if you don’t remember the last tutorial, we have a Spaceship in a symbol Movie Clip with the name  “myShip”. So, go to your Spaceship.as, where the main code are. bellow the trace(“inited”); add: init(); out of the public function Spaceship() let’s create our method init().

private function init():void{
    myShip.x=140;
    myShip.y=120;
    myShip.rotation=90;
    myShip.scaleY=0.6;
    myShip.scaleX=0.4;
}

the x and y is the position of the myShip over the Flash Scene, the .rotation, makes you rotate the ship, so I rotated it to face the right side, the scaleX and the scaleY makes you rescale your object, in other words I’m rescalling myShip’s height for 60% of his total value and width to 40%. If you put a value over 1, it will be bigger than the original value. The full code should look like: Screen Shot 2014-08-01 at 4.36.09 PM

If you test your “Movie”, you should be able to see the ship “better” positioned for a top-shooter game. 😉 Screen Shot 2014-08-01 at 4.39.25 PM

Now let’s make the first move.

II – Keyboard Movement for your Spaceship.

For keyboard movement, you can do it with a lot of different ways. If you are used to program games in other languages, in flash you don’t really need to create a Draw/Tick method, but we are gonna do this way. In flash the Draw/Tick method can be made by many different ways, the most usual is to use “onEnterFrame”, you could use a Time call event or a proper Tick method and I will talk more about it in the future. First of all import:

import flash.events.*;
import flash.ui.Keyboard;

put both import just bellow package{ Now, let’s create some private variable under public class Spaceship:

//horizontal values 
private var _horispeedmax:Number=15; //Represents the max horizontal speed that our ship will reach.
private var _horispeedaccel:Number=2; //that mean our acceleration
private var _horispeeddesaccel:Number=0.5;  //our deceleration
private var _horispeednow:Number=0; //our actual horizontal speed

//vertical values 
private var _vertspeedmax:Number=15;
private var _vertspeedaccel:Number=2;
private var _vertspeeddesaccel:Number=0.5;
private var _vertspeednow:Number=0;
 
//keys 
private var _pushleft:Boolean=false; //if the left key is pressed, it will become true
private var _pushright:Boolean=false;
private var _pushtop:Boolean=false;
private var _pushbottom:Boolean=false;

And now we will create the Keyboard events just inside the init():

//Keyboard events:
stage.addEventListener(KeyboardEvent.KEY_DOWN, KeyDown); //Now, when a key is press the method KeyDown will be called
stage.addEventListener(KeyboardEvent.KEY_UP, KeyUp);
stage.addEventListener(Event.ENTER_FRAME, Draw); //every frame will call this method

Now, we need to create the event method KeyDown, KeyUp and Draw.

 

 function KeyDown(event:KeyboardEvent):void {
    if(event.keyCode == Keyboard.RIGHT) {
       _pushright = true;
       _pushleft =false;
    }
    if(event.keyCode == Keyboard.LEFT) {
      _pushleft = true;
      _pushright = false;
    } 
   if(event.keyCode == Keyboard.UP) {
       _pushtop = true;
       _pushbottom = false;
    } 
   if(event.keyCode == Keyboard.DOWN) {
      _pushbottom = true;
      _pushtop = false;
   }
 } 

function KeyUp(event:KeyboardEvent):void {
    if(event.keyCode == Keyboard.RIGHT) {
       _pushright = false;
    } 
   if(event.keyCode == Keyboard.LEFT) {
      _pushleft = false;
   } 
   if(event.keyCode == Keyboard.UP) {
     _pushtop = false; 
   } 
   if(event.keyCode == Keyboard.DOWN) {
     _pushbottom = false; 
   } 
} 
function Draw(event:Event):void {
   if(_pushright && _horispeednow<=_horispeedmax ) {
      _horispeednow+=_horispeedaccel;
   } 
   else{
      if(_horispeednow>0){
          _horispeednow-=_horispeeddesaccel;
      } 
      if(_horispeednow<0){
          _horispeednow+=_horispeeddesaccel; 
      }
   }
  if(_pushleft && _horispeednow>=-_horispeedmax) {
    _horispeednow-=_horispeedaccel; 
  } 
  else{
     if(_horispeednow>0){
        _horispeednow-=_horispeeddesaccel;
     }
     if(_horispeednow<0){
        _horispeednow+=_horispeeddesaccel;
     }
   } 
   if(_pushtop && _vertspeednow>=-_vertspeedmax) { 
      _vertspeednow-=_vertspeedaccel; 
   }
   else{
      if(_vertspeednow>0){ 
         _vertspeednow-=_vertspeeddesaccel; 
      } 
      if(_vertspeednow<0){
         _vertspeednow+=_vertspeeddesaccel; 
      } 
   }
   if(_pushbottom && _vertspeednow<=_vertspeedmax) {
      _vertspeednow+=_vertspeedaccel; 
   }
   else{
       if(_vertspeednow>0){
          _vertspeednow-=_vertspeeddesaccel; 
       }
       if(_vertspeednow<0){
          _vertspeednow+=_vertspeeddesaccel; 
       }
   }
   myShip.y+=_vertspeednow;
   myShip.x+=_horispeednow; 
}

Now, your ship should be moving with arrow keys.

Like i said before, the Draw method will be called every frame, so make your changes and make the best and most appropriated code for your shi’s movements, because really have too many way to do that.

Your code now should look like:

Screen Shot 2014-08-01 at 7.39.27 PM

Screen Shot 2014-08-01 at 7.39.56 PM

Screen Shot 2014-08-01 at 7.40.16 PM

The next step is if you don’t want to move your ship with a keyboard and prefer to use “Touch” or “Mouse” to do all the movement.

So let’s begin.

 

III – Simple Touch Press Movement for your Ship

First, I must say, in Actionscript 3 you really may use touch, but despite of it, we are going to use click with mouse, the great difference is, with touch, we can have mult touch events and it will work in a different and heavy way,

How it will work: when you click in the screen above the myShip, it will move up and when you click bellow the ship, it will move up, yes only up and down movements, no left and right, just the y-axis will work. You can see it working in one of my game that is in Play Store for free “When My Cat Fall“.

 

**UPDATED**

Here we had a problem, when we clicked with the mouse, our ship went to the direction and never stopped, to fix that:

Add a new var in public class Spaceship:

 

private var lastyclicked:Number=0;

 

Now see bellow the red text (where I updated), the idea is the ship stop around we clicked for last. The updated code is not in the final code, but it is in the zip file, so be aware. 🙂

For this we will add one new private var inside of our blackcat class:

 

private var _mouseClicked:Boolean = false;

 

And two new events inside of init():

 

stage.addEventListener(MouseEvent.MOUSE_UP, onMouseUpHandler);
stage.addEventListener(MouseEvent.MOUSE_DOWN, onMouseDownHandler);

 

Now, let work on the method onMouseUpHandler and onMouseDownHandler:

private function onMouseDownHandler(e:MouseEvent):void {
     _mouseClicked = true;
}
private function onMouseUpHandler(e:MouseEvent):void {
     _mouseClicked = false;
}

Inside of Draw, and above the first “if” let put this code:

if(_mouseClicked){
     if(stage.mouseY>=(myShip.y+(myShip.width/2)-_vertspeedmax+20) && stage.mouseY<=(myShip.y+(myShip.width/2)+_vertspeedmax+20)){
 	_pushbottom=false;
 	_pushtop=false;
 	_vertspeednow=0;
      }
      else{
 	if(stage.mouseY>=(myShip.y+(myShip.width/2))){
	     _pushbottom=true;
	     _pushtop=false;
	}
	else{
	     _pushbottom=false;
	     _pushtop=true;
	}
     }
}
else{
	if(lastyclicked>=(myShip.y+(myShip.width/2)-_vertspeedmax+20) && lastyclicked<=(myShip.y+(myShip.width/2)+_vertspeedmax+20)){
	        _vertspeednow=0;
		_pushbottom=false;
		_pushtop=false;
	}
}

 

Now you should be able to test your Spaceship and click over the screen and see it moving.

The idea is it stop moving over the place where your click is being hold that the reason of the second “if”, of course you can improve it to the way you want and think is better.

I will keep both movements and your full code shall look like:

Screen Shot 2014-08-04 at 4.38.02 PM 

Screen Shot 2014-08-04 at 4.38.31 PM

Screen Shot 2014-08-04 at 4.39.04 PM

Screen Shot 2014-08-04 at 4.39.21 PM

 

Well guys that is all tutorials for this week and the file with our “project” is HERE, you can download it for the next tutorial HERE.

 

One thought on “Tutorial Actionscript 3 Create Your Simple Spaceship Game for iOS or Android – 2: Moving your Spaceship

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s