Help with GUI

Questions about the LÖVE API, installing LÖVE and other support related questions go here.
Forum rules
Before you make a thread asking for help, read this.
User avatar
darkfrei
Party member
Posts: 217
Joined: Sat Feb 08, 2020 11:09 pm

Help with GUI

Post 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.
Attachments
GUI_02.png
GUI_02.png (60.09 KiB) Viewed 3720 times
User avatar
pgimeno
Party member
Posts: 2610
Joined: Sun Oct 18, 2015 2:58 pm

Re: Help with GUI

Post 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
User avatar
darkfrei
Party member
Posts: 217
Joined: Sat Feb 08, 2020 11:09 pm

Re: Help with GUI

Post 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?
User avatar
ivan
Party member
Posts: 1722
Joined: Fri Mar 07, 2008 1:39 pm
Contact:

Re: Help with GUI

Post 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.
User avatar
pgimeno
Party member
Posts: 2610
Joined: Sun Oct 18, 2015 2:58 pm

Re: Help with GUI

Post 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.
User avatar
darkfrei
Party member
Posts: 217
Joined: Sat Feb 08, 2020 11:09 pm

Re: Help with GUI

Post 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
User avatar
pgimeno
Party member
Posts: 2610
Joined: Sun Oct 18, 2015 2:58 pm

Re: Help with GUI

Post 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.
User avatar
darkfrei
Party member
Posts: 217
Joined: Sat Feb 08, 2020 11:09 pm

Re: Help with GUI

Post by darkfrei »

Here is what I've made:
The scroll works (it's very easy), but buttons are not buttons.
Attachments
2021-02-12T22_44_52-Untitled.png
2021-02-12T22_44_52-Untitled.png (94.64 KiB) Viewed 3634 times
GUI-test-01.love
(1011 Bytes) Downloaded 93 times
User avatar
pgimeno
Party member
Posts: 2610
Joined: Sun Oct 18, 2015 2:58 pm

Re: Help with GUI

Post 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).
dusoft
Party member
Posts: 139
Joined: Fri Nov 08, 2013 12:07 am

Re: Help with GUI

Post 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
Post Reply

Who is online

Users browsing this forum: Bing [Bot], Google [Bot] and 29 guests