LÖVE

Posted: **Thu Mar 03, 2011 1:36 pm**

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()

function love.load()
  context:add(
    ui.style("ui.button tag1", {
        left = 100, top = 100, 
        width = 50, height = 50,
        bordercolor = {255, 0, 0, 255},
        borderwidth = 4,
        borderradius= 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,
        borderradius= 4,
        backgroundcolor = {255, 255, 255, 255}, 
        backgroundimage = "./button.png"}),

Posted: **Thu Mar 03, 2011 4:06 pm**

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.

Posted: **Sat Mar 05, 2011 3:44 pm**

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!

Posted: **Sun Mar 06, 2011 7:59 am**

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.

Posted: **Wed Mar 09, 2011 10:44 am**

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.

Posted: **Wed Mar 09, 2011 4:27 pm**

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.

Posted: **Sat Mar 12, 2011 10:54 am**

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.

Posted: **Fri Jul 08, 2011 7:10 am**

Here's an unfinished version of loveui.

Has buttons and textfields only.

Posted: **Fri Jul 08, 2011 10:04 am**

Hurray! Welcome to the future!

Posted: **Fri Jul 08, 2011 10:37 am**

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

LÖVE

loveui 0.7 (just started)

loveui 0.7 (just started)

Re: loveui 0.7 (just started)

Re: loveui 0.7 (just started)

Re: loveui 0.7 (just started)

Re: loveui 0.7 (just started)

Re: loveui 0.7 (just started)

Re: loveui 0.7 (just started)

Re: loveui 0.7 (just started)

Re: loveui 0.7 (just started)

Re: loveui 0.7 (just started)