diff --git a/README.md b/README.md index bdebc19..7dc28c5 100644 --- a/README.md +++ b/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 \ No newline at end of file +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: ~~ diff --git a/core/input.lua b/core/input.lua index 1f1ab38..ce805c9 100644 --- a/core/input.lua +++ b/core/input.lua @@ -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 = {} } diff --git a/core/scene.lua b/core/scene.lua index 43c6887..cf0282e 100644 --- a/core/scene.lua +++ b/core/scene.lua @@ -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 diff --git a/docs/Input-events.md b/docs/Input-events.md index e69de29..cbe3df6 100644 --- a/docs/Input-events.md +++ b/docs/Input-events.md @@ -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 \ No newline at end of file diff --git a/docs/Scenes.md b/docs/Scenes.md new file mode 100644 index 0000000..e69de29 diff --git a/docs/State-Input-Guide.md b/docs/State-Input-Guide.md index 85863c4..db22cdc 100644 --- a/docs/State-Input-Guide.md +++ b/docs/State-Input-Guide.md @@ -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()