update readme, update types
This commit is contained in:
118
README.md
118
README.md
@@ -1,4 +1,120 @@
|
||||
# FlexLöve
|
||||
|
||||
A Löve Gui based on Flexbox
|
||||
|
||||
This is a single file lib, to use all you need is FlexLove.lua. But you shouldn't use this lib, it is way too early for sane use.
|
||||
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.
|
||||
|
||||
## 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:
|
||||
|
||||
```lua
|
||||
local FlexLove = require("libs.FlexLove")
|
||||
```
|
||||
|
||||
## Basic Usage
|
||||
|
||||
```lua
|
||||
-- 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.
|
||||
Reference in New Issue
Block a user