mirror of
https://github.com/TangentFoxy/Pop.Box.git
synced 2024-12-15 12:44:20 +00:00
docs, excludeUpdating, debugDraw
This commit is contained in:
parent
ab26c62e85
commit
7406a1ee34
1
.gitignore
vendored
1
.gitignore
vendored
@ -1 +0,0 @@
|
|||||||
busted/
|
|
4
conf.lua
4
conf.lua
@ -1,3 +1,7 @@
|
|||||||
function love.conf(t)
|
function love.conf(t)
|
||||||
|
t.title = "Pop.Box Demo / Tests"
|
||||||
t.console = true
|
t.console = true
|
||||||
|
|
||||||
|
t.window.width = 960
|
||||||
|
t.window.height = 540
|
||||||
end
|
end
|
||||||
|
@ -2,6 +2,9 @@
|
|||||||
|
|
||||||
Pop.Box supports three [Drawables][1]: Canvas, Image, Video
|
Pop.Box supports three [Drawables][1]: Canvas, Image, Video
|
||||||
|
|
||||||
|
**Note**: Video support is theoretical, as I have not tested it. (Well,
|
||||||
|
everything is theoretical, but I'm writing tests now.)
|
||||||
|
|
||||||
Additionally, you can use in the place of any Drawable `false` to stop rendering
|
Additionally, you can use in the place of any Drawable `false` to stop rendering
|
||||||
of whatever is using a Drawable, or a table of color values.
|
of whatever is using a Drawable, or a table of color values.
|
||||||
|
|
||||||
|
@ -54,7 +54,7 @@ Additional methods:
|
|||||||
- `getColor()` - Returns background color, or errors if the background is not a
|
- `getColor()` - Returns background color, or errors if the background is not a
|
||||||
color.
|
color.
|
||||||
|
|
||||||
TODO Make it possible to just specify skin?
|
TODO Make it possible to just specify background?
|
||||||
|
|
||||||
## Text Element
|
## Text Element
|
||||||
|
|
||||||
@ -64,10 +64,13 @@ Text is used to draw text.
|
|||||||
If `parent` not specified, uses `pop.window` (the top level element).
|
If `parent` not specified, uses `pop.window` (the top level element).
|
||||||
If `color` is not specified, uses white.
|
If `color` is not specified, uses white.
|
||||||
|
|
||||||
Additional methods:
|
Overwritten methods:
|
||||||
|
|
||||||
- `setSize()` - Does not allow you to set the size, instead, it fixes the size
|
- `setSize()` - Does not allow you to set the size, instead, it fixes the size
|
||||||
if it is incorrect (mostly for internal use).
|
if it is incorrect (mostly for internal use).
|
||||||
|
|
||||||
|
Additional methods:
|
||||||
|
|
||||||
- `setText(text)` - Sets text and modifies size to fit.
|
- `setText(text)` - Sets text and modifies size to fit.
|
||||||
- `getText()` - Returns text.
|
- `getText()` - Returns text.
|
||||||
- `setFont()` - Sets [Font][2] and modifies size to fit. Note: Empty text will
|
- `setFont()` - Sets [Font][2] and modifies size to fit. Note: Empty text will
|
||||||
@ -77,7 +80,7 @@ Additional methods:
|
|||||||
- `setColor(r, g, b, a)` - Sets text color (`a` is alpha, and optional).
|
- `setColor(r, g, b, a)` - Sets text color (`a` is alpha, and optional).
|
||||||
- `getColor()` - Returns text color.
|
- `getColor()` - Returns text color.
|
||||||
|
|
||||||
TODO Make it possible to just specify text, or just text and skin?
|
TODO Make it possible to just specify text, or just text and color?
|
||||||
TODO Make it possible to use setting size on text to actually calculate what
|
TODO Make it possible to use setting size on text to actually calculate what
|
||||||
font size will make that work?
|
font size will make that work?
|
||||||
|
|
||||||
@ -89,6 +92,9 @@ not be moved unless its own movement methods are used.
|
|||||||
If you set `excludeRendering` to `true` on any element, it and its children will
|
If you set `excludeRendering` to `true` on any element, it and its children will
|
||||||
not be rendered.
|
not be rendered.
|
||||||
|
|
||||||
|
If you set `excludeUpdating` to `true` on any element, it and its children will
|
||||||
|
not be rendered.
|
||||||
|
|
||||||
[1]: ./Skins.md
|
[1]: ./Skins.md
|
||||||
[2]: https://love2d.org/wiki/Font
|
[2]: https://love2d.org/wiki/Font
|
||||||
[3]: ./Drawables.md
|
[3]: ./Drawables.md
|
||||||
|
@ -31,6 +31,8 @@ elements at once.
|
|||||||
- `pop.update(dt)` is used so that any element can have a frame-by-frame update
|
- `pop.update(dt)` is used so that any element can have a frame-by-frame update
|
||||||
attached to it.
|
attached to it.
|
||||||
- `pop.draw()` is used to draw everything.
|
- `pop.draw()` is used to draw everything.
|
||||||
|
- `pop.debugDraw()` can be used to draw everything in existence, to try to help
|
||||||
|
figure out exactly what's going on.
|
||||||
- `pop.textinput(text)` is used to grab text input for any focused element that
|
- `pop.textinput(text)` is used to grab text input for any focused element that
|
||||||
can accept it.
|
can accept it.
|
||||||
- `pop.mousepressed(button, x, y)` is used to detect and handle when an element
|
- `pop.mousepressed(button, x, y)` is used to detect and handle when an element
|
||||||
|
48
main.lua
48
main.lua
@ -1,18 +1,15 @@
|
|||||||
local pop = require "pop"
|
local pop = require "pop"
|
||||||
|
|
||||||
|
local lg = love.graphics
|
||||||
|
|
||||||
|
local visualTestsShown = false
|
||||||
|
local testsRun = false
|
||||||
|
local debugDrawEnabled = false
|
||||||
|
|
||||||
function love.load()
|
function love.load()
|
||||||
local align = pop.box():align("center", "center"):setSize(200, 200)
|
pop.text(nil, "Press \"s\" to show objects for visual testing/demo.\nPress \"t\" to run tests.\nPress \"d\" to toggle debug draw."):move(2, 2)
|
||||||
pop.box(align):align("left", "top"):setSize(75, 10):setColor(255, 0, 255, 255)
|
--TODO correct the fact that the size is wrong here! (height doesn't take into account \n)
|
||||||
pop.box(align):align("center", "top"):setColor(100, 100, 100)
|
--NOTE width? Is width calculated correctly when \n's exist? TEST THIS (also test tabs)
|
||||||
pop.box(align, {0, 255, 0, 255}):setSize(20, 5):align("right", "top")
|
|
||||||
pop.box(align):align("left", "center"):setColor(0, 0, 255)
|
|
||||||
pop.box(align):align("center", "center"):setSize(90, 90):setColor(255, 255, 255)
|
|
||||||
pop.box(align):align("right", "center"):setColor(255, 0, 0)
|
|
||||||
pop.box(align):align("left", "bottom"):setColor(0, 255, 0)
|
|
||||||
pop.box(align):align("center", "bottom"):setColor(255, 255, 0)
|
|
||||||
pop.box(align):align("right", "bottom"):setColor(0, 255, 255)
|
|
||||||
pop.box(nil, {255, 0, 0, 255}):align("left", "top"):setSize(50, 50)
|
|
||||||
pop.text(nil, "Hello World!"):align("center"):setText("Hey, I've been modified!")
|
|
||||||
end
|
end
|
||||||
|
|
||||||
function love.update(dt)
|
function love.update(dt)
|
||||||
@ -21,6 +18,10 @@ end
|
|||||||
|
|
||||||
function love.draw()
|
function love.draw()
|
||||||
pop.draw()
|
pop.draw()
|
||||||
|
|
||||||
|
if debugDrawEnabled then
|
||||||
|
pop.debugDraw()
|
||||||
|
end
|
||||||
end
|
end
|
||||||
|
|
||||||
function love.textinput(text)
|
function love.textinput(text)
|
||||||
@ -39,6 +40,29 @@ function love.keypressed(key)
|
|||||||
if key == "escape" then
|
if key == "escape" then
|
||||||
love.event.quit()
|
love.event.quit()
|
||||||
else
|
else
|
||||||
|
if (key == "s") and (not visualTestsShown) then
|
||||||
|
-- old visual tests
|
||||||
|
local align = pop.box():align("center", "center"):setSize(200, 200)
|
||||||
|
pop.box(align):align("left", "top"):setSize(75, 10):setColor(255, 0, 255, 255)
|
||||||
|
pop.box(align):align("center", "top"):setColor(100, 100, 100)
|
||||||
|
pop.box(align, {0, 255, 0, 255}):setSize(20, 5):align("right", "top")
|
||||||
|
pop.box(align):align("left", "center"):setColor(0, 0, 255)
|
||||||
|
pop.box(align):align("center", "center"):setSize(90, 90):setColor(255, 255, 255)
|
||||||
|
pop.box(align):align("right", "center"):setColor(255, 0, 0)
|
||||||
|
pop.box(align):align("left", "bottom"):setColor(0, 255, 0):setSize(nil, 40)
|
||||||
|
pop.box(align):align("center", "bottom"):setColor(255, 255, 0)
|
||||||
|
pop.box(align):align("right", "bottom"):setColor(0, 255, 255):setSize(40, 40)
|
||||||
|
--pop.box(nil, {255, 0, 0, 255}):align("left", "top"):setSize(50, 50) --TODO adjust z-height of elements
|
||||||
|
pop.text(nil, "Hello World!"):align("center"):setText("Hey, I've been modified!")--:move(0, 18)
|
||||||
|
pop.text(nil, "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz1234567890!@#$%^&*()-=_+[]{}\\:;\"',./<>?`~"):align("center", "bottom")
|
||||||
|
|
||||||
|
visualTestsShown = true
|
||||||
|
elseif (key == "t") and (not testsRun) then
|
||||||
|
require "test"
|
||||||
|
elseif key == "d" then
|
||||||
|
debugDrawEnabled = not debugDrawEnabled
|
||||||
|
end
|
||||||
|
|
||||||
pop.keypressed(key)
|
pop.keypressed(key)
|
||||||
end
|
end
|
||||||
end
|
end
|
||||||
|
@ -30,6 +30,16 @@ function box:draw() --NOTE these ifs are probably wrong
|
|||||||
return self
|
return self
|
||||||
end
|
end
|
||||||
|
|
||||||
|
function box:debugDraw()
|
||||||
|
lg.setLineWidth(1)
|
||||||
|
lg.setColor(0, 0, 0, 100)
|
||||||
|
lg.rectangle("fill", self.x, self.y, self.w, self.h)
|
||||||
|
lg.setColor(0, 0, 200, 200)
|
||||||
|
lg.rectangle("line", self.x, self.y, self.w, self.h)
|
||||||
|
lg.setColor(200, 200, 255, 255)
|
||||||
|
lg.print("b", self.x, self.y)
|
||||||
|
end
|
||||||
|
|
||||||
function box:setBackground(background)
|
function box:setBackground(background)
|
||||||
self.background = background
|
self.background = background
|
||||||
|
|
||||||
|
@ -1,3 +1,5 @@
|
|||||||
|
local lg = love.graphics
|
||||||
|
|
||||||
local path = string.sub(..., 1, string.len(...) - string.len("/elements/element"))
|
local path = string.sub(..., 1, string.len(...) - string.len("/elements/element"))
|
||||||
local class = require(path .. "/lib/middleclass")
|
local class = require(path .. "/lib/middleclass")
|
||||||
|
|
||||||
@ -16,6 +18,16 @@ function element:initialize(pop, parent)
|
|||||||
self.vertical = "top"
|
self.vertical = "top"
|
||||||
end
|
end
|
||||||
|
|
||||||
|
function element:debugDraw()
|
||||||
|
lg.setLineWidth(1)
|
||||||
|
lg.setColor(0, 0, 0, 100)
|
||||||
|
lg.rectangle("fill", self.x, self.y, self.w, self.h)
|
||||||
|
lg.setColor(0, 200, 0, 200)
|
||||||
|
lg.rectangle("line", self.x, self.y, self.w, self.h)
|
||||||
|
lg.setColor(200, 255, 200, 255)
|
||||||
|
lg.print("e", self.x, self.y)
|
||||||
|
end
|
||||||
|
|
||||||
function element:move(x, y)
|
function element:move(x, y)
|
||||||
self.x = self.x + x
|
self.x = self.x + x
|
||||||
self.y = self.y + y
|
self.y = self.y + y
|
||||||
|
@ -22,6 +22,16 @@ function text:draw()
|
|||||||
return self
|
return self
|
||||||
end
|
end
|
||||||
|
|
||||||
|
function text:debugDraw()
|
||||||
|
lg.setLineWidth(1)
|
||||||
|
lg.setColor(0, 0, 0, 100)
|
||||||
|
lg.rectangle("fill", self.x, self.y, self.w, self.h)
|
||||||
|
lg.setColor(200, 0, 0, 200)
|
||||||
|
lg.rectangle("line", self.x, self.y, self.w, self.h)
|
||||||
|
lg.setColor(255, 200, 200, 255)
|
||||||
|
lg.print("t", self.x, self.y)
|
||||||
|
end
|
||||||
|
|
||||||
function text:setSize()
|
function text:setSize()
|
||||||
local w = self.font:getWidth(self.text)
|
local w = self.font:getWidth(self.text)
|
||||||
local h = self.font:getHeight()
|
local h = self.font:getHeight()
|
||||||
|
29
pop/init.lua
29
pop/init.lua
@ -45,15 +45,16 @@ function pop.update(dt, element)
|
|||||||
element = pop.window
|
element = pop.window
|
||||||
end
|
end
|
||||||
|
|
||||||
|
if not element.excludeUpdating then
|
||||||
if element.update then
|
if element.update then
|
||||||
element:update(dt)
|
element:update(dt)
|
||||||
end
|
end
|
||||||
|
|
||||||
--NOTE add excludeUpdating for performance if needed
|
|
||||||
for i=1,#element.child do
|
for i=1,#element.child do
|
||||||
pop.update(dt, element.child[i])
|
pop.update(dt, element.child[i])
|
||||||
end
|
end
|
||||||
end
|
end
|
||||||
|
end
|
||||||
|
|
||||||
function pop.draw(element)
|
function pop.draw(element)
|
||||||
if not element then
|
if not element then
|
||||||
@ -87,6 +88,10 @@ function pop.keyreleased(key)
|
|||||||
--TODO no idea what to do with this
|
--TODO no idea what to do with this
|
||||||
end
|
end
|
||||||
|
|
||||||
|
function pop.textinput(text)
|
||||||
|
--TODO something useful will happen here
|
||||||
|
end
|
||||||
|
|
||||||
function pop.skin(element, skin, stop)
|
function pop.skin(element, skin, stop)
|
||||||
if element.background then
|
if element.background then
|
||||||
element.background = skin.background
|
element.background = skin.background
|
||||||
@ -105,6 +110,28 @@ function pop.skin(element, skin, stop)
|
|||||||
end
|
end
|
||||||
end
|
end
|
||||||
|
|
||||||
|
function pop.debugDraw(element)
|
||||||
|
if not element then
|
||||||
|
element = pop.window
|
||||||
|
end
|
||||||
|
|
||||||
|
if element.debugDraw then
|
||||||
|
element:debugDraw()
|
||||||
|
else
|
||||||
|
lg.setLineWidth(1)
|
||||||
|
lg.setColor(0, 0, 0, 100)
|
||||||
|
lg.rectangle("fill", self.x, self.y, self.w, self.h)
|
||||||
|
lg.setColor(150, 150, 150, 150)
|
||||||
|
lg.rectangle("line", self.x, self.y, self.w, self.h)
|
||||||
|
lg.setColor(200, 200, 200, 255)
|
||||||
|
lg.print(".", self.x, self.y)
|
||||||
|
end
|
||||||
|
|
||||||
|
for i=1,#element.child do
|
||||||
|
pop.debugDraw(element.child[i])
|
||||||
|
end
|
||||||
|
end
|
||||||
|
|
||||||
pop.load()
|
pop.load()
|
||||||
|
|
||||||
return pop
|
return pop
|
||||||
|
@ -2,6 +2,6 @@ local skin = {}
|
|||||||
|
|
||||||
skin.color = {255, 255, 255, 255}
|
skin.color = {255, 255, 255, 255}
|
||||||
skin.background = false
|
skin.background = false
|
||||||
skin.font = love.graphics.newFont(14)
|
skin.font = love.graphics.newFont(13)
|
||||||
|
|
||||||
return skin
|
return skin
|
||||||
|
12
test.lua
Normal file
12
test.lua
Normal file
@ -0,0 +1,12 @@
|
|||||||
|
local pop = require "pop"
|
||||||
|
|
||||||
|
--[[ TODO
|
||||||
|
|
||||||
|
Test using different Drawables: Canvas, Image, Video
|
||||||
|
- Test without scaling, test with scaling up, test with scaling down.
|
||||||
|
- Test wtih scaling unevenly (more x / more y, one test for each!).
|
||||||
|
- Look at what can be done to them, and test doing other things.
|
||||||
|
- Test using various color tables.
|
||||||
|
- Test using false.
|
||||||
|
|
||||||
|
]]
|
Loading…
Reference in New Issue
Block a user