What do you get with Print?

Instant access to your digital eBook copy whilst your Print order is Shipped

Paperback book shipped to your preferred address

Download this book in EPUB and PDF formats

Access this title in our online reader with advanced features

DRM FREE - Read whenever, wherever and however you want

NGUI for Unity

Chapter 1. Getting Started with NGUI

In this first chapter, we will talk about the overall workflow of NGUI before we import the plugin and create our first UI. Then we will look into the UI's structure, important parameters, and general behavior.

What is NGUI?

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.

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 Scaling Style parameter was set to FixedSize with Manual Height set to this value.
Note
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:

Navigate to Edit | Project Settings | Player.
In the Inspector option, unfold the Resolution and Presentation group.
Unfold the Supported Aspect Ratios group.
Check only the 16:9 box.

Now that we have seen the UI Root's different parameters, let's discuss the camera.

Camera

Select the Camera GameObject in the Hierarchy view. It has the UICamera.cs script attached to it. This script must be attached to any camera that needs to interact with your UI.

Its purpose is to send different messages concerning events that happen to UI elements such as colliders attached to a button. Some of the more frequently used events are OnClick() and OnHover().

You may have multiple cameras if you consider it necessary; for example, you can have an orthographic camera for 2D in-game UI elements and a separate perspective camera for a 3D pause menu.

For the purpose of this book, we will stick with only one camera.

Parameters

The UICamera.cs script has a large number of parameters as shown in the following screenshot:

These parameters are as follows:

Event Type: Select which event type this camera will send.
- World: This is used for interacting with 3D-world GameObjects
- UI: This is used for interacting with the 2D UI
Event Mask: Select which layer will be used to receive events.
- In our case, we will set it to GUI2D since our UI will reside on it.
Debug: This consists of the enable or disable debug mode options. This option is useful when you have unwanted behavior.
- Enabled: When Debug is enabled, the currently hovered object will be displayed on the top left-hand corner of the screen
Allow Multi Touch: This consists of the enable or disable touch mode options that allow simultaneous touches. This is mandatory if you want to use pinch-to-zoom or other such gestures on mobile platforms.
Sticky Press: This consists of the enable or disable sticky press mode options.
- Enabled: If you drag your finger out of a pressed button, it will remain in the pressed state and no other element will receive upcoming events from that finger until it is released
- Disabled: If you drag your finger out of a pressed button, it will no longer be pressed and other elements will receive upcoming events from that finger
Sticky Tooltip: It consists of the enable or disable sticky tool tip mode options.
- Enabled: The tool tip disappears when the mouse moves out of the widget
- Disabled: The tool tip disappears as soon as the mouse moves
Tooltip Delay: It consists of the required stationary time in seconds before the widget's tool tip is displayed.
Raycast Range: A raycast is an invisible ray that is cast from one point towards a specific direction and is stopped if it encounters another object. The camera uses raycasts from the mouse or touch position towards the camera's forward direction to detect collisions and handle events. You may set the range of this raycast if you need to limit the interaction to a certain range. The default -1 value implies that the raycast's range will be as far as the camera can see.
Event Sources: These Booleans let you specify what events this camera listens to.
- Mouse: This is used for mouse movements, left/right/middle click, and scroll wheel.
- Touch: This is used for touch-enabled devices.
- Keyboard: This is used for keyboard input. It uses the OnKey() event.
- Controller: This is used for joystick-based devices. It uses the OnKey() event.
Thresholds: These values come in handy when you want to specify the minimum values before a particular event is triggered. This may vary from one game/app to another.
- Mouse Drag: When a mouse button is pressed (the OnPress() event is triggered), this value determines how far in pixels the mouse must move before it is considered a drag, and sends OnDrag() events to the dragged object
- Mouse Click: When a mouse button is pressed (the OnPress() event is triggered), this value determines how far in pixels the mouse can travel before the button release has no effect (the OnClick() event is not triggered)
- Touch Drag: This is the same as Mouse Drag, but for touch-based devices
- Touch Tap: This is the same as Mouse Click, but for touch-based devices
Axes and Keys: These parameters let you assign Unity input axes and keys to NGUI's input system.
- Horizontal: This is the input axis for horizontal movement (the left and right key events)
- Vertical: This is the input axis for vertical movement (the up and down key events)
- Scroll: This is the input axis for scrolling
- Submit 1: This is the primary keycode for validation
- Submit 2: This is the secondary keycode for validation
- Cancel 1: This is the primary keycode for cancel.
- Cancel 2: This is the secondary keycode for cancel.
Note
You can edit Unity inputs at any time by navigating to Edit | Project Settings | Input.

Ok, we have seen what the main parameters of the UICamera component are. We have to see what the camera's anchor child is.

Anchor

An anchor is used to attach GameObjects to the same area inside the camera view. For example, you can attach them to borders or corners of the screen, or another widget.

Select the Anchor GameObject in the Hierarchy view. It has the UIAnchor component attached to it. It is configured to center content on the screen based on the parent camera.

Before we create widgets, we must understand how these UIAnchor parameters modify their placement behavior.

Parameters

The UIAnchor component has seven parameters as seen in the following screenshot:

These parameters are as follows:

Ui Camera: This is the reference camera from which our anchor bounds are determined. By default, it is set to the camera used by the UI.
Container: If you drag and drop a GameObject in this field, it will overwrite the camera anchoring. This can be useful if you need to anchor your panels or widgets based on a container GameObject, instead of a camera. Your content will be placed using the assigned container's position.
Side: Do you want your child GameObjects to be centered or attached to one side or corner of your referenced camera/container? You can choose your anchor point here.
Half Pixel Offset: You should leave this Boolean checked. It makes widget positions pixel perfect on Windows machines.
Run Only Once: This Boolean can be checked if your screen resolution never changes, or if you want it to remove it on start. As a result, your anchor will be executed at the start and then removed and no longer be updated.
Relative Offset: This Vector2 class takes two values between -1 and 1 to add a relative offset to the final position. With a value of 0.12 for X and 0.32 for Y, it will result in an offset of 12% horizontally and 32% vertically—it will look the same on any resolution because the offset depends on the screen size.
Pixel Offset: This parameter is like Relative Offset, but it is absolute instead of relative. You can enter the offset in pixels—it will look different depending on the resolution because the offset will stay identical in pixels on all screen sizes.

We have explained the different UIAnchor parameters, but what is this last child, Panel? Let's look into that, and we'll be ready to create our first widget!

Panel

Select the Panel GameObject in the Hierarchy view. It has a UIPanel component attached.

A panel's purpose is to hold widgets and render geometry in only one draw call. You may create multiple panels to split your UI, but it will add a draw call per new panel.

Parameters

The UIPanel.cs script has eight parameters as shown in the following screenshot:

These parameters are as follows:

Alpha: You may change the transparency level of the entire panel. All child widgets will be affected by this alpha value, but nested panels won't.
Depth: This is used to define which panel is rendered over another. A panel with a depth value of 1 will appear in front of a panel with a depth value of 0. You can use either the Back or Forward button to change the Depth or simply enter a number in the field. Panels can also have negative depth.
Normals: This Boolean must be checked if you need it to react to lighting using shaders. It will calculate normals for your UI geometry.
Cull: This Boolean gives you the ability to disable the child widgets rendering while the panel is being dragged, which improves performance.
Static: If all your panel's widgets are static and won't ever move, check this—it will improve performance!
Show All: This will show all draw calls in the Inspector view.
Panel Tool: This is a panel managing tool. You can visualize and select each panel in the scene. You can open it with Alt + Shift + P or navigate to NGUI | Open | Panel Tool. Will this panel show in the Panel Tool parameter? This should be unchecked for dynamically created temporary panels through code, like a warning message or ammo pick-up notification.
Clipping: This will let us hide widgets outside a given rectangle. When turned on, you will be able to choose the clipping rectangle's dimensions with the Center and Size parameters. Anything outside this rectangle will be hidden.
- None: No clipping—the entire panel will be displayed.
- Hard Clip: Clipping enabled—rough clipping of widgets outside the box.
- Soft Alpha: Clipping enabled—soft clipping with fade-out / fade-in borders.
We've now taken a look at the parameters of the UIPanel component, which will be used to hold our widgets.

What you will learn

Download and import NGUI

Construct a basic user interface: buttons, sprites, text inputs, lists, sliders, and more

Enhance your UI using clipping, draggable panels, content alignment, animations, and localization

Use C# with NGUI to save options, implement volume modification, launch animations, and change variables

Build a scrollable viewport with a draganddrop system

Create tooltips and notifications

Add your sprites and fonts to customize your main menu

Move elements through code and handle collisions to create a game

What do you get with Print?

Instant access to your digital eBook copy whilst your Print order is Shipped

Paperback book shipped to your preferred address

Download this book in EPUB and PDF formats

Access this title in our online reader with advanced features

DRM FREE - Read whenever, wherever and however you want

Frequently bought together

Unity 4.x Game Development by Example: Beginner's Guide

$48.99

$38.99

$54.99

Total $ 142.97

Filter reviews by

All

Amazon verified reviews

Amazon Customer Feb 12, 2014

Full Disclosure - I was one of the technical editors for this book.NGUI for Unity provides a step-by-step guide to help you get started using NGUI in Unity. The author explains how each component works and demonstrates proper use of the most commonly used NGUI widgets. The author also walks you through the creation of a 2D game, complete with menu screen and drag-drop elements, as you progress through the book.

Amazon Verified review

Frida Feb 20, 2014

Im new to NGUI, complete beginner ,The book take you step by step , shows you how to create UI , explain how to use the component with good examples , Widgets , how to create new atlas.Ngui is a great UI system , you can buy it on the Asset store and it's decently wort it.The book is easy to read, very clear , very organized , easy to follow .Now, i understand how to use NGUIi recommend this book book .excellent book !!!Frida

John Grden Feb 09, 2014

After interviewing with a few unity3D shops,I was hit with the same question every single time: "do you have NGUI experience?" - to which I replied "no, but I'm sure I can pick it up". They didn't share my optimism :) Enter in NGUI for Unity!What I love about e-books these days is their size and how concise they can be, and this book delivers not only on both counts, but sets you in motion with a very real world example project that covers a great portion of the capabilities of NGUI. Everything from the wizards to widgets to creating atlas' and fonts is covered. The book isn't exhaustive in its explanations but IS thorough in pointing out the features and properties of all the components it covers - which makes it easy to follow along with in the examples.The author gets right to the meat of the matter immediately walking you step by step through the sample project. It helps to have Unity3D experience and you'll have to understand the basics of how unity works with prefabs and code as this book is targeting unity devs looking for a solid UI framework. It IS written in a very practical manner so even a complete beginner could get something out of it.Now, in thinking back about my response to potential clients about just "picking NGUI up", I see how deep the framework really is. It's much more than just a set of UI components, and this book really brought me up to speed in a very short amount if time - excellent work!

Xavier Valade Mar 23, 2014

NGUI is an amazing plugin that makes creating UI and 2D games really easy. This book is THE book to have if you want to discover and master NGUI.It’s perfect for everyone, no matter what their Unity skills are. Beginners can follow clear step by step explanations while professionals can take it to the next level with the advanced features, the complete overview of the different parameters and the many tips.

Joselyn O'Connor Feb 09, 2014

Finished reading NGUI for Unity a few days ago. Since, I've been skimming through it using it as a reference. I absolutely appreciated that the author was brief and concise in his examples, it made them a most valuable resource while working. It was very easy to read and has given me a much better understanding of NGUI. The resources that are provided with the book are also very well organised, and make for an excellent starting point while tinkering. I definitely recommend this book!

NGUI for Unity: The NGUI plugin for Unity makes user interfaces so much more efficient and attractive. Learn all about it in this step-by-step tutorial that includes lots of practical exercises, including creating a fun 2D game.

What do you get with Print?

Contact Details

Shipping Address

Billing Address

Note

Note

What you will learn

Product Details

What do you get with Print?

Contact Details

Shipping Address

Billing Address

Product Details

Packt Subscriptions

Frequently bought together

Table of Contents

Recommendations for you

Customer reviews

Filter reviews by

People who bought this also bought

About the author

FAQs