Is there a reasonable easy way to implement free movement in a tile-based isometric game? Meaning that the player wouldn't just instantly jump from one tile to another or not be "snapped" to the grid (for example, if the movement between tiles were animated but you'd be locked from doing anything before the animation finishes). I'm a really beginner with anything related to game programming, but with the help of this site and some other resources it was quite easy to do the basic stuff, but I haven't been able to find any useful resources for this particular problem.

Currently I've improvised something close to this: http://jsfiddle.net/KwW5b/4/ (WASD movement). The idea for the movement was to use the mouse map to detect when the player has moved to a different tile and then flip the offsets, and for the most part it works correctly (each corner makes the player move to wrong location: see http://www.youtube.com/watch?v=0xr15IaOhrI, which is probably because I couldn't get the full mouse map work properly), but I have no illusions that it is even close to a good/sane solution. And anyway, it's mostly just to demonstrate what kind of a thing I'd like to implement.

  • \$\begingroup\$ That code looks great, what is the problem exactly? You are pretty modest (in a good way) your code seems rather good, what feature is missing in the demo? \$\endgroup\$
    – AturSams
    Sep 28, 2012 at 23:45
  • \$\begingroup\$ What I meant by the corner problems was this kind of behavior: youtube.com/watch?v=0xr15IaOhrI . I haven't been able to come up with any other solution other than making a lot of if-checks for the problematic offsets, and even then there's some special cases where the player warps to a wrong location. But like I said, I was wondering how this kind of movement is usually implemented since I haven't seen the method I came up with used anywhere else. \$\endgroup\$
    – xtr486
    Sep 29, 2012 at 0:22

2 Answers 2


First of all I suggest that you change directions from: W - up-left S - down-right A - down-left D - top-right

into more intuitive: W - up S - down A - left D - right

As for your concern, I suggest that you make two functions, one translating isometric tile coordinates into grid coordinates, and second the other way around. That way you could simply separate MVC and it would make your life easier when computing active tile: enter image description here

  • 1
    \$\begingroup\$ Your answer looks really promising, but I admit quite much of it just goes over my head. However, I'll try to continue digesting your solution during the next few days. Is this anywhere close to what you were after? jsfiddle.net/Sd4ZP/18 It does have some logic errors (off by one etc. ) and such, but as far as I know the top-down and isometric maps have the same movement. What I haven't even gotten around is how to translate the tile offset from top-down to isometric.. \$\endgroup\$
    – xtr486
    Sep 30, 2012 at 22:58
  • \$\begingroup\$ That looks fine so far! I'll look into it on evening. The thing is to apply transformations in isometric tile drawing method into positionToUser () translate function, and inverse it in positionFromUser () method. \$\endgroup\$ Oct 1, 2012 at 7:36
  • \$\begingroup\$ I see the problem: you're drawing izometric view by putting images instead of using canvas drawing API. It's quite logical, as in the end your izo tiles will be much more then a solid colour. However, for debugging you should also draw lines between the tiles, that would make your life much easier. Anyway, I forked your code and created positionToUser(x,y) translating function. Test it by centering black square on a tile (because in iso view it's always centered), and moving mouse over bottom canvas - a translated dot will be shown on izo canvas: jsfiddle.net/tZTXS/1 \$\endgroup\$ Oct 2, 2012 at 8:30
  • \$\begingroup\$ Thanks! I actually managed to deduce (well, sort of) something myself, namely the isometric offset in the drawIsometric function. Now it's looking like this: jsfiddle.net/P2eKF/4, which seems to do just what I asked in the original question, so I'll mark your answer. :) \$\endgroup\$
    – xtr486
    Oct 2, 2012 at 23:14
  • \$\begingroup\$ I'm glad you did it! I like how WA, WD, AS, SD key kombinations align movement to isometric axes instead of 45 degree angles. Good work. \$\endgroup\$ Oct 3, 2012 at 6:35

If I understand, you want the player move tile to tile but without jumping. You can:

1- Start with tile t0 and offset 0

2- When player move to tile t1 set offset = -(t1 - t0)

3- In the player update, if offset is not 0, decrement using the update time and player speed.

amount = deltatime * playerSpeed
deltaoff = sqrt(offsetX*offsetX + offsetY*offsetY)
total = min( amount, deltaoff )
offsetX = offsetX - (total * offsetX / deltaoff)
offsetY = offsetY - (total * offsetY / deltaoff)

4- Yo can use offset == 0 check to know when player is on tile.

With this you get a player that move free in the map but stick to the tiles.


You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .