small update
This commit is contained in:
2
.gitignore
vendored
2
.gitignore
vendored
@@ -5,4 +5,4 @@ lurker.lua
|
|||||||
themes/metal/
|
themes/metal/
|
||||||
themes/space/
|
themes/space/
|
||||||
.DS_STORE
|
.DS_STORE
|
||||||
#tasks
|
tasks
|
||||||
|
|||||||
10
FlexLove.lua
10
FlexLove.lua
@@ -301,12 +301,22 @@ function Gui.draw(gameDrawFunc, postDrawFunc)
|
|||||||
love.graphics.setColor(unpack(prevColor))
|
love.graphics.setColor(unpack(prevColor))
|
||||||
|
|
||||||
for _, win in ipairs(Gui.topElements) do
|
for _, win in ipairs(Gui.topElements) do
|
||||||
|
-- Only draw with backdrop canvas if this element tree has backdrop blur
|
||||||
|
local needsBackdrop = hasBackdropBlur(win)
|
||||||
|
|
||||||
|
if needsBackdrop then
|
||||||
|
-- Draw element with backdrop blur applied
|
||||||
win:draw(backdropCanvas)
|
win:draw(backdropCanvas)
|
||||||
|
|
||||||
|
-- Update backdrop canvas for next element
|
||||||
love.graphics.setCanvas(backdropCanvas)
|
love.graphics.setCanvas(backdropCanvas)
|
||||||
love.graphics.setColor(1, 1, 1, 1)
|
love.graphics.setColor(1, 1, 1, 1)
|
||||||
win:draw(nil)
|
win:draw(nil)
|
||||||
love.graphics.setCanvas(outerCanvas)
|
love.graphics.setCanvas(outerCanvas)
|
||||||
|
else
|
||||||
|
-- No backdrop blur needed, draw normally once
|
||||||
|
win:draw(nil)
|
||||||
|
end
|
||||||
end
|
end
|
||||||
else
|
else
|
||||||
for _, win in ipairs(Gui.topElements) do
|
for _, win in ipairs(Gui.topElements) do
|
||||||
|
|||||||
64
README.md
64
README.md
@@ -2,12 +2,17 @@
|
|||||||
|
|
||||||
**A comprehensive UI library providing flexbox/grid layouts, theming, animations, and event handling for LÖVE2D games.**
|
**A comprehensive UI library providing flexbox/grid layouts, theming, animations, and event handling for LÖVE2D games.**
|
||||||
|
|
||||||
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 with automatic layout calculations, animations, theming, and responsive design.
|
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 with automatic layout calculations, animations, theming, and responsive design. Immediate mode support is now included (retained is default).
|
||||||
|
|
||||||
## ⚠️ Development Status
|
## ⚠️ Development Status
|
||||||
|
|
||||||
This library is under active development. While many features are functional, some aspects may change or have incomplete/broken implementations.
|
This library is under active development. While many features are functional, some aspects may change or have incomplete/broken implementations.
|
||||||
|
|
||||||
|
### Coming Soon
|
||||||
|
The following features are currently being actively developed:
|
||||||
|
- **Input Fields**: Text input, password fields, and text areas
|
||||||
|
- **Generic Image Support**: Enhanced image rendering capabilities and utilities
|
||||||
|
|
||||||
## Features
|
## Features
|
||||||
|
|
||||||
- **Flexbox Layout**: Modern flexbox layouts for UI elements with full flex properties
|
- **Flexbox Layout**: Modern flexbox layouts for UI elements with full flex properties
|
||||||
@@ -42,6 +47,7 @@ local FlexLove = require("FlexLove")
|
|||||||
FlexLove.Gui.init({
|
FlexLove.Gui.init({
|
||||||
baseScale = { width = 1920, height = 1080 },
|
baseScale = { width = 1920, height = 1080 },
|
||||||
theme = "space"
|
theme = "space"
|
||||||
|
immediateMode = true -- Optional: enable immediate mode (default: false)
|
||||||
})
|
})
|
||||||
|
|
||||||
-- Create a button with flexbox layout
|
-- Create a button with flexbox layout
|
||||||
@@ -85,6 +91,62 @@ end
|
|||||||
|
|
||||||
## Core Concepts
|
## Core Concepts
|
||||||
|
|
||||||
|
### Immediate Mode vs Retained Mode
|
||||||
|
|
||||||
|
FlexLöve supports both **immediate mode** and **retained mode** UI paradigms, giving you flexibility in how you structure your UI code:
|
||||||
|
|
||||||
|
#### Retained Mode (Default)
|
||||||
|
In retained mode, you create elements once and they persist across frames. The library manages the element hierarchy and state automatically.
|
||||||
|
|
||||||
|
```lua
|
||||||
|
-- Create elements once (e.g., in love.load)
|
||||||
|
local button = FlexLove.Element.new({
|
||||||
|
text = "Click Me",
|
||||||
|
callback = function() print("Clicked!") end
|
||||||
|
})
|
||||||
|
|
||||||
|
-- Elements automatically update and draw each frame
|
||||||
|
function love.update(dt)
|
||||||
|
FlexLove.Gui.update(dt)
|
||||||
|
end
|
||||||
|
|
||||||
|
function love.draw()
|
||||||
|
FlexLove.Gui.draw()
|
||||||
|
end
|
||||||
|
```
|
||||||
|
|
||||||
|
**Best for:**
|
||||||
|
- Complex UIs with many persistent elements
|
||||||
|
- Elements that maintain state over time
|
||||||
|
- UIs that don't change frequently
|
||||||
|
|
||||||
|
#### Immediate Mode
|
||||||
|
In immediate mode, you recreate UI elements every frame based on your application state. This approach can be simpler for dynamic UIs that change frequently.
|
||||||
|
|
||||||
|
```lua
|
||||||
|
-- Recreate UI every frame
|
||||||
|
function love.draw()
|
||||||
|
FlexLove.ImmediateMode.begin()
|
||||||
|
|
||||||
|
if FlexLove.ImmediateMode.button("myButton", {
|
||||||
|
x = 100, y = 100,
|
||||||
|
text = "Click Me"
|
||||||
|
}) then
|
||||||
|
print("Clicked!")
|
||||||
|
end
|
||||||
|
|
||||||
|
FlexLove.ImmediateMode.finish()
|
||||||
|
end
|
||||||
|
```
|
||||||
|
|
||||||
|
**Best for:**
|
||||||
|
- Simple UIs that change frequently
|
||||||
|
- Procedurally generated interfaces
|
||||||
|
- Debugging and development tools
|
||||||
|
- UIs driven directly by application state
|
||||||
|
|
||||||
|
You can mix both modes in the same application - use retained mode for your main UI and immediate mode for debug overlays or dynamic elements.
|
||||||
|
|
||||||
### Element Properties
|
### Element Properties
|
||||||
|
|
||||||
Common properties for all elements:
|
Common properties for all elements:
|
||||||
|
|||||||
Reference in New Issue
Block a user