immediate mode clarification
This commit is contained in:
55
README.md
55
README.md
@@ -96,23 +96,29 @@ end
|
|||||||
FlexLöve supports both **immediate mode** and **retained mode** UI paradigms, giving you flexibility in how you structure your UI code:
|
FlexLöve supports both **immediate mode** and **retained mode** UI paradigms, giving you flexibility in how you structure your UI code:
|
||||||
|
|
||||||
#### Retained Mode (Default)
|
#### Retained Mode (Default)
|
||||||
In retained mode, you create elements once and they persist across frames. The library manages the element hierarchy and state automatically.
|
In retained mode, you create elements once and they persist across frames. The library manages the element hierarchy, but you must manage changes in element
|
||||||
|
state by .
|
||||||
|
|
||||||
```lua
|
```lua
|
||||||
|
local someGameState = true
|
||||||
-- Create elements once (e.g., in love.load)
|
-- Create elements once (e.g., in love.load)
|
||||||
local button = FlexLove.Element.new({
|
local button1 = FlexLove.Element.new({
|
||||||
text = "Click Me",
|
text = "Button 1",
|
||||||
|
disabled = someGameState,
|
||||||
callback = function() print("Clicked!") end
|
callback = function() print("Clicked!") end
|
||||||
})
|
})
|
||||||
|
-- ... other things ... --
|
||||||
|
local someGameState = false -- button1 will not change its disabled state, you need a way to update the element
|
||||||
|
|
||||||
-- Elements automatically update and draw each frame
|
local button2 = FlexLove.Element.new({
|
||||||
function love.update(dt)
|
text = "Click to activate button 1",
|
||||||
FlexLove.Gui.update(dt)
|
callback = function(_, event)
|
||||||
end
|
if event.type == "release" then -- only fire on mouse release
|
||||||
|
button1.disabled = false -- this will actual update the element
|
||||||
|
end
|
||||||
|
end
|
||||||
|
})
|
||||||
|
|
||||||
function love.draw()
|
|
||||||
FlexLove.Gui.draw()
|
|
||||||
end
|
|
||||||
```
|
```
|
||||||
|
|
||||||
**Best for:**
|
**Best for:**
|
||||||
@@ -122,21 +128,29 @@ end
|
|||||||
|
|
||||||
#### Immediate Mode
|
#### 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.
|
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.
|
||||||
|
There is of course some overhead for this, which is why it is not the default behavior.
|
||||||
|
|
||||||
```lua
|
```lua
|
||||||
-- Recreate UI every frame
|
-- Recreate UI every frame
|
||||||
function love.draw()
|
local someGameState = true
|
||||||
FlexLove.ImmediateMode.begin()
|
-- Create elements once (e.g., in love.load)
|
||||||
|
local button1 = FlexLove.Element.new({
|
||||||
|
text = "Button 1",
|
||||||
|
disabled = someGameState,
|
||||||
|
callback = function() print("Clicked!") end
|
||||||
|
})
|
||||||
|
-- ... other things ... --
|
||||||
|
local someGameState = false -- button1 in immediate mode will have its state updated
|
||||||
|
|
||||||
if FlexLove.ImmediateMode.button("myButton", {
|
local button2 = FlexLove.Element.new({
|
||||||
x = 100, y = 100,
|
text = "Click to activate button 1",
|
||||||
text = "Click Me"
|
callback = function(_, event)
|
||||||
}) then
|
if event.type == "release" then -- only fire on mouse release
|
||||||
print("Clicked!")
|
button1.disabled = false -- this will also update the element
|
||||||
end
|
end
|
||||||
|
end
|
||||||
|
})
|
||||||
|
|
||||||
FlexLove.ImmediateMode.finish()
|
|
||||||
end
|
|
||||||
```
|
```
|
||||||
|
|
||||||
**Best for:**
|
**Best for:**
|
||||||
@@ -145,7 +159,8 @@ end
|
|||||||
- Debugging and development tools
|
- Debugging and development tools
|
||||||
- UIs driven directly by application state
|
- 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.
|
You should be able to mix both modes in the same application - use retained mode for your main UI and immediate mode for debug overlays or dynamic elements,
|
||||||
|
though this hasn't been tested.
|
||||||
|
|
||||||
### Element Properties
|
### Element Properties
|
||||||
|
|
||||||
|
|||||||
Reference in New Issue
Block a user