after experimenting around with some different UI solutions for Babylon (DOM based using React/Vue, own Canvas solution, Babylons built-in one) I’ve decided to settle with Babylon.GUI for my next project.
It looks like the 100% height I set in my gameListScollViewer is referring to global 100% height, not 100% of the remaining height. How can I tell it to just fill up all of the remaining horizontal space in the stack panel without overflowing the available screen space?
I’d prefer a declarative approach to this (meaning not having to manually calcuate the heights of my components, etc each render) if possible.
I found the following error message, about control in Babylon.js, in the console.
BJS - [09:35:20]: Control (Name:gl_scroll, UniqueId:6768) is using height in percentage mode inside a vertical StackPanel
It may take some time to track the issue and possibly because of internal calculations for the scroll bars it may not be able to be resolved. The best solution is that provided by @wulf11 and use a grid.
I have made some sizing adjustments so that everything is on-screen, particularly the scrollViewer (line 82) and added background color to the different parts https://www.babylonjs-playground.com/#FKHAN9#5.
I know I am being very slow but please explain (using color to help) what you want to fill into what.
Hey! Sorry for the delay, different time zones and a busy work day.
@wulf11
The grid looks rather promising, I’ll try it out! I still do want to solve this issue using StackPanels though just for the sake of getting more familiar with them.
@JohnK
Thanks for the time! I’ll use the grid, but I’d still love to figure out if this is a use case stack panels can support at all.
Speaking in colors:
Red must fill the available screen space
Orange must cover red (except the 50px at the top for the action bar)
Pink must cover orange
The yellow “GAME INFO” elements should expand horizontally (optional, would have been a follow up question )
No element may go over the screen boundaries
I hope this makes sense?
One question regarding your PG:
What does __automaticSize do? It looks like a private member.
–
Another highly related question as well: I’ve been reading though some more forum posts today and I’ve seen a lot of people going with DOM based UIs for their game.
This strikes me as interesting since I just migrated away from a DOM based UI. What is the best-practice approach regarding UI technology recommended by experienced Babylonians/Devs?
I’ve seen some posts saying that if you need UI interaction with the game world one should use the Babylon GUI - otherwise DOM. Does this still hold true?
If so, this slightly concerns me as it has the hidden implication (at least to me) that using the Babylon GUI is a downside as it is only “needed” for this case.
–
I’ll also add a third issue (yell at me if I should open a new thread for any of these instead of hijacking this thread for three UI related, albeit different problems):
It looks like the order in which I add inputs to the UI affects if I can interact with them or not. Unfortunately I cannot always add inputs last due to heavy UI nesting. See this PG: Babylon.js Playground
zIndex does not seem to help, and I’d really like to stay away from it since you quickly loose overview over which zIndex to use.
Sorry about that I was just experimenting to see if changing that private member would solve the issue. It didn’t and I should have deleted it before saving the PG. The issue is more complicated than just changing a single variable.
Well, you add to the ADT a stack panel with two buttons in it then add a stack panel that is 100% width and height. They both have the same zIndex, so the order of insertion does matter. As the 2nd stack panel takes all space, it captures all mouse interactions and so your buttons can’t be clicked.
It seems ok to me, I think you would get the same behaviour with HTML elements in the same configuration.
You can either:
set a zIndex > 0 to the first stack panel you add to the ADT. Setting the zIndex of the buttons does not work in your example because they are held by the stack panel which still has a 0 zIndex
not set your 2nd stack panel to 100% width/height (simply comments the lines 18 and 19 and it will work too)
In Babylon GUI, the width/height are relative to the parent container. When you set 100% height for your main stack panel, it means 100% of the parent height, which is the ADT in your case. The scroll viewer is also set to 100%, which is 100% of the stack panel, and so in the end its height = height of the ADT.
That’s what you would get with HTML too:
<html>
<body>
<div style="height:50px; background-color:red">First stack panel with two buttons</div>
<div style="height:100%; background-color:yellow">Second stack panel with the scroll viewer</div>
</body>
</html>
You will get a vertical scroll bar with this code.
It explains why it does work with a grid control. The grid itself is 100% height so takes all the ADT space, but inside this control you create two cells, and the grid control is able to adjust the height of each cell to make the total height equals to ADT height.
:
)