koobas.hobune.stream
Scaling panel by different screen sizes
Let's say I want a UI panel on a canvas to always take up the left 1/3 of my screen. I want the panel height to always match the screen height, and the panel width to always match 1/3 of the screen width.
If I wanted to have the panel take up the middle 1/3 of the screen, I can do this:
Make canvas scale by height, such that the canvas always has the height of the screen.
Attach panel as child to canvas
Set panel x scale to 0.33
Is there a way to anchor the panel to the left side of the screen using Rect Transform? I can't seem to find a combination of anchor/pivot/position that behaves as I expect it to.
Scaling the UI elements without properly settings the anchors can produce unexpected behaviour. The solution will be to keep the scale to 1, set the size of the panel for your default resolution and then just set the anchors in each corner.
But then the width of the panel varies by screen resolution, right? I’m hoping to have the panel always be 1/3 of the screen, which I seem to be only have to set via scale, but then it will slide to take up more or less of the screen if I set anchors and change the resolution
Basically the anchors are defined in fractions (or percentages) of the parent rectangle width and height. If the object you want to be 1/3 of the screen is child of an object that is scaled with the screen size, when the resolution changes your object should update as well.
Ah, so that’s where I’m running into my problem - I can only scale my parent in 3 ways that I know of: by height, by width, or some ratio of the two. Can you scale a parent to be percentages of each screen size?
See this example $$anonymous$$y canvas is set to scale with the screen resolution, base resolution is 1080 x 1920. I made that image 1/3 of the screen resolution, which means 360 x 640. As you can see, I can freely resize the game window and the blue space in each size is proportional. This works if you place the image anywhere on the screen, as long the anchors are positioned correctly.
This is a really good example. I think this comment should be converted into an answer.
