Subtitles/captions in NGUI?

[brisck1]

So I'm relatively new to NGUI, and am desperately trying to get a system set up with NGUI to display subtitles (after failing with Unity's regular UI) and have not had much luck.

So far my thinking was to set up a Label and then put the subtitle text into it dynamically via a script when needed. The problem I'm having is getting the label to behave the way I want it, for example:

• It needs to be anchored to the bottom of the screen regardless of screens size
• It needs to adapt to the width of the screen
• It needs a sprite as a background panel which also adapts to the size of the label (for readability)
• and it also needs to automatically adapt it's height to fit the amount of text inserted into it.

That last point is where I'm having the most issues. I thought setting the label overflow to Resize Height would give me the desired effect, but for some reason it keeps reverting back to Shrink content to fit text into the box instead of expanding the box size upward.

Perhaps I'm not taking the right approach here? Could you give me some advice on the best way to tackle this?

Thanks.

[brisck1]

On further experimentation it seems the UIStretch script does pretty much what I want!

[vallcrist]

It seems like when you anchor a label to something it automatically reverts back to Shrink content, which is pretty confusing, indeed.

Using the UIStretch may not be the best approach as it has been deprecated.

I'm also intereseted in the right way to do this btw.

[ArenMook]

1. Anchor a UIWidget (ALT+SHIFT+W) to the bottom.
2. Add a child label to it. Anchor its left to the panel's left, and right to the panel's right.
3. Set the label's overflow to "Resize Height".
4. Add a sprite to be the label's background (you can make it a sibling of the UIWidget, or a child of the label, your choice).
5. Give the sprite a lower depth value so it's drawn behind the label.
6. Set the sprite to be anchored to the label fully (left to left, right to right, etc), with some padding so that it envelops the label and resizes with it.
7. If you want the label to grow upwards as its lines increase instead of growing both up and down, change its pivot to Bottom.

[brisck1]

Hi Aren,

Thanks for the reply! So it turns out UI Stretch was not the answer anyway (it was still not anchoring properly) so I came back here and saw your suggestion and thought i'd give it a go. However, I'm having issues when it comes to setting the label's overflow to "Resize Height". Whenever an anchor is set on a Label the overflow automatically switches back to "ShrinkContent" even if I set it to Height after setting an anchor, it will still switch to "ShrinkContent".

I'm not sure if i'm doing something wrong or if it is a bug - perhaps you could post a working example I could look at?

Thanks

[ArenMook]

Hmm... you're right. That's actually incorrect on my end. Change UILabel.OnAnchor to the following:

1.         protected override void OnAnchor ()
2.         {
3.                 if (mOverflow == Overflow.ResizeFreely)
4.                 {
5.                         mOverflow = Overflow.ShrinkContent;
6.                 }
7.                 else if (mOverflow == Overflow.ResizeHeight)
8.                 {
9.                         if (topAnchor.target != null || bottomAnchor.target != null)
10.                         {
11.                                 mOverflow = Overflow.ShrinkContent;
12.                         }
13.                 }
14.                 base.OnAnchor();
15.         }

[brisck1]

Thanks for the suggestion, initially it didn't work how I needed it to, so I took a look at the code and changed it to:

1.     protected override void OnAnchor ()
2.     {
3.         if (mOverflow == Overflow.ResizeFreely)
4.         {
5.             mOverflow = Overflow.ShrinkContent;
6.         }
7.         else if (mOverflow == Overflow.ResizeHeight)
8.         {
9.             if (topAnchor.target != null)
10.             {
11.                 mOverflow = Overflow.ShrinkContent;
12.             }
13.         }
14.         base.OnAnchor();
15.     }

Which allowed me to set a bottom anchor and not have one for the top, although ideally it should work both ways (in the original code resize height only works if there are no anchors on the top and bottom, whereas it should be top or bottom - but I have no idea how to do that in code)


The more I think about it, the more it seems odd that anchored labels must be always be forced to shrink content - there are many situations I can think of where being able to override the overflow would be useful, especially if you just want to anchor something with dynamic content to a certain side of the screen and not have to worry about screen resolution, etc.

[ArenMook]

Perhaps this is the better option:

1.         protected override void OnAnchor ()
2.         {
3.                 if (mOverflow == Overflow.ResizeFreely)
4.                 {
5.                         if (isFullyAnchored)
6.                                 mOverflow = Overflow.ShrinkContent;
7.                 }
8.                 else if (mOverflow == Overflow.ResizeHeight)
9.                 {
10.                         if (topAnchor.target != null && bottomAnchor.target != null)
11.                                 mOverflow = Overflow.ShrinkContent;
12.                 }
13.                 base.OnAnchor();
14.         }