Scene and docs
This commit is contained in:
parent
0422dd5cfd
commit
ee78004087
35
README.md
35
README.md
@ -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)
|
||||
```
|
||||
|
||||
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:
|
||||
|
||||
```lua
|
||||
local helium = require 'helium'
|
||||
local scene = helium.scene.new(true)
|
||||
|
||||
local elementCreator = helium(function(param, view)
|
||||
|
||||
@ -60,6 +84,14 @@ end)
|
||||
local element = elementCreator({text = 'foo-bar'}, 100, 20)
|
||||
--Needs to be called only once, to draw and then :undraw to stop drawing it onscreen
|
||||
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.
|
||||
@ -82,4 +114,5 @@ end)
|
||||
|
||||
[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: ~~
|
||||
|
||||
@ -5,7 +5,10 @@ local helium = require(path .. ".dummy")
|
||||
local input = {
|
||||
eventHandlers = {},
|
||||
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}),
|
||||
activeEvents = {}
|
||||
}
|
||||
|
||||
@ -63,11 +63,13 @@ function scene:draw()
|
||||
if not helium.benchNum then
|
||||
scene.bench()
|
||||
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
|
||||
e:externalRender()
|
||||
end
|
||||
love.graphics.pop()
|
||||
|
||||
end
|
||||
|
||||
|
||||
@ -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
0
docs/Scenes.md
Normal file
@ -19,7 +19,10 @@ And then using it inside the element like:
|
||||
|
||||
```lua
|
||||
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})
|
||||
--Changing this value will not update the element, but it can be used nonetheless:
|
||||
local notState = {var = 10}
|
||||
.
|
||||
return function()
|
||||
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user