RTS-like character movement using mouse in flash (Actionscript 3 tutorial)

In this lesson we will learn how to create a mouse click movement for our character!

The idea is simple: click anywhere on the screen, character walks there. A little more difficult to turn this into reality.

First of all, we need to create our character movieclip. Here's a step by step guide:

1) Create a movieclip on stage with instance name "char".

2) Find a sprite sheet of a unit walking, or draw your own. Make sure it has 4 directions - left, right, up and down.

3) In the "char" movieclip, create 4 frames.

4) Each frame must contain one unique movieclip of the character walking in a specific direction (example of char character: frame 1 - mc of guy walking down, frame 2 - right, frame 3 - up, frame 4 - left)

Make sure that the first frame of every animation movieclip is the guy standing.

5) Now you have a movieclip with 4 different animation movieclips on 4 different frames. Give those animation movieclips instance name of "w" (yes, 4 mc's with instance of "w", it is okay because they are on different frames)

6) Inside the char movieclip, set labels for the frames - "down", "right", "up" and "left", according to your MCs.

7) Put stop(); on each of the 4 frames in your char movieclip.

Now that we have everything set up, it is time for coding! Here is the full code with commentary. (The code should be on the main timeline)

// define all necessary variables

var iswalking = false; // is the character moving?
var goX = char.x; // goX - the point on the X axis to which char must move
var goY = char.y; // same as goX but on the Y axis
var movespeed = 5; // movespeed of our hero
var dir = "down"; // current direction of movement

stage.addEventListener(Event.ENTER_FRAME, loop);

function loop(Event)
{
 // animation handling

 if (iswalking == true)
 {
  char.w.play();
 }
 else
 {
  char.w.gotoAndStop(1);
 }

 // direction handling

 char.gotoAndStop(dir);

 // movement handling

 if ((goY-movespeed)>char.y)
 {
  char.y +=  movespeed;
  dir = "down";
  iswalking=true;
 }
 else if ((goY+movespeed)<char.y)
 {
  char.y -=  movespeed;
  dir = "up";
  iswalking=true;
 }
 else if ((goX-movespeed)>char.x)
 {
  char.x +=  movespeed;
  dir = "right";
  iswalking=true;
 }
 else if ((goX+movespeed)<char.x)
 {
  char.x -=  movespeed;
  dir = "left";
  iswalking=true;
 }
 else
 {
  iswalking = false;
 }

}

stage.addEventListener(MouseEvent.CLICK, setposition);

// set the position to which char must move on click

function setposition(MouseEvent){
 goX=mouseX
 goY=mouseY}

And here's what we get!



We can edit the code a little to add support for diagonal movement too.

var iswalking = false;
var goX = char.x;
var goY = char.y;
var movespeed = 5;
var dir = "down";

stage.addEventListener(Event.ENTER_FRAME, loop);

function loop(Event)
{
 // animation handling

 if (iswalking == true)
 {
  char.w.play();
 }
 else
 {
  char.w.gotoAndStop(1);
 }

 // direction handling

 char.gotoAndStop(dir);

 // movement handling

 if ((goY-movespeed)>char.y)
 {
  char.y +=  movespeed;
  dir = "down";
 }
 else if ((goY+movespeed)<char.y)
 {
  char.y -=  movespeed;
  dir = "up";
 }
  if ((goX-movespeed)>char.x)
 {
  char.x +=  movespeed;
  dir = "right";
 }
 else if ((goX+movespeed)<char.x)
 {
  char.x -=  movespeed;
  dir = "left";
 }
 
 if ((goY-movespeed)>char.y || (goY+movespeed)<char.y || (goX-movespeed)>char.x || (goX+movespeed)<char.x){
  iswalking = true;
 } else {
  iswalking=false
  }
}

stage.addEventListener(MouseEvent.CLICK, setposition);

function setposition(MouseEvent){
 goX=mouseX
 goY=mouseY}

Thanks for reading!

Update: Due to popular demand, I've uploaded the source file.

Related:

Actionscript 3 RTS game tutorial part 2
Actionscript 3 RTS game tutorial part 3
Actionscript 3 RTS game tutorial part 4
Actionscript 3 RTS game tutorial part 5