## loveui 0.7 (just started)

appleide
Party member
Posts: 323
Joined: Fri Jun 27, 2008 2:50 pm

### loveui 0.7 (just started)

Download Latest: https://github.com/meric/loveui.love/zipball/master (rename .zip to .love)
Github: https://github.com/meric/loveui.love

I've begun work on a new gui library for the LÖVE 2D game engine.

The ideal will be to provide a concise way and easily customizable way to include GUI widgets such as buttons, textfields, progress bars in their game.

One of the killer features is the ability to tag widgets with strings. You can then apply styles to widgets with that tag, or select widgets containing some set of tags.

Currently there is only the base class "widget" partially implemented. If anyone would like to assist in the library's implementation please do not hesitate to reply to this thread. Also please comment on the example code below, in regards to readability, usability, and conciseness.

Thanks

Example code:

Code: Select all

ui = require 'loveui/ui'

local context = ui.context()

ui.style("ui.button tag1", {
left = 100, top = 100,
width = 50, height = 50,
bordercolor = {255, 0, 0, 255},
borderwidth = 4,
backgroundcolor = {255, 255, 255, 255},
backgroundimage = "./button.png"}),

ui.button("ui.button tag1 tag2 tag3", {value = "Click"})
:onmousedown(
function(self, x, y, button)
print("mousedown", x, y, button)
end)
:onclick(
function(self, x, y, button)
print("click", x, y, button)
end))
end

function love.update(dt)
context:update(dt)
end

function love.draw()
context:draw()
end

function love.keypressed(key, unicode)
context:keypressed(key, unicode)
end

function love.keyreleased(key, unicode)
context:keyreleased(key, unicode)
end

function love.mousepressed(x, y, button)
context:mousepressed(x, y, button)
end

function love.mousereleased(x, y, button)
context:mousereleased(x, y, button)
end

TODO:
Implement widget:drawbackground.
Implement widget border images in widget:drawborder function.
Complete button, textfield, progress bar widgets.

P.S A fun thing to try would be to set the border left color of the widget in the example code.
Change the relevant code to:

Code: Select all

context:add(
ui.style("ui.button tag1", {
left = 100, top = 100,
width = 50, height = 50,
borderleftcolor = {255, 255, 0, 255}, -- Sets border left color.
borderleftwidth = 8, -- Sets border left width.
bordercolor = {255, 0, 0, 255},
borderwidth = 4,
backgroundcolor = {255, 255, 255, 255},
backgroundimage = "./button.png"}),

Attachments
loveui.zip
Last edited by appleide on Sun Mar 06, 2011 1:25 pm, edited 1 time in total.
RPG
Party member
Posts: 157
Joined: Wed Mar 02, 2011 5:02 am
Location: Russia
Contact:

### Re: loveui 0.7 (just started)

Looks promising. Any real demonstrations avaiable?

I think best solution for UI in games - using "borer image" like CSS 3:
http://css3wizardry.com/2010/07/26/ipho ... er-images/

I'm also thinking bout joining UI classes with lQuery events mechanism, then you could animate widgets, change states on the widgets.
Lap
Party member
Posts: 256
Joined: Fri Apr 30, 2010 3:46 pm

### Re: loveui 0.7 (just started)

I've been working with Goo for almost a year now and I'll try to think of a list of pitfalls you can avoid as well as things that were absolute godsends. Good luck!
appleide
Party member
Posts: 323
Joined: Fri Jun 27, 2008 2:50 pm

### Re: loveui 0.7 (just started)

Looks promising. Any real demonstrations avaiable?
Yes, just rename the folder to be a .love.
Lap wrote:I've been working with Goo for almost a year now and I'll try to think of a list of pitfalls you can avoid as well as things that were absolute godsends. Good luck!
That'd be great!

EDIT:

Anti-aliased round corners. Figuring out a way to make this faster...

EDIT 2:

Found a way to make it faster. Committed to github. See https://github.com/meric/loveui.love.
Attachments
Picture 2.png (5.41 KiB) Viewed 13804 times
loveui.love
Picture 1.png (4.34 KiB) Viewed 13817 times
Lap
Party member
Posts: 256
Joined: Fri Apr 30, 2010 3:46 pm

### Re: loveui 0.7 (just started)

I went through my version of Goo and I'm having trouble picking out all I changed since it's happened so gradually. Most of it looks like specific Goo bugs. I'd also either add a panel that has scissoring or add that as an option to all panels. Having a framebuffer object is a useful and easy addition as well.

Here's one pitfall I do remember. Make sure you have some sort of tiered loading system for the basic UI elements. Goo simply loaded all the UI elements alphabetically and it seems that it was by luck that inherited classes happened to be higher up the alphabet.
EmmanuelOga
Citizen
Posts: 56
Joined: Thu Apr 22, 2010 9:42 pm
Location: Buenos Aires, Argentina
Contact:

### Re: loveui 0.7 (just started)

Lap wrote:Found a way to make it faster. Committed to github. See https://github.com/meric/loveui.love.
Hmmm,

https://github.com/meric/loveui.love/bl ... ve.lua#L41

Instead of creating a pixmap each time you draw an arc you could use a polygon to draw the arc (in the same way löve uses a polygon to do cicrcles). You could make it so it receives the number of segments to use, the more segments you use the better the arc is drawn. The anti-alias wouldn't be that good but it would be drawn much faster.
--------------------------------------------------------------------------------------------------------
http://EmmanuelOga.com
appleide
Party member
Posts: 323
Joined: Fri Jun 27, 2008 2:50 pm

### Re: loveui 0.7 (just started)

EmmanuelOga wrote:
Lap wrote:Found a way to make it faster. Committed to github. See https://github.com/meric/loveui.love.
Hmmm,

https://github.com/meric/loveui.love/bl ... ve.lua#L41

Instead of creating a pixmap each time you draw an arc you could use a polygon to draw the arc (in the same way löve uses a polygon to do cicrcles). You could make it so it receives the number of segments to use, the more segments you use the better the arc is drawn. The anti-alias wouldn't be that good but it would be drawn much faster.
The polygon needs to be a simple convex shape...
http://love2d.org/wiki/love.graphics.polygon
"Note: when in fill mode, the polygon must be convex and simple or rendering artifacts may occur."

I just found out there are problems with my ways of drawing arcs.

Here: Left pixmap, Right is polygons.

The arcs are semi-transparent; When the pixmap is rotated the edge becomes rough (If it could be rotated, the same arc can be reused on different rotations). The anti-aliasing on the polygon approach does not have transparency applied.

I think I can fix the left one by reusing arcs less (so I don't need to rotate them) but for the right one I haven't thought of a solution on how to anti-alias with transparency.
Attachments
Picture 1.png (8.63 KiB) Viewed 13657 times
appleide
Party member
Posts: 323
Joined: Fri Jun 27, 2008 2:50 pm

### Re: loveui 0.7 (just started)

Here's an unfinished version of loveui.

Has buttons and textfields only.
Attachments
loveui-b.love
fixed textfield bug.
Last edited by appleide on Fri Jul 08, 2011 10:16 am, edited 1 time in total.
Robin
The Omniscient
Posts: 6506
Joined: Fri Feb 20, 2009 4:29 pm
Location: The Netherlands
Contact:

### Re: loveui 0.7 (just started)

Hurray! Welcome to the future!
Help us help you: attach a .love.
Ensayia
Party member
Posts: 399
Joined: Sat Jun 12, 2010 7:57 pm

### Re: loveui 0.7 (just started)

For me, the background flashes black and white very rapidly at a nauseating pace. Something might be wrong...

### Who is online

Users browsing this forum: Bing [Bot] and 8 guests