Tonypa's tile-based tutorials (updated)
[ September 03, 2004 ] by Tonu Paldra, alias Tonypa
A long, well organized and in depth series of articles that cover all the aspects of tile-based games: moving, jumping, scrolling, shooting and much more!

Why tiles?
Map format
More maps
Creating tiles
The hero
Keys to move
Hit the wall
Open the door
Stupid enemy
More on enemy
Shoot him
Getting items
Moving tiles
More scrolling
Isometric view
Mouse to move
Isometric mouse
Isometric scroll
Rotate hero
Rotate bground
More pathfinding


Now that we know how to make isometric view and how to control the hero with mouse, we should go to sleep and forget all about those... Wait, no, I wanted to say we should now combine isometrics and mouse. Hey, wake up!

Nothing really new here, we take isometric tutorial and change keyboard control to the mouse control.


The only interesting question in this chapter is how to convert mouse coordinates from the screen to the tiles so we know which tile player has clicked. As you might remember from the previous chapter, we used:

game.xmouse = Math.round((_root._xmouse - game.tileW / 2) / game.tileW);
game.ymouse = Math.round((_root._ymouse - game.tileH / 2) / game.tileH);

If you ever wondered why we used those lines, then no, it's not because the code looks good and is long enough to impress your girlfriend. The reason we used that code was mainly because we had placed the hero on correct place using lines:

char.x = (char.xtile * game.tileW) + game.tileW / 2;
char.y = (char.ytile * game.tileW) + game.tileW / 2;

Don't be shy, look at the two pairs. I can even rewrite the lines for clarity. Lets take the code with char.x, if we replace strange names with simple letters, it says:

a = b * c + d

now for us to find mouse coordinates, we need to get letter "b" from that equation:

b = (a - d) / c

and this is exactly, what we have used for mouse. OK, but we were here to talk about isometric. In isometric view we cant get the tile clicked with mouse using same code because we have placed tiles in different way. All the tiles are placed in isometric using code:

xiso = x - y
yiso = (x + y) / 2

In order to find out, what tile has been clicked, we need to find variables "x" and "y" from those equations. Lets rewrite first line:

x = xiso + y

now replace the equation for x into second line:

yiso = (xiso + y + y) / 2

which can be rewritten couple of times:

yiso = (xiso + 2 * y) / 2
2 * yiso = xiso + 2*y
2 * y = 2 * yiso - xiso
y = (2 * yiso - xiso) / 2

And we have created two lines to calculate tile in isometric space from the screen coordinates:

y = (2 * yiso - xiso) / 2
x = xiso + y


In the work function use this code to find out the isometric tile under the mouse:

var ymouse = ((2 * game.clip._ymouse - game.clip._xmouse) / 2);
var xmouse = (game.clip._xmouse + ymouse);
game.ymouse = Math.round(ymouse / game.tileW);
game.xmouse = Math.round(xmouse / game.tileW) - 1;

I'm sure you can see the similarities with 2 lines we created before. Variables xmouse and ymouse have values where mouse would have been, if we wouldn't be silly enough to start with all this isometric stuff.

Remember, don't use _root._xmouse because our "tiles" movie clip was moved (game.clip._x=150) and we want to get mouse inside "tiles" movie clip. If you use _root._xmouse, then the tile with x=0 would be placed in the left side of the stage, but isometric view places that tile about in the center of stage.

You can download the source fla with all the code and movie set up here.

Name: Tonu Paldra, alias Tonypa
Location: Estonia
Age: 34
Flash experience: Discovered Flash4 in the year 2000 and fell in love with it. Abandoned Flash4, when they ended Flash4 help forum in Flashkit. Been playing with Flash only in spare time, thinking its great hobby
Job: Magazine designer
| Homepage | News | Games | Articles | Multiplayer Central | Reviews | Spotlight | Forums | Info | Links | Contact us | Advertise | Credits |

| | | |

gotoAndPlay() v 3.0.0 -- (c)2003-2008 gotoAndPlay() Team -- P.IVA 03121770048