Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/nekromoff/layouter
Simple grid layout library for LÖVE engine (Love2D).
https://github.com/nekromoff/layouter
buttons design interface layout love2d love2d-framework love2d-game lua menu ui
Last synced: 3 months ago
JSON representation
Simple grid layout library for LÖVE engine (Love2D).
- Host: GitHub
- URL: https://github.com/nekromoff/layouter
- Owner: nekromoff
- License: lgpl-3.0
- Created: 2023-09-13T18:19:23.000Z (over 1 year ago)
- Default Branch: main
- Last Pushed: 2024-04-22T12:39:54.000Z (9 months ago)
- Last Synced: 2024-10-01T08:03:34.053Z (3 months ago)
- Topics: buttons, design, interface, layout, love2d, love2d-framework, love2d-game, lua, menu, ui
- Language: Lua
- Homepage:
- Size: 12.7 KB
- Stars: 13
- Watchers: 1
- Forks: 0
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
- awesome-love2d - Layouter - A simple UI **grid layout** library for LÖVE 2D game engine. (UI)
README
# 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
```