LÖVE

Posted: **Mon Nov 11, 2013 1:13 am**

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

I tried:

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.

Posted: **Mon Nov 11, 2013 1:17 am**

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

Posted: **Mon Nov 11, 2013 1:23 am**

Pebsie wrote:

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.

Posted: **Mon Nov 11, 2013 1:29 am**

Tyler821 wrote:
Pebsie wrote:
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

Posted: **Mon Nov 11, 2013 1:41 am**

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)

Posted: **Mon Nov 11, 2013 1:46 am**

DaedalusYoung wrote: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

Posted: **Mon Nov 11, 2013 9:27 am**

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!

LÖVE

Centering an Image

Centering an Image

Re: Centering an Image

Re: Centering an Image

Re: Centering an Image

Re: Centering an Image

Re: Centering an Image

Re: Centering an Image