Search Unity

  1. Welcome to the Unity Forums! Please take the time to read our Code of Conduct to familiarize yourself with the forum rules and how to post constructively.
  2. Dismiss Notice

Can't figure out a very basic layout... (container scales to fit children, text pinned to top-left)

Discussion in 'UGUI & TextMesh Pro' started by DallonF, Aug 25, 2014.

  1. DallonF

    DallonF

    Joined:
    Nov 12, 2009
    Posts:
    620
    Hi,

    I'm messing around and trying to pin some dynamically changing text to the top-left of the screen. I'd like to also include a background image behind the text that scales to fit.

    Something like this....

    upload_2014-8-24_19-22-45.png

    I figure out how to make the text element stretch to fit its content with the Content Size Fitter (set to PreferredSize on both axes). Next I added an Image and made the Text a child of that. Finally I added a Content Size Fitter to the Image, thinking I was rather clever... and the image disappeared entirely. D'oh.

    The next thing I think I'm going to run into after I get that text resizing: the origin point of my text seems to be the bottom left, even though I have my Paragraph vertical alignment set to top:

    upload_2014-8-24_19-27-17.png

    What I would expect to see here is "Line 1" contained in the white box and "Line 2" below it.

    I must be missing something and of course documentation is sparse for the beta, could somebody offer some advice?

    Edit: After poking around in the settings, it looks like I can get what I want by using a Horizontal/Vertical Layout... but that would only allow the text to scale in one direction... is that a limitation of the GUI system? It's definitely not something I'm accustomed to coming from a web development background.
     
    Last edited: Aug 25, 2014
  2. MrDude

    MrDude

    Joined:
    Sep 21, 2006
    Posts:
    2,569
    Firstly, if all you want is text on top of an image, the simplest way to do that is to create a new button from the menu. Don't add a button component, create a new UI button. Once you have the button, remove the Button component. Done. You now have text on an image ;)

    Next, looking at your screenshots, I am not seeing your anchors so I am assuming they are in the center of the screen, right? Move your text's anchors into the button so they form the bounds of your text. I do this for all my GUI elements since I want my content to scale with the screen, not reposition itself relative to the screen but yeah, all my text elements anchors are inside my button and my text work just fine.... Only problem is that each time I decide to reposition the button I need to reposition the text's anchors again :(

    I've not noticed the Content Size Fitter thing you mentioned, though... thanks for the tip. Will see what that does. As it is, my text changes font size to fit inside the area I defined. Either it shows up smaller or it simply says 'I don't fit in this area so I won't show anything at all". My text region doesn't auto scale itself so the text will fit... 0.o Interesting...
     
    Last edited: Aug 25, 2014
  3. runevision

    runevision

    Joined:
    Nov 28, 2007
    Posts:
    1,870
    I assume your text is a child to the image.

    Set both the anchor and pivot of the image to the upper left corner. Setting the anchor to the upper left corner ensures that the image sticks to the upper left corner of the parent rectangle. Setting its pivot to upper left corner ensures that if the image changes size, the point inside the image that keep its position is the upper left corner of it.

    Now add a HorizontalLayoutGroup to the image, and then add a ContentSizeFitter to the Image too. This will resize the Image to fit with the child Text content. If you want padding, you can specify it in the padding property of the HorizontalLayoutGroup.
     
    Ash-Blue and Tim-C like this.
  4. DallonF

    DallonF

    Joined:
    Nov 12, 2009
    Posts:
    620
    OK, I think I'm about 90% there. Now I can't figure out how to move the pivot. I assume it's that blue circle in the middle of the Rect tool? It looks grayed out to me, and any attempts to drag it around seem to have no effect (or succeed in dragging something else around):

    upload_2014-8-25_8-53-7.png

    Editing the Pivot in the Rect Transform in the Inspector is similarly non-responsive (it causes the text to wobble around a bit but nothing moves permanently)

    *reads some docs before posting*

    OH!!! I got it!!! *fist pump* Had to set the... thingy in the top of the UI from "Center" mode to "Pivot" mode. The UI is now working exactly the way I want it to! Thanks!
     
    runevision likes this.
  5. Ash-Blue

    Ash-Blue

    Joined:
    Aug 18, 2013
    Posts:
    102
    Please make sure to include this in the official Unity docs. It helped me a TON to understand why my ContentSizeFitter was vertically centering everything.
     
  6. runevision

    runevision

    Joined:
    Nov 28, 2007
    Posts:
    1,870
    Ok, I've added some notes about this on the page about Content Size Fitter. It should be included in one of the coming betas.
     
    Ash-Blue likes this.