I’m working on a isometric 2d tile based game in ruby using SLD 2. The tiles are 40px wide and 20px tall. I’m trying to figure out how to draw the grid (where each cell of the grid is a potential tile, and a tile will be able to be placed there in the map editor).

Normally when making a tile based game, to draw the grid, I would first draw the vertical lines, iterating from 0 to the screen width, in multiples of the tile width. Then I would iterate from 0 to the screen height, in multiples of the tile height, drawing horizontal lines at each iteration along the y axis.

I’m lost as to how I should draw this in an isometric world. I have a function to convert cartesian coordinates to isometric coordinates, and vice versa.

The first thing I tried was to draw the grid as if it was a normal top-down cartesian grid, and right before drawing it, I converted the starting position of the line, and the ending position of the line, to isometric coordinates. This actually worked, however the grid is shifted significantly, and doesn’t cover much of the screen:

I’m thinking there are two things I could do. The first thing would be to calculate how far off these lines are from [0, 0], and then shift each line by that difference, and do the same with the horizontal lines. That might help cover more of the screen, and then I’d probably also need to keep drawing additional lines (roughly twice the screen width and height respectively?).

The second idea I have, would be to simply calculate the angle at which this isometric projection happens at (basically two pixels of horizontal movement for every single pixel of vertical movement), and then just draw a bunch of these lines at an angle. However I think it would be really hard doing it this way to figure out where to place the tiles.

However, I’m sure there is a correct way to do this, and that’s why I’ve come here, I’d really like to do this the correct way, and would appreciate any help.

Thanks.