Question Is there a better way?

I have some UI images, which I line up using horizontal layout and vertical layout

But now how do I get a panel with the perfect rect of all these images combined to serve as a background

of course I could do it manually and try to line it up perfectly, but is there a better way?

Further, how can I then make the panel have some margin?
Here is an image to illustrate what Im trying to do:


The issue is that doing this manually is very micro-fiddling and its hard to get it to line up perfectly

Is there some key component im missing?

 

There's a few parts here... I do that red "inset a little bit" on almost 100% of my games. It's super easy.

Instead of this:



Do this:



And for that inset:

- use the preset fullscreen size, but hold down SHIFT and ALT to also set pivot and position and anchors all at once.

- now key in the "insets"... like this:



Then just position and anchor entirely within your little "inset."

You can put insets in your insets, or mix insets with AspectRatioFitters with "Fit Inside"

Here's more random reading:

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

https://forum.unity.com/threads/inc...size-between-two-people.1130146/#post-7261747

https://forum.unity.com/threads/game-ui-button-size-problem.1142650/#post-7337383

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.

https://gist.github.com/kurtdekker/8802b1b6c708637398f8c9167641efd3

 

https://docs.unity3d.com/Packages/com.unity.ugui@1.0/manual/script-ContentSizeFitter.html

This is probably what you are looking for but it was very finicky in my experience, especially with horizontal/vertical layouts.(I used it for fitting/stretching a background image behind an item image+ mod list vertically laid out, similar to path of exile/diablo item mouse over info UI thingy)

I’ll upload a screenshot from Unity when I get on the pc, in the meantime here is a screenshot from path of exile(the background adjusts the size automatically when you add/remove text/images to the horizontal layout)

 

i tried the content size fitter but it only seems to work for text, I wanted to make it work for images, but cant

 

It works with images and/or text:



If there is another layout group as a child of the parent layout group, you'll get this error in the content size fitter, but ignore it I guess

 

thanks I could reproduce the way you made it

my issue is that i have many empty object containers and

what is not working for me is putting this setup on the highest parent to encapsulate all children within children

hmm annoying

I have it like

Master parent
>second parent (empty object with vertical layout)
>>Row 1(empty object with horizontal layout)
>>>img1
>>>img2
>>>img3
>>Row 1 (empty object with horizontal layout)
>>>img1
>>>img2
>>>img3

 

Try adding a content size fitter(horizontal and vertical fit at preferred size) to both rows and the second parent. If second parent has an image, it'll encapsulate everything(I haven't tested it)

To debug, I'd just add a UI image with square sprite to every layout group(with different colors), that way you'll be able to see the exact size of layout groups and what doesn't fit, what you'll need to fix etc.

 

the size fitter only works if it has a vertical or horizontal layout on the same object?

if I wanted to fit it to something that is not alligned is there any way to make it work?

 

I am not sure, I don’t know the inner workings of content size fitter nor have I needed to fit unaligned content before

It probably has something to do with “preferred size” though