NGUI: Label

 

Labels can be used to print text. They can be multi-line, converting “\n” into new line characters, and they can contain embedded colors in [RrGgBb] hex format (allowing for a straight-up copy-paste from photoshop).

Parameters

  • Transform is important, just like for UISprite. The label is just an object in your game, and in order to position it you have to adjust the transform. Transform’s position and scale values should be in pixels in order for the “Make Pixel-Perfect” button to work properly. You have to either set up your UI camera to be of appropriate orthographic size or adjust the root object’s scale accordingly. More information can be found here.
  • UIFont lets you choose the font that will be used by this label. You can drag & drop your font prefab onto the field, or click the button and select one of the recently used fonts.
  • Right below that is the Text field containing the text you will see printed, minus the special characters. “\n” will automatically result in a new line, and you can embed colors in [RrGgBb] format. For example, red color is [FF0000], green is [00FF00], etc. You can also use [-] to revert to a previous color. For example, the following text: “Hello [FF0000]World[-]!” will result in: Hello World!
  • Line Width lets you specify the maximum length of the line, after which words will either be word-wrapped (if multi-line), or simply discarded (if single-line).
  • Multi-line checkbox lets you specify whether the label will create additional lines below.
  • Password checkbox will convert all characters into stars when printed to the screen.
  • Encoding is a toggle that lets you turn off the processing of special symbols described above. It can be useful for input fields, for example.
  • Depth lets you change the draw order of labels just like any other widget. Higher number can be used to place the label on top of other widgets.
  • Color Tint lets you apply a color or change the alpha of the printed text.
  • Make Pixel-Perfect adjusts the scale of the widget to match the size of the font and rounds the position to use whole numbers.
  • Pivot lets you set the pivot point of the widget (where 0, 0, 0 will be).
  • Preview lets you see the texture used to draw the label.

Tips

  • If you see the text flickering, or see that it was covered by some other widget, make its depth higher.
  • You can get the dimensions of the text about to be printed by asking the font like so: font.CalculatePrintedSize(text, true). You will need to multiply the returned value by the label’s scale to get the expected relative-space values.
  • If you take advantage of “\n” and encoded colors, you only need one label to create a window like this:

 Posted by at 3:21 PM on December 8, 2011