I'm too tired for my historians mind to try to find out how to calculate the tile coordinate on my map for any given mouse position. 64 by 64 pixels but it's not a square but a diamond, so about half of the 64x64 box in all four corners is not this tile and they're not even arranged neatly. Anyone with a solution?
#GameDev #SoloDev #Mathematics
@TommyvanSon …I'd use per-tile colliders because I'm incredibly lazy
@balint I consider that too, for a combo of laziness and stupidity at my part but I suspect there is that simple solution that mathematical geniuses can think of and that I can understand when I see it.
@TommyvanSon maybe something about rotating your input 45 degree then pretending your grid is horizontal with that input
Or if you're in Godot/unity/similar you can have the square have a matching mouse listener with its grid coord without worrying about screen coords
@ScruffyBrush i was trying that earlier in the process, I think, but I feel like that makes the other way around calculation trickier (find the position based on the coordinate). And then the grid will have even more inequal lines. I'm very hesitant to take this approach. Thanks though!
@TommyvanSon
Another way that might be simpler math wise is
For a square
AB
CD
Consider each of your diagonal separation between tiles as a linear function
(the ones that are aligned with AD and the ones with CB)
To identify which square or empty space you clicked, find the lowest function that is higher or equal to clicked poison input
@ScruffyBrush thank you. I found the solution with the help of another suggestion but your help was appreciated too!
@TommyvanSon Is there a way to rotate the coordinates 45 degrees so they're coordinates on a square grid?
@peterdrake thanks. I did consider this approach before but that would make my grid have even more unequal lengths per record and that caused problems on different places is my code.
@TommyvanSon Okay, how about this:
1. Use a formula to find an approximate answer. For example, the top of your upper right character's head is in row 1-3 and column 2-4.
2. Among the (9 or fewer) candidate tiles, pick the one whose center has the smallest Manhattan distance to the cursor.
@peterdrake This sounds promising. I will need to find a way to calculate the candidates. Never heard of 'Manhattan distance' but I may be able to use that to my advantage.Thanks
@peterdrake your idea was the thing I needed. I reversed the code to find a position for the grid coordinate so I had the decimal for a grid. Then I used that Manhattan distance your proposed to find which is closest. I can make it more efficient but it works! Thanks for the help!
@TommyvanSon Try converting the mouse coordinates to a world-aligned coordinate system.
Let's say
pos_x = mouse_x + mouse_y and
pos_y = mouse_x - mouse_y.
Notice that the first is an addition and the second is a subtraction. You may need to scale the result. IDK if it makes sense, it's midnight here.
@essojadojef in my initial idea, I would first find the nearest product of 32 for x and y and then do something with the remainder. It's that what you mean? When the mouse position is 763x523 for instance, I can't see how pos_x being 986 and pos_y 240 would bring me much further. Or don't I understand?
763÷32 is 23,... and 23×32=736 which gives me 27 to work with. Is this the number to work with? And 11 for y. I would imagine that being a good option.
@TommyvanSon The axis x + y and x - y are diagonal lines aligned with the diamond grid.
Here the red line is made of point where x - y equals 0, and the blue line is made of points where x + y give the same result (not 0, that line would be outside of the screen). Then you perform the division and remainder on the new coordinate system.
@TommyvanSon This works for all points because when moving down-right you increase both x and y, so the result of x - y doesn't change (first axis), and when moving down-left you increase y and decrease x, so the result of x + y reamins the same (second axis).
The results may be different depending on if your engine uses y positive for up or down but the concept should remain the same.
@TommyvanSon Another approach I just realized is to split the grid (the original screen-aligned one) into smaller cells the size of a quarter of a tile and align that grid so only two diamonds are in each cell. Firsst you calculate which cell of the grid the mouse is in, then which of the two diamond for that cell.
@essojadojef Yes, that's the approach I was talking about this morning. I think I'll have to try the approach(es) in code. The quarter tile thing feels easier to my brain. Thank you very much!