need explanations on how rotation transforms works

[flashjaysan]

<r>Hi.<br/>
<br/>
I've made a prototype with Godot to quickly try ideas and now I want to do it with LÖVE in order to do everything myself.<br/>
What's important here is that I'm trying to learn from it so I don't want tu use a camera library that would do the job for me.<br/>
Here is the link toward the Godot prototype :<br/>
<URL url="https://flashjaysan.itch.io/tank-hunter ... </URL><br/>
It's an attempt to simulate the top down levels of the SNES game Super Probotector.<br/>
<br/>
I'm trying to make a rotating camera that centers around the player's position. But I don't really understand how the love.graphics.translate an love.graphics.rotate works. I thought I understood but it's not working as I planned so that's a proof I don't get it right.<br/>
Here are some infos :<br/>
I have a Player table that stores everything related to the player so there are Player.Position.x, Player.Position.y, Player.Angle values.<br/>
I also have SCREEN_WIDTH and SCREEN_HEIGHT constants to adjust positions in the screen.<br/>
<br/>
I tried to start with moving the rotation center point on the player then go back to the original position (I thought that trying to follow the player at the same time would complicate things):
<CODE><s>

Code: Select all

</s>  love.graphics.translate(Player.Position.x, Player.Position.y)
  love.graphics.rotate(-Player.Angle)
  love.graphics.translate(-Player.Position.x, -Player.Position.y)<e>

</e></CODE>
It seems to center the rotation around the position of the player so this part seems ok (I'm not even sure of that). The third line, however, doesn't seem to get back to the top corner of my graphics when I start to rotate (by changing Player.Angle) away from 0 rad.<br/>
I thought some trigonometry functions would help but I feel uneasy about this because thos translate, rotate functions seems to work the other way around and I'm not used to that kind of thinking. I tried this:
<CODE><s>

Code: Select all

</s>love.graphics.translate(Player.Position.x * math.cos(Player.Angle), Player.Position.y * math.sin(Player.Angle))<e>

</e></CODE>
And other approximations (changing the sign for example). It didn"t worked.<br/>
I'm really lost and I would like clear, detailed and simple explanations. I'm not a software engineer (I understand basic maths like cosine, sine, vectors, etc. though) so highly technical information wouldn't probably be understood.</r>

[4vZEROv]

Code: Select all

local rect = {x = 100, y = 100, w = 200, h = 200}
rect.center_x = rect.x + rect.w/2
rect.center_y = rect.y + rect.h/2
rect.angle = 0.1


function love.update(dt)
    if love.keyboard.isDown("left") then rect.angle = rect.angle + 0.01 end
    if love.keyboard.isDown("right") then rect.angle = rect.angle - 0.01 end
end

function love.draw()
    love.graphics.push()
    love.graphics.translate(rect.center_x, rect.center_y)
    love.graphics.rotate(rect.angle)
    love.graphics.translate(-rect.center_x, -rect.center_y)
        love.graphics.rectangle("fill", rect.x, rect.y, rect.w, rect.h)
    love.graphics.pop()
end