How do I center an image when moving

[TheEvPatch]

this is my code and I'm currently when I click somewhere on the screen it causes the top left-hand corner of the peng.png image to where the mouse pointer clicked when I want the bottom middle to go to where the screen was clicked, can anyone help?

Code: Select all

function love.load()
    peng = love.graphics.newImage("peng.png")
    peng_x = 150
    peng_y = 150
     mouse_x, mouse_y = 150,150
	music = love.audio.newSource("cp-coffee.mp3", "stream")
	back = love.graphics.newImage("room.png")
end
 
function love.update(dt)
	music:play()
   if love.mouse.isDown(1) then
     mouse_x, mouse_y = love.mouse.getPosition()
	 mouse_x = mouse_x - 5
	 mouse_y = mouse_y - 5
   end
    if mouse_x < peng_x then
	peng_x = peng_x - (50 * 2.5 * dt)
    end
 
    if mouse_x > peng_x then
	peng_x = peng_x + (50 * 2.5 * dt)
    end
 
    if mouse_y < peng_y then
	peng_y = peng_y - (50 * 2.5 * dt)
    end
 
    if mouse_y > peng_y then
	peng_y = peng_y + (50 * 2.5 * dt)
    end
end
 
function love.draw()
	love.graphics.draw(back, -1, 0, 0, 1.55) 
    love.graphics.draw(peng, peng_x, peng_y, 50.2, 0.1)
 
end

P.S.
it wouldn't let me attach the music but it's at this link.

[Nelvin]

Stuff is rendered relative to the top/left of what you draw. To change this, you can use the origin parameters in the draw command, like so.

Code: Select all

love.graphics.draw(peng, peng_x, peng_y, 50.2, 0.1, 0, peng:getWidth()/2, peng:getHeight() )

[TheEvPatch]

I've added to my code and it looks like this

Code: Select all

function love.load()
    peng = love.graphics.newImage("peng.png")
    peng_x = 150
    peng_y = 150
     mouse_x, mouse_y = 150,150
	music = love.audio.newSource("cp-coffee.mp3", "stream")
	back = love.graphics.newImage("room.png")
end
 
function love.update(dt)
	music:play()
   if love.mouse.isDown(1) then
     mouse_x, mouse_y = love.mouse.getPosition()
	 mouse_x = mouse_x - 5
	 mouse_y = mouse_y - 5
   end
    if mouse_x < peng_x then
	peng_x = peng_x - (50 * 2.5 * dt)
    end
 
    if mouse_x > peng_x then
	peng_x = peng_x + (50 * 2.5 * dt)
    end
 
    if mouse_y < peng_y then
	peng_y = peng_y - (50 * 2.5 * dt)
    end
 
    if mouse_y > peng_y then
	peng_y = peng_y + (50 * 2.5 * dt)
    end
end
 
function love.draw()
	love.graphics.draw(back, -1, 0, 0, 1.55) 
    love.graphics.draw(peng, peng_x, peng_y, 50.2, 0.1 peng:getWidth()/2, peng:getHeight() )
 
end

but it gives me this error

Error

Syntax error: main.lua:36: ')' expected near 'peng'



Traceback

[C]: at 0x7ffdab1928f0
[C]: in function 'require'
[C]: in function 'xpcall'
[C]: in function 'xpcall'

[Nelvin]

Sorry ... hehe I made a small mistake with the parameters (that's when you just type in the forum) but you also copied it wrong (you missed a comma).

This way should work

Code: Select all

love.graphics.draw(peng, peng_x, peng_y, 50.2, 1, 1, peng:getWidth()/2, peng:getHeight() )

In your original code you had xscale set to 0.1, don't know if that was intended - if so, just change it back.

Also there's more info about the parameters to be found at https://love2d.org/wiki/love.graphics.draw, the relevant ones for your question are the x and y origin offsets.