koobas.hobune.stream
Scaling Canvas and Layout Group
I have a canvas set to scale according to a reference resolution.
However it seems my layout groups don't actually scale.
These two screenshots illustrate the issue.
Intended Look at "Normal" Resolution: http://i.imgur.com/wQZB6wh.png
Look at a Smaller Resolution: http://i.imgur.com/KGZ1eFI.jpg
In the smaller resolution I photo I just increase the size of the game window afterwards to make it a bit clearer.
I'm not really sure what I should be doing--if this is even a layout group issue.
Each of the rows in this UI are spawned at run time. They're a prefab with a layout element that sets a minimum height of about ~58 units. These are children of a vertical layout group with a content size fitter. This layout group component scales to its container but the elements inside don't seem to be scaling properly.
I feel slightly confused by the description of your setup, so forgive me if I am misunderstanding.
From my point of view, you wish to achieve a result but you are using the tools that are meant to do the exact opposite.
1) Setting a minimum height in the LayoutElement of a row will prevent that row from shrinking vertically. Therefore, it will not get smaller when the window is getting smaller.
2) ContentSizeFitter is meant to force the parent to obey the wishes of the children. Buttons say "We want to be that big", and parent says "ok then, I will expand until you all fit". What you want is the exact opposite: the children have to obey the parent and shrink/expand to the size that the parent gives them.
Therefore, if you want the children to obey the parent, you should not be using ContentSizeFitters or LayoutElements.
BUT: even if your button shrinks when the parent orders it, the font size of the text will not. Size 16 is size 16, and if the text is given less space then it will start to wrap and overflow/disappear. Likewise, the padding of the elements will remain constant: the row is 500 pixels-wide with 10 pixels of padding, or it is 100 pixels wide with 10 pixels of padding.
So what you want may be, instead, to use the Canvas Scaler component. Design your UI for a specific resolution with the scale of the canvas set to 1. During the game, detect the resolution and change the canvas scale accordingly. Then you can use all the ContentFitters and LayoutElement that you want, they will help making sure that the window looks good at the ideal resolution.
I may fiddle with this sort of solution.
The content size fitter & layout element is the way to make a dynamic scroll view. The content size fitter doesn't constrain horizontal width and adjusts itself to the size of the children. The $$anonymous$$imum height of the button rows then are effectively their actual height.
Otherwise you understood it pretty much right!
Oh I get it. Then we should expect that the content of the rows does not fit horizontally. However, it should still fit vertically and obviously it does not happen. What LayoutGroup/LayoutElement/Fitter did you put on your scrollrect?
A vertical layout group on the content of the scroll rect. Content size fitter unconstrained horizontally but constrained to preferred size vertically. Each element that gets added to the scroll view has a layout element with $$anonymous$$imum height set to about ~58 or thereabouts.
It's effectively a "grid" but the grid layout sets an exact pixel size on each element so I swapped to using the vertical layout group as it shoudl expand horizontally and resize the children accordingly.
So something must drive the width of the content of the ScrollRect. I imagine that the ScrollRect does it? What is on the ScrollRect itself? (not on its content)
