Flex-box scaling

Unity Engine
,
1

I am just trying to wrap my head around the Ui Builder and have created a mobile calculator as a test project. While I find it convenient to create nice looking UI’s leveraging functionality like hover etc. I cannot really fully understand the flex-box piece and how to adopt both width and height.

7903420--1007011--nr1.jpg

This is the GUI on an iPhone 11 in simulator.

What I want to accomplish is to adapt, with the sale layout, for different resolutions where all graphics is adjusting both in height and width (if needed). However I do get results like the following:

7903420--1007014--nr2.jpg

Here (iPhone 6) the buttons do not look like they are scaling and is pressed together as well as falling outside of the screen. The title is not adjusted either. What I want to do is to shrink the all graphics accordingly so I keep the same layout.

I have been searching for tutorials but not being able to find what I am looking for or maybe I do not understand what I should look for.

I would really appreciate some guidance an examples to solve this.

2

flexbox is made to fill one axis/direction and as such it will not preserve the aspect ratio by default.

I think what you may be looking for is the Scale Mode Parameter in the Panel Setting (look for it in your Ui Document)

You will probably want the panel to shrink if there is not ennough room

7904662--1007344--upload_2022-2-17_10-59-36.png

2 Likes
3

Thank you will test that.

4

Hm I am not able to fix this using the Scale Mode Parameter. Maybe I am doing something wrong.

This is Simulator setup with iPhone 6 size shrink from iPhone 11.

7909294--1008430--Screenshot 2022-02-19 at 08.53.18.jpg

5

bump

6

Try to increase the Reference Resolution to the one you used in the builder’s canvas

7914097--1009495--upload_2022-2-21_14-55-57.png
7914097--1009495--upload_2022-2-21_14-55-57.png817×362 30.8 KB

7

Tried that but no success.

I have very little experience of this structure but really want to start using it. I have been looking for a Tutorial where the UI adjust on all directions to fit into like iPhone11, iPhone6 and iPad Pro or something close to that. Can’t find it.

Maybe someone that understand this could create a tutorial or something?

I really need advise and help to get this working.

I do not know if this is helpful but the uxml and use code is attached.

7915126–1009702–test.txt (823 Bytes)
7915126–1009705–TestToolkit.txt (5.64 KB)

8

You can try express sizes in % instead of px, then let flex layout do its magic

1 Like
9

Yes, height in % and if you need then in code you set button.style.width = button.resolvedStyle.height.

1 Like
10

Thanks that fixed the problem and now I have to work on adjusting the forms but that should be no problem I guess.

11

I have to say that when the scaling is set up correctly and it scales both ways easier and better than old system. Good job.

1 Like