Making two Images Content-Fit as the same size for composite background & frame?

[piwakawaka]

Using what we’ve covered in UI design and implementation, I’m trying to accomplish this lecture’s challenge using some UI graphics that consist of separate background and frame images. This means that to create the background panel for the Dialogue box I need two images. Due to Unity restrictions I can’t put them both on the same GameObject (only one Image component per GameObject allowed), and if I put background on the Panel object and then create a child object to house the Frame Image component, it doesn’t work properly with the Vertical Layout Group (as it gets included as a child to lay out). I tried moving the other GameObjects into a new GameObject beneath the Panel, called Layout with a Vertical Layout Group moved off the Panel, thereby keeping the Frame Image object out of the Layout Group, but then it doesn’t seem to inherit the correct height/width from the parent object even though that gets its dimensions from its child Layout object and its children.

Difficult to describe really. Anyone have any hints on how to do this?

EDIT: it’s as if I need a “Composite” Layout Group rather than a Horizontal or Vertical one - i.e. stack a bunch of children on top of each other, rather than alongside.

[Brian_Trotter]

Take a close look at the Inventory UI prefab, I think it might lead you where you want to go.
Pay close attention to the image on the root, and the image on the viewport…

[piwakawaka]

Hi Brian, I’m not 100% sure which prefab you mean - do you mean the Inventory subtree in the Inventory Canvas prefab? I can see a UIMask image on the Viewport, and a Stencil shader, and a Mask component - am I on the right track?

All my (numerous) attempts so far to combine two Image components (on two separate GameObjects) have run into problems, but I did get close enough to make me think it might be possible…

[piwakawaka]

I’ve managed to get something working, which I’ll describe here in case it helps anyone else (or my future self). The secret is to put the second image on the only child of the Content Size Fitter, and use a Vertical Layout Group (VLG) on that same child to propagate the final children back to the top-level object (Dialogue).

Dialogue [Image:Background, sliced] [Content Size Fitter: Horiz Preferred, Vert Preferred] [Vertical Layout Group: Control Child Width, Height]
  - Frame [Image:Framing, sliced] [VLG: Control Child Width, Height; Child Force Expand Width]
    - Current Speaker [TextMeshPro Text]
    - AI Text [TextMeshPro Text]
    - Button Row [Horizontal Layout Group] ...
    - Quit Button [Image] [Button] ...

As a note, the preferred height of a sliced image is the sum of the top and bottom border heights, which means that it cannot easily shrink to less than that height. This tripped me up because my image had a combined vertical border space of 900 pixels which was fooling me into thinking my layout wasn’t shrinking “to fit”. Once I used a sliced image with smaller top & bottom margins, the panel layout started to work properly.

[Brian_Trotter]

Well done! Unity’s UI can be difficult to navigate.