- Home /
Scaling Panel and GridLayoutGroup via Script
Hey guys :)
I am working on a script that changes the GridLayoutGroup of my inventory system. I already have all the references I need, the problem are the values that need to be calculated. I use a measurement value of Screen.height / 16. I use this value to align every other UI Element in the canvas. I will refer to it with: float slotSize = Screen.height / 16f;
I placed a UI-Panel in the scene. This one is called slotPanel. This slotPanel has inventoryslots in it. They are positioned via a GridLayoutGroup.
My goal: The slotPanel is one slotSize from the left screen side away. Also one slotSize from the bottom screen side away. Furthermore, the slotPanel is wide enough to store 5 columns of slotSize and high enough to store 4 rows of slotSize.
So it basically should look like this:
[ ] [ ] [ ] [ ] [ ]
[ ] [ ] [ ] [ ] [ ]
[ ] [ ] [ ] [ ] [ ]
[ ] [ ] [ ] [ ] [ ]
I partly managed to get the position of RectTransform working. This works in every resolution.
The problem: The values for the GridLayoutGroup are in some weird units I guess? If I enter fullscreenmode everything is fine. When I don't enter fullscreenmode and only have a smaller view of the scene, The cells are way to big, and the spaces inbetween (spacing) is also wrong. I want them to have just enough spacing so they touch each other but not overlap. Also the size of one slot should be one slotSize.
How can I calculate the values for the GridLayoutGroup? And how can I adjust the width of the slotPanel so it matches my 5 by 4 slots?
Additional info: The slotPanel is currently anchored to the left of the canvas. My Gameviews ratio is 16:9. I have in the canvas a reference resolution of 1920x1080 and it is set to Scale With Screen Size
I'm facing the same problem. When i test the app in a device with a smaller resolution than the reference resolution, the grid layout just overlap the elements and there is no space between them. Please, help us!