rotate an image in the direction of the mouse

[luislasonbra]

hi how I can make the red barrel follow the mouse or look

suvir 2.png (14.5 KiB) Viewed 8040 times

GameThank.love

(1.97 KiB) Downloaded 316 times

[William Willing]

A little trigonometry should do the trick. You have a triangle like this, where B is the barrel and M is the position of your mouse cursor.



You know the coordinates of both B and M, so you can calculate two of the sides of the triangle: M.x - B.x and M.y - B.y. Now you can find out the angle you need using the arc tangent, or in Lua:

Code: Select all

math.atan2(M.y - B.y, M.x - B.x)

Note that I'm assuming a conventional coordinate system in my example. The computer screen uses a coordinate system where the y-axis is flipped, so you'll have to compensate for that, but the principle is the same.

[scutheotaku]

Here is a heavily commented example:

Code: Select all

--set barrel image
barrelImage = love.graphics.newImage("barrel.png")

--set some basic variables for barrel
barrelDirection = 0
barrelX = 200
barelY = 200
--Remember: images rotate around their origin point
--Since the default origin point is (0,0), that means that the image
--would rotate around it's upper-left corner, meaning that it will
--move around in a big circle as it rotates.
--If you set the origin point to the center of the image (image's width/2, image's height/2)
--then the image won't appear to orbit around as it rotates.
--This also means that you'll have to adjust the x and y position you set accordingly
--e.g. if the barrel's x origin is 16 and it's x is 100, then the image will be actually
--be displayed at x position 84 (100 - 16 = 84). So take this into account when
--you set the barrel's position.
barrelOriginX = barrelImage:getWidth()/2
barrelOriginY = barrelImage:getHeight()/2


function love.update()
	--use the handy "find rotation" function that I added to the bottom of this code
	barrelDirection = findRotation(barrelX,barrelY,love.mouse.getX(),love.mouse.getY())
end

function love.draw()
	--draw the barrel
	--see https://love2d.org/wiki/love.graphics.draw for info on the love.graphics.draw()
	--function's arguments
	love.graphics.draw(barrelImage,barrelX,barrelY,barrelDirection,1,1,barrelOriginX,barrelOriginY)
end

--basic "find rotation" math function
function findRotation(x1,y1,x2,y2)
	return math.atan2(y2 - y1, x2 - x1)
end

Hopefully that helps!


EDIT:

A little trigonometry should do the trick. You have a triangle like this, where B is the barrel and M is the position of your mouse cursor.



You know the coordinates of both B and M, so you can calculate two of the sides of the triangle: M.x - B.x and M.y - B.y. Now you can find out the angle you need using the arc tangent, or in Lua:

Code: Select all

math.atan2(M.y - B.y, M.x - B.x)

Note that I'm assuming a conventional coordinate system in my example. The computer screen uses a coordinate system where the y-axis is flipped, so you'll have to compensate for that, but the principle is the same.

Yep, exactly!

[micha]

If you are drawing the barrel with löve's line function, you don't need angles. You can operate on the coordinate vectors directly.

Calculate the difference vector between mouse position and barrel position and divide this by it's length. Then multiply by the length of the barrel.

[luislasonbra]

A little trigonometry should do the trick. You have a triangle like this, where B is the barrel and M is the position of your mouse cursor.



You know the coordinates of both B and M, so you can calculate two of the sides of the triangle: M.x - B.x and M.y - B.y. Now you can find out the angle you need using the arc tangent, or in Lua:

Code: Select all

math.atan2(M.y - B.y, M.x - B.x)

Note that I'm assuming a conventional coordinate system in my example. The computer screen uses a coordinate system where the y-axis is flipped, so you'll have to compensate for that, but the principle is the same.

hello and have not been able to fix the problem
when I put the code

Code: Select all

 Math.atan2 (m.y - B.y, m.x - B.x) [/ code]

the gun is not pointed at the sight

[micha]

hello and have not been able to fix the problem
when I put the code

Code: Select all

 Math.atan2 (m.y - B.y, m.x - B.x) 

the gun is not pointed at the sight

This line only calculates the angle between barrel and mouse. You have to store it in a variable and give it as a parameter in the graphics.draw function.
Read the code in scutheotaku's post. There it is explained in detail.

[luislasonbra]

hello and have not been able to fix the problem
when I put the code

Code: Select all

 Math.atan2 (m.y - B.y, m.x - B.x) 

the gun is not pointed at the sight

This line only calculates the angle between barrel and mouse. You have to store it in a variable and give it as a parameter in the graphics.draw function.
Read the code in scutheotaku's post. There it is explained in detail.

Hi I have solved the problem thanks

[Heeloo]

Hello I have tried to use this code but I get an error.

Code: Select all

function man.load()
	man = love.graphics.newImage("sprite/Char.png")
	manx = 0
	many = 0
	manxvel = 10
	manyvel = 10
	findRotation = math.atan2(mY - many, mX - manx)
	mandirection = findRotation(manx,many,love.mouse.getX(),love.mouse.getY())
	manOriginX = man:getWidth()/2
	manOriginY = man:getHeight()/2
	local mX, mY = love.mouse.getPosition()
end

this is my code and when I run it I get this error.

man.lua:12: attempted to perform arithmetic on global 'mY' (a nil value)

[Jasoco]

First, you made the mX and mY variables local to the love.load function.

Second, grabbing the mouse coordinates in love.load is useless for the most part. It should be in love.update. And if you're going to want to access mX or mY at any point elsewhere, then they should not be local.

[Heeloo]

I tried this

Code: Select all

function love.update(dt)
	findRotation = math.atan2(mouseY - many, mX - manx)
	man.update()
	mouseY = love.mouse.getY()
end

But I got the same error