Skip to content

Using panels

Gustavo Lara edited this page May 15, 2018 · 16 revisions

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

ss7.png

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.

ss8.png

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
You can’t perform that action at this time.