Search Unity

Unity UI What are panels?

Discussion in 'UGUI & TextMesh Pro' started by Denisowator, Feb 22, 2019.

  1. Denisowator

    Denisowator

    Joined:
    Apr 22, 2014
    Posts:
    918
    I can't find anything on the manual, or via Google.

    Here's what I wanna know:
    • What are panels used for?
    • What do they allow me to do, that I wouldn't be able to do without them?
    • Are there any situations where it would be bad practice to not use a panel?
    I've seen panels used in assets I downloaded, and in tutorials, but don't have a clue why they're used.
     
  2. Ryiah

    Ryiah

    Joined:
    Oct 11, 2012
    Posts:
    21,205
    To quote Adam Buckner in his tutorial, it "just gives you a slight edge up on getting started". My impression is that it was meant to be a starting point for grouping other UI elements. If Unity wasn't based off of combining components to make the end result it might have made more sense, but because of how the engine works it's basically just a shortcut.

     
    Last edited: Feb 23, 2019
  3. eses

    eses

    Joined:
    Feb 26, 2013
    Posts:
    2,637
    @Denisowator

    What @Ryiah just said.

    Both are just collections of same components, with slightly different starting values, for different purposes.

    Image defines something that is more usable as an image. It's aspect ratio is kept, and it's placed somewhere. You'll have to assign the sprite yourself, as image is seldom the default panel sprite. Also, image you want to show, is usually opaque, not semi-transparent.

    Panel defines an area that will by default stretch to fit it's parent RectTransform dimensions, more likely usable as container of other RectTransforms (could be called panels if these have same setup) that can define other types of UI elements, depending on what UI components you add to these RTs (Image, Button, ScrollRect...).

    Panel:
    - RectTransform set to stretch mode, anchored to it's parent RectTransform corners
    - CanvasRenderer component
    - Image component
    -- Source image (Sprite) set to default panel sprite called "Background"
    -- Color alpha set to semi-transparent
    -- Image Type set to sliced (can stretch nicely with 9-slice setup)

    Image
    - RectTransform set to "flower" mode anchored to it's parent RectTransform center.
    - CanvasRenderer component
    - Image component
    -- Source image (Sprite) set to empty
    -- Color alpha set to opaque
    -- (No Image Type, as no sprite is defined)