I am trying to render the visible portion of a diamond-shaped isometric map. The "world" coordinate system is a 2D Cartesian system, with the coordinates increasing diagonally (in terms of the view coordinate system) along the axes. The "view" coordinates are simply mouse offsets relative to the upper left corner of the view.

enter image description here

My rendering algorithm works by drawing diagonal spans, starting from the upper right corner of the view and moving diagonally to the right and down, advancing to the next row when it reaches the right view edge. When the rendering loop reaches the lower left corner, it stops.

There are functions to convert a point from view coordinates to world coordinates and then to map coordinates.

Everything works when rendering from tile 0,0, but as the view scrolls around the rendering needs to start from a different tile. I can't figure out how to determine which tile is closest to the upper right corner.

At the moment I am simply converting the coordinates of the upper right corner to map coordinates. This works as long as the view origin (upper right corner) is inside the world, but when approaching the edges of the map the starting tile coordinate obviously become invalid.

I guess this boils down to asking "how can I find the intersection between the world X axis and the view X axis?"

  • \$\begingroup\$ giving an pictorial representation of the problem is really worth...can you do that pls? \$\endgroup\$
    – Ayyappa
    Oct 11, 2011 at 19:23
  • \$\begingroup\$ Have You tried to solve it with formulas in Isometric Projection on wiki? \$\endgroup\$
    – user712092
    Oct 12, 2011 at 2:10
  • \$\begingroup\$ @user712092: Yes, I am using a 4x4 matrix to transform between view space and world space. That works, but the issue is how to calculate the x,y coordinates for the tile closest to the top-right edge of the view. \$\endgroup\$
    – alekop
    Oct 13, 2011 at 17:31
  • \$\begingroup\$ @Man With Steel Nerves: I'd post a screenshot but SO won't let me because of my low reputation. But picture a large diamond clipped inside a smaller rectangle. \$\endgroup\$
    – alekop
    Oct 13, 2011 at 18:11
  • \$\begingroup\$ a) Upload image to image hosting site and insert its url there. b) Multiple image urls can be on one pastebin url. c) Insert textual link "Text is on on pastebin with suffix Lxzygtv9". You can that image later; or somebody else who can add images right now can (I seem to have the rights to edit and insert image). \$\endgroup\$
    – user712092
    Oct 13, 2011 at 19:15

1 Answer 1


but when approaching the edges of the map the starting tile coordinate obviously become invalid.

Not really, you may not have data for the spot, but there should be nothing wrong with using the same formula.

If you want suggestions for how to overcome the potential problems you might want to show us the appropriate piece of code.

Just to clarify, let's say you have got a 100x100 tiles map, indexed from 0 to 99. For rendering you'd do something like this:

//Loop structure that iterate through tiles
    if(tileX<=99 && tileX>=0 && tileY<=99 && tileY>=0){
        //Draw the tile
        //Do nothing
//End of loop
  • \$\begingroup\$ That's a good idea. I could simply continue the rendering loop until the current tile is inside the map and the view. I'll try this as soon as I can find some time! :) \$\endgroup\$
    – alekop
    Oct 13, 2011 at 17:36

You must log in to answer this question.

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