Author Topic: UILabel  (Read 165432 times)

ArenMook

  • Administrator
  • Hero Member
  • *****
  • Thank You
  • -Given: 337
  • -Receive: 1171
  • Posts: 22,128
  • Toronto, Canada
    • View Profile
UILabel
« on: November 20, 2013, 09:46:54 PM »
Overview

UILabel is a Widget that can be used to display text.



All labels require a Font to work with. This font can be Dynamic (directly referencing a Unity Font), or it can be a Bitmap font -- a font embedded within an Atlas. Dynamic fonts are more robust as they don't require you to pre-generate your glyphs before hand, but Bitmap fonts can be drawn within the same draw call as the rest of your atlas, and can be decorated nicely in an image editing tool such as Photoshop.

You can change the alignment of the labels simply by switching the Pivot point. Top-left, Left and Bottom-left pivot point will result in a left-aligned text. Top, Center, or Bottom alignment will cause the text to be centered, and Top-right, Right or Bottom-right pivot will make your text right-aligned.

With the Dynamic font chosen you can set the Font Size as well as style directly on your label. You can also set the material that will be used to draw it, if you wish.

The big box is -- as you probably guessed -- where you enter text. It's a multi-line text box by default, unless limited by the Max Lines property below it.

Overflow handling lets you determine what happens when the label's text exceeds the allowed space.


  • Shrink Content means the content will be automatically shrunk to best fit the area. It works in conjunction with the Keep Crisp setting if you are using a Dynamic font, making the font size shrink down, not just scaling the content. This results in crisp labels regardless of whether they were shrunk or not.
  • Clamp Content simply means that if the text doesn't fit, it will be cut off.
  • Resize Freely option will make the label's dimensions controlled by the text entered in the field. You won't be able to resize the dimensions yourself.
  • The last option, Resize Height will add grow the height as necessary, but will keep the width constant.
The Spacing field lets you adjust the distance between characters. Both positive and negative values are allowed. This value is in pixels.

Max Lines, as mentioned earlier, lets you control how many lines you want there to be at maximum. You can leave it at zero if you want it to be unlimited.

You can turn off Encoding if you don't want color tags and emoticons to be processed. Input fields do this by default.

If you want, you can give your labels a Gradient by specifying the bottom and top colors.

You can give your text a shadow or an outline Effect, but note that doing so will double the geometry in case of shadow, and multiply it by a factor of 5 in case of outline -- so be mindful of this feature. The Distance parameter controls how far the shadow or outline is from the base text, in pixels.

To change the label's text at run-time, you can do the following:
  1. UILabel lbl = GetComponent<UILabel>();
  2. lbl.text = "Hello world!";

Pro-Tip #1

You can add bold, italic, underline, and other effects to your label by using bbcode syntax like so:

[b]bold[/b]
[i]italic[/i]
[u]underline[/u]
[s]strikethrough[/s]

You can also embed clickable links in your labels like so:

[url=Some Message or Link]Click Me[/url]

To retrieve what you clicked on, attach a box collider to your label (ALT+SHIFT+C) and a script that has a function like this in it:
  1. void OnClick ()
  2. {
  3.     UILabel lbl = GetComponent<UILabel>();
  4.     string url = lbl.GetUrlAtPosition(UICamera.lastWorldPosition);
  5.     Debug.Log("Clicked on: " + url);
  6. }

Pro-Tip #2

You can give your labels a beveled look by specifying a dark foreground color and a bright Shadow effect.



Pro-Tip #3

You can make the text ignore the label's color tint by using the [c]text here[/c] tag, and change the alpha by using [Aa] syntax, like "[7f]".

Class Documentation

http://tasharen.com/ngui/docs/class_u_i_label.html

If you have a question regarding this component or would like me to clarify something, just post a reply here.
« Last Edit: August 26, 2014, 01:59:25 AM by ArenMook »

dkozlovtsev

  • Newbie
  • *
  • Thank You
  • -Given: 0
  • -Receive: 0
  • Posts: 35
    • View Profile
Re: UILabel
« Reply #1 on: November 28, 2013, 08:59:41 AM »
Emoticons for UILabels with dynamic fonts, is it possible?

ArenMook

  • Administrator
  • Hero Member
  • *****
  • Thank You
  • -Given: 337
  • -Receive: 1171
  • Posts: 22,128
  • Toronto, Canada
    • View Profile
Re: UILabel
« Reply #2 on: November 28, 2013, 03:52:45 PM »
Not in 3.0.6. Likely 3.0.8.

Messu

  • Newbie
  • *
  • Thank You
  • -Given: 0
  • -Receive: 0
  • Posts: 5
    • View Profile
Re: UILabel
« Reply #3 on: December 04, 2013, 05:02:18 AM »
I would like to know if Dynamic Fonts increase dramatically the number of draw calls or if many labels using the same Dynamic Font will be drawn on the same draw call.

ArenMook

  • Administrator
  • Hero Member
  • *****
  • Thank You
  • -Given: 337
  • -Receive: 1171
  • Posts: 22,128
  • Toronto, Canada
    • View Profile
Re: UILabel
« Reply #4 on: December 04, 2013, 05:31:52 PM »
If you make dynamic font using labels follow each other in their depth order, they will all be packed into one draw call.

memorygarden

  • Newbie
  • *
  • Thank You
  • -Given: 0
  • -Receive: 0
  • Posts: 3
    • View Profile
Re: UILabel
« Reply #5 on: December 07, 2013, 02:25:07 AM »
HI , label.printedSize is not correct? i think the label.printedSize is not the size on sense?

i have some labels in a list , and a background, how could i know the background's localSize?

thank you!

ArenMook

  • Administrator
  • Hero Member
  • *****
  • Thank You
  • -Given: 337
  • -Receive: 1171
  • Posts: 22,128
  • Toronto, Canada
    • View Profile
Re: UILabel
« Reply #6 on: December 07, 2013, 03:14:12 AM »
UILabel.printedSize returns the size of the label in pixels. This value is not the final size on the screen, but is rather in NGUI's virtual pixels. If the UIRoot is set to PixelPerfect, then this value will match the size in screen pixels. If the UIRoot is FixedSize, then you need to scale the printedSize by UIRoot.pixelSizeAdjustment.

memorygarden

  • Newbie
  • *
  • Thank You
  • -Given: 0
  • -Receive: 0
  • Posts: 3
    • View Profile
Re: UILabel
« Reply #7 on: December 07, 2013, 04:38:05 AM »
first,thank you for your reply.

but now the result is also looks like incorrect;

i dit as follows:


UILabel ul = goo.GetComponent<UILabel>();
         
Debug.Log(UIRoot.GetPixelSizeAdjustment(goo));
Debug.Log (ul.printedSize);
Debug.Log(new Vector2(ul.printedSize.x/UIRoot.GetPixelSizeAdjustment(goo),
            ul.printedSize.y/UIRoot.GetPixelSizeAdjustment(goo)));


Console out:

2.416107
(490.0, 20.0)
(202.8, 8.3)



i think the label's printSize in sense is bigger than (202.8, 8.3)

did i made some mistakes?


thank you

ArenMook

  • Administrator
  • Hero Member
  • *****
  • Thank You
  • -Given: 337
  • -Receive: 1171
  • Posts: 22,128
  • Toronto, Canada
    • View Profile
Re: UILabel
« Reply #8 on: December 07, 2013, 04:09:52 PM »
You need to multiply, not divide.

memorygarden

  • Newbie
  • *
  • Thank You
  • -Given: 0
  • -Receive: 0
  • Posts: 3
    • View Profile
Re: UILabel
« Reply #9 on: December 08, 2013, 02:31:45 AM »
Multiply? The localSize I saw in the sense was about 240. after multiply the value will be 400+. It's not correct . oh my god . Please help me . Thank you .

kitgui

  • Newbie
  • *
  • Thank You
  • -Given: 0
  • -Receive: 0
  • Posts: 26
    • View Profile
Re: UILabel
« Reply #10 on: December 16, 2013, 05:25:17 PM »
Is there a current guide on how to do emoticons?

EDIT : Nevermind, I found the Chat example and saw how you did it :)
« Last Edit: December 17, 2013, 05:55:48 PM by kitgui »

zipper

  • Newbie
  • *
  • Thank You
  • -Given: 0
  • -Receive: 0
  • Posts: 14
    • View Profile
Re: UILabel
« Reply #11 on: December 18, 2013, 12:53:20 AM »
It would be wonderful to distribute UILabel text along a 2d spline.

Maybe have a 2d spline component and attach the text to it, or the other way around.

kLy

  • Newbie
  • *
  • Thank You
  • -Given: 0
  • -Receive: 0
  • Posts: 5
    • View Profile
Re: UILabel
« Reply #12 on: December 19, 2013, 04:28:36 PM »
Is there a way to set the font size independently of font resolution?

Right now I'm using a 3D GUI and often moving text elements right up to the camera. In such a case the fonts look horribly pixelated if the font size is low. The only way to fix this is to set the font size up, but setting the font size up also increases the actual size of the text.

The only workaround I've found now is to crank up the font size, then reduce the dimensions while using "ShinkContent", but this is an ugly hack and results in unpredictable text sizes in multiline labels.

dkozlovtsev

  • Newbie
  • *
  • Thank You
  • -Given: 0
  • -Receive: 0
  • Posts: 35
    • View Profile
Re: UILabel
« Reply #13 on: December 20, 2013, 04:03:14 AM »
@kLy

Last time i checked it was still possible to use scale to conrol widget size it really helps with Dynamic Font labels, but certainly it is not the prittiest of solutions

ArenMook

  • Administrator
  • Hero Member
  • *****
  • Thank You
  • -Given: 337
  • -Receive: 1171
  • Posts: 22,128
  • Toronto, Canada
    • View Profile
Re: UILabel
« Reply #14 on: December 20, 2013, 12:35:51 PM »
Nothing wrong with scaling it by adjusting the transform.