NGUI: Documentation


Video Tutorials

  1. Getting Started
  2. Creating a Modular UI
  3. Setting up a Scroll View
  4. Upgrading from 2.7.0

Old Tutorials (2.7.0 and earlier)

  1. Basic Tutorial (v.2.5.0+)
  2. SD & HD atlas switching (advanced)
  3. Packed Font (advanced)
  4. Catering to variable screen size

Other Videos

Script Documentation

Found here:

Step-by-step Tutorials (NGUI 2.7.0 and earlier)

For the sake of these tutorials, I will assume that you already have the NGUI package installed in your project (or are in a brand-new one). I will also assume that you don’t just want to learn how to go from point A to point B, but also why you’re going there. I’ll try my best to explain the steps carefully, paying attention to everything that you will see along the way.

Let’s start by creating a brand new scene. The most basic UI is a 2D one, so we’ll start with that and work our way up.

  1. Step 1: Creating Your UI
  2. Step 2: Sprite
  3. Step 3: 9-Sliced Sprite
  4. Step 4: Tiled Sprite
  5. Step 5: Label
  6. Step 6: Button
  7. Step 7: Slider
  8. Step 8: Checkbox
  9. Step 9: Input
  10. Step 10: 3D
  11. Step 11: Popup List


Provided Examples (2.7.0 and earlier)

  1. UIAnchor (writeup)
  2. Interaction (writeup)
  3. Main Menu
  4. Controller Input
  5. Lights and Refraction (writeup)
  6. Draggable Window (writeup)
  7. Scroll View (clipped panel) (writeup)
  8. Scroll View (secondary camera) (writeup)
  9. Fancy Quest Log
  10. Localization
  11. Drag & Drop
  12. Chat Window (writeup)
  13. Character Inventory (writeup)

List of Core Components (2.7.0 and earlier)

  • Camera — Should be attached to each camera, contains the event system
  • Atlas — Texture atlas defining sprites
  • Font — Font atlas
  • Sprite — Widget that draws a sprite from the texture atlas
  • Label — Widget that draws a text label using the specified font
  • Panel — Manages a group of widgets and is responsible for creating the actual draw calls
  • Anchor — Can be used to anchor widgets to the sides of the screen, stretch them to fill the screen, and make pixel-perfect UIs.
  • Looking for more? Check the script documentation.

NGUI comes with a powerful event system that can be used with or without the rest of the kit, allowing your objects to receive most of the commonly used events such as OnHover, OnClick, OnDrag, etc without having components derive from any specific base class.

Other Components (2.7.0 and earlier)

  • UIPlayAnimation — Event receiver that lets you start a remote animation.
  • UIPlayTween — Event receiver that lets you start one or more remote tween scripts.
  • UIToggle — Script that can be used to create checkboxes, radio buttons, toggle buttons, and combo boxes.
  • UIToggledComponent — Very short and to-the-point scripts that let your toggles directly control the enabled state of remote scripts and game objects.
  • UIDragObject — This script makes it easy to drag something around — whether it’s a window or a 3D object.
  • UIPanelTool — Alt+Shift+P brings up this dockable window that should help you when working with a scene that has many panels in it.
  • Looking for more? Check the script documentation.
 Posted by at 10:35 PM on December 8, 2011

  3 Responses to “NGUI: Documentation”

  1. Hi
    I’d like to translate “Provided Examples” to Japanese.
    And can I open the translated document on github?
    thank you.