Page 1 of 2
Rotate an image itself to cursor
Posted: Fri Dec 23, 2016 10:56 am
by Nada3
Hi everybody, I want to create a minigame with Love2d but I've a problem:
I don't know how to rotate an image (itself) to the mouse cursor. I've read some articles on 'how to rotate an to cursor' but it's not rotating the image itself.
Thank's for your answer !
Re: Rotate an image itself to cursor
Posted: Fri Dec 23, 2016 11:58 am
by raidho36
You simply draw an image using the additional function parameter for angle. Calculate the angle to add to an upright image and pass that as additional draw function argument. You can read all about it in the manual on the wiki.
Re: Rotate an image itself to cursor
Posted: Fri Dec 23, 2016 12:07 pm
by Nada3
Thank's for the answer I already know it's possible to use the angle argument in love.graphics.draw function but I don't know how to calculate the angle :/
Re: Rotate an image itself to cursor
Posted: Fri Dec 23, 2016 12:16 pm
by raidho36
Oh that's real easy - you just use math.atan2 ( y, x ), that returns proper angle from point zero to point x y. Note the reversed coordinates order. To get angle from sprite to mouse, use this function and pass mouse coordinates minus sprite coordinates for both of them.
Code: Select all
math.atan2 ( mouse.y - sprite.y, mouse.x - sprite.x )
Re: Rotate an image itself to cursor
Posted: Fri Dec 23, 2016 12:29 pm
by Nada3
Hum, I already knew this too, with this operation my image don't rotate on itself she rotates around a point, you know I want to get something like this:
http://www.gamefromscratch.com/download ... oward.html
Re: Rotate an image itself to cursor
Posted: Fri Dec 23, 2016 12:35 pm
by raidho36
Ah I see, there are another two optional arguments to draw an image with - origin x y, or pivot. Set those to non-zero and the rotation point will be offset.
Re: Rotate an image itself to cursor
Posted: Fri Dec 23, 2016 12:40 pm
by Nada3
I think I understand but it's update nothing :'(
My code:
Code: Select all
function love.load()
t = {
source = love.graphics.newImage('triangle.png'),
x = 800 / 2,
y = 600 / 2,
r = 0,
sx = 0,
sy = 0,
}
t.sx = 50 / t.source:getWidth()
t.sy = 50 / t.source:getHeight()
end
function love.update(dt)
local mx, my = love.mouse.getPosition()
t.r = math.atan2(my - t.y, mx - t.x)
end
function love.draw()
love.graphics.draw(t.source, t.x, t.y, t.r, t.sx, t.sy, 50 / 2, 50 / 2)
end
Re: Rotate an image itself to cursor
Posted: Fri Dec 23, 2016 1:45 pm
by raidho36
You need to supply offset coordinates in terms of original image pixels. If it's 800 pixels across, then 400 is the middle. You scale the "triangle" down to 50 pixels, but it's middle isn't 25, it's half the image width (i.e. 400 for 800x800 image). This point is not affected by rotation, scaling or shearing, it's the other way around!
Re: Rotate an image itself to cursor
Posted: Fri Dec 23, 2016 1:48 pm
by pgimeno
Other than what raidho said, it works fine for me. Not sure what you mean by "it's update nothing". Are you painting a black triangle?
I'm making the test with the attached image.
Re: Rotate an image itself to cursor
Posted: Fri Dec 23, 2016 1:50 pm
by raidho36
I think his problem was that the 25px offset is so tiny in comparison to image dimensions, it made no visible difference.