Page 1 of 1

Drawboxes - a library for positioning UI elements

Posted: Tue Oct 06, 2015 2:08 am
by Tesselode
Drawboxes is a library that represents drawing operations as boxes and gives you different ways to position those boxes relative to each other. It's useful for non-interactive and keyboard/gamepad operated UI elements, such as HUDs, text, and other simple UI elements.

Code: Select all

function love.load()
  drawboxes = require 'drawboxes'

  local lg = love.graphics

  --load some fonts
  font1 = lg.newFont('font1.ttf', 30)
  font2 = lg.newFont('font2.ttf', 60)

  --this container holds everything else and takes care of the screen size
  mainContainer = drawboxes.Container(0, 0, lg.getWidth(), lg.getHeight())

  --make some text objects
  text1 = drawboxes.Text(font1, 'Hello', 0, 0)
  text2 = drawboxes.Text(font2, 'World!', 0, 0)

  --position text2 relative to text1
  text2:setLeft(text1:getRight())
  text2:setCenterY(text1:getCenterY())

  --center the text on the screen
  textContainer = drawboxes.Container(0, 0, lg.getWidth(), lg.getHeight())
  textContainer:wrap(text1, text2)
  textContainer:setCenter(mainContainer:getCenter())

  mainContainer:add(textContainer)
end

function love.draw()
  mainContainer:draw()
end
Get it on GitHub!

Re: Drawboxes - a library for positioning UI elements

Posted: Wed Oct 07, 2015 9:46 pm
by miko
Tesselode wrote:Drawboxes is a library that represents drawing operations as boxes and gives you different ways to position those boxes relative to each other. It's useful for non-interactive and keyboard/gamepad operated UI elements, such as HUDs, text, and other simple UI elements.
Nice idea! You can easily make it dynamic. Merge request coming.