Page 1 of 3

Help with GUI

Posted: Fri Feb 12, 2021 10:45 am
by darkfrei
Hi all!

Can you explain the right way how to hold in memory and draw such GUI in Löve?

I can't understand metatables and it will be nice just not use them.

Re: Help with GUI

Posted: Fri Feb 12, 2021 11:59 am
by pgimeno
darkfrei wrote: Fri Feb 12, 2021 10:45 am Can you explain the right way how to hold in memory and draw such GUI in Löve?
Best way is probably to use a GUI library, or develop your own. I'm not aware of any tutorial about creating your own GUI in Löve.
darkfrei wrote: Fri Feb 12, 2021 10:45 am I can't understand metatables and it will be nice just not use them.
Not sure if this will help: https://codeberg.org/pgimeno/Gists/src/ ... e-tutorial

Re: Help with GUI

Posted: Fri Feb 12, 2021 12:15 pm
by darkfrei
pgimeno wrote: Fri Feb 12, 2021 11:59 am
darkfrei wrote: Fri Feb 12, 2021 10:45 am I can't understand metatables and it will be nice just not use them.
Not sure if this will help: https://codeberg.org/pgimeno/Gists/src/ ... e-tutorial
Theoretically, someday I can understand them. Is here any way to save metatables into the file?

Re: Help with GUI

Posted: Fri Feb 12, 2021 12:17 pm
by ivan
GUI is a lot of work and in general you don't want to be working on controls/elements that your game doesn't need. Inheritance and metatables can help but they are not going to solve all of your problems.

Re: Help with GUI

Posted: Fri Feb 12, 2021 12:44 pm
by pgimeno
darkfrei wrote: Fri Feb 12, 2021 12:15 pm Theoretically, someday I can understand them. Is here any way to save metatables into the file?
Into what file?

Serialization libraries rarely save metatables. You can however retrieve the metatable and serialize it, if you really want that, but it's not likely that you will get the result you expect. In most cases the serialization library will complain if the metatable contains functions, which is likely. It's possible to make it all work, with a lot of caveats, but it requires a good understanding of what a serialization library will deserialize, how metatables work, and if you use functions, how serialized functions work.

If you use metatables for OOP and want to save/retrieve the objects, the simplest option at load time is to rebuild the objects: you use a serialization library to deserialize the data and obtain a table, and then you set the metatable manually so it works as an object.

Re: Help with GUI

Posted: Fri Feb 12, 2021 4:46 pm
by darkfrei
pgimeno wrote: Fri Feb 12, 2021 11:59 am
darkfrei wrote: Fri Feb 12, 2021 10:45 am Can you explain the right way how to hold in memory and draw such GUI in Löve?
Best way is probably to use a GUI library, or develop your own. I'm not aware of any tutorial about creating your own GUI in Löve.
1. How to check which button was clicked?
I think that we can start from something like:

Code: Select all

function love.mousepressed(x, y, button, istouch)
   if button == 1 then
      local clicked_botton = get_clicked_button (all_visible_bottons, {x=x, y=y})
   end
end

Re: Help with GUI

Posted: Fri Feb 12, 2021 5:52 pm
by pgimeno
darkfrei wrote: Fri Feb 12, 2021 4:46 pm 1. How to check which button was clicked?
I think that we can start from something like:

Code: Select all

function love.mousepressed(x, y, button, istouch)
   if button == 1 then
      local clicked_botton = get_clicked_button (all_visible_bottons, {x=x, y=y})
   end
end
If all you have is buttons, you can have an array of buttons. Buttons are rectangles, therefore you need x, y, width and height for each. Finding if a point is inside a rectangle is straightforward: calculate the right and bottom borders using x+width and y+height, and then check if mouse x is between left and right border, and mouse y is between top and bottom border. You just loop through every button, and when the point is inside one of them, you return that one.

Of course, that doesn't cover some other basic features of a GUI, like keyboard and focus handling, or highlighting when hovering, or displaying the button pressed while the mouse button is down, or cancelling the click when the mouse goes out of the button area. That's a bare bones "which rectangle was clicked" GUI.

Re: Help with GUI

Posted: Fri Feb 12, 2021 9:47 pm
by darkfrei
Here is what I've made:
The scroll works (it's very easy), but buttons are not buttons.

Re: Help with GUI

Posted: Fri Feb 12, 2021 11:03 pm
by pgimeno
The kind of GUI you're after, with nested tabbed containers, is too complex for explaining it in a forum post. If you can't do it yourself, I suggest you look into pre-made GUIs. But then I'm not aware of any GUI written in Lua that allows both horizontal and vertical tabs. In fact, I only know of LoveFrames as supporting tabs, and the tabs are on top (horizontal).

Re: Help with GUI

Posted: Fri Feb 12, 2021 11:10 pm
by dusoft
Hey, I think similiar GUI libs are floating around at Github or here on the forums.
https://github.com/tavuntu/gooi
https://github.com/Sasszem/yalg

Also check the long list:
https://github.com/love2d-community/awesome-love2d#ui