Centering an Image

[Tyler821]

Hi. I can't find any way to center an image.

I tried:

Code: Select all

love.graphics.draw(map, 0, 0, 0, 1, 1, map:getWidth()/2, map:getWidth()/2)

"map" is the name of the variable for my image. I found that piece of code on the forums, but it didn't work.

PS: I need this urgently since I have a project due tomorrow that involves this.

[Pebsie]

Center the image?
At what position?
The middle of the screen?
Draw it from the middle of the sprite?

[Tyler821]

I want to center it in the middle of the screen so that the margins on all sides are equal. I'm using my application in fullscreen mode, if that makes a difference. Also, the map takes up most of the screen, but the margins are all weird. If there's a way to center margins, that's what I need.

[Pebsie]

I want to center it in the middle of the screen so that the margins on all sides are equal. I'm using my application in fullscreen mode, if that makes a difference. Also, the map takes up most of the screen, but the margins are all weird. If there's a way to center margins, that's what I need.

I'm still not entirely sure what you mean D:
Post an image

[DaedalusYoung]

You need the window / screen dimensions. In your code, you center the image, based on its width and height, around position 0,0. That will place the image's centre at the top left.

Do something like this:

Code: Select all

love.graphics.draw(map, love.graphics.getWidth()/2, love.graphics.getHeight()/2, 0, 1, 1, map:getWidth()/2, map:getWidth()/2)

[Tyler821]

You need the window / screen dimensions. In your code, you center the image, based on its width and height, around position 0,0. That will place the image's centre at the top left.

Do something like this:

Code: Select all

love.graphics.draw(map, love.graphics.getWidth()/2, love.graphics.getHeight()/2, 0, 1, 1, map:getWidth()/2, map:getWidth()/2)

Oh, I thought I would only need either offset or position. -facepalm- Thanks!

And I'll post an image when I finish coding the game. ;3


EDIT: That didn't work. .-. I just dabbled with the numbers and found something almost centered. The teacher won't know the difference. ;3

[Germanunkol]

I think you should keep trying. This is something essential which you'll need again and again.
love.graphics.getWidth() is the width of the screen, so love.graphics.getWidth()/2 is the exact middle of the screen, along the x-axis. love.graphics.getHeight()/2 is the exact middle along the y-axis.

So drawing a circle there will center it perfectly:

Code: Select all

function love.draw()
        love.graphics.setColor(255,255,255,255)
        love.graphics.circle("fill", love.graphics.getWidth()/2, love.graphics.getHeight()/2, love.graphics.getHeight()/2)
end

Now, if you want to draw a rectangular image instead, it's origin is usually the upper left corner of the image. So instead of drawing it in the center, you need to draw it a little further to the top and left. By "a little", I mean exactly half the width and height of the image, which is what you were trying to do with the offset variables.
Try:

Code: Select all

function love.draw()
        love.graphics.setColor(255,255,255,255)
        love.graphics.draw(map, love.graphics.getWidth()/2 - map:getWidth()/2, love.graphics.getHeight()/2 - map:getHeight()/2)
end

Of course, love.graphics.getWidth()/2 - map:getWidth()/2 can be rewritten as: (love.graphics.getWidth() - map:getWidth())/2
which saves you a division (speeeed!)

If it's not working, please post more of your code!