Awesome
Layouter
Layouter is a simple UI grid layout library for LÖVE 2D game engine.
It currently supports these element types:
- text (including spacer = blank text)
- text button
- image
Screenshots
Usage
1. Include layouter
layouter = require 'layouter'
2. Initialize layouter
Defaults=15px, white background, black color, debug disabled:
layouter.initialize()
or with a custom look (font=20px, background=black, color=white, debug mode enabled=draw grid):
layouter.initialize({font=love.graphics.newFont(20), background={0,0,0}, color={255,255,255}, debug=true})
3. Add elements to your layout
Text element
layouter.add('Hello world!')
Text element with options
layouter.add({content = 'Second text paragraph', font = love.graphics.newFont(50), color = {13, 46, 63}})
Spacer (blank paragraph)
layouter.add()
Image with required custom key (key can be used to replace or remove it later)
layouter.add({content = love.graphics.newImage('logo.png'), type = 'image', key = 'logo'})
Button
layouter.add({content = 'Start game', type = 'button', callback = function() startGame() end})
Button that replaces itself on a click with a text
Note the automatically assigned key eastereggs
that is created from the text.
layouter.add({content = '* easter! Eggs $@', type = 'button', callback = function() layouter.replace('eastereggs', 'Currently does nothing.') end})
4. Prepare your layout
Set where to draw your elements, how they should be aligned horizontaly or vertically and if auto spacing (based on number of elements) should be done.
x=position X, y=position Y, direction=horizontal
or vertical
, spacing=auto
for automatical centering, optionally also padding=(in pixels)
layouter.prepare({x = layouter.COLUMN6, y = layouter.ROW4, direction = 'vertical', spacing = 'auto'})
5.Draw your layout
function love.draw()
layouter.draw()
end
6. Process mouse clicks for buttons
This functions needs to be called to enable interaction for buttons.
function love.mousepressed(x, y, mouse_button, is_touch)
layouter.processMouse(x, y, mouse_button, is_touch)
end
Grid positioning - columns and rows
The grid comes with 24 columns and 16 rows. Layouter automatically calculates sizes of columns and rows and generates helper variables. You can use these helper variables to position your elements and layout easily:
-- columns:
layouter.COLUMN1 -- first column's right side, i.e. will position element right after first column
-- ...
layouter.COLUMN8 -- X position after width of eight columns
--- rows:
layouter.ROW1 -- Y position after height of a first row
-- ...
layouter.ROW4 -- Y position after height of four rows