“This is the 7th day of my participation in the Gwen Challenge in November. Check out the details: The Last Gwen Challenge in 2021.”

NGUI introduction:

NGUI history:

The earliest version of NGUI was released in December 2011. NGUI can be said to be the most powerful third-party UI system in Unity (before Unity4.6). The engine’s OWN UI system is very poor, and most projects are using NGUI for UI interface development

NGUI plugin directory structure:

  • Editor: Editor extension

  • Examples: Example project

  • Resources: resource files

  • Scripts: script components

Unity is a component-based engine, every function is an independent component, a component is actually a class, an object, a script; all UI in NGUI is also embodied in the form of components.

NGUI basic usage:

Display text using NGUI:

Simple thinking:

Before we wanted to display a simple 3D model, we could create a Cube object, so we want to display text, what do we need to create, and we’re using NGUI? Words related to words are Text and Lable.

Operation steps:

  • NGUI — Craete — Label creates a “Game object” for displaying text. Switch to the Game panel and we can see the word “New Label”.

NGUI hierarchy:

UI Root(all NGUI elements are word objects)

  • Camera (Camera for rendering NGUI)

  • Label (Lable game object)

  • More UI (More game objects)

NGUI operation details:

1. The “purple” rectangle in Scence view is the scope of our NGUI operation, which is actually the scope of UIRoot (mouse over UIRoot, this rectangle will be highlighted).

2. We can click the “2D” button above the Scene view to switch to the “2D” editing mode

3. In 2D mode, UIRoot will be selected with the mouse, and the purple rectangle will be highlighted. Now put the mouse over the rectangle and click the right mouse button, the OPERATION menu of NGUI will appear, which we will use a lot in the future

4. The icon of the camera will affect our operation. You can adjust this icon to a smaller size by clicking Gizmos and 3Dlcons on the upper right corner of the Scene panel

Prefab Toolbar (Function Menu)

Open the Prefab Toolbar

NGUI — Open –Prefab Toolabar

Prefab Toolbar introduction:

Prefab Toolbar :(NGUI) Prefab Toolbar, which is a ready-made Prefab file of UI elements provided by NGUI, can be selected with a single mouse click and dragged to the Scene panel

PS: If you need the NGUI plugin, you can click to download it and remember to like it