FlexLöve

A Löve Gui based on Flexbox

FlexLöve is a lightweight, flexible GUI library for Löve2D that implements a flexbox-based layout system. It provides a simple way to create and manage UI elements like windows and buttons with automatic layout calculations, animations, and responsive design.

This library is no where near ready for sane use, there are many broken, incomplete and missing features.

Features

Flexbox Layout: Implement modern flexbox layouts for UI elements
Window Management: Create hierarchical window structures with automatic sizing
Button System: Interactive buttons with click detection and callbacks
Animations: Built-in animation support for transitions and effects
Responsive Design: Automatic resizing based on window dimensions
Color Handling: Utility classes for managing colors in various formats
Text Rendering: Flexible text display with alignment options

Installation

To use FlexLove, simply copy the FlexLove.lua file into your project's libs directory and require it in your main application:

local FlexLove = require("libs.FlexLove")

Basic Usage

-- Create a main window
local mainWindow = FlexLove.GUI.Window.new({
    x = 100,
    y = 100,
    w = 400,
    h = 300,
    background = FlexLove.Color.new(0.2, 0.2, 0.2, 1),
    text = "Main Window",
})

-- Create a button inside the window
local button = FlexLove.GUI.Button.new({
    parent = mainWindow,
    x = 50,
    y = 50,
    w = 100,
    h = 40,
    text = "Click Me",
    callback = function(button)
        print("Button clicked!")
    end,
})

-- In your love.update function
function love.update(dt)
    FlexLove.GUI.update(dt)
end

-- In your love.draw function
function love.draw()
    FlexLove.GUI.draw()
end

API Reference

Color

Utility class for color handling with RGB and RGBA components.

Color.new(r, g, b, a) - Create new color instance
Color.fromHex(hex) - Convert hex string to color
Color:toHex() - Convert color to hex string
Color:toRGBA() - Get RGBA values

Window

Main window class for creating UI containers.

Window.new(props) - Create a new window
Window:addChild(child) - Add child elements to the window
Window:draw() - Draw the window and all its children
Window:update(dt) - Update window state (propagates to children)
Window:resize(newWidth, newHeight) - Resize window based on game size change

Button

Interactive button element.

Button.new(props) - Create a new button
Button:draw() - Draw the button
Button:update(dt) - Update button state (handles click detection)
Button:updateText(newText, autoresize) - Update button text

Animation

Animation system for UI transitions.

Animation.new(props) - Create a new animation
Animation:interpolate() - Get interpolated values during animation
Animation:apply(element) - Apply animation to a GUI element
Animation.fade(duration, fromOpacity, toOpacity) - Create a fade animation
Animation.scale(duration, fromScale, toScale) - Create a scale animation

Enums

Predefined enums for various layout and styling options:

TextAlign: START, CENTER, END, JUSTIFY
Positioning: ABSOLUTE, FLEX
FlexDirection: HORIZONTAL, VERTICAL
JustifyContent: FLEX_START, CENTER, SPACE_AROUND, FLEX_END, SPACE_EVENLY, SPACE_BETWEEN
AlignItems: STRETCH, FLEX_START, FLEX_END, CENTER, BASELINE
AlignSelf: AUTO, STRETCH, FLEX_START, FLEX_END, CENTER, BASELINE
AlignContent: STRETCH, FLEX_START, FLEX_END, CENTER, SPACE_BETWEEN, SPACE_AROUND

Examples

See the examples/ directory for complete usage examples.

License

MIT License - see LICENSE file for details.

3.6 KiB Raw Blame History