Rotating an image on its center

[- AnTo MégA -]

Hello,

I drew an image and rotated it by increasing its rotation by 1 degree converted in radians every second, or at least that's what I think I am doing feel free to correct me on that if I am wrong

Here's my code for that so that you can see better :

Code: Select all

local data = {}

function love.load()
  data.sprite = love.graphics.newImage("Lizard.png")

  data.width = data.sprite:getWidth()
  data.height = data.sprite:getHeight()
  data.x = love.graphics.getWidth() / 2 - data.width / 2
  data.y = love.graphics.getHeight() / 2 - data.height / 2
  data.rotation = math.rad(0)
  data.scaleX = 1
  data.scaleY = 1
  data.originX = data.x + data.width / 2
  data.originY = data.y + data.height / 2
end

function love.update(dt)
  data.rotation = data.rotation + 1 * dt
end

function love.draw()
  love.graphics.setColor(1, 1, 1)
  love.graphics.draw(data.sprite, data.x, data.y, data.rotation, data.scaleX, data.scaleY, data.originX, data.originY)

  -- Rectangle Hitbox
  love.graphics.rectangle('line', data.x, data.y, data.width, data.height)

  -- Center
  love.graphics.circle('fill', data.x + data.width / 2, data.y + data.height / 2, 4)
end

So with that the image rotates around its top-left corner (it goes off the screen when over, under and to the left of its original position however does not go that far when to the right, stays visible), even though I drew it with with its x and y origins being at its center.
Also it rotates far from it, like I drew the rectangular hitbox and a small circle at the center and it is shwown and rotates at a distance way outside of it, and I don't know why

[ReFreezed]

The origin is in image space, not screen space, and determines what position in the image should render at the specified xy coordinates. The default origin is (0, 0) which refers to the top left corner of the image - you want the origin to be the center of the image, i.e. (data.width/2, data.height/2). Change originX=data.x+data.width/2 to just originX=data.width/2, and same with originY, to draw the image centered at the specified xy coordinates.

[pgimeno]

edit: oops, ReFreezed had everything covered

[darkfrei]

edit: oops, ReFreezed had everything covered

Please keep the explanation, two explanations is 20% better than just one

[pgimeno]

What I said is that the position is where you place the origin, not where you place the top left corner, so in addition to that change you also need this one:

Code: Select all

-- Change this:
  data.x = love.graphics.getWidth() / 2 - data.width / 2
  data.y = love.graphics.getHeight() / 2 - data.height / 2
-- to this:
  data.x = love.graphics.getWidth() / 2
  data.y = love.graphics.getHeight() / 2

[juankax]

hello pgimeno,
only left corner??