Isometric mouse following

[Grim]

Hello.
I'm trying to solve one thing for last three days... If I create normal grid like this:


There is no problem to make item following mouse on the grid, I just set position of object to position mouse / 92 * 92 and it works perfectly.

But problem appears on the isometric grid:


What is the "algorithm" of object's positions to follow mouse on this isometric grid?

I was trying to use extensions, but there are limits of grid, so I would like to make it without any grid extensions, by myself.

[Ryan]

Isometric standards usually use a 30 degree angle grid, but for simplicity I will use a 3:2 ratio (which provides angles of 33.7 degrees).

Each square is squashed vertically by 33.3%. Ie. If it's 92 pixels wide, it's 61.3 pixels high. I'd recommend switching to something that won't cause decimal points, such as 90 pixels wide and 60 pixels high.

Check your isometric grid for the 3:2 ratio before starting, otherwise you could get all sorts of problems further down the line.

Now if you snap to X to X/90*90 and Y/60*60 you'll get much better snapping. There is an issue though, every second row is offsetted 50% of the width horizontally from the previous row and 50% of the height vertically. You'll have to work this into your snapping calculation to get proper snapping.

For this I'd recommend the MOD function (I hope your familiar with it, otherwise google is your friend):

If (Y/30) MOD 2 = 0
- Set X Offset = 0
If (Y/30) MOD 2 = 1
- Set X Offset = 45

Always
- Set X to (X/90*90) + X Offset
- Set Y to Y/30*30

Or to make it all one equation

Always
- Set X to (X/90*90) + (((Y/30) MOD 2)*45)
- Set Y to Y/30*30

This isn't going to be perfect as it may not snap perfectly your mouse position, however it's very close. you'll need to experiment with adding and subtracting offsets to the MouseX position to get pixel perfect grid snapping.

There's also an issue with area detection, as this draws approximate detection boxes around your isometric grid. So your mouse position isn't going to follow the angled lines.

Proposed fixes:

a) Convert your X and Y mouse position into isometric values using trigonometry functions.

- or -

b) Lay out isometric detector active objects and using fine collision detection have:

When mouse is overlapping object
- Set position of highlight to position of isometric grid object.

[Ryan]

Actually I just built an example to try the box method and it's a poor method, I'd suggest going with a grid of actives.

Perhaps someone else can explain the trigonometry method, I haven't practised it myself and I don't really have the time to experiment with it.

[Ryan]

*Bump*

Grim did you find your answer?

I can build you a trigonometry example over the weekend if you still need help.

[Grim]

Wooops, I'm sorry that I didn't thank you when I read your post for the first time, I just forgot to do this. Yes, your post helped me a lot, thank you.

[uprize]

Are you making a diamond shape isometric map, or are you making a staggered isometric grid?
(diamond means a square map rotated on an angle, so the corners of the map are empty, while staggered is a square map with isometric tiles. Google them for more info)
The maths for both are different.

There is an isogrid2 object which will handle diamond iso grid for you no problem, but if you want a staggered iso grid you need to work out maths yourself which you can easily find on google.
I had an extension I was working on which could do both types of maps as well as hex maps, but i never released it and dunno if I ever will.

[Grim]

Well, I'm trying to make a map editor with staggered isometric grid. Thank you for replay, I'll also check on google for some algorithms.

[uprize]

Ok, well there is no extension to handle the maths for you. Maybe one day I will release my extension i started but I doubt it.
My extension took care of all grid maths and also handled drawing the map, scrolling everything.