I'm currently changing an existing computer game from a top-down view to an isometric view. The map consists of an infinite number of tiles. Only the tiles which are currently visible in the players window should be shown.

What i know is:

  • How many pixels the worldmap has been scrolled on x and y axis
  • The width and height of a single tile
  • The width and height of the players window

What i need to know is

  • The coordinates of the first tile to be shown
  • The amount of tiles that will fit in the players window

To visualize the old approach was something like this (the dashed square represents the players window):

enter image description here

So with the old approach this calculation was pretty simple.

The new one looks like this:

enter image description here

And this is where i'm stuck at the moment. I can't figure out how to calculate which tile is in the upper left corner of the players window and how many tiles fitting inside the players window on the two new axes.

Can anyone help me with that? If yes, it would be really nice if the solution also contains a short explanation.

Thanks a lot in advance.

  • \$\begingroup\$ The x and y axis you are talking about, in which "space" are they, map-space(there are no pixels there, just tiles) or screenspace? You should be able to switch between them by rotating and scaling according to the size of one iso-tile. \$\endgroup\$
    – Valmond
    Commented Mar 7, 2012 at 12:29
  • \$\begingroup\$ So the x and y here are the tile "numbers". So 0,0 is just the first tile. The tile 0,0 starts at the pixel 0,0 with the upper left side of the square graphic of the tile. So i have the "map-space" where i'm just reffering to the tile numbers and i have a screen-space. If i know that the screen-space i.e. starts at pixel 500,500 so how do i know, which tile is the first one to show and how many tiles i should show inside the screen space? Does this answer your question? \$\endgroup\$
    – Chris
    Commented Mar 7, 2012 at 12:37

2 Answers 2


If you have a "screen-pixel" to "tile" position function, you could just get the tiles from the 4 corners of the screen and you are done (the green ones in your second image where the dotted line have a corner).

How to do it if you don't?

You might want to check out "Mapping Screen to World Coordinates" here (scroll down a bit)

(fast answer as I'm @ work)

  • 1
    \$\begingroup\$ Thanks. Your link was very helpful for understanding the isometric view. Regarding the screen-pixel to tile function i found this question: gamedev.stackexchange.com/questions/12362/… which had the right function to solve my problem. \$\endgroup\$
    – Chris
    Commented Mar 12, 2012 at 8:23

Sorry running a bit out of time. The main idea is to think "triangular" and no longer "rectangular". So you need to find out which triangle is in the upper left corner of the window and how many triangles fit in it. Then the last step would be to convert this into the "rectangular world".


You must log in to answer this question.

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