NGUI: UISprite


Sprite is the second most trivial UI widget (first one being UITexture). Its sole purpose is to draw a part of the texture atlas.


  • Transform is actually important. Every widget is just an object in your game, and you position it by adjusting 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.
  • UIAtlas lets you specify the texture atlas used by this sprite. You can either drag & drop a prefab with UIAtlas on it into the field, or click the button and select a recently used atlas.
  • Sprite lets you choose the sprite to draw. After choosing the sprite you will likely want to click the “Make Pixel-Perfect” button, which will automatically adjust the transform’s scale for you.
  • Depth lets you bring widgets forward or back in the order that they get drawn in. NGUI does not rely on Unity to Z-sort widgets within the same atlas as that would be quite slow in comparison, and won’t work right when the UI windows get rotated. Ignoring the Z also lets the UI to be drawn in a correct order when looking at it from the back, making Deep Space style UIs easily possible.
  • Color Tint lets you apply a uniform color to the widget, provided the shader supports it.
  • Make Pixel-Perfect lets you quickly adjust the transform’s position to use whole pixels and changes the scale to match the sprite’s dimensions.
  • Pivot lets you choose where the widget’s (0, 0, 0) will be.
  • Preview lets you examine the sprite’s texture.


  • If you ever see two overlapping widgets flickering, it means you have them set to use the same depth. You can fix that by bringing one of them forward or back.
  • You shouldn’t nest widgets — that breaks the pixel-perfect adjustment functionality. Ensure that your widgets are parented to a non-widget object instead. If you use the NGUI’s Add widget menu, you will notice that it creates new child objects each time. This is why.
  • Use the Make Pixel-Perfect button after moving the widget manually.
 Posted by at 1:37 PM on December 8, 2011