
Learning NGUI for Unity
Description
Alles über E-Books | Antworten auf Fragen rund um E-Books, Kopierschutz und Dateiformate finden Sie in unserem Info- & Hilfebereich.
Book DescriptionProject teams rarely forget to work on the technology, but they often forget to work with the people, and no matter how amazing your new technology is, it's useless unless people use it efficiently.What you will learn
Build customizable 2D and 3D ingame user interfaces
Use NGUI to save options, implement volume modification, launch animations, and change variables
Enhance your UI using draggable panels, animations, content alignment, and localization
Implement your own sprites and fonts to customize your user interface
Move elements through code and handle collisions to create a game
Create an effective and userfriendly crossplatform main menu
Deal with different screen sizes and aspect ratios
Who this book is for
All prices
More details
Other editions
Additional editions

Person
Charles Pearson has a Bachelor's degree in Game Design and Level Design from ISART Digital, a video-game school located in Paris, France. This book is both an update and an upgrade of NGUI for Unity, the first book he wrote concerning this plugin. With 4 years of experience as a game designer, level designer, and Unity developer at Cyanide Studio, Playsoft, and Airbus, Charles has worked on the PC versions of Blood Bowl, Dungeonbowl, and Confrontation. He has also worked on mobile games, such as Space Run 3D, Oggy, and Psycho Gnomes, and is currently working on PlayStation 4 and Xbox One projects as a freelance Unity 3D developer and game designer.
Content
Getting Started with NGUI
Creating NGUI Widgets
Enhancing your UI
C# with NGUI
Atlas and Font Customization
Creating a 3D UI
Pause Menu
Going Mobile
Screen Sizes and Aspect Ratios
UI Design & Ergonomics
Displaying a sprite
Now that we have displayed text, let's display a sprite.
Creating the sprite widget
Make sure you have nothing selected, and navigate to NGUI | Create | Sprite, as follows:
Note
The newly created widget will be nested as a child of the current selection. To avoid having our new sprite as a child of our Label, make sure you have nothing selected-UI Root will be the default parent.
Tip
You can also use the shortcut Alt + Shift + S to create a new sprite.
Now, take a look at the following Hierarchy view; you'll see a new GameObject called Sprite:
Great, we have a sprite in the scene. Let's see its Inspector parameters.
UISprite parameters
Let's define some terms as we review UISprite's parameters:
- Atlas: An atlas is an image file containing our sprites and bitmap fonts. Assembling them all together in one large texture enables NGUI to render an entire UI in only one single draw call! That field determines which atlas is going to be used to display this sprite.
- Sprite Type: Select one of these five different behaviors:
Simple: This displays a simple image.Sliced: This is used for nine-slice sprites, letting you resize sprites without stretching the corners. We'll detail and try this shortly.Tiled: This is used for tiled sprites for patterns that can be repeated indefinitely.Filled: This is used for progress bars. This hides the sprite partially, depending on a fill amount value and direction.Advanced: This allows you to choose a different sprite type for each border and center.
- Flip: This flips the sprite in one of the following directions you define:
Nothing,Horizontally,VerticallyorBoth
- Color Tint: This is the sprite's color tint.
Right now, nothing is displayed because we haven't chosen which atlas and sprite we want to use.
Configuring the sprite
We have reviewed the parameters of UISprite. Let's configure it to display something.
Selecting an atlas
We must select an atlas. We'll use an example atlas that comes with NGUI.
Select our Sprite GameObject, and click on the Atlas (1) button showed in the previous screenshot. The following window appears:
Select Fantasy Atlas (2). If the atlas is not listed, click on the Show All (3) button of the atlas selection window, and it will appear along with other example atlases.
Selecting a sprite
Now that we have selected an atlas, we can select which sprite to render, as shown in the following screenshot:
Perform the following steps:
- Click on the Sprite (1) button to open the sprite selection window. Within this new window, select the Dark sprite by double-clicking on it.
- Change the sprite Type (2) to Sliced.
- Click on Color Tint (3) and set:
{R: 255, G: 180, B: 0, A: 255}.
Your Game view should now look like this:
Ok. We now have a square sprite. But we have a problem: it's rendered over our text label. That's because the sprite's Depth value is higher than the label's.
Note
The new sprite's Depth value is higher than the label's because NGUI automatically sets a new widget's Depth to the highest to make sure it is displayed over previous ones.
Set the following widget parameters for our new sprite in order to have this result, as follows:
- Depth: The label's depth is at
0. Set this one to-1so that it displays behind. - Size: Set it to 400 x 80 to create a box around our Main Menu label.
Great, our first sprite is correctly configured! Before we move on, we can try out the different sprite types.
Sprite types
With NGUI, we have four basic types of sprites:
- Sliced
- Simple
- Tiled
- Filled
Now that we have a sprite onscreen, let's try them and see their parameters.
Sliced
Let's start with the Sliced type of sprites, since our sprite is already configured like that.
Select our UI Root | Sprite GameObject in the Hierarchy view. Look at the Preview window at the bottom of Inspector:
You can see that the Dark sprite's size is only 17 x 17 pixels. We have stretched it up to 400 x 80, and it still looks good-no pixelation or stretched corners!
That's because it is a nine-slice sprite: the four dotted lines in the preceding screenshot represent the slicing lines. Corners always remain at the same size, while other parts of the sprite stretch to cover the demanded area. Sliced sprites are thus very useful to create windows, borders, title bars, and more.
Simple
A Simple sprite is used to display an icon or a specific image that does not require slicing. In order to avoid pixelation, you shouldn't resize it too much over its original file size.
If you switch our sprite's Type from Sliced to Simple, slicing parameters are ignored, and our 17 x 17 sprite is stretched and looks terrible, as shown in the following screenshot:
Ok. We can now move on to tiled sprites.
Tiled
A Tiled sprite is a pattern that can be repeated indefinitely. In order to illustrate it effectively, select our Sprite GameObject and follow these steps:
- Change its Atlas to the Wooden Atlas.
- Set the Type parameter of
UISpriteto Tiled. - Change its Sprite to the Stripes 1 sprite.
Within the Game view, you might notice that our background is now diagonal orange stripes. The pattern is repeated and it looks good compared to a simple stretched sprite.
Here's a comparison:
In the preceding image, the same sprite is used. On the left-hand side, the sprite Type is set to Simple: the sprite is simply stretched and pixelated. On the right, the sprite Type is set to Tiled: the pattern is repeated and not stretched.
Now that we've seen how tiled sprites work, let's talk about filled sprites.
Filled
A Filled sprite is displayed partially depending on a FillAmount value between 0 and 1. Set the Type parameter of our UISprite to Filled. Ok. Now, we can review the three new parameters, as follows:
The following parameters are specific to filled sprites:
- FillDir: Select one of the following five fill directions:
- Horizontal: The sprite is filled horizontally. This is usually used for progress bars and life gauges.
- Vertical: The sprite is filled vertically.
- Radial90: The sprite is filled around a 90-degree angle.
- Radial180: The sprite is filled around a 180-degree angle, resulting in a car windshield wiper effect.
- Radial360: The sprite is filled around a 360-degree angle, resulting in a clock or timer...
System requirements
File format: ePUB
Copy protection: Adobe-DRM (Digital Rights Management)
System requirements:
- Computer (Windows; MacOS X; Linux): Install the free reader Adobe Digital Editions prior to download (see eBook Help).
- Tablet/smartphone (Android; iOS): Install the free app Adobe Digital Editions or the app PocketBook before downloading (see eBook Help).
- E-reader: Bookeen, Kobo, Pocketbook, Sony, Tolino and many more (not Kindle).
The file format ePub works well for novels and non-fiction books – i.e., „flowing” text without complex layout. On an e-reader or smartphone, line and page breaks automatically adjust to fit the small displays.
This eBook uses Adobe-DRM, a „hard” copy protection. If the necessary requirements are not met, unfortunately you will not be able to open the eBook. You will therefore need to prepare your reading hardware before downloading.
Please note: We strongly recommend that you authorise using your personal Adobe ID after installation of any reading software.
For more information, see our ebook Help page.
File format: PDF
Copy-Protection: Adobe-DRM (Digital Rights Management)
System requirements:
- Computer (Windows; MacOS X; Linux): Install the free reader Adobe Digital Editions prior to download (see eBook Help).
- Tablet/smartphone (Android; iOS): Install the free app Adobe Digital Editions or the app PocketBook before downloading (see eBook Help).
- E-reader: Bookeen, Kobo, Pocketbook, Sony, Tolino and many more (only limited: Kindle).
The file format PDF always displays a book page identically on any hardware. This makes PDF suitable for complex layouts such as those used in textbooks and reference books (images, tables, columns, footnotes). Unfortunately, on the small screens of e-readers or smartphones, PDFs are rather annoying, requiring too much scrolling.
This eBook uses Adobe-DRM, a „hard” copy protection. If the necessary requirements are not met, unfortunately you will not be able to open the eBook. You will therefore need to prepare your reading hardware before downloading.
Please note: We strongly recommend that you authorise using your personal Adobe ID after installation of any reading software.
For more information, see our eBook Help page.