Not sure how to support different screen resolutions with GUI

Questions
1

I am making a non trivial full screen gui with Babylon GUI and I am having a graphic designer make images to use as the background on all the components. The one concern I have though is that I don’t understand how babylon gui behaves on different resolutions or if it is even possible to make it responsive, etc.

Right now I am defining the dimensions of all my outer components in pixels and putting them in a full screen GUI layer.

I guess I need to know:

If I define them as percentages, how should I define children controls?
Can I set a minimum value for width and height?
Can I set a maximum value?
How does the fixed resolution feature work? The docs didn’t help me understand what that feature does, exactly.

Any examples would be great too. THanks!

EDIT: So I did find the section on adaptive scaling in the docs (for some reason it didn’t make sense before but now it does) and that might do what I need, but in playing with it I am not sure how it handles text. Some text seems to scale while other text doesn’t. Is this because the controls the text are in are not always sized in pixels?

Thanks.

2

try using canvis.height and canvis.width as your units. They return pixels i believe, then for example you could just use 50% of the width, so 0.5*canvis.width

1 Like
3

Hi guys.

perhaps some info here.

I was working with a diagram that needed to survive canvas resize, and sebavan helped me out… with some resize observers.

I think… you can simulate different resolutions… by drag-resizing your browser window.

For testing, I opened my f12 dev-tools and dragged its horizontal divider… up/down. And I dragged the divider between playground editor and canvas… as another test. This allows for full-power in-playground resolution-testing, I think.

Also, you might wish to research idealWidth and idealHeight. I’m not sure what they are used-for, but they sure have interesting names. :slight_smile:

3 Likes
4

Other option is to only deal with percentage and never use pixels

1 Like
5

What is the best way to scale text in buttons and text blocks appropriately, whether I am doing the adaptive scaling or using percentages? From what I have seen and done so far, text never scales with everything else.

1 Like
6

Font can also be expressed using percentage :slight_smile:

1 Like
7

I did not know that. Thanks!

1 Like
8

In my case I just needed to resize two aligned images if canvas width < 480px. I did this by setting the .width and .height properties in a custom function using .onBeforeDrawObservable.add()

I added a bool state check to only resize if the canvas width has changed - not profiled this but may help.

Only one observable is required if resizing multiple controls but note ref dependencies. It’s probably a better idea to resize a parent container (or rectangle) where the children scale accordingly.

const myImageOnlyButton = new GUI.Button.CreateImageOnlyButton("myImageOnlyButton", "https://path.to.image.png");

myImageOnlyButton.onBeforeDrawObservable.add(() => resizeControl(myImageOnlyButton, 256, 80));

let previousCanvasWidth = canvasRef.width;

function resizeControl(control, desiredWidth, desiredHeight) {
  const newCanvasWidth = canvasRef.width;
  const hasWidthChanged = previousCanvasWidth !== newCanvasWidth;
  if (hasWidthChanged && canvasRef.width < 480) {
    control.widthInPixels = desiredWidth / 1.5;
    control.heightInPixels = desiredHeight / 1.5;
  } else if (hasWidthChanged) {
    control.widthInPixels = desiredWidth;
    control.heightInPixels = desiredHeight;
  }
  previousCanvasWidth = newCanvasWidth; // Need to reset
}
1 Like