MMOCC the isometric world scene, 2006–now
Archive. Archived from the original MMOCC Forum (2006–2010), recovered from the Internet Archive. The forum is read-only history now — the scene talks on Discord. If you posted here and want something removed, get in touch.

[AS3] Isometric direction calculation

6 posts · 2010-08-12 · vBulletin era
08-12-2010 12:46 AM #1
One of the most vital parts of an isometric engine, would be to calculate the direction of your next tile. In common isometric games, there are either 8 or 4 directions to walk from. 4 directions seems to be the most popular right now, atleast in the amateur games on this forum. So, i will show you how to calculate your next direction from the current isometric x/y co-ordinate to the destination isometric x/y co-ordinate.

This code only works on a "next tile" basis, as i call it. Basically it means that it will calculate it for the tile infront of you, not right at the end of the path. Below is a little image to explain...


This basically shows that the only directions we can calculate would be the
4 surrounding tiles:
  • Up
  • Left
  • Right
  • Down

However, it is possible to add more directions such as diagonal up or diagonal down. But for now, we will stick to using the four directions.

In the path above, we would want to go the the right, or direction number 2. To achieve this, we need to have a function if some if statements inside.
PHP Code:
public function calcDirection(curX:int, curY:int, destX:int, destY:int):int
{
    if (curX == destX && destY > curY)
    {
        return 1; //Down
    }
    else if (curX == destX && destY < curY)
    {
        return 3; //Up
    }
    else if (curY == destY && destX > curX)
    {
        return 2; //Right
    }
    else if (curY == destY && destX < curX)
    {
        return 4; //Left
    }
    
    return 0; //Direction not available


Lets split this function up, and say how we get each direction.

Down
PHP Code:
if (curX == destX && destY > curY)
{
    return 1; //Down

Here we check to see if the current X co-ordinate is equal to the destination X co-ordinate. If so, it will also check if the destination Y co-ordinate is greater than the current Y co-ordinate. This means that the tile is further down the isometric grid than you currently are, returning the direction down or direction number 1.

Up
PHP Code:
else if (curX == destX && destY < curY)
{
    return 3; //Up

Here we check to see if the current X co-ordinate is equal to the destination X co-ordinate. If so, it will also check if the destination Y co-ordinate is less than the current Y co-ordinate. This means that the tile is further up the isometric grid than you currently are, returning the direction up or direction number 3. The else if ensures that the direction down has not been passed, and makes it so that the combining if statements will not be parsed if you didnt use the return statement.

Right
PHP Code:
else if (curY == destY && destX > curX)
{
    return 2; //Right

Here we check to see if the current Y co-ordinate is equal to the destination Y co-ordinate. If so, it will also check if the destination X co-ordinate is greater than the current X co-ordinate. This means that the tile is further across to the right of the isometric grid than you currently are, returning the direction right or direction number 2.

Left
PHP Code:
else if (curY == destY && destX < curX)
{
    return 4; //Left

Here we check to see if the current Y co-ordinate is equal to the destination Y co-ordinate. If so, it will also check if the destination X co-ordinate is lessthan the current X co-ordinate. This means that the tile is further across to the left of the isometric grid than you currently are, returning the direction left or direction number 4.

return 0;?
This line of code stops the flash compiler from complaining about not having return values for all code paths, but it also makes it so you are able to have some error checking in your movement code. This way you could do something similar to:
PHP Code:
if(direction == 0) return;
//My movement code here 
This would stop avatars walking off screen and doing other crazy things.

So, how to use calcDirection?
Very simply, just have a direction variable in your user/avatar class. Then you can simply use it either when you reach the next tile along the path or when you first set off moving.
PHP Code:
direction = calcDirection(isometric.x, isometric.y, destination.x, destination.y); 
The code above assumes that you have the variables isometric and destination, which are both Points with assigned x/y co-ordinates.

08-12-2010 01:43 AM #2
Nice tutorial!

(although this wouldn't work for staggered maps... just saying)

08-13-2010 12:08 PM #3
Pretty cool, nice tut

09-08-2010 12:22 PM #4
Hey just a tip..
The image above isn't correct.

As it will always first go down then right. to get to that point.
As the code doesn't show any sign of suddenly having a reason to move right first then go down a bit then right again then down.

Also don't really see why your calling it calculating.
As well.. isn't this the basics of basics that doesn't really use any calculating at all ?

But i guess at least your trying.

09-09-2010 12:42 AM #5
(09-08-2010 12:22 PM)ThuGie Wrote:  Hey just a tip..
The image above isn't correct.

As it will always first go down then right. to get to that point.
As the code doesn't show any sign of suddenly having a reason to move right first then go down a bit then right again then down.

Also don't really see why your calling it calculating.
As well.. isn't this the basics of basics that doesn't really use any calculating at all ?

But i guess at least your trying.

It depends how you would want your directions to be structured. It would work if somebody had to move down, right and then down or w.e as it is tile based. It would be called whenever the x and y variable change, thats being the x and y of the current tile. It works in my projects with pathfinding, so i dont see the error. Many people would use this for 2d or isometric maps anyway. Perhaps it wouldnt work with pixel based maps, but i have never tested that so i cannot say.

The image was just used to demonstrate the number of directions along a path, i didnt do it built to hwo the code is structured. Honestly it was a simple draw and fill job. However, depending on your pathfinding heuristic you could have it going like it does along the path.

11-22-2010 09:18 AM #6
Good tutorial +Rep.

Recovered from /printthread.php?tid=18018 · captured 2010.