Scene and docs

This commit is contained in:
Elmārs Āboliņš 2021-01-28 00:45:44 +02:00
parent 0422dd5cfd
commit ee78004087
6 changed files with 65 additions and 4 deletions

View File

@ -42,10 +42,34 @@ this will create a new instance of the element, and then you can draw it to what
element:draw(100, 100) element:draw(100, 100)
``` ```
A quick detour in to 'scenes' which are a collection of elements to be drawn onscreen
A scene is necessary to start drawing elements, so let's create one like this and set it to active:
```lua
local scene = helium.scene.new(true)
scene:activate()
```
Then you can draw and update the scene in love's functions:
```lua
function love.update(dt)
scene:update(dt)
end
function love.draw()
--drawn below the ui element
scene:draw()
--drawn above the ui elements
end
```
Let's draw a rectangle with text with the previous skeleton and functions: Let's draw a rectangle with text with the previous skeleton and functions:
```lua ```lua
local helium = require 'helium' local helium = require 'helium'
local scene = helium.scene.new(true)
local elementCreator = helium(function(param, view) local elementCreator = helium(function(param, view)
@ -60,6 +84,14 @@ end)
local element = elementCreator({text = 'foo-bar'}, 100, 20) local element = elementCreator({text = 'foo-bar'}, 100, 20)
--Needs to be called only once, to draw and then :undraw to stop drawing it onscreen --Needs to be called only once, to draw and then :undraw to stop drawing it onscreen
element:draw(100, 100) element:draw(100, 100)
function love.update(dt)
scene:update(dt)
end
function love.draw()
scene:draw()
end
``` ```
As you can see, you can use regular love.graphics functions inside the element's rendering function, furthermore you don't have to worry about coordinates, as x:0,y:0 inside the element's rendering function will always be the element's onscreen x,y, and the element's dimensions are passed in the view table. As you can see, you can use regular love.graphics functions inside the element's rendering function, furthermore you don't have to worry about coordinates, as x:0,y:0 inside the element's rendering function will always be the element's onscreen x,y, and the element's dimensions are passed in the view table.
@ -82,4 +114,5 @@ end)
[View the resulting hello world repository here](https://github.com/qeffects/helium-demo/) [View the resulting hello world repository here](https://github.com/qeffects/helium-demo/)
Or continue on to the advanced guide: ~~link Or continue on to the State and Input guide: [Here](./docs/State-Input-Guide.md)
If you are using gamestates, scene guide will be of interest: ~~

View File

@ -5,7 +5,10 @@ local helium = require(path .. ".dummy")
local input = { local input = {
eventHandlers = {}, eventHandlers = {},
subscriptions = setmetatable({}, {__index = function (t, index) subscriptions = setmetatable({}, {__index = function (t, index)
return helium.scene.activeScene and helium.scene.activeScene[index] or nil return helium.scene.activeScene and helium.scene.activeScene.subscriptions[index] or nil
end,
__newindex = function(t, index, val)
helium.scene.activeScene.subscriptions[index] = val
end}), end}),
activeEvents = {} activeEvents = {}
} }

View File

@ -63,11 +63,13 @@ function scene:draw()
if not helium.benchNum then if not helium.benchNum then
scene.bench() scene.bench()
end end
--We don't want any side effects affecting internal rendering
love.graphics.reset() love.graphics.push("all")
love.graphics.setColor(1,1,1,1)
for i, e in ipairs(self.buffer) do for i, e in ipairs(self.buffer) do
e:externalRender() e:externalRender()
end end
love.graphics.pop()
end end

View File

@ -0,0 +1,20 @@
There are a few types of input events, some directly acting like love's own input events:
### SIMPLE EVENTS
mousepressed
mousereleased
mousepressed_outside
mousereleased_outside
keypressed
keyreleased
And some complex events that abstract functionality for ui elements
### COMPLEX EVENTS
dragged
clicked
hover

0
docs/Scenes.md Normal file
View File

View File

@ -19,7 +19,10 @@ And then using it inside the element like:
```lua ```lua
local elementCreator = helium(function(param, view) local elementCreator = helium(function(param, view)
--Note that changing elementState.var now will re-render the element with this new elementState
local elementState = useState({var = 10}) local elementState = useState({var = 10})
--Changing this value will not update the element, but it can be used nonetheless:
local notState = {var = 10}
. .
return function() return function()