Using panels

Panels are special components which can hold other components. In GÖÖi, a Panel and Layout are pretty much the same because we need the first one to access the second one.

• Grid layout
• Game layout
• Functions

Grid layout

Note:

• It's a 4x4 grid layout
• in 1,1 (row 1, column 1) there's a rowspan = 2
• in 4,3 there's a colspan = 2

The actual code would be this:

require "gooi"
function love.load()
    panelGrid = gooi.newPanel({
        x = 0,
        y = 0,
        w = 430,
        h = 150,
        layout = "grid 4x4"
    })
    panelGrid:setRowspan(1, 1, 2)
    panelGrid:setColspan(4, 3, 2)
    panelGrid:add(
        gooi.newButton({text = "Fat Button"}),
        gooi.newButton({text = "Button 1"}),
        gooi.newButton({text = "Button 2"}),
        gooi.newButton({text = "Button 3"}),
        gooi.newButton({text = "Button X"}),
        gooi.newButton({text = "Button Y"}),
        gooi.newButton({text = "Button Z"}),
        gooi.newButton({text = "Button ."}),
        gooi.newButton({text = "Button .."}),
        gooi.newButton({text = "Button ..."}),
        gooi.newButton({text = "Button ...."}),
        gooi.newButton({text = "Last Button"}),
        gooi.newCheck ({text = "Check 1"}),
        gooi.newCheck ({text = "Large Check"})
    )
end
function love.draw()
    gooi.draw()
end
function love.mousepressed(x, y, button)  gooi.pressed() end
function love.mousereleased(x, y, button) gooi.released() end

Game layout

This layout was made for "in game" GUI's, so you can easily put components in "top-right", "bottom-left" and so on.

Code:

require "gooi"
function love.load()
    panelGrid = gooi.newPanel({x = 0, y = 0, w = 800, h = 600, layout = "game"})
    panelGrid:add(gooi.newLabel("Score: 999999"):left(), "t-l")
    panelGrid:add(gooi.newBar(),                  "t-r")
    panelGrid:add(gooi.newJoy({size = 70}),       "b-l")
    panelGrid:add(gooi.newButton("Action 1"),     "b-r")
    panelGrid:add(gooi.newButton("Action 2"),     "b-r")
end
function love.draw()
    gooi.draw()
end
function love.mousepressed(x, y, button)  gooi.pressed() end
function love.mousereleased(x, y, button) gooi.released() end

Functions

• add(component[,string]) ➤ it adds a new component to the panel (the string is for game layout and it can be "t-l", "t-r", "b-l" or "b-r")
• debug() ➤ Shows the grid structure for grid layouts
• setRowspan(number, number, number) ➤ It sets the rowspan on the given row and column, the order is row, column, span (grid only)
• setColspan(number, number, number) ➤ Yeah, the same