loveui 0.7 (just started)

Showcase your libraries, tools and other projects that help your fellow love users.
User avatar
appleide
Party member
Posts: 323
Joined: Fri Jun 27, 2008 2:50 pm

loveui 0.7 (just started)

Post by appleide » 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"}),
Attachments
loveui.zip
(45.71 KiB) Downloaded 397 times
Last edited by appleide on Sun Mar 06, 2011 1:25 pm, edited 1 time in total.

User avatar
RPG
Party member
Posts: 157
Joined: Wed Mar 02, 2011 5:02 am
Location: Russia
Contact:

Re: loveui 0.7 (just started)

Post by RPG » 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.

User avatar
Lap
Party member
Posts: 256
Joined: Fri Apr 30, 2010 3:46 pm

Re: loveui 0.7 (just started)

Post by Lap » 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!

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

Re: loveui 0.7 (just started)

Post by appleide » 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.
Attachments
Picture 2.png
Picture 2.png (5.41 KiB) Viewed 9221 times
loveui.love
(44.09 KiB) Downloaded 289 times
Picture 1.png
Picture 1.png (4.34 KiB) Viewed 9234 times

User avatar
Lap
Party member
Posts: 256
Joined: Fri Apr 30, 2010 3:46 pm

Re: loveui 0.7 (just started)

Post by Lap » 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.

User avatar
EmmanuelOga
Citizen
Posts: 56
Joined: Thu Apr 22, 2010 9:42 pm
Location: Buenos Aires, Argentina
Contact:

Re: loveui 0.7 (just started)

Post by EmmanuelOga » 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.
--------------------------------------------------------------------------------------------------------
http://EmmanuelOga.com

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

Re: loveui 0.7 (just started)

Post by appleide » 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.
Attachments
Picture 1.png
Picture 1.png (8.63 KiB) Viewed 9074 times

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

Re: loveui 0.7 (just started)

Post by appleide » Fri Jul 08, 2011 7:10 am

Here's an unfinished version of loveui.

Has buttons and textfields only.
Attachments
loveui-b.love
fixed textfield bug.
(83.62 KiB) Downloaded 301 times
Last edited by appleide on Fri Jul 08, 2011 10:16 am, edited 1 time in total.

User avatar
Robin
The Omniscient
Posts: 6506
Joined: Fri Feb 20, 2009 4:29 pm
Location: The Netherlands
Contact:

Re: loveui 0.7 (just started)

Post by Robin » Fri Jul 08, 2011 10:04 am

Hurray! Welcome to the future!
Help us help you: attach a .love.

User avatar
Ensayia
Party member
Posts: 397
Joined: Sat Jun 12, 2010 7:57 pm
Location: Middle of Nowhere, TN

Re: loveui 0.7 (just started)

Post by Ensayia » 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...

Post Reply

Who is online

Users browsing this forum: zorg and 7 guests