Hello everyone, while working on UI/UX for games, I stumbled upon the "Library/ui" folder which contains a variety of components like Buttons, Text, ScrollList, DropDown, and even a Calendar. So, I'm starting this thread hoping to engage with you all about Gideros' GUI system. I believe many of you might be interested as well. Please share any examples and questions related to this built-in UI and Layout system. I find its architecture and code quite lightweight, and with comprehensive documentation and examples, it has great potential!
@hgy29 I hope that when you have the time, you will post some small examples and tutorials about this system so that everyone can use it and make it more popular!
I now start reading setLayouttConstraints/ setLayoutParameters in
https://wiki.gideros.rocks/index.php/Sprite:setLayoutConstraints
Comments
Likes: vitalitymobile, MoKaLux
First of all, in order to use Gideros UI Library (GUIL ?) you have to link two folders to your project: Library/ui and Library/luashaders from your Gideros installation (GUIL depends on luashaders).
Now a first example to make a very simple Button:
Likes: MoKaLux, vitalitymobile
Likes: MoKaLux, vitalitymobile
Likes: MoKaLux, vitalitymobile
Likes: MoKaLux, pie, vitalitymobile
For this to work you'll have to use a TTF font (it doesn't work well with gideros embedded font).
In init.lua:
Likes: MoKaLux, pie, vitalitymobile
GUILGUI (Gideros UI) in the wiki.I am looking for a widget I may need for an app and I am testing all the options available through Gideros (ImGui, GUI, pure code, ...) and why not document it at the same time
So I will start with the examples from hgy29 above and will try to add ALL of them God's willing
The wiki front page needs some more colors so I am looking into redesigning the front page as well
Viva Gideros
Likes: pie, vitalitymobile
I just saw a recent commit
https://github.com/gideros/gideros/commit/2debc5adc414b0722540d6954fbe4905375c8cfd
and it looks like we might be having some significant and amazing changes soon.
This is some serious stuff, started the wiki but not finished yet https://wiki.gideros.rocks/index.php/UI
I tried getting the Accordion working with no luck, I will try another day, another time
Here is an Accordion example:
Likes: MoKaLux
I tried getting UI.TabbedPane working with no luck, hgy29 do you have a sample code please?
EDIT: thank you hgy29 for the fast response below
Likes: pie
Just change
Likes: MoKaLux
I mean for example:
thank you
Thank you
Likes: pie
Likes: MoKaLux
I mean stuff like color, font, padding etc.. is there a list somewhere?
my first attempt gave me this
I'd like the button to fit in the last 1/10of the screen at the bottom, and it's there, but its content clearly is fit inside a bigger rectangle.
As a side question: why UI.screen is visible even if it's not explicitly added to stage? I found that adding it to stage is better for me because I know at which z-layer it is. Is there any side effect in this choice?
I am still trying to understand how this UI works, please bear with me
Thank you
Likes: MoKaLux
Likes: pie
But if you are after visual properties, they should all be handled in style sheets. Have a look at uistyle.lua and if you are using a theme, the corresponding theme code.
You can always apply a specific style to an UI Component, through UI.Panel:setStyle(). Because it is so common to add it to the stage that creating it automatically does that. About side effects of not adding it directly, it may break automatic response to screen dimension changes.
Note that UI.Screen already handle several layers by itself: it has a fullscreen() layer covering all the device screen, then an ui() screen above excluding notch and round corners. If you need more, you can add other layers before or after you UI.Screen in stage.
Likes: vitalitymobile, pie
I now noticed that you also built a UI.Builder, which seems to provide a much cleaner approach to this UI.
Does it do the same thing as writing each element by hand or there are certain situations where one approach is better than the other?
I had a look to the styles now and I was wondering what does the "s" after the value mean in
["buttontextfield.szInset"]="0.25s",
["buttontextfield.szMargin"]="0.5s",
I think I understood that fill is applied on UI.Panel, while inside a panel we must use weight: one of the things I still don't understand is why my button is completely messed up, as if it is was placed inside a bigger panel that goes out of the screen:
Styling rules support a few units after numbers, they are:
- 's': unit dependent on font scale computed by the UI based on screen DPI
- 'is': similar as 's' but used for 'icons', more precisely for objects that should be touch-able. They are the same on desktop, but is is typically bigger on phones.
- 'em': unit based on current font size, typically to size things in 'number of characters'
Yes, button text is nested inside a UIImageText component, I will have a look at what is happening here.
Likes: MoKaLux, pie
Likes: MoKaLux
I tried using stage:getBounds(myui.myelement) but I don't understand why the resulting y coordinate always results negative, and the width and height always exceed the logical bounds of my screen.
Thank you
Can you please take a look and see what I am missing here?
I think that the following code should build an UI and overlap each UI element with a colored shape, but this is the outcome: the project is set to PixelPerfect, if this could make a difference.
Thank you
Likes: pie
The screenshot reflects this change in code
Likes: MoKaLux, pie