LÖVE

Posted: **Sat Aug 12, 2017 7:54 am**

Hello, i am trying to create a little lua demo for my friend, and am currently trying to rotate an image around the mouse position. I tried just adding the mousex and mousey values to the origin, so they would be: "mousex + img:getWidth()/2" and "mousey + img:getHeight()/2"
But the origin is static and for some reason does not rotate with the image.

I'll post the .love here.
NVM, this board doesn't allow .lov files. Here's a zip instead.
Here's main.lua:

Code: Select all

function love.load()

	angle = 0
	scaley = 0.5
  scalex = 0.5
	width = love.graphics.getWidth()
	height = love.graphics.getHeight()
	posx = width/2
	posy = height/2
	img = love.graphics.newImage("test.jpg")
	src = love.audio.newSource("test.mp3", "static")
  mousey = 0
  mousex = 0
  angdegrees = 0
  
  src:setVolume(1)
  src:setPitch(1)
  love.audio.play(src)
  love.window.setTitle("Testing Build 25 Tech Demo.")
  
	
end

function love.draw()
  
  
    love.graphics.setBackgroundColor(255, 152, 120, 255)
		love.graphics.draw(img, posx, posy, angle, scalex, scaley, mousex + img:getWidth()/2, mousey + img:getHeight()/2) --HERE IT IS!
    love.graphics.print("Angle:" .. angle, 0, 0)
    love.graphics.print("Mouse X:" .. mousex, 0, 20)
    love.graphics.print("Mouse Y:" .. mousey, 0, 40)
    love.graphics.print("Angle in Degrees:" .. angdegrees, 0, 60)
    love.graphics.print("Test Build Version 25", 200, 0)

end

function love.update(dt)

  angle = angle + (dt*2) * math.pi / 2
  if angle >= 600 then
    angle = 0
  end
  mousey = love.mouse.getY()
  mousex = love.mouse.getX()
  angdegrees = angle / 0.02

end

Any help would be appreciated a lot.

Thanks in advance,
unknowntrojan

Posted: **Sat Aug 12, 2017 9:46 am**

Hi and welcome to the forums!

It should allow you to upload .love files though, i did it in the past, as did others.

Also, i think that you need to draw the image with the positions offset by the mouse cursor, the origin offsets should only be half the width and height of the image, from what i saw in the examples on the wiki page about love.draw.

Code: Select all

love.graphics.draw(img, mousex, mousey, angle, scalex, scaley, img:getWidth()/2, img:getHeight()/2)

(Depending on what you want, you might need to add mousex to posx and similarly with posy and mousey, but hey, do try it out like this.)

Also what's "angDegrees"? lua has a builtin function for converting between degrees and radians, you know; math.deg and math.rad.

Posted: **Sat Aug 12, 2017 1:13 pm**

No, the uploader doesn't allow .lov files. It says it is not allowed to be uploaded.
Oh, nevermind. It isn't .lov. I saw that in a tutorial, but i guess that it can also be .love.

When i only use the img:get.. Functions the image doesn't move at all.

Here are some images: (My cursor is on the top right, and the image is centered.)

https://love2d.org/imgmirrur/8s5GRZG.png
https://love2d.org/imgmirrur/V9ABdxV.png
https://love2d.org/imgmirrur/inteP2W.png
https://love2d.org/imgmirrur/1vzvx5q.png
https://love2d.org/imgmirrur/rfNk5do.png

Code: Select all

function love.load()

	angle = 0
	scaley = 0.5
  scalex = 0.5
	width = love.graphics.getWidth()
	height = love.graphics.getHeight()
	posx = width/2
	posy = height/2
	img = love.graphics.newImage("test.jpg")
	src = love.audio.newSource("test.mp3", "static")
  mousey = 0
  mousex = 0
  angdegrees = 0
  
  src:setVolume(1)
  src:setPitch(1)
  love.audio.play(src)
  love.window.setTitle("Testing Build 25 Tech Demo.")
  
	
end

function love.draw()
  
  
    love.graphics.setBackgroundColor(255, 152, 120, 255)
		love.graphics.draw(img, posx, posy, angle, scalex, scaley, img:getWidth()/2, img:getHeight()/2)
    love.graphics.print("Angle:" .. angle, 0, 0)
    love.graphics.print("Mouse X:" .. mousex, 0, 20)
    love.graphics.print("Mouse Y:" .. mousey, 0, 40)
    love.graphics.print("Angle in Degrees:" .. angdegrees, 0, 60)
    love.graphics.print("Test Build Version 25", 200, 0)

end

function love.update(dt)

  angle = angle + (dt*2) * math.pi / 2
  if angle >= 600 then
    angle = 0
  end
  mousey = love.mouse.getY()
  mousex = love.mouse.getX()
  angdegrees = angle / 0.02

end

Posted: **Sat Aug 12, 2017 1:18 pm**

It can be anything, really; but everyone uses .love since that's the accepted extension.

That said i might have misunderstood what you wanted; do you want to
1. use the angle between the mouse position and the center of the screen to align your image, or
2. position the image based on your mouse position?

Posted: **Sat Aug 12, 2017 1:21 pm**

I want the image to center around my mouse position and rotate by using my angle variable.

Posted: **Sat Aug 12, 2017 1:23 pm**

In a nutshell, i want the center of the image right on the mouse positions.

Posted: **Sat Aug 12, 2017 1:25 pm**

Okay, so why didn't you try replacing posx and posy in your love.graphics.draw with mousex and mousey, as in my above example?

Either that, or mousex - img:getWidth()/2 and mousey - img:getHeight()/2 should work.

Posted: **Sat Aug 12, 2017 2:37 pm**

Oh my god i am dumb.... Thank you for your time!

Posted: **Sat Aug 12, 2017 6:02 pm**

Please don't double post.

Posted: **Wed Aug 16, 2017 12:02 am**

Put that in either update() or if you have a special player movement function within update, you should put it there.
I store my player stuff in tables (in this case pl)

Code: Select all

pl.HeadRotation = math.atan2( love.mouse.getX() - pl.posX, pl.posY - love.mouse.getY() ) - math.pi / 2;

Then wherever you decide to draw the player:

Code: Select all

love.graphics.draw(pl.playerImg, pl.posX, pl.posY, pl.HeadRotation, 2, 2, pl.playerImg:getWidth() / 2, pl.playerImg:getHeight() / 2);

Parameters in above code (love.graphics.draw):
1- The sprite for my player image, this is what you are drawing.
2- Position on X
3- Position on Y
4- Head Rotation variable <- Important
5- Scale on X (not important wanted sprite to be bigger)
6- Same as 5, but scales on Y
7- Sets Origin in the middle of the sprite (on X) <----- SUPER DUPER IMPORTANT!!!!
8- Same as 7 except on Y. Also extremely important
7 and 8 allow for the player to rotate from its center, and not from the top left, its original origin.

These two lines are all you need. If the player still rotates but your sprite is off, rotate the sprite in Photoshop/<insert pixel art editor here>.

Personally I update HeadRotation inside of a custom movement function, which I call within love.update(), and I don't initialize HeadRotation in my player table before hand (like I do with the player Image, position on X, and position on Y). I draw the player using the second piece of code inside of a custom draw method so it spawns on top of my map (don't worry about this till you get to it, pm if you want further info).
Good luck

Just realized that this does not pertain to the question asked by OP, if mods want to remove it they can, however I am going to leave it for anyone who by desperation stumbles on this while trying to figure out a problem my post answers. Sorry.

LÖVE

Need Help with Rotation around the cursor

Need Help with Rotation around the cursor

Re: Need Help with Rotation around the cursor

Re: Need Help with Rotation around the cursor

Re: Need Help with Rotation around the cursor

Re: Need Help with Rotation around the cursor

Re: Need Help with Rotation around the cursor

Re: Need Help with Rotation around the cursor

Re: Need Help with Rotation around the cursor

Re: Need Help with Rotation around the cursor

Re: Need Help with Rotation around the cursor