Get mouse coordinates on a rotated "grid"

Show off your games, demos and other (playable) creations.
User avatar
Jasoco
Inner party member
Posts: 3725
Joined: Mon Jun 22, 2009 9:35 am
Location: Pennsylvania, USA
Contact:

Get mouse coordinates on a rotated "grid"

Post by Jasoco »

So I'm working on this thing...

Image
(Everyone's doing it these days)

And I got to thinking, it would be neat if I could figure out what tile the mouse is actually over. But I don't know the math to do that.

The "ground" image (The checkerboard grid image) is a simple Löve transformation where it's rotated at the angle I want first, then scaled to give it a fake perspective. Here's another simpler example with the Y scaling and fake perspective scaling turned off:

Image

So how would I go about figuring out where the mouse is given that the corner shown above is 0,0 and the image's x and y offset is the position of the player? (The purple square) Surely it's pretty simple. But Google isn't helping and only seems to have answers for dealing with plain old isometric grids. My grid has free-rotation.

Edit: How in the world did I end up putting this in Games and Creations? Sorry I meant to put it in Support.
Last edited by Jasoco on Thu Mar 14, 2019 11:34 am, edited 1 time in total.
monolifed
Party member
Posts: 188
Joined: Sat Feb 06, 2016 9:42 pm

Re: Get mouse coordinates on a rotated "grid"

Post by monolifed »

I think it is screen space/coordinates/position to world space/coordinates/position transformation/projection problem
So maybe this helps?
https://stackoverflow.com/questions/769 ... ace-coords
https://stackoverflow.com/questions/467 ... oordinates
Nelvin
Party member
Posts: 124
Joined: Mon Sep 12, 2016 7:52 am
Location: Germany

Re: Get mouse coordinates on a rotated "grid"

Post by Nelvin »

User avatar
pgimeno
Party member
Posts: 3541
Joined: Sun Oct 18, 2015 2:58 pm

Re: Get mouse coordinates on a rotated "grid"

Post by pgimeno »

Nelvin wrote: Thu Mar 14, 2019 8:04 am Have you tried https://love2d.org/wiki/love.graphics.i ... sformPoint ?
Yeah but this may be off by 1 frame if used within love.update anywhere but in love.draw. Edit: And that's the best case. Actually the problems may be worse. It won't work unless that's the last transformation in love.draw.

Instead, create a Transform object with love.math.newTransform. Instead of performing the deformations at draw time with love.graphics.scale etc, update the Transform object as needed. At draw time, use love.graphics.replaceTransform to set the LÖVE transformation to the Transform object. When you need the mouse position, use Transform:inverseTransformPoint.
User avatar
dusoft
Party member
Posts: 482
Joined: Fri Nov 08, 2013 12:07 am
Location: Europe usually
Contact:

Re: Get mouse coordinates on a rotated "grid"

Post by dusoft »

Could this help?
https://github.com/kikito/gamera

I think it contains all the helper functions you need. You don't have to even use, just check the code.
User avatar
Jasoco
Inner party member
Posts: 3725
Joined: Mon Jun 22, 2009 9:35 am
Location: Pennsylvania, USA
Contact:

Re: Get mouse coordinates on a rotated "grid"

Post by Jasoco »

Nelvin wrote: Thu Mar 14, 2019 8:04 am Have you tried https://love2d.org/wiki/love.graphics.i ... sformPoint ?
I can't seem to get this to work. Maybe I'm using it wrong because there's no sample code. It just returns the normal screen coordinates non-rotated or distorted.
dusoft wrote: Thu Mar 14, 2019 10:12 pm Could this help?
https://github.com/kikito/gamera

I think it contains all the helper functions you need. You don't have to even use, just check the code.
I can't find anything in the code that would help.

Edit: In the meantime I am using a really roundabout and rudimentary (and expensive) method to get the currently clicked tile. Basically I first create a canvas the same size as the world map and draw a grid of uniquely colored squares for each tile using the following formula:

Code: Select all

for x = 0, self.worldWidth+1 do
	for y = 0, self.worldHeight+1 do
		lgr.setColor((x*4) / 255, 0, (y*4) / 255)
		lgr.rectangle("fill", x * self.tileSize, y * self.tileSize, self.tileSize, self.tileSize)
	end
end
It also creates a screen sized canvas that won't be displayed and clears it as green then using the same transformation data (rotation, scaling, offset) it draws the color map to that canvas. Then when I press and hold the mouse down it uses Löve's functions for getting the color of a pixel in an image data which in 11.x requires me to first convert the canvas to imagedata then getPixel() of that image data. It causes a slight frame rate hiccup but it's not enough to ruin anything.

Once it receives the RGB value of the pixel at the current coordinate of the "grid map canvas" it first checks to see if the Green value is set to 1. If it is, the pixel is outside the map (I clear the canvas to green before drawing the transformed gradient map to it. The gradient map only uses the red and blue channels.) If not then it takes its Red and Blue values and multiplies them by 255 then divides by 4 to get the X and Y tile coordinate. (The 4 is because the map is 64x64 and 64 is one fourth 256 and I just wanted the gradient to look pretty. If I left out the multiplying by 4 part it would have looked too dark, but would still work the same. Also if I made the map 128x128 instead I'd just use 2 instead. It's all just for show really.)

And amazingly this method works. It's overkill of course and expensive. Sadly it means I cant do live updating of the selected tile without losing frame rate. (creating image data and getting a pixel color is expensive as I said) But it works perfectly for at least being able to click a tile.

I did all that work just to get around having to know math. lol
However I'll gladly keep trying to figure out if there's a legit way to do it using math.

Here's what it looks like behind the scenes:
Screen Shot 2019-03-15 at 1.49.00 AM.png
Screen Shot 2019-03-15 at 1.49.00 AM.png (516.92 KiB) Viewed 11940 times
Nelvin
Party member
Posts: 124
Joined: Mon Sep 12, 2016 7:52 am
Location: Germany

Re: Get mouse coordinates on a rotated "grid"

Post by Nelvin »

Hm so far haven't used it (my game is built using 0.10.2) but I've just tried a small hacky version and it seems to work as expected. See the .love file attached.
It works both, using the transform object and the helper function of love.graphics. The one in love.graphics obviously only as long as it represents the desired state, i.e. if you push/pop in your love.draw at the end and try to transform the coordinates somewhere else, it won't work.
Attachments
transform.love
(33.22 KiB) Downloaded 357 times
User avatar
pgimeno
Party member
Posts: 3541
Joined: Sun Oct 18, 2015 2:58 pm

Re: Get mouse coordinates on a rotated "grid"

Post by pgimeno »

Jasoco wrote: Thu Mar 14, 2019 4:23 am So how would I go about figuring out where the mouse is given that the corner shown above is 0,0 and the image's x and y offset is the position of the player? (The purple square)
You need to compensate for that too, by adding the player's position to the result.
User avatar
dusoft
Party member
Posts: 482
Joined: Fri Nov 08, 2013 12:07 am
Location: Europe usually
Contact:

Re: Get mouse coordinates on a rotated "grid"

Post by dusoft »

Jasoco wrote: Fri Mar 15, 2019 4:54 am
dusoft wrote: Thu Mar 14, 2019 10:12 pm Could this help?
https://github.com/kikito/gamera

I think it contains all the helper functions you need. You don't have to even use, just check the code.
I can't find anything in the code that would help.
Maybe just use that library as it offers all the basic functions you are having difficulties to code yourself? But maybe I am misunderstanding what you need.
User avatar
dusoft
Party member
Posts: 482
Joined: Fri Nov 08, 2013 12:07 am
Location: Europe usually
Contact:

Re: Get mouse coordinates on a rotated "grid"

Post by dusoft »

Post Reply

Who is online

Users browsing this forum: No registered users and 12 guests