NGUI for Unity

Charles Bernardoff

Chapter No. 3 "Enhancing your UI"

In this package, you will find:

A Biography of the author of the book A preview chapter from the book, Chapter NO.3 "Enhancing your UI" A synopsis of the books content Information on where to buy this book

About the Author

Charles Bernardoff has a bachelor's degree in Game Design and Level Design delivered by ISART Digital, a video games school located in Paris, France. With four years of experience as game designer, level designer, and C# scripter at Cyanide Studio, Playsoft, and Airbus, Charles has worked on the PC versions of Blood Bowl, Dungeonbowl, and Confrontation. He has also worked on Unity and Flash mobile games, such as Space Run 3D, Oggy, and Psycho Gnomes. He now works as Game Designer and Unity developer on PC and mobile Serious Games at Airbus. I wish to personally thank Abdelrahman Saher, Usuario, and Andreas Grech, great reviewers who helped in making the book better. I also want to thank my family and friends for their great support while I was working on this project.

For More Information: www.packtpub.com/master-ngui-components-to-create-a-thrilling-actionpacked-sci-fi-2d-game/book

NGUI for Unity

This book is dedicated to beginners of the Next-Gen UI kit, also known as NGUI. You may have heard about this Unity 3D plugin; it is popular amongst developers for its easyto-use and effective WYSIWYG workflow. NGUI provides built-in components and scripts to create beautiful user interfaces for your projects, with most of the work happening inside the editor. Through this book, you will gather the necessary knowledge to create interesting user interfaces. The seven chapters of this book are practical and will guide you through the creation of both a main menu and a 2D game.

What This Book Covers

Chapter 1, Getting Started with NGUI, describes NGUI's functionalities and workflow. We will then import the plugin and create our first UI system and study its structure. Chapter 2, Creating Widgets, introduces us to our first widget and explains how we can configure it. It then explains how to create a main menu using the Widget template Chapter 3, Enhancing Your UI, explains the drag-and-drop system and how to create draggable windows. It also covers the use of animations, scrollable text, and localization with NGUI. Chapter 4, C# with NGUI, introduces C# event methods and advanced code-oriented components that will be used to create tool tips, notifications, and Tweens through code. Chapter 5, Building a Scrollable Viewport, introduces us to an interactive fullscreenscrolling viewport using scroll bars, keyboard arrows, and draggable items. Chapter 6, Atlas and Font Customization, explains how you can customize your UI using your own sprites and fonts; this will enable us to modify the appearance of our entire main menu. Chapter 7, Creating a Game with NGUI, covers game features, such as spawning mobile enemies, handling player input, and detecting collisions between widgets to create a game.

For More Information: www.packtpub.com/master-ngui-components-to-create-a-thrilling-actionpacked-sci-fi-2d-game/book

Enhancing your UI
In this chapter, we will learn how to enhance our UI experience by using more advanced features, which are as follows: Draggable panels and animations The drag-and-drop system Automatic content alignment Clipping Scrollable text The localization system

Let's start by talking about NGUI components and their overall behavior.

NGUI components
In Chapter 2, Creating Widgets, we added the UIStretch and UIAnchor components to our widgets, and also the Load Level On Click component. There are many more components, and the purpose of this chapter is to discuss these components. We will use the most important ones in this chapter. It is possible to add a component to any kind of widgetconsidering it is logical of course. This component-oriented structure makes NGUI extremely exible and modular. We will start by making our main menu a draggable window.

For More Information: www.packtpub.com/master-ngui-components-to-create-a-thrilling-actionpacked-sci-fi-2d-game/book

Enhancing your UI

The draggable panel

We will now learn how to turn our menu into a draggable window. Let's add the correct component to it and study its parameters, which are as follows: 1. Select the Panel GameObject. 2. Rename it as MainMenu. 3. Attach the Draggable Panel component to it by navigating to Component | NGUI | Interaction. The MainMenu GameObject now has a UIDraggable Panel component attached to it.

Parameters
The following are the 13 parameters for setting values in the UIDraggable Panel: Drag Effect: This is the effect used while dragging the panel to have a smoother drag. Restrict Within Panel: This uses the parent panel to restrain the draggable panel within its clipping bounds. Disable Drag If Fits: If the content ts the parent panel's clipping bounds, dragging will be disabled. Smooth Drag Start: This avoids a "jump" effect on drag start. Reposition Clipping: This repositions the Clipping to the Top Left Corner immediately. IOS Drag Emulation: Dragging movement speed is reduced when overpassing the clipping edges. Scroll Wheel Factor: If you want the scroll wheel to drag the panel on the y axis, set this value to greater than 0. Momentum Amount: This is the effect applied when the panel is dropped. The panel will keep moving after releasing the scroll wheel. Horizontal Scroll Bar: This lets you drag a scroll bar to dene it as the panel's horizontal scroll bar. Vertical Scroll Bar: This lets you drag another scroll bar to dene it as the panel's vertical scroll bar.

[ 52 ]

For More Information: www.packtpub.com/master-ngui-components-to-create-a-thrilling-actionpacked-sci-fi-2d-game/book

Chapter 3

Show Scroll Bars: This allows you to show scroll bars always, show them only if necessary, or show them while dragging. Scale: This denes which axis the panel should drag on: 0 means no dragging, 1 allows full dragging on this axis. Relative Position On Reset: This is the offset relative to the mouse's position. It is useful if you want an offset from the mouse's position while dragging.

Now that we have seen the component's parameters, let's use them to drag our main menu.

Dragging the MainMenu

We have added the UIDraggable Panel component that sets this UIPanel as a Draggable Panel. Now, we must mark our MainMenu as the GameObject that holds the draggable content. We will also add a Box Collider component to dene where the user must click to drag the panel: 1. Select our MainMenu GameObject and perform the following steps: 1. Set the Clipping parameter of UIPanel to Alpha Clip. 2. Set the Size field in Clipping to 1920 x 1080. 3. Uncheck the IOS Drag Emulation Boolean. 2. Add the Drag Panel Contents component to it. 3. Add the Box Collider component to it and perform the following steps: 1. Check the Is Trigger Booleanwe don't need collisions, just a trigger to receive Raycasts from the UICamera. 2. Set its Center coordinates to {0, 395, 0}. 3. Set its Size coordinates to {1300, 62, 1}. Click on the play button. By clicking on the window's title, you can drag the main menu. But still, it isn't congured correctly; you can only move it on the x axis.

[ 53 ]

For More Information: www.packtpub.com/master-ngui-components-to-create-a-thrilling-actionpacked-sci-fi-2d-game/book

Enhancing your UI

Let's change an important parameter of the UIDraggable Panel component of MainMenu to allow dragging on the x axis by performing the following steps: 1. Select our MainMenu GameObject. 2. Set Scale in UIDraggable Panel to {1, 1, 0}. And that's it! Our MainMenu is now draggable on both the axes. If you drag it outside the screen, it will move back inside when dropped. We had to dene a clipping of the screen's size for this Restrict Within Panel function to work.

The drag-and-drop system

We will now create our own drag-and-drop system that will enable the user to select a power. They will be able to drag one of the two available powers inside a selection box as shown in the following screenshot:

Powers selection
Let's create a drag-and-drop system to select which of the two powers the player can choose: a Bomb power, which will explode or a Time power, which will slow down time for a few seconds.

[ 54 ]

For More Information: www.packtpub.com/master-ngui-components-to-create-a-thrilling-actionpacked-sci-fi-2d-game/book

Chapter 3

Draggable items container

Let's start by creating a nice box for our powers and a draggable items container by performing the following steps: 1. Select our MainMenu GameObject and perform the given steps: 1. Create a new empty child GameObject by pressing Alt + Shift + N. 2. Rename it as Powers. 2. Select the Background and Label GameObjects from Sound: 1. Duplicate them. 2. Drag these new duplicates inside our Powers GameObject. 3. Select the Background GameObject in Powers and perform these steps: 1. Set its Dimensions to 320 x 420. 2. Set the Pixel Offset in UIAnchor to {0, -100}. 4. Select the Label GameObject in Powers: 1. Rename it as TitleLabel. 2. Change its text to [AAFFFF]Powers. 5. Select the Label GameObject, which is a child of Title, and perform the following steps: 1. 2. 3. 4. 5. 6. 7. 8. Duplicate it. Rename this new duplicate as SelectedLabel. Drag it inside our Powers GameObject. Drag our Background GameObject in Powers to the Container field in its UIAnchor. Set its Side parameter in UIAnchor to Top. Set its Pixel Offset in UIAnchor to {0, -95}. Change its Font to SciFi Font Normal. Change its text to [AAFFFF]Selected.

6. Select our SelectedLabel GameObject in Powers and perform the following steps: 1. Duplicate it. 2. Rename this new duplicate as AvailableLabel. 3. Change its text to [AAFFFF]Available. 4. Set its Pixel Offset in UIAnchor to {0, -295}.
[ 55 ]

For More Information: www.packtpub.com/master-ngui-components-to-create-a-thrilling-actionpacked-sci-fi-2d-game/book

Enhancing your UI

7. Select our SelectedLabel GameObject in Powers and perform these steps: 1. Duplicate it. 2. Rename this new duplicate it as InstructionsLabel. 3. Change text to [55AA99]Drag Power Hereone word per line. 4. Set its Overflow parameter to Shrink Content. 5. Set its Depth to 4. 6. Set its Dimensions to 128 x 45. 7. Set its Pixel Offset in UIAnchor to {0, -175}. 8. Select our Background sprite GameObject in Powers and perform the following steps: 1. Duplicate it. 2. Rename this new duplicate as PowersContainer. 3. Set its Dimensions to 215 x 90. 4. Set its Color Tint to {100, 100, 100, 255}. 5. Set its Depth to 3. 6. Drag our AvailableLabel GameObject from Powers to the Container field in its UIAnchor. 7. Set its Pixel Offset in UIAnchor to {0, -60}. Ok, we now have our powers box with the correct labels and a background.

Draggable items
Now that we have the PowersContainer, let's create the following two draggable items:

[ 56 ]

For More Information: www.packtpub.com/master-ngui-components-to-create-a-thrilling-actionpacked-sci-fi-2d-game/book

Chapter 3

Follow the ensuing steps to create them: 1. Select our PowersContainer GameObject in Powers. 2. Create a new child GameObject with Alt + Shift + N and rename it as Bomb. 3. Attach a Collider object to it by navigating to NGUI | Attach. It will be used to detect the mouse and receive the correct messages for the drag-and-drop system by performing the following steps: 1. Check the Is Trigger Boolean. 2. Set its Size field of new Box Collider to {90, 90, 1}. 4. Attach a Drag Object component to it by navigating to Component | NGUI | Interaction: 1. Drag our Bomb from PowersContainer in its Target field. 2. Set its Scale to {1, 1, 0}. 3. Set the Momentum Amount to 0. 5. Select and duplicate the Background sprite GameObject in Powers. Then perform the following steps: 1. Drag it inside our new Bomb GameObject. 2. Set its Depth to 5. 3. Set its Dimensions to 90 x 90. 4. Remove its UIAnchor component. 5. Reset its Transform position values to {0, 0, 0}. 6. Select and duplicate the AvailableLabel GameObject in Powers. Then perform these steps: 1. Rename that new duplicate as Label. 2. Drag it inside our new Bomb GameObject. 3. Change its text to [AAFFFF]Bomb. 4. Set its Depth to 6. 5. Remove its UIAnchor component. 6. Reset its Transform position values to {0, 0, 0}. 7. Select our Bomb GameObject.

[ 57 ]

For More Information: www.packtpub.com/master-ngui-components-to-create-a-thrilling-actionpacked-sci-fi-2d-game/book

Enhancing your UI

8. Attach a Button Color component to it by navigating to Component | NGUI | Interaction and perform these steps: 1. Drag our Background GameObject from Bomb to the Target field. 2. Set its Pressed color to {0, 255, 0, 150}. 9. Create a new DragItem.cs C# script and attach this script to the Button Color component. We have one draggable Bomb power with a DragItem.cs script attached to it. Let's create the second Time power by performing the following steps: 1. Select and duplicate our Bomb GameObject in PowersContainer. 2. Rename that new duplicate as Time. 3. Select our new Label GameObject, which is a child of Time. 4. Change its text to [AAFFFF]Time. Ok, we now have our two draggable Powers, and they are on top of each other. Let's correct this using Anchors and a Grid component, which will automatically align our items. We can do this using the following steps: 1. Select our PowersContainer GameObject. 2. Create a new child by pressing Alt + Shift + N and rename this new child as Grid. 3. Attach a Grid component to it by navigating to Component | NGUI | Interaction. 4. Drag both our Bomb and Time GameObjects in our new Grid GameObject. 5. Select our Grid GameObject and perform the following steps: 1. Set its Cell Width to 105. 2. Check the Sorted Boolean. 3. Check the Reposition Now Boolean to update the table. 4. Set its Transform position to {-52, 0, 0}.

[ 58 ]

For More Information: www.packtpub.com/master-ngui-components-to-create-a-thrilling-actionpacked-sci-fi-2d-game/book

Chapter 3

The UIGrid component automatically aligns its children. We now have our two draggable powers aligned. If you click on play, you'll see that you can drag them around as shown in the following screenshot:

The drop surface

We will create a new Surface GameObject with a DropSurface.cs script and a Box Collider component to dene where the draggable items can be dropped. When the user drops an object with a DragItem component on the Surface GameObject, the DragItem component will be destroyed, and a "dropped version" of the object will be instantiated as a child of the Surface GameObject. First, let's create and congure the Surface GameObject by performing the following steps: 1. Select and duplicate our Background GameObject from Powers and rename this new duplicate as Surface.

[ 59 ]

For More Information: www.packtpub.com/master-ngui-components-to-create-a-thrilling-actionpacked-sci-fi-2d-game/book

Enhancing your UI

2. Select our new Surface GameObject from Powers and perform these steps: 1. Change its Sprite to Highlight. 2. Change its Color Tint to {0, 25, 5, 255}. 3. Set its Depth to 3. 4. Set its Dimensions to 130 x 130. 5. Drag our SelectedLabel GameObject from Powers to the Container field in its UIAnchor. 6. Set its Pixel Offset to {0, -80}. 3. Attach a Collider object to it by navigating to NGUI | Attach | Collider. It will detect DragItems. Then perform the following steps: 1. Check its Is Trigger Boolean. 2. Set its Size to {130, 130, 1}. 4. Create and attach a new DropSurface.cs C# script to it. Good, our surface is now ready to detect our items.

Prefab instantiated on drop

Now, we need to create two prefabs for our powers that will be instantiated as children of the Surface GameObject when a DragItem component is dropped on it. They will look as follows:

Let's create these prefabs by performing the following steps: 1. Select the Bomb GameObject from Grid and the following steps: 1. Duplicate it. 2. Rename it as SelectedBomb.

[ 60 ]

For More Information: www.packtpub.com/master-ngui-components-to-create-a-thrilling-actionpacked-sci-fi-2d-game/book

Chapter 3

2. Select our new SelectedBomb GameObject from Grid. Then perform the following steps: 1. Change its Normal color tint to R: 0, G: 145, B: 60, and A: 255. 2. Remove its Box Collider component. 3. Remove its Drag Item component. 3. Create and attach a new Power.cs C# script to it. 4. Select the Background sprite GameObject from SelectedBomb. Then perform the following steps: 1. Change the Sprite to Light. 2. Set its Depth to 4. 3. Set its Dimensions to 120 x 120. 5. Select the Label GameObject from SelectedBomb and set its Depth to 5. 6. Drag our SelectedBomb GameObject into a folder of your choice in your Project view to create a prefab from it. 7. Once our SelectedBomb is a prefab (blue in the scene's Hierarchy), you may delete it from the scene. We now have our SelectedBomb prefab. Let's declare a variable in our DragItem. cs script that will store the prefab to instantiate on drop. We can do this by following the ensuing steps: 1. Select our Bomb GameObject from Grid. 2. Open the DragItem.cs script attached to it and add this public variable using the following code:
public Object CreateOnDrop;

3. Save the script and go back to Unity. 4. Select our Bomb GameObject from Grid and drag our SelectedBomb prefab from the Project view in the Create On Drop eld in its Drag Item. Now let's do the same for our Time power in the following manner: 1. Select our SelectedBomb prefab in the Project view and perform the following steps: 1. Duplicate it with Ctrl + D. 2. Rename the new duplicate prefab as SelectedTime.

[ 61 ]

For More Information: www.packtpub.com/master-ngui-components-to-create-a-thrilling-actionpacked-sci-fi-2d-game/book

Enhancing your UI

2. Select its Label child GameObject and change its text to [AAFFFF]Time. 3. Select our Time GameObject from Grid in the scene's Hierarchy. 4. Drag our SelectedTime prefab from the Project view in the Create On Drop eld in its Drag Item. We can now add an OnDrop() method to our DropSurface.cs script to handle dropped objects in the following manner: 1. Select our Surface GameObject from Powers. 2. Open its attached DropSurface.cs script. The OnDrop() event has one argument: the dropped GameObject. Let's add this method to our script to handle the drop by using the following code snippet:
//Called when an object is dropped on DropSurface public void OnDrop(GameObject dropped) { //Get the DragItem from the dropped object DragItem dragItem = dropped.GetComponent<DragItem>(); //If it has none, don't go further if(dragItem == null) return; //Instantiate the defined CreateOnDrop Object GameObject newPower = NGUITools.AddChild(this.gameObject, dragItem.CreateOnDrop as GameObject); //Destroy the dropped Object Destroy(dropped); }

Save the script and click on the play button. When you drop a power on the Surface GameObject, nothing happens! Why? That's because the OnDrop() event depends on the Raycast from Camera, and at the moment of the drop, our dragged power's Box Collider component is in the way of the mouse cursor and the Surface GameObject. We just have to disable the collider of Power while it is dragged. We can do this in the following manner: 1. Select our Bomb GameObject from Grid. 2. Open its attached DragItem.cs script.

[ 62 ]

For More Information: www.packtpub.com/master-ngui-components-to-create-a-thrilling-actionpacked-sci-fi-2d-game/book

Chapter 3

We will use the OnPress() event to do this. The OnPress() method will take the object's pressed state as an argument in the following manner:
//Method called when the Item is Pressed or Released void OnPress(bool pressed) { //Invert the collider's state collider.enabled = !pressed; }

Save the script and click on play. You can now drag-and-drop the powers on the surface!

Handling an invalid drop

Now, let's make sure power is repositioned to its default position if the user drops it outside the Surface GameObject. To achieve this, we can check the camera's last hit when the OnPress(false) event occurs. Open our DragItem.cs and add the following lines after collider.enabled = !pressed:
//If the Item is released if(!pressed) { //Get the last hit collider Collider col = UICamera.lastHit.collider; //If there is no collider, or no DropSurface behind the Power if(col == null || col.GetComponent<DropSurface>() == null) { //Get the grid in parent objects UIGrid grid = NGUITools.FindInParents<UIGrid>(gameObject); //If a grid is found, order it to Reposition now if(grid != null) grid.Reposition(); } }

Save and click on play. If you drop a Power anywhere but on the Surface GameObject, our items will be repositioned automatically. Great! A slight problem: you can drop both of them on the surface, and then you're stuck. Let's explore the solution in the following sections.

[ 63 ]

For More Information: www.packtpub.com/master-ngui-components-to-create-a-thrilling-actionpacked-sci-fi-2d-game/book

Enhancing your UI

Replacing the current item

We will now ensure that you can only have one power on the surface. If you drag a second one while the DropSurface is already occupied, the current power will be replaced by the new one and the drag item component will reappear in the PowersContainer GameObject. We will need to know which power is currently dropped on the surface and which original drag Item component must be instantiated in Grid in PowersContainer: 1. Select our SelectedBomb prefab in the Project view. 2. Open its attached Power.cs script. This script will be used to contain information about the dropped item. Let's declare a new enum to distinguish which type of power, and an Object variable to set which prefab will be instantiated to make the draggable item in power reappear when replaced:
//Declare an enum to define type of Power public enum Type { None, Time, Bomb } //Declare a Type variable to choose it in Inspector public Type type; //Object variable to define the DragItem to recreate public Object createOnDestroy;

Now, we need to go back to Unity and create prefabs for our Bomb and Time draggable items before we assign them to the createOnDestroy variables: 1. Select our Bomb GameObject from Powers in the Hierarchy of Scene and drag it into a folder of your choice in your Project view to create a prefab from it. 2. Select our SelectedBomb Prefab in the Project view and perform the following steps: 1. Set its Power component's Type variable to Bomb. 2. Drag our new Bomb Prefab from the Project view to the Power component's Create On Destroy field.

[ 64 ]

For More Information: www.packtpub.com/master-ngui-components-to-create-a-thrilling-actionpacked-sci-fi-2d-game/book

Chapter 3

We assigned the Type parameter of SelectedBomb to Bomb, and it now has an assigned prefab that we will instantiate to recreate the draggable item when it gets replaced.
Repeat steps 1 and 2, replacing the word Bomb with Time to do the same for our Time power GameObject and prefab.

Now, we have to code a system that will register which type of power is currently selected. We'll use the GameManager.cs script in the following manner to store it: 1. Open our GameManager.cs script and declare this new static variable:
//This static variable will contain the selected power public static Power.Type SelectedPower = Power.Type.None;

2. Add this new static method to set our SelectedPower from other scripts:
//This static method changes the SelectedPower value public static void SetPower(Power.Type newPower) { SelectedPower = newPower; }

Ok, we now have a method to register the currently selected power. It is time to modify our DropSurface.cs script: 1. Select our Surface GameObject from Powers and open the DropSurface.cs script. 2. Declare a new GameObject variable to store our Grid GameObject:
public GameObject dragItemsContainer;

3. Save the script, select our Surface GameObject from Powers in the Hierarchy view. Drag our Grid GameObject from PowersContainer in its DropSurface component's Drag Items Container eld. Now, go back to our DropSurface.cs script. We will add these following lines to handle the fact that the user cannot drop two powers on the surface; it will replace the previous one and recreate its original Drag Item. In the OnDrop() method, just below the if(dragItem == null) return line, add the following:
RecreateDragItem();

[ 65 ]

For More Information: www.packtpub.com/master-ngui-components-to-create-a-thrilling-actionpacked-sci-fi-2d-game/book

Enhancing your UI

Now, add a new RecreateDragItem() method to the le:

void RecreateDragItem() { //If there's already a Power selected if(GameManager.SelectedPower != Power.Type.None) { //Get the selected power's Power.cs script Power selectedPowerScript = transform.GetChild(0).GetComponent<Power>(); //Add the Drag Item to the grid NGUITools.AddChild(dragItemsContainer, selectedPowerScript.createOnDestroy as GameObject); //Destroy the currently selected Power Destroy(selectedPowerScript.gameObject); } }

Ok, we now have to inform the GameManager.cs script that the selected Power has changed. We can do this by calling our SetPower() static method. Add the following line in the OnDrop() method just before the Destroy (dropped) line:
//Set the new selected power in the GameManager GameManager.SetPower(newPower.GetComponent<Power>().type);

Save all the scripts and click on the play button. You can drop the rst Power on the Surface GameObject and then drop the second one. The rst power is now replaced and will reappear in the Available power container. Unfortunately, we cannot simply remove the power. Let's correct this in the following sections.

Removing the current item

We want to remove the selected power by clicking on it. In our DropSurface.cs script, add this new OnClick() method that will be called when the user clicks on the surface:
void OnClick() { //Recreate the DragItem now RecreateDragItem(); //Reset SelectedPower to None

[ 66 ]

For More Information: www.packtpub.com/master-ngui-components-to-create-a-thrilling-actionpacked-sci-fi-2d-game/book

Chapter 3 GameManager.SetPower(Power.Type.None); //Force reposition of the grid dragItemsContainer.GetComponent<UIGrid>().Reposition(); }

Now click on play. You can now remove the selected power by right- or left-clicking on it.

Animations with NGUI

One great aspect of NGUI is that you can use Unity's animation system on any kind of widget. There also are some Tween components that let you modify most values over time, such as dimensions, color, and scale. For example, you can change an object's color from color A to color B in 5 seconds. We have a nice main menu. But we actually have our options that are constantly displayed. That is not very user friendly. We will use animations and tweens to hide our options and show them only when the user clicks on the Options button. With options hidden, our menu will look as shown in the following screenshot:

But rst, let's make our powers' apparition smoother.

[ 67 ]

For More Information: www.packtpub.com/master-ngui-components-to-create-a-thrilling-actionpacked-sci-fi-2d-game/book

Enhancing your UI

Smooth powers apparition

Let's add Scale Tweens on our prefabs to make them appear smoothly by performing the following steps: 1. In the Project view, select our SelectedBomb prefab. 2. Attach a Scale Tween component by navigating to Component | NGUI | Tween and perform the following steps: 1. Set its From parameter to {0, 0, 0,}. 2. Set its Duration to 0.2. 3. Right-click on the Tween Scale component and then click on Copy Component. 4. Select our SelectedTime, Bomb, and Time prefabs. 5. In the Inspector view, right-click on any existing component name and click on Paste Component As New. Now, as soon as these widgets are created, they scale from 0 to 1 in 0.2 seconds, which makes them appear smoothly. We can now see how we'll hide and show options using a button.

Clipping to hide options

First, we have to hide our option boxes. To do that, we will use Panel Clipping and increase their width when we need to show them. Let's set up the Clipping option: 1. Select our Window GameObject from MainMenu and set its Dimensions to 515 x 850. 2. Select the MainMenu GameObject and perform the following steps: 1. Set its Depth in UIPanel to -1. 2. Create a new child for MainMenu with Alt + Shift + N. 3. Rename this new child as Container. 3. Select our new Container GameObject. 4. Attach a Panel component to it by navigating to Component | NGUI | UI. Then perform the following steps: 1. Set its Depth to 0. 2. Set its Clipping parameter to Alpha Clip. 3. Set its Size to 515 x 1080.
[ 68 ]

For More Information: www.packtpub.com/master-ngui-components-to-create-a-thrilling-actionpacked-sci-fi-2d-game/book

Chapter 3

5. Fold all the children of MainMenu using the arrow next to each of them. 6. Select every child of MainMenu, except the new Container child, and drag them all inside our new Container GameObject. Good, our options are now hidden. Your Hierarchy should look as shown in the following screenshot:

Let's add an Options button that will show or hide these options: 1. Select and duplicate our Play GameObject from Buttons and rename this new duplicate as Options. 2. Select our new Options GameObject from Buttons and perform the following steps: 1. Set its Side parameter in UIAnchor to Bottom. 2. Reset its Pixel Offset in UIAnchor to {0, 0}. 3. Set its Size in Box Collider to {140, 40, 0}. 4. Remove its Load Level On Click component. 3. Select our Background GameObject from Options and set its Dimensions to 140 x 40. 4. Select our Label GameObject from Options: 1. Change its text to Options. 2. Set its Overflow parameter to Shrink Content. 3. Set its Dimensions to 90 x 25.

[ 69 ]

For More Information: www.packtpub.com/master-ngui-components-to-create-a-thrilling-actionpacked-sci-fi-2d-game/book

Enhancing your UI

Ok, so now we have an Options button. Next, we want it to enlarge our Window and the Panel Clipping width of Container when clicked. We can do this using code, but we will use tweens and animations in the following manner to see how they work: 1. Select our Window GameObject in Container. 2. Attach a Tween Width component to it by navigating to Component | NGUI | Tween. Then perform the following steps: 1. 2. 3. 4. 5. Set its From parameter to 515. Set its To parameter to 1300. Set Duration to 0.5. Reset Dimensions to 515 x 850. Disable the Tween Width component to prevent it from tweening at start.

We have a Tween component that will resize the width of Window when activated. Let's use the UIPlay Tween component to start it when the Options button is clicked on: 1. Select our Options button GameObject. 2. Attach a Play Tween component by navigating to Component | NGUI | Interaction. Then perform the following steps: 1. Drag our Window GameObject from Container in the Tween Target field. 2. Set the Play direction to Toggle. Click on play. You will see that the window resizes as needed when Options is clicked. However, the Clipping parameter doesn't. Let's correct this using a Unity animation: 1. 2. 3. 4. Select our Container GameObject from MainMenu. Open the Animation window by navigating to Window | Animation. Click the red record button. Save the animation as ShowOptions.anim and perform the following steps: 1. 2. 3. 4. Re-enter 515 for the clipping X Size from UIPanel to add a key. Move the time cursor in the Animation window to 0:30. Enter 1300 for the clipping X Size from UIPanel to add a key. Click on the red record button again to finish.

5. Uncheck its Play Automatically Boolean in the Animation component.

[ 70 ]

For More Information: www.packtpub.com/master-ngui-components-to-create-a-thrilling-actionpacked-sci-fi-2d-game/book

Chapter 3

We have our animation ready. Now, let's link the button to the animation in the following manner: 1. Select our Options GameObject from Buttons. 2. Attach a Play Animation component to it by navigating to Component | NGUI | Interaction. Then perform the following steps: 1. Drag our Container GameObject from MainMenu in the Target field. 2. For the Clip Name parameter, type in ShowOptions. 3. Set the Play direction to Toggle. Click on play. Our window and clipping both resize perfectly in both directions when the Options button is clicked. But you can see that our Options widgets aren't visible until you actually drag the main menu around; that's because the clipping is not refreshed after the animation. 1. To solve this, we can simply force a Drag at the end of the Animation option. 2. Select our MainMenu GameObject and perform the following steps: 1. Create and add a new UpdatePanel.cs script to it. 2. Open our new UpdatePanel.cs script. 3. Now, add this new UpdateNow() method to the script that will force a drag of (0, 0, 0) value on our MainMenu:
public void UpdateNow() { //Force a drag of {0, 0, 0} to update Panel GetComponent<UIDraggablePanel>().MoveRelative(Vector3.zero); }

4. Save the script and then perform the following steps: 1. Select our Options GameObject in Buttons. 2. Drag our MainMenu GameObject in the Notify field of the UIPlay Animation component. 3. Choose our new UpdatePanel.UpdateNow method for the Method field. 5. Click on the play button. The Options boxes now appear after the animation! Great! We have used NGUI's Tween and Play Animations components to enhance our UI and make it nicer and more user friendly.
[ 71 ]

For More Information: www.packtpub.com/master-ngui-components-to-create-a-thrilling-actionpacked-sci-fi-2d-game/book

Enhancing your UI

Scrollable text
Let's add a welcome textbox with instructions for the user. This text will be scrollable using the mouse wheel or a simple click-and-drag. It will look as shown in the following screenshot:

At the start, it will scroll automatically. Let's create it now: 1. Select our Nickname container GameObject, duplicate it by pressing Ctrl + D. 2. Rename this new duplicate as Help. 3. Select this Help GameObject and perform the following steps: 1. Drag our Title GameObject in the Container field in its UIAnchor. 2. Set its Side parameter in UIAnchor to Bottom. 3. Set its Pixel Offset in UIAnchor to {0, -50}. 4. Attach a Panel component by navigating to Component | NGUI | UI: 1. Set its Depth to 1. 2. Set its Clipping parameter to Alpha Clip. 3. Set its Clipping Size to 440 x 85. 5. Attach a Collider object to it by navigating to NGUI | Attach and set its Size to {440, 85, 0}. 6. Delete the Input GameObject from Help. 7. Select our Label GameObject from Help and perform the following steps: 1. Change its Font to SciFi Font Normal. 2. Remove its UIAnchor component. 3. Set its text to:
Welcome! [HIT RETURN KEY] [HIT RETURN KEY] You can Select one of two [AAFFFF]Powers[FFFFFF]: [AAFFAA]Bomb[FFFFFF]: Explodes all enemies at once [AAFFAA]Time[FFFFFF]: Reduces Time speed for 10 seconds [ 72 ]

For More Information: www.packtpub.com/master-ngui-components-to-create-a-thrilling-actionpacked-sci-fi-2d-game/book

Chapter 3

8. Attach a Tween Position component to it by navigating to Component | NGUI | Interaction. Then perform the following steps: 1. Set its From parameter to {0, -50, 0}. 2. Set its To parameter to {0, 20, 0}. 3. Set its Duration value to 1.5. 4. Set its Start Delay value to 3. 9. Set its Transform position to {0, -50, 0}. 10. Select the Background GameObject from Help and perform the following steps: 1. Set its Dimensions to 440 x 85. 2. Set its Color Tint to {150, 255, 255, 255}. Click on the play button. We now have a welcome text that scrolls automatically by changing its Y coordinate inside a clipped Panel. Let's enable the scroll wheel and mouse drag on this scrollable text: 1. Select our Help GameObject. 2. Attach a Drag Object component to it by navigating to Component | NGUI | Interaction. Then perform the following steps: 1. Drag our Label GameObject from Help to the Target field. 2. Set the Scale to {0, 1, 0} to limit to vertical scrolling. 3. Set the Scroll Wheel Factor value to 1. 4. Check the Restrict Within Panel Boolean. Click on play. You can now drag the text label manually with either a left-click and drag or the mouse wheel. The Box Collider component on the Help GameObject detects mouse events, and the UIDrag Object reacts accordingly by changing the Y position of our Label. We had to add a UIPanel component to the Help GameObject in order to restrict movement within the clipping's bounds.

Localization system
Now that we have a complete UI, let's congure the localization system and add a pop-up list to change our UI's language.

[ 73 ]

For More Information: www.packtpub.com/master-ngui-components-to-create-a-thrilling-actionpacked-sci-fi-2d-game/book

Enhancing your UI

Localization les
All our localized text strings must be contained in a .txt le for each language. For the purpose of this book, we will have English and French, and we will need the English.txt le and the French.txt le. Let's create them right now in the following manner: 1. Access your project's Assets folder with your le explorer and create a new folder named Localization. 2. Inside this new folder, create a new text document named English.txt. 3. Duplicate this new English.txt le and rename it as French.txt. 4. Open them both in your favorite IDE or text editor. Ok, now our localization les are ready to be used with the localization system.

Localization component
We can now congure the localization system to work with our UI. We need to have the localization component attached to a GameObject in the scene: 1. Select our GameManager GameObject and attach a Localization component to it by navigating to Component | NGUI | Internal. 2. In the Project view, navigate to Assets | Localization and drag our English. txt and French.txt les in the languages array. The Starting Language is set to English, and we also have French available in the array.

Language selection box

The next step is to create a language selection box as shown in the following screenshot:

[ 74 ]

For More Information: www.packtpub.com/master-ngui-components-to-create-a-thrilling-actionpacked-sci-fi-2d-game/book

Chapter 3

If we want to see what we're doing, we should rst disable the Clipping of our Container by setting the Clipping parameter in its UIPanel to None. Once the Clipping is disabled, follow these steps: 1. Select the Popup GameObject from Difculty: 1. Check its Localized Boolean in UIPopup List. 2. Rename its child Label GameObject as CurrentDifficulty. 2. Select and duplicate our Difculty GameObject in Container. 3. Rename the new duplicate as Language. 4. Select our new Background GameObject in Language and set its Pixel Offset in UIAnchor to {420, -90}.
Sometimes, anchors don't update themselves. You may need to deactivate and then activate the Language GameObject for the Label's UIAnchor to update.

5. Select our Label GameObject from Language and change its text to [AAFFFF]Language. 6. Select our Popup GameObject from Language and perform the following steps: 1. Change the Options text value to have the following two options:
English French

2. Set its Position to Below. 3. Check the Localized Boolean. 7. Attach a Language Selection component by navigating to Component | NGUI | Interaction. 8. Rename the Label, which is a child of Popup, as CurrentLanguage. We can now reactivate Clipping in Container by setting the Clipping parameter in its UIPanel to Alpha Clip. The clipping Size has been saved. That's it, our localization system is in place, and when the pop-up list changes value, the Language Selection.cs script automatically changes the localization's Current Language value.

[ 75 ]

For More Information: www.packtpub.com/master-ngui-components-to-create-a-thrilling-actionpacked-sci-fi-2d-game/book

Enhancing your UI

Localizing a Label
We are now ready to localize our rst Label using the UILocalize component and a Key that will dene which string to use from our .txt les. Perform the following steps: 1. Select our Label GameObject from Title. 2. Attach a Localize component to it by navigating to Component | NGUI | UI. 3. Set its Key parameter by typing MainMenu. 4. Switch to our English.txt localization le and add the following line:
MainMenu = [AAFFFF]Main Menu

5. Switch to our French.txt localization le and add the following line:

MainMenu = [AAFFFF]Menu Principal

Save both the .txt les and click on the play button. If you access options and change the language to French, our window's title changes from Main Menu to Menu Principal. That's because the UILocalize component updates the UILabel component it's attached to using the string present after the = in our .txt localization le. If you exit the play mode, the language will be saved and the UI will be initialized with the last selected language. Now, we must add a UILocalize component with its specic Key to every Label in the scene, then add a localization string for each of them in both of our .txt les. Don't be afraid; it isn't that long, and it will train you to use the Localization System: 1. In the Hierarchy view, type Label inside the search box. 2. Select all the Label GameObjects matching the search by pressing Ctrl + A and attach a Localize component to the selection by navigating to Component | NGUI | UI. 3. Select our Label GameObject from Title and remove its second UILocalize component as it already had one! Now, all of our Label GameObjects have a UILocalize component attached to them. One by one, select them and set their Key parameter based on their text set in the UILabel component. You must ignore the Labels of Popup List; they don't need a UILocalize component since we checked their Localized Booleans. Simply add localization strings for their Options with the same names: Normal, Hard, English, and French.

[ 76 ]

For More Information: www.packtpub.com/master-ngui-components-to-create-a-thrilling-actionpacked-sci-fi-2d-game/book

Chapter 3

Don't forget to apply the same operations to labels included in our four different powers prefabs: Time, Bomb, SelectedTime, and SelectedBomb. New lines (return) are replaced by \n in the localization les. Colors work identically.

When you're done with setting their Key parameters, switch to our English.txt le and add every key you need, plus = followed by the corresponding localized text. Now, copy all of these keys declarations and paste them in our French.txt le and then replace the English words with French words or any other language you choose. By the time you're nished, our entire UI will be localized!

Summary
In this chapter, we rst learned how to set up a draggable panel. Then, we created and congured a drag-and-drop system to select which power we want using the UIDrag Object component and the custom code. Remember to use the UIGrid component often to automatically align objectsthey are very powerful when used wisely with UIAnchor and UIStretch components. Using Unity's animations and NGUI's Tweens are no longer a secret for uswe used them to create a smooth apparition for these powers, and we combined them with Clipping to hide/show our Options menu. Finally, we created scrollable text and learned how to use the Localization System to set up multiple languages. We can now take a look at using C# with NGUI in the next chapter and see what we can accomplish using code.

[ 77 ]

For More Information: www.packtpub.com/master-ngui-components-to-create-a-thrilling-actionpacked-sci-fi-2d-game/book

Where to buy this book

You can buy NGUI for Unity from the Packt Publishing website: .
Free shipping to the US, UK, Europe and selected Asian countries. For more information, please read our shipping policy.

Alternatively, you can buy the book from Amazon, BN.com, Computer Manuals and most internet book retailers.

www.PacktPub.com

For More Information: www.packtpub.com/master-ngui-components-to-create-a-thrilling-actionpacked-sci-fi-2d-game/book