Take the 2-minute tour ×
Game Development Stack Exchange is a question and answer site for professional and independent game developers. It's 100% free, no registration required.

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?"

share|improve this question
giving an pictorial representation of the problem is really worth...can you do that pls? –  Ayyappa Oct 11 '11 at 19:23
Have You tried to solve it with formulas in Isometric Projection on wiki? –  user712092 Oct 12 '11 at 2:10
@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. –  alekop Oct 13 '11 at 17:31
@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. –  alekop Oct 13 '11 at 18:11
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). –  user712092 Oct 13 '11 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
share|improve this answer
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! :) –  alekop Oct 13 '11 at 17:36

Your Answer


By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.