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)
|
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: ~~
|
||||||
|
|||||||
@ -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 = {}
|
||||||
}
|
}
|
||||||
|
|||||||
@ -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
|
||||||
|
|
||||||
|
|||||||
@ -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
|
```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()
|
||||||
|
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user