Unity3D game development 14th NGUI 1

In Unity, you can use the code to control the GUI carried by the code to build a graphical interface. However, the creation efficiency of these components is very low and cannot meet the requirements of the current market for the aesthetic of the graphic user interface. Therefore, NGUI is introduced to increase the aesthetic of the graphic user interface to be developed. NGUI is a powerful UI system. Its event processing is usually completed by developers who write C # scripts and is a Unity Framework that strictly follows the KISS Principle, the Framework has clean and simple code.

Now there are many NGUI versions. I use 3.0.6 here. After importing the NGUI package, the NGUI options are displayed on the menu bar, for example:

Choose NGUI> Open> UI Wizard, for example:

Click the Layer drop-down list and select Add Layer to create a Layer called NGUI, for example:

The Camera options include None, Simple2D, Advanced3D, and Simple2D to create a simple 2D interface without the Z axis effect. Advanced3D creates a new 3D interface with the Z axis effect and can be rotated in 3D mode. Click the Create Your UI Button to Create a UI. The program will automatically Create some objects with node-level relationships, namely, the UI root node and a camera node, an anchor node and a Panel node used to hold buttons and other UIS do not care about the functions and functions of these nodes. Just remember the Panel node, all buttons and other UIS created later are placed at the Panel level, for example:

Let's take a look at UIRoot. UIRoot is always placed at the top of the ngui ui level. It is used to make UI scaling easier. Widgets usually use coordinates in pixels, but a 800*400 (dimensions value) widget occupies 800*400 units (units in Unity), which is quite large. UIRoot scales based on the inverse ratio of screen height. Therefore, widgets is very small and easier to operate. Attributes include:

Among them, Scaling Style (Scaling type, including three), UIRoot has several Scaling methods. The most common is PixelPerfect. In this way, your UI is always based on pixels. A 300*200 widget always occupies 300*200 pixels on the screen. This means that your UI will appear very large on low-resolution machines and very small on high-resolution machines. This setting keeps your UI clear. FixedSize is the opposite of FixedSize. When UIRoot uses this option, your screen will always maintain the size of NGUI, no matter how large your actual screen is. That is to say, a 300*200 widget occupies 1920 of 1080 of the screen, so when the resolution is reduced to 25% * 1280, it also occupies 720 of the screen. If you don't mind whether your UI looks like a different size or whether it is clear (that is, a small UI may be stretched a lot), select this option. Do not forget to set Manual Height when selecting it. FixedSizeOnMobile is a combination of the first two types. After this option is selected, "PixelPerfect" will be used on desktop devices such as PCs or mac, and "FixedSize" will be used on mobile devices ". If you do not select the Fixed Size option, set the values of Minimum and Maximum Height. These values make your virtual screen look within a reasonable range. For example, if you select the Pixel Perfect mode and set Minimum Height to 720, when a player runs your program on a 800*600 (the Height is 600, less than Minimun Height) device, the behavior of your UI is the same as setting the "Fixed Size" mode and the Manual Height value to 720.

Next, let's take a look at UICamera. The attributes are as follows:

What UICamera actually does is send NGUI events to all objects rendered by the current camera. camera is the one where the UICamera script is located. In fact, this script has nothing to do with the UI. In fact, if you want the objects in the game to receive events such as OnPress, OnClick, and OnDrag, you need to put UICamera on your primary camera. There can be multiple UICamera in game scenarios. Most games are mounted on a rendering widget camera and a rendering game camera.

The UICamera option Event Type is used to determine how the script sorts events triggered by mouse or touch. In UI mode, these events are ordered based on the depth of the widget -- the same as the rendering order. If UICamera is mounted to Main Camera, you need to change this option to World Mode. In this way, the clicked objects are sorted by the distance from the camera.
Event Mask is used to determine which layers will receive events. In most cases, you need "Everything". This value will be used for logic and computation with UnityEngine. Camera's Culling Mask. You can fine-tune this value if necessary. If you modify the game object Layer of the UI, remember to adjust Event Mask. Otherwise, you may find that the UI does not respond to events.
The Debug option is used to show what is currently under the mouse. If you do not know what receives a mouse event, you can check this option in the upper right corner.
The Allow Multi-Touch option is used to control whether Multi-point Touch is supported. If this option is selected, multi-point touch is also considered a single point of touch.
The Sticky Tooltip option is used to fine-tune the tooltip behavior. If you turn it off, the tooltip will be immediately turned off when the mouse moves again. If you open the tooltip, as long as the mouse stays on the game object, the tooltip is displayed.
Tooltip Delay is used to control how long the OnTooltip message will be sent to an object when the mouse stops on an object. In seconds.
Raycast Range controls the length of raycast. In most cases, this value can be ignored. This value is the value of the world coordinate system, so if your camera's near clip is 0.3 and far clipping is 1000, a distant object may not respond to the click event, for example, you can set this value to 2000 (greater than far and near clipping .)

Event Sources is used to determine which Event types will be processed. The selected event will not be processed. Some platforms forcibly disable some events. For example, when the handle is used, the mouse and touch are automatically disabled.

Thresholds allows you to adjust the Thresholds of click, drag, and tap events to fine-tune the behavior of mouse and touch events. In pixels.

The Axes and Keys sections are used to control which axis controls which direction to move. These names must be consistent with those in the Input Manager.

UIAnchor, attributes such:

UIAnchor allows you to fix game objects on the screen or one side or corner of other widgets. This is a key component used to create a modular UI in NGUI.

Do you want to stick some of your UIS to the corners or edges of the screen? For example, World of Warcraft. In this game, the game map is always in the upper right corner of the screen, and the hotkey is always under the screen, no matter how much screen resolution you use. How do you do something similar? Use anchors.

The default UI layout of NGUI will provide you with an anchor-a center anchor. Taking the World of Warcraft UI as an example, you need to add two additional anchor. Set one to TopRight, and the other to Bottom. Then you add some sub-nodes to the two anchor and modify the screen size. You will find that the UI is always in the place you want (top right or bottom right ).
Set anchor Container to attach one UI to another. If the Container is a UIWidget, The dimesions of the widget will be used to replace the screen rectangle (that is, TopRight will be opposite to This widget, not the screen ). If it is a game object, this rectangle is the bounds of all node widgets under the game object. For this reason, you must pay attention when using the parent node as the Container, because the Container size of the parent node will contain the widget for anchor, this may not be the effect you want (for example, you want to place the widget in the upper left corner of the parent node, but when the widget is in the upper left corner, the upper left corner of the parent node may change as a result of its arrival, and then move the widget again ......).
Adjust the Relative Offset to use the Relative value to change the position. If X is 1, the container width is 100%, and Y is 1, the container height is 100%. 0.5 = 50%, and so on. It can also be a negative number.
The above adjustment can also be achieved through Pixel Offset. Just like what you think ...... Adjust the anchor offset in pixels Based on the given X and Y values.
By default, anchor is executed only once. If you want to execute the command in each update, check the Run Only Once option.

UIWidget, attributes such:

UIWidget is the basic component of NGUI. Simply put, it is a rectangle that you can place in any position on the screen. Widgets have a certain area (such as the white box range), but the Game View is completely invisible during running, therefore, it is very suitable for containers used as other components (so that all sprite or labels can be aligned with it ). Uiwidgets are also used as the base class for all NGUI elements-all the sprites and labels you have created. UILabel, UISprite, UITexture, and UI2DSprite (Unity3D 4.3) are inherited from uiwidgets.

UIPanel, attributes such:

UIPanel is used to collect and manage all widgets under it. Create the actual draw call using the widget geometry. No panel is rendered. If you are familiar with Unity, you can use UIPanel as a Renderer.

Each panel has a Depth value, which affects all widgets it contains. If your UI has many windows, you 'd better have a panel for each window. The depth weight on the Panel is much higher than the depth weight of each widget, so make sure that the panel does not use the same depth. If the same depth is used on the panel, the draw call will be automatically split to ensure the rendering order, so more draw calls will be added.

• The Alpha attribute affects all widgets under the panel. You can use it to fade out the entire window.
• If your UI needs to be affected by the light, select Normals.
• If you have created a scrollable panel with many geometry features, you need to check the Cull option to reduce the number of triangles. This may also reduce the performance, because the visibility of the widget needs to be checked every update.
• Check the Static option to tell NGUI that the widgets under the panel will not be moved, which improves the performance. NGUI ignores all position/rotation/scale changes. So moving widgets does not work at runtime-so be careful when using them.
• The Show All option may help you debug draw CILS created by panel. You will see all the draw calls created by the panel, sorted in rendering order. Each draw call includes the details of the material used by the widget. The material used by the widget can even be used to close some draw calls for you to query certain problems.
  

The Panel automatically Clip all its subnodes Based on dimensions. To use this function, select any options in the Clipping drop-down list, and then adjust the purple rectangle size in the Scene View, just like adjusting the widget size. By doing this, you can place a panel in the Scroll View to make it easy to drag and drop.
Note that the panel of clipping cannot be nested. Each panel can only be a widget managed by clip. If one panel is in another panel, only one widget will be affected. This restriction will be removed later.