Top-Down movement (Actionscript 2.0)

So you wan't your character to move similarly to the characters in Hero RPG, this is how:

First of all I'm going to tell you the absolute wrong way to do this, and this is something that a lot of people still do. A lot of people like to move their characters by only using a few lines of code that deal mostly with changing the _x and _y. And their code probably looks something like this:

Note that this code is in the main timeline (with the onClipEvent(enterFrame) method) and not on the moveClip itself. I like this way much better, if you don't do it this way I recommend trying it. You just have to make sure you have 'Player' in the instance name of the character you're moving.

Player.onEnterFrame = function():Void{
	speed = 20;

	if (Key.isDown(Key.DOWN) && Key.isDown(Key.LEFT)){
		this._x -= speed;
		this._y += speed;
	}else if (Key.isDown(Key.DOWN) && Key.isDown(Key.RIGHT)){
		this._x += speed;
		this._y += speed;
	}else if (Key.isDown(Key.UP) && Key.isDown(Key.RIGHT)){
		this._x += speed;
		this._y -= speed;
	}else if (Key.isDown(Key.UP) && Key.isDown(Key.LEFT)){
		this._x -= speed;
		this._y -= speed;
	}else if (Key.isDown(Key.RIGHT)){
		this._x += speed;
	}else if (Key.isDown(Key.LEFT)){
		this._x -= speed;
	}else if (Key.isDown(Key.UP)){
		this._y -= speed;
	}else if (Key.isDown(Key.DOWN)){
		this._y += speed;
	}
}

This is the WRONG way to do it - arrow keys to move.
(you might have to click inside the box for it to work)

That is the bad way to do it, so don't use that code. The problem with this code is that when you move diagonally you move faster than you should, you have to put some triginometry in there to make the movement more lifelike. That is exactly what we are going to do now. So what I did was make a separate function called movePlayer, what this does is it gets the angle of which the player is moving, and then determines how fast the player should actually be going. The code movePlayer looks like this:

movePlayer = function () {
	if (!_root.Wall.hitTest(Player._x, Player._y, true)) { //ignore this for now
		angle = Player._rotation-90;
		radians = angle*Math.PI/180;
		deltax = Math.cos(radians)/2;
		deltay = Math.sin(radians)/2;
		Player.dx = (deltax*speed);
		Player.dy = (deltay*speed);
	}
};

Of course if you throw this into your code right now it won't work because you're not calling it from anywhere. But what this code does is it first gets the rotation of the player (you may have to change the -90 to fit the starting rotation of your player), converts it to radians so we can apply it to our math functions. Then we use the math functions to convert those numbers into variables we can then apply into our final speed. Yes, I'm sure it is confusing and you may not understand very well, but as long as you have a general idea of how it works you should be fine. So now we need to write our movement code that makes the calls to the movePlayer function and that looks like this:

Player.onEnterFrame = function():Void{
	speed = 20;
	this._x += this.dx;
	this._y += this.dy;
	
	if (Key.isDown(Key.DOWN) && Key.isDown(Key.LEFT)){
		this._rotation = -135;
		movePlayer();
	}else if (Key.isDown(Key.DOWN) && Key.isDown(Key.RIGHT)){
		this._rotation = 135;
		movePlayer();
	}else if(Key.isDown(Key.UP) && Key.isDown(Key.RIGHT)){
		this._rotation = 45;
		movePlayer();
	}else if (Key.isDown(Key.UP) && Key.isDown(Key.LEFT)){
		this._rotation = -45;
		movePlayer();
	}else if (Key.isDown(Key.RIGHT)){
		this._rotation = 90;
		movePlayer();
	}else if (Key.isDown(Key.LEFT)){
		this._rotation = -90;
		movePlayer();
	}else if (Key.isDown(Key.UP)){
		this._rotation = 0;
		movePlayer();
	}else if (Key.isDown(Key.DOWN)){
		this._rotation = 180;
		movePlayer();
	}else if (!Key.isDown(Key.DOWN) && !Key.isDown(Key.RIGHT)
			&& !Key.isDown(Key.LEFT) && !Key.isDown(Key.UP)){
		this.dx = 0;
		this.dy = 0;
	}
}

This is fairly straight forward, when we press the arrow keys we set the rotation of the Player to correspond with the arrow keys we pressed. Then we call movePlayer and that sets the desired dx and dy values that make our Player move in the correct direction.

This is the RIGHT way to do it - arrow keys to move.

That's all for the movement, now it's time to move on to Wall Collisions!.

Download the Source file: movement.fla.zip
Comments