Centring some buttons using Quickie Lib

[eka]

Screenshot

How I go about centring those buttons in the middle of the screen?

Here is the code: https://gist.github.com/8012b136e3295add2efd

Thanks

[furi]

Sorry in advance, I haven't used Quickie in a while.

Check out the README file for a little example. Additionally, check out this highlighted line on button.lua file, since it shows you the usage and arguments. (You can do this with all of the other lua files, as well, such as with checkbox.lua.) Looks to be that you have to add a "pos" table with x and y values, like, for example:

Code: Select all

pos = {100,10}

To get the center of the screen, you can use love.window.getMode.

Code: Select all

width, height = love.window.getMode();

Alternatively, you can use a combination of love.window.getWidth and love.window.getHeight.

Code: Select all

width = love.window.getWidth();
height = love.window.getHeight();

By halving the width and height of the window, we can get the center.


So let's introduce the button to the equation.

Judging by your image, the dimensions of the button are 100x31. For future reference (I'm not going to modify the size in this example), as said in button.lua, you can use a size table while defining your buttons to change their sizes, like:

Code: Select all

gui.Button{
    text="Play";
    size={300,200};
}

No pos table defined, so it's going to sit in the corner.


For a single button, you don't need a group, but since you are using a group, you are going to want to place the pos table in the group and not the button.

Code: Select all

local width,height,flags=love.window.getMode()
gui.group.push({grow='down',pos={width/2,height/2}})
if gui.Button({id = 'Play', text = 'Play'}) then
    print('Button Play clicked')
end
if gui.Button({id='about', text='About'}) then
    print('Button about clicked')
end

Here's where another problem comes up, though. You'll probably get something like this:

The reason why is because you haven't center aligned the button/group. Since I haven't used Quickie in forever, I'm uncertain if there is a way of doing this in a fancy way, so what you will want to do is subtract the horizontal position by half of the width of the button. Make sure to use parentheses.

Code: Select all

local width,height,flags=love.window.getMode()
gui.group.push({grow='down',pos={(width/2)-50,height/2}})
if gui.Button({id = 'Play', text = 'Play'}) then
    print('Button Play clicked')
end
if gui.Button({id='about', text='About'}) then
    print('Button about clicked')
end

And there you have it. It's in the center of the screen! Let me know if this works.

[eka]

@furi

Hey, I really appreciate all the effort you took to explain this. I completely overlooked the Button size setter.

Here is a new screenshot:

And here is the new Code: https://gist.github.com/8012b136e3295add2efd

Again, Thanks!

[furi]

@furi

Hey, I really appreciate all the effort you took to explain this. I completely overlooked the Button size setter.

Here is a new screenshot: -snip-

And here is the new Code: https://gist.github.com/8012b136e3295add2efd

Again, Thanks!

No problem!