Question About Unity Layout

Unity Engine
, , ,
1

I have some general questions about Unity layout. Some of my issues may stem from some initial poor choices when I knew even less than I know now. Still, there are things that constantly baffle me.

I started my project with a Canvas that stretches my entire display. Width is 1079.6, set automatically and uneditable. Under that, I added another Canvas. This may have been a poor choice, not sure. (I wanted to have different scenes/displays and I believe I read this was the way to accomplish that.) The Rect Transform was Stretch/Stretch. However, the value for Right is 1079. I would have thought it should be 0 since it stretches the entire display.

Under that, I added a Panel, again Stretch/Stretch. What was really confusing was it needed the value for Right to be -1079 or the width was 0. Again, I thought it should be 0. If I change it to +1079 it adds 1079 to the right. It appears it is pivoting from the right side of the display which sort of explains why it wants -1079 as I guess it is starting it’s measurement from a double wide display. Somehow compensating for the 1079 right value for the parent canvas. Or something.

So I switched out the Canvas and used a Panel instead. Again, I used Stretch/Stretch and this time the value for Right was 0 as I would have expected.

So, what is happening when I put a Canvas as a Child to another Canvas? Why are the RectTransform values so different from a Panel?

2

The way this works in Unity might be a bit confusing at start. But after a while, it works great.

When you have it set to stretch/stretch ánd you want to have it full width, the right & left should be set to zero. Because the value for ‘right’ is substracted from the left (see it as the right margin or the distance from the right side)

Hope that helps?

3

That’s what I expected but not what I saw. But when I put a canvas under another canvas, both Stretch/Stretch, the child canvas had a Right value of 1079. Then when I added a panel under the Canvas, it needed a Right of -1079 to stretch to the right. That’s what was so confusing.

When I removed the child Canvas and used a Panel it behaved as expected with Right=0.

4

Just a slight FYI, you’ve tagged this as UI Toolkit, though in your post you seem to be talking about the old ‘Unity UI’ system. Just worth noting for future to make it easier for the right people to help you.

5

thanks. I changed it. Didn’t see that when I originally posted. Changed to tag UI, Unity-UI, UI-Unity-UI. I guess one of those should work.

1 Like
6

NOTE: UI is always a pain in the @#$@%@ to get right. It’s not uncommon to realize you went down a dead end and have to redo a lot of stuff, especially when just starting out.

Here’s some UI setup notes, including how to make it work with many different sized / shaped screens:

Here are the official docs on how to make your UI handle various resolutions and aspect ratios cleanly:

Here are some notes on UI Anchoring, Scaling, CanvasScaler, etc:

Usually you need to choose a suitable ScaleMode and MatchMode in the Canvas Scaler and stick with it 100%. Generally if you change those settings you will often need to redo your UI entirely.

I also use this CanvasScalerOrientationDriver utility to make sharing UI for Landscape / Portrait easier. Read what it does carefully.

7

I’ve worked with Canvas component a lot, but never needed multiple canvasses… Why do you (think you) need this? I alwasy work with Image components underneath a single canvas.

8

Multiple sub-canvases can be useful for breaking up the parts of the UI that need to get rebuilt when a different part of the UI changes or moves, but that doesn’t seem to be the situation OP is trying to tackle. I just wanted to mention that there is indeed a valid reason to have sub-canvases. Though, I don’t think that’s exactly the issue at hand here.

9

thanka so much for taking the time to reply. it looks like there is a wealth of information here, exactly what i was looking for.

10

sounds like i should not be using sub-canvasses. i think i may have read an article when i was first starting out a few months ago that said that was how to accomplish switching between different displays. I will switch to using something else Seems like I could use a panel or an image or even an empty gameobject.

Learning the unity layout system has been a real bear. just when i think i know what’s going on i see something new that is not working how i expected. some of it may have been caused by this sub-canvas weirdness as i have several of them.

11

Focus only on the size of a RectTransform and its position and Anchor point.

NEVER use the scale, eg, leave it at (1,1,1) always.

Use AspectRatioFitter cleverly to set aside space as you’re working.

Keep it simple, simple, simple, or it very quickly gets hairy. Challenge yourself to get any particular layout effect using very explicit parenting and anchoring. The simpler you keep it, the less you have to maintain / adjust in the future.

12

thanks. I’ll follow your advice. I haven’t seen a need to change the scale. I’m not familiar with AspectRatioFilter so will check that out. I’ve had success with LayoutElement.

I’ve seen inexplicable things where a button doesn’t display in a scene view (but does in the game) even though it’s settings appear identical to one next to it. Then I replace it and the new one displays.

This sub canvas thing is really odd as it affects the layout of its children. getting rid of it may make things a bit more normal.