Gwee

Gwee is a small GUI toolkit intended to make it easy to create main menus and options screens.

Gwee works on a "box" model that's sort of like an incredibly simplified version of HTML/CSS. A group of widgets resides in a chunk of the screen, and Gwee takes care of sizing and positioning them according to your input parameters.

Here's an example. Say you want to create a main menu that's in the bottom left corner of the screen and has three buttons: Play, Options, and Quit. You'd lay that out like this:

-- Assume standard 800x600 window
mainMenu = gwee.Group(gwee.Box(10, 520, 100, 70), gwee.VerticalLayout(5)))
mainMenu:add(gwee.Button(function() state = "game" end, "Play!"))
mainMenu:add(gwee.Button(function() state = "options" end, "Options"))
mainMenu:add(gwee.Button(function() love.event.push("q") end, "Quit"))

This creates a widget group that's 100px wide by 70px high, places it 10px from the left edge of the window and 520px from the top of the window, and is laid out vertically with 5px between each adjacent pair of widgets. Then, it adds the three buttons, each of which will end up being 100px wide by 20px high.

Next, to actually draw, update and otherwise operate the menu, your love callbacks need to include calls to Gwee's functions:

function love.update(dt)
    ...
    gwee.update(dt)
    ...
end

function love.draw()
    ...
    gwee.draw()
    ....
end

You have to do this in the keypressed, mousepressed, mousereleased, update, and draw callbacks. Make sure you pass along all of the parameters passed in to the original function.

If you want to stop using a group, simply disable it:

-- hypothetical "state changed" function
function changeGameState(newState)
    if newState == "game" then
        mainMenu.enabled = false
        optionsMenu.enabled = false
    elseif newState == "menu" then
        optionsMenu.enabled = false
        mainMenu.enabled = true
    elseif newState == "options" then
        optionsMenu.enabled = true
        mainMenu.enabled = false
    end
end

The gwee.update(), gwee.draw(), etc. functions only affect groups with enabled set to true. If you want to force using a disabled group, you can call group:update(), group:draw(), etc., but this might disappear in the future.

Gwee has more widgets than just buttons. At the time of this writing, Gwee also has text fields, check boxes, and sliders, all things that could come in handy for an options menu.

For example, if you wanted to make a "difficulty" slider, you could do the following:

optionsMenu = gwee.Group(...)

options = {}
options.difficulty = optionsMenu:add(gwee.Slider(0, 3, "Difficulty: "))

...lots of code...

function startGame()
    ...
    local difficulty = math.floor(options.difficulty.value)
    if difficulty == 0 then
        ... do things for easy difficulty...
    elseif difficulty == 1 then
        ... do things for normal difficulty...
    elseif difficulty == 2 then
        ... do things for hard difficulty...
    elseif difficulty == 3 then
        ... do things for really hard difficulty...
    end
    ...
end

Full (if disorganized) API documentation is available with the Gwee source code. Point your browser at the doc/ directory.

You can get Gwee from the Github repository. There are also screenshots and a comprehensive example.