Isometric grid!!

RedP

Member
Hi, I'm trying to make an isometric grid, but I can't figure out how to make the grid recognize in which cell of it my mouse is, and flash to notify.

What I have:
Screenshot_2.png

What I wanted:
Screenshot_3.png

My grid draw code:

Code:
var r = spriteWidth div 64

var xx = sprx;
var yy = spry;
var xx2 = sprx + (64 * 6);
var yy2 = spry - (32 * 6);

var xx_2 = sprx_2;
var yy_2 = spry_2;
var xx2_2 = sprx_2 - (64 * 6);
var yy2_2 = spry_2 - (32 * 6);

var cw = cellW;
var ch = cellH;

repeat(r)
{
    //Sentido <--
    draw_line_color(xx_2 , yy_2, xx2_2, yy2_2, c_red, c_red)   
    xx_2 -= cw;
    yy_2 += ch;
    xx2_2 -= cw;
    yy2_2 += ch;
    //Sentido -->
    draw_line_color(xx, yy, xx2, yy2, c_red, c_red)   
    xx += cw;
    yy += ch;
    xx2 += cw;
    yy2 += ch;
}
 
This probably isn't the best way, but....here goes anyway.

If you know the x / y position of the right edge of the bottom right cell, then you could work out the other points (top, left, bottom) x / y. "top" point to "bottom" point should still be one corner to the opposite, and the same for "left" to "right". If your measurement is a width and height of 64, then I get 90.51 as the distance between opposite corners

Kind of the same as how you are drawing it now (?) but you can use these points to make two triangles out of each cell, and then use point_in_triangle to see if the mouse is in them. You'd have to loop through the "grid" and test it that way.

Code:
right_x = ?
right_y = ?
begin_x = right_x;
begin_y = right_y;

repeat(?)
{
right_x = begin_x;
right_y = begin_y;
repeat (?)
{
left_x = right_x - 90.51;
left_y = right_y;
top_x = right_x - 45.25;
top_y = right_y - 45.25;
bot_x = right_x - 45.25;
bot_y = right_y + 45.25;

if point_in_triangle (mouse_x, mouse_y, left_x, left_y, top_x, top_y, right_x, right_y) || point_in_triangle (mouse_x, mouse_y, right_x, right_y, bot_x, bot_y, left_x, left_y)
{
figure out grid coordinate;
break;
}
right_x -= 45.25;
right_y -= 45.25;
}
begin_x += 45.25;
begin_y -= 45.25;
}
I think that would do it. There is obviously some pseudo elements that want fixing, and it can be tidied up a lot, but I'm fairly sure it's in the right direction (to work, at least)
 
The correct answer will depend both on where the origin of your grid is located, and what direction the axes point in.

Assume the x-axis points in the upper-right direction, and the y-axis points in the lower-right direction. Well, in this case you could determine which grid cell (_x2,_y2) the mouse is in with:

var _x = mouse_x-_origin_x;
var _y = mouse_y-_origin_y;
var _x2 = floor(0.5 * (_x / cw - _y / ch));
var _y2 = floor(0.5 * ( _x / cw + _y / ch));

And then the world-space position (_x3,_y3) of the left-most point of that grid cell would be:

var _x3 = _origin_x + _x2 * cw + _y2 * cw;
var _y3 = _origin_y + _x2 * -ch + _y2 * ch;

Okay, so the actual position of the origin of the grid is arbitrary. However, you'll want the grid axes to point in a direction that makes sense to you. I thought having the left-most cell on the grid have a grid index of 0,0, and having x increase in the upper-right direciton, and y increase in the lower-right direction just made the most sense.

Here's a different example with the x axis pointing bottom-right and the y axis pointing bottom-left.

var _x = mouse_x- _origin_x;
var _y = mouse_y- _origin_y;
var _x2 = floor(0.5 * (_x / cw + _y / ch));
var _y2 = floor(0.5 * ( _x / -cw + _y / ch));
//world position of top of this grid cell:
var _x3 = _origin_x + _x2 * cw + _y2 * -cw;
var _y3 = _origin_y + _x2 * ch + _y2 * ch;

This diagram shows how you can relate the direction (in world space) that the axes are pointing to the calculations for _x2,_y2, and _x3,_y3:
upload_2019-6-13_22-51-26.png
There, the x axis is pointing toward -cw,-ch (upper-left), and the y axis is pointing toward cw,-ch (upper-right). There's no significance to those particular axis directions, I just chose them randomly as an example different from the ones shown earlier.

One final comment. Which corner of the cell that _x3,_y3 is located at depends on the directions that the axes are pointing. So in the last example I posted above, one axis is pointing to the upper-left, and one is pointing toward the upper-right. You can imagine them fanning out from the bottom direction. So _x3,_y3 will point to the bottom corner of a grid cell. Now take a look at the very first example, in which the axes both point toward the right, meaning they are coming from the left. So in that example, _x3,_y3 will be a point at the left of a grid cell.

Okay, actually one more comment: It doesn't really matter which is the x axis and which is the y axis. It only really needs to make logical sense to you and to work well with whatever data structure you might use to store grid cell data. For example, you probably don't want any legal position the grid to have a negative index on either axis if you are storing data in an array or ds_grid.

Alright, I lied, one comment more. I didn't explicitly say it before, but the x component of each axis is always + or - cw, and the y component is always + or - ch.
 
Last edited:
Top