Scripting isometric box detection

[Mango Jango]

I had to think for a while on how to title this topic. As a result my searches prior to posting returned no results.

I really want to make a turn-based game using squares in which your character and other NPCs move around. Imagine a chess board. For artistic purposes i wanted an isometric view of the play area.

What i need to do, is work out which imaginary box is selected. If i didn't want to use an isometric view, then selection would be simple since the box's x and y coordinates would be parallel to the game engine's - and as a result i could create a relatively simple script to find which range of coordinates the mouse has been clicked inside, and thus select the correct box.

After i've logged the x and y coordinates for each box's corner, i need to tell the game how to read a mouse-click within those boundries. I know i can't use objects or hotspots since there aren't enough for my needs.

I'd be most appreciative if someone could help me out - even if it's just to tell me that my approach is all wrong.

[Khris]

There are two ways to get the field:

1. Use maths. Let's first approach the lines running from the top left to the bottom right. Isometric usually means that a line will go 2 pixels across, then 1 down, then 2 across, then 1 down again, and so on.
Thus every one of those lines is a function like y=x/2+b.
Say the first grid line is defined by y=x/2+100, the second one by y=x/2+80, then +60 aso.
Since y=x/2+b, b=y-x/2, that's mouse.y-mouse.x/2.
So:
100>b>=80: row 1
80>b>=60: row 2
60>b>=40: row 3
Or: the row number is 5-b/20.  (99 divided by 20 is still 4 when using integers.)

And there you are: row=5-(mouse.y-mouse.x/2)/20;

It's almost the same with the columns, we have e.g. y=x/(-2)+300, then y=x/(-2)+280, aso.

column=15-(mouse.y+mouse.x/2)/20;

You'll probably need to adjust 5, 15 and 20 to fit your grid.

2. There's another method without maths at the expense of regions and hotspots.
Use hotspots to determine the row and regions to determine the column. You can use walkable areas, too. That way you shouldn't run out of resources too quickly.

[Mango Jango]

Thank you. The idea of determining rows and columns is great. 

While mathematically i'm not too good, i'd prefer to go that way, then i can develop my abilities.

However, there are a couple of things though that i'm not 100% sure about and want to clear up.

Or: the row number is 5-b/20.

Where does the 5 fit into all of this and why are we dividing by 20? I kept on thinking that i knew how this works yet my understanding falls apart.

It's almost the same with the columns, we have e.g. y=x/(-2)+300, then y=x/(-2)+280, aso.

Are we finding y by dividing x by minus 2 (and then adding the appropriate number)?

If that's the case then i'm guessing this is because the y value needs to decrease more than x when determining the columns.

Once again i'd be very appreciative of any feedback.

[Khris]

Ok, take a look at this:
100>b>=80: row 1
80>b>=60: row 2
60>b>=40: row 3

As long as b is 80, 81, 82, ... 98 or 99, the mouse cursor is at row 1.
As long as b is 60, 61, 62, ... 78 or 79, the mouse cursor is at row 2.
And so on, until maybe row 10 or where ever the rows end.

Now we need a quick way to calculate the row number based on b.
A useful "feature" of integers is that they can only hold whole numbers(?).
Dividing b by 20 will result in 4 for 80-99, in 3 for 60-79, in 2 for 50-59, and so on.

Now we need an operation that will convert 4 to 1, 3 to 2, 2 to 3, 1 to 4, 0 to 5, and so on.
Substracting the value from 5 is exactly what does that.
Thus, we end up with 5 - (b / 20) or 5-b/20.

Are we finding y by dividing x by minus 2 (and then adding the appropriate number)?

Yes, a straight line, expressed mathematically, is always an equation of the form y = a * x + b.

(0, 0) is at the top left of the screen, with the y-axis going down.
To get b, we have to find out where the line intersects the y-axis. At the y-axis, x equals 0, so y0=a*0+b or y0=b or b=y0;
a represents how steep the line is. After starting from any point on the line and going 10 pixels to the right, we'll have to move down -5 pixels to get back on it. Thus a equals -5/10 or -0.5.


Blue: rows, equation of left blue line: y=0.5*x+100
Red: columns, equation of right red line: y=-0.5*x+300

These coordinates aren't very AGS-friendly, so you'll have to adapt the equations.