8 min read

(For more resources related to this topic, see here.)

The Next-Gen User Interface kit is a plugin for Unity 3D. It has the great advantage of being easy to use, very powerful, and optimized compared to Unity’s built-in GUI system, UnityGUI. Since it is written in C#, it is easily understandable and you may tweak it or add your own features, if necessary.

The NGUI Standard License costs $95. With this, you will have useful example scenes included. I recommend this license to start comfortably—a free evaluation version is available, but it is limited, outdated, and not recommended.

The NGUI Professional License, priced at $200, gives you access to NGUI’s GIT repository to access the latest beta features and releases in advance.

A $2000 Site License is available for an unlimited number of developers within the same studio.

Let’s have an overview of the main features of this plugin and see how they work.

UnityGUI versus NGUI

With Unity’s GUI, you must create the entire UI in code by adding lines that display labels, textures, or any other UI element on the screen. These lines have to be written inside a special function, OnGUI(), that is called for every frame. This is no longer necessary; with NGUI, UI elements are simple GameObjects!

You can create widgets—this is what NGUI calls labels, sprites, input fields, and so on—move them, rotate them, and change their dimensions using handles or the Inspector. Copying, pasting, creating prefabs, and every other useful feature of Unity’s workflow is also available.

These widgets are viewed by a camera and rendered on a layer that you can specify. Most of the parameters are accessible through Unity’s Inspector, and you can see what your UI looks like directly in the Game window, without having to hit the Play button.

Atlases

Sprites and fonts are all contained in a large texture called atlas. With only a few clicks, you can easily create and edit your atlases. If you don’t have any images to create your own UI assets, simple default atlases come with the plugin.

That system means that for a complex UI window composed of different textures and fonts, the same material and texture will be used when rendering. This results in only one draw call for the entire window. This, along with other optimizations, makes NGUI the perfect tool to work on mobile platforms.

Events

NGUI also comes with an easy-to-use event framework that is written in C#. The plugin comes with a large number of additional components that you can attach to GameObjects. These components can perform advanced tasks depending on which events are triggered: hover, click, input, and so on. Therefore, you may enhance your UI experience while keeping it simple to configure. Code less, get more!

Localization

NGUI comes with its own localization system, enabling you to easily set up and change your UI’s language with the push of a button. All your strings are located in the .txt files: one file per language.

Shaders

Lighting, normal mapping, and refraction shaders are supported in NGUI, which can give you beautiful results. Clipping is also a shader-controlled feature with NGUI, used for showing or hiding specific areas of your UI.

We’ve now covered what NGUI’s main features are, and how it can be useful to us as a plugin, and now it’s time to import it inside Unity.

Importing NGUI

After buying the product from the Asset Store or getting the evaluation version, you have to download it. Perform the following steps to do so:

  1. Create a new Unity project.
  2. Navigate to Window | Asset Store. Select your downloads library.
  3. Click on the Download button next to NGUI: Next-Gen UI.
  4. When the download completes, click on the NGUI icon / product name in the library to access the product page.
  5. Click on the Import button and wait for a pop-up window to appear.
  6. Check the checkbox for NGUI v.3.0.2.unity package and click on Import.
  7. In the Project view, navigate to Assets | NGUI and double-click on NGUI v.3.0.2.
  8. A new imported pop-up window will appear. Click on Import again.
  9. Click any button on the toolbar to refresh it.The NGUI tray will appear!

The NGUI tray will look like the following screenshot:

You have now successfully imported NGUI to your project. Let’s create your first 2D UI.

Creating your UI

We will now create our first 2D user interface with NGUI’s UI Wizard. This wizard will add all the elements needed for NGUI to work.

Before we continue, please save your scene as Menu.unity.

UI Wizard

Create your UI by opening the UI Wizard by navigating to NGUI | Open | UIWizard from the toolbar. Let’s now take a look at the UI Wizard window and its parameters.

Window

You should now have the following pop-up window with two parameters:

Parameters

The two parameters are as follows:

  • Layer: This is the layer on which your UI will be displayed
  • Camera: This will decide if the UI will have a camera, and its drop-down options are as follows:
    • None: No camera will be created
    • Simple 2D:Uses a camera with orthographic projection
    • Advanced 3D:Uses a camera with perspective projection

Separate UI Layer

I recommend that you separate your UI from other usual layers. We should do it as shown in the following steps:

  1. Click on the drop-down menu next to the Layer parameter.
  2. Select Add Layer.
  3. Create a new layer and name it GUI2D.
  4. Go back to the UI Wizard window and select this new GUI2D layer for your UI.

You can now click on the Create Your UI button. Your first 2D UI has been created!

Your UI structure

The wizard has created four new GameObjects on the scene for us:

  • UI Root (2D)
  • Camera
  • Anchor
  • Panel

Let’s now review each in detail.

UI Root (2D)

The UIRoot component scales widgets down to keep them at a manageable size. It is also responsible for the Scaling Style—it will either scale UI elements to remain pixel perfect or to occupy the same percentage of the screen, depending on the parameters you specify.

Select the UI Root (2D) GameObject in the Hierarchy. It has the UIRoot.cs script attached to it. This script adjusts the scale of the GameObject it’s attached to in order to let you specify widget coordinates in pixels, instead of Unity units as shown in the following screenshot:

Parameters

The UIRoot component has four parameters:

  • Scaling Style: The following are the available scaling styles:
    • PixelPerfect:This will ensure that your UI will always try to remain at the same size in pixels, no matter what resolution. In this scaling mode, a 300 x 200 window will be huge on a 320 x 240 screen and tiny on a 1920 x 1080 screen. That also means that if you have a smaller resolution than your UI, it will be cropped.
    • FixedSize:This will ensure that your UI will be proportionally resized depending on the screen’s height. The result is that your UI will not be pixel perfect but will scale to fit the current screen size.
    • FixedSizeOnMobiles:This will ensure fixed size on mobiles and pixel perfect everywhere else.
  • Manual Height: With the FixedSize scaling style, the scale will be based on this height. If your screen’s height goes over or under this value, it will be resized to be displayed identically while maintaining the aspect ratio(width/height proportional relationship).
  • Minimum Height: With the PixelPerfect scaling style, this parameter defines the minimum height for the screen. If your screen height goes below this value, your UI will resize. It will be as if the Scaling Style parameter was set to FixedSize with Manual Height set to this value.
  • Maximum Height: With the PixelPerfect scaling style, this parameter defines the maximum height for the screen. If your screen height goes over this value,your UI will resize. It will be as if the ScalingStyle parameter was set to FixedSize with Manual Height set to this value.

Please set the Scaling Style parameter to FixedSize with a Manual Height value of 1080. This will allow us to have the same UI on any screen size up to 1920 x 1080.

Even though the UI will look the same on different resolutions, the aspect ratio is still a problem since the rescale is based on the screen’s height only. If you want to cover both 4:3 and 16:9 screens, your UI should not be too large—try to keep it square.Otherwise, your UI might be cropped on certain screen resolutions.

On the other hand, if you want a 16:9 UI, I recommend you force this aspect ratio only. Let’s do it now for this project by performing the following steps:

  1. Navigate to Edit| Project Settings | Player.
  2. In the Inspectoroption, unfold the Resolution and Presentationgroup.
  3. Unfold the Supported Aspect Ratios group.
  4. Check only the 16:9 box.

Summary

In this article, we discussed NGUI’s basic workflow—it works with GameObjects, uses atlases to combine multiple textures in one large texture, has an event system, can use shaders, and has a localization system.

After importing the NGUI plugin, we created our first 2D UI with the UI Wizard, reviewed its parameters, and created our own GUI 2D layer for our UI to reside on.

Resources for Article:

Further resources on this subject:

Packt

LEAVE A REPLY

Please enter your comment!
Please enter your name here