Introducing the GUI Editor Alpha!

Hey Blake, ya it’s not a problem to be posting multiple times, sometimes the flags can happen but don’t worry about it. :wink:

As for the border thickness. Do you mean this property? This is the only one that comes to mind?

1 Like

Thanks, that’s exactly what I was looking for (the Rectangle class calls it “thickness”). I must have forget to set the color or something before LOL. :sweat_smile:

1 Like

Heya, back again! :slightly_smiling_face: IDK if this one’s a bug or if I’m doing something wrong, but when I lay my buttons out in the GUI editor, I have them equally spaced apart horizontally (well actually, it’s their text that’s nearly evenly spaced), but on the playground there’s very uneven spacing between them. :face_with_monocle:

Here’s a screen shot, showing the GUI editor above and the playground below:
Spacing Issue

And here’s the GUI and PG, any idea what could be causing that big gap in the playground?
GUI: https://gui.babylonjs.com/#A10CSQ#4
PG: https://playground.babylonjs.com/#4RTUCB#31

Hey Blake,

So there is actually a tiny problem with your scene set up. Taking a look at your GUI Editor I noticed that you are using pixel values in a responsive layout. This usually screams some warning flags :wink: So I took a look at your playground. What you will actually need to add is after this setting the ideal width and height so we can insure we are using the 512 x 512 that you assigned in the previous lines.

Preformatted textadvancedTexture.renderAtIdealSize = true;`

https://playground.babylonjs.com/#4RTUCB#32

I think we can improve the documentation on this make this super super clear! Let me know if you have any questions.

1 Like

OMG, thanks so much, doing it that way automatically resizes the font too, without any vertical misalignment issues anymore either, and everything looks much nicer and crisper when the window shrinks than the manual resizing I was trying to do before! :smiley:

Just one more thing thou :pray:, is there any way to get it to respond to vertical resizing, as well as horizontal resizing (which it’s doing wonderfully now), and keep everything else the same? It’s sooo close now to what I’ve been after. :slightly_smiling_face:

So is there a issue with your alignments on the text. I couldn’t quiet figure it out myself. But is this a bug still now?

1 Like

Well, there’s still the bug when a container’s font size is changed, but using renderAtIdealSize eliminated the need for me to change the font size, so is a nice way around the bug and is a better way to do it I think. :slightly_smiling_face:

The only issue thou, is that it looks perfect when resized horizontally but when it’s resized vertically, then when it gets too wide and short the controls are way too big since they never resize on vertical window resizing… :thinking:

I think you should try for more responsive layouts and using % more This has better jobs with scaling for different window sizes as well as when you grow and shrink the window. However sometimes it can be trial and error too depending what you need. :joy:

As for the font issue I’m investigating the font size now and honing in on the root cause.

1 Like

Okay, the reason I started using percents thou is because using the stack panel forces me to use pixel values for all of its chid controls. I like the convenience of using the stack panel to position its children, but if it makes creating a responsive layout harder than maybe I’ll use rectangles instead and manually compute the positions. That last part is what I was trying to avoid in using stack panels, but maybe it will be easier than trying to get a nice responsive layout with pixels values. :sweat_smile:

My best recommendation is grid all the way. When I was using stack panel I too fell into the pixel trap. Now I’m in love with grid. If you want things like perfect padding in-between you can actually create a grid where you have blank cells between your content cells.

See what I did here in the color picker demo :slight_smile: Babylon.js Gui Editor

1 Like

Okay, thanks, I’ll def check that out for modeling the grid layout after, but the playground for it actually has the same issue of responding really well to horizontal resizing but not to vertical resizing. That’s another battle for tomorrow thou, thanks again. :beers: :slightly_smiling_face: :sleeping:

2 Likes

Hey @Blake just wanted to update you! I definitely am able to confirm this is a GUI issue. Even with Javascript as well. :wink:

What seems to be happening is when you make changes once the GUI is already rendered. https://playground.babylonjs.com/#XCPP9Y#9484

Take a look at this demo. The alignment issues happens once you set the root property after the first render (in this case when you click the button) But then when it saves for example in the GUI editor I think something is reset so it corrects itself. Looks like an update issue but now we have all the repros.

Update! Ya I found the root line in the code, updated GitHub for the issue

1 Like

Hmm, I keep coming back to this line in the Adaptive scaling section of the GUI documentation: “all values expressed in pixels are considered relatively to this resolution and scaled accordingly”, which makes it seem like the controls’ pixel values are converted to percentages for us if the ideal size is set IMO. If so, then it seems like a matter of preference wether to design in pixels or percents, if they’re being converted to percents any way. If I understand it correctly?

For instance, in JS if we the set AdvancedDynamicTexture’s ideal size to the same 1024 by 1024 square that we’re using in the GUI editor, then a control width of 102.4 pixels should be divided by 1024, leading to the same result as if we’d used 10% in the GUI editor instead of 102.4 pixels?

IDK, I might be misreading it thou, or maybe it’s more complicated… :thinking:

I think I get what you are saying?

Yes setting to ideal with and height will adjust your values to fit on the screen .An example I will give is this demo I made waay back in the earlier itterations of the editor. https://playground.babylonjs.com/#AJA7KA#8

If you look at it , nearly all the values are actually in pixels so when I brought it to the playground I had to renderAtIdealSize in order for it to look correct. What the system is not doing is taking your pixel value and converting it to a percentage. In fact is it not even changing your value at all as far as the control.left control.width etc. Even when the screen size is changing.

ezgif-2-6ae41a6e5458

1 Like

To me, if the pixel values are considered relative to the resolution, that seems to mean that they’re divided by the resolution (and then multiplied by the current, actual resolution). If not that part of the documentation doesn’t seem very clear to me. :thinking:

I’m still trying different things to achieve a responsive GUI thou, I tried one with buttons that use percents for their width and height, with renderAtIdealSize and I tried with useSmallestIdeal instead too, but like all of the examples that I’ve looked at, it’s still not responding well to both horizontal and vertical resizing.

https://playground.babylonjs.com/#4RTUCB#37

1 Like

What is the visual result you are trying to achieve? That can help me understand what might be the best approach for this scenario.

1 Like

Thanks, what I’m after is, if the window is resized either horizontally or vertically then, for example if it’s made smaller, then the controls’ width, height, position, and font all become smaller by the same factor so that they still fit on the screen and still fit in their containers and still have the same aspect ratio, ideally. :slightly_smiling_face:

Responding to whichever dimension or dimension ratio is smaller usually works well I think, but I can’t seem to get it to workout well using Babylon GUI… :sweat_drops:

So any more ideas to try or examples would be very appreciated. :slightly_smiling_face:

This is just a related side note, but I think it’d be worth mentioning in the docs the pros and cons and use cases of an HTML/CSS GUI versus Babylon.js 2D GUI versus Babylon.js 3D GUI - sometimes I forget myself :slight_smile:

2 Likes

That’s a good point, mostly I just wanted to try out using the new GUI editor on my next project, but will likely fall back on the Bootstrap CSS framework if I can’t get it working or if the responsive gui that I’m after isn’t supported, which I almost did a few times already even, because I can get that responding how I want much more readily, but will def come back to play with GUI editor more either way. :slightly_smiling_face:

Update, I’ve found that a solution that works well for me is to not set idealWidth or idealHeight. Then on resize I can calculate the scale factor however I want and use it to resize the controls directly.

Doing it this way I end up using percents for everything except for a few outer containers that get resized manually in pixels, that way I don’t have to manually resize all the controls, just a few containers. :slightly_smiling_face:

1 Like