Ngui Core Component Description

Uicamera-can be added to any camera, including the Event System.

Uicamera is an important component of each UI. It is responsible for sending all ngui activities in camera. If there is only one camera in the scenario, make sure it is attached
Uicamera script. If there are multiple cameras, make sure that at least the camera used to render the UI has the uicamera script. When you place this script on the main camera, all of the game scenarios will have
Onclick, onhover, ondrag and other events.

Parameters
Tooltip delay: Specifies how many seconds the ontooltip event will be executed for hovering and objects.
If you use orthographic
Projection camera. We recommend that you set the size of the camera to half the current resolution height. For example, set the size to 1024*768 resolution for the iPad screen.
384. Another way is to keep the size as 1, and the root of the scaling UI is the reciprocal of this value. For example, to get the perfect size on the iPad, you need to set the root to scale to 1/384 or
0. 002604167. The second method is easier to implement, but the image of an object in the scene view is smaller than that of other objects.

If you still don't know how to set the size of the orthogonal camera, try to see the figure below.

 

Uiatlas-defines the sprite texture

Uiatlas is a container that contains a pile of Sprite coordinate information. if you are not familiar with this concept. you can think that using a large texture that contains many smaller textures is more efficient than using several smaller textures. the small textures in the large textures are called Sprite and become atlas ).

Before using ngui, you need to create an Gallery (or use existing one). You can learn about the gallery practice here. You can also use uitexture directly, but it cannot deal with all problems.

 

Material: used to describe the materials used to draw this gallery. It is generally recommended to use the unregister colorer, for example, to use. unregister-transparent colored as ngui.
TP import: used to import the genie exported from texturepacker. You only need to drag and drop the TXT file and all the genie.
Coordinates: This allows you to switch from a pixel-based coordinate system to a UV-based coordinate system. Generally, it is made in a pixel coordinate system, but if you need to re-adjust the texture, you need to switch to the texture coordinate first.
New sprite: allows the currently selected genie to create a new Sprite for the template.
Delete: Delete the selected genie.
Sprite: You can select all the genie in use from the drop-down list.
Edit name: Rename the sprite name.
Outer rect: Set the outer border of the genie.
Inner rect sets the sprite's internal border. If you do not use uislicedsprite, you can skip this setting.
Padding: fine-tune the offset of the calibration genie
Correction: the coordinates of the basic calibration genie use perfect integer pixels.
Show: Check the location of the genie in the gallery.

Prompt
You can organize the genie into groups to create multiple Atlas. As long as the gallery shares the same material, the control still uses a small number of drawcalls.
To achieve the best effect, we recommend that you set the wrap mode of the texture to "Clamp" and the format to "truecolor ".
It is a good way to make similar textures into an atlas, but we should try to reduce the number of Atlas images used at the same time.
If you use texture packer to create an gallery, select unity3d in the output settings.

If you are using Photoshop to create an gallery, you can select a tool and use the Info panel to find the location and size of the genie.

Uifont-font Gallery
Uifont can set the font data and materials used by the UI. you can use free bmfont or more professional glyph designer. generally, only one font is used. It is saved as a preset and used as the font of the new tag. parameters:

Import Font: used to import the fnt (Suffix: txt) data output by glyph designer. Or bmfont.
Uiatlas: used to set the gallery of the font texture. You can see the options based on whether uiatlas has been selected.
If uiatlas has been specified, you can select the font genie.
If uiatlas is not specified, you can select the material used to draw the font. In ngui, coloring devices under the "unformatted" category are commonly used, such as "unformatted-transparent colored ".
You can adjust the pixel rectangle of the font in the texture.
Rapid correction of perfect pixel coordinates, rounding to the nearest pixel value.
Spacing: You can adjust the spacing between characters.
Show: Check the position of the font in the texture map.

Prompt
To achieve the best effect, we recommend that you set the wrap mode of the texture to "Clamp" and the format to "truecolor ".
Multiple fonts can be combined into one gallery. In this way, the entire UI uses these fonts and still maintains a drawcall.
You can add oblique angle, shadow, stroke, and other effects to the font. Make sure that you have set enough margins and Spacing Before exporting bmfont.

Uisprite-draw an genie from the gallery

Uisprite is the second plug-in that is not commonly used (the first is uitexture). It is used only as part of the gallery.

Parameters
Transform: a very important component. Each control can adjust its position and size through transform. it also affects "make pixel-perfect ". you can choose between it and uicamera to adjust the "perfect pixel.
Uiatlas: used to specify the gallery to be used. Drag or press the button on the left to select the latest gallery.
Sprite: select the genie used in the gallery. After selecting the genie, click "make pixel-perfect" to automatically adjust the transform size for you.
Depth is to avoid the use of Unity Z sorting (inefficient), and if you want to rotate the UI window. it is impossible to simply sort the transform by adjusting the Z axis of each control. so we need to sort it with this depth.
Color tint: used to adjust the color.
Make pixel-perfect: allows you to quickly adjust the widget size to the actual pixel size.
Starting: select the coordinate origin position of the widget.
Preview: preview the sprite texture.

Tip:
If you see two widgets flashing, it means that you set the same depth to cause overlap. You need to adjust different depths so that they do not overlap.
Do not mix multiple controls together. Otherwise, the perfect pixel function will be affected. When adding new controls, be sure to keep creating new sub-objects.
You can also move the widget after using the perfect pixel button.

Label-draw a text label with the specified font

Uilabel is used to display text. Multiple lines are supported. You only need to use "\ n" to wrap the text. You can use [rrggbb] to create color text.

Parameters:
Transform: a very important component. Each control can adjust its position and size through transform. it also affects "make pixel-perfect ". you can choose between it and uicamera to adjust the "perfect pixel.
Uifont: You can select the font used for this label. You can drag the preset or press the button to select the recently used font.
You can use "\ n" to determine whether the label is a multiline or a single line. You can also use a hexadecimal color value to define the color text, starting with [rrggbb, end. for example, "Hello [ff0000] World [-]! ", The final result is that world is a red text.
Line width: used to specify the maximum width of a text line. If it is a single line of text, it is cut out. If it is multiple lines of text, it will automatically wrap according to the width.
Multi-line: If this option is selected, the label will automatically wrap when it reaches the maximum width.
Password: The characters are automatically converted into asterisks.
Encoding: If this option is selected, special character processing is disabled. It is generally used in the input box.
Depth: Modify the level of the edge label control.
Color tint: Change the Dominant Color of the text.
Make pixel-perfect: allows you to quickly adjust the widget size to the actual pixel size.
Starting: select the coordinate origin position of the widget.
Preview: preview the sprite texture.

Tip:
If you see text flashing or other controls overwrite it, adjust its depth.
If you encounter complex strings (such as italic, punctuation, and parentheses), you need to increase the line width to avoid extra width.
With "\ n" and color, only one label can achieve the following effect.

Uipanel-group controls for managing and optimizing drawcils

Uipanel is used to create the actual ry. You do not need to add uipanel. If you create a control, it will be automatically added. You can create multiple panels for multiple menus.

Parameters:
Normals: displays the normal to check whether the UI is correct.
Gizmos: used to display the ry for selection.
Debug: Use debugging to check the ry of the scenario view. If this is enabled, cancel the gizmos option above.
Widgets: displays the number of controls on this panel.
Draw CILS: You can see how many drawcalls are used. The lower the call, the better.
Clipping: You can select the part you want to display. No cropping is performed by default. ngui automatically switches to a color generator with cropping properties if this option is enabled.
If cropping is enabled, you can use center and size to set the cropping box in pixels.
If you choose to soften edge Cutting, there will be 40 pixels of softening edge for processing softening effect.
Material: Read-only. You can check the number of materials used on the panel. A material occupies one drawcall.

Tip:
By default, if you do not have uipanel, it will be created by the root control and act as its parent object. It is recommended that you use one parent object for multiple controls for ease of management.
If there are no controls under panels, you can safely delete this panel.
If you delete a panels with a control, it and the control below it will disappear, but when you play, all the controls will reappear, because a Xin uipanel is automatically created.
If there is no change, the ry will not be rebuilt, which means that if there is a completely static UI, it will not update the ry without frames. On the contrary, it will be reused to improve the performance.

Uianchor-allows the control to automatically match the screen size to fill the UI with full screen and real pixel size.

Uianchor can be used for multiple purposes, including screen relative positioning at multiple resolutions.
If you place it on the root of the 2D UI, it automatically performs perfect pixel processing.
If it is used for an object, it locates the secondary object on the screen, such as the side or corner.
For example, you can place the Sprite on a single genie to automatically fill the screen, for example, creating a background.

Parameters:
HUD camera is a camera used to draw this object, which is usually automatically selected.
Side: Set the anchor, which has four sides and four corners and centers.
Half pixel offset: enables the control to have a half-pixel displacement to avoid a bug in DirectX 9 on Windows.
Stretch to fill: Zoom fill, which is usually used for background.
Depth offset: used to adjust the depth of the computing point based on the perspective camera.

Tip:
If the object has the uianchor script, its own transform will not accept your modifications because it is controlled by this script. If you want to add a displacement based on this anchor, you can add
Add a child object. For example, if you want to have a control always at the screen offset (100,100), you should do this on the hierarchy panel.
Structure. UI-> anchor-> offset-> widget.
Uianchor can also be used for non-orthogonal cameras.
If uiorthocamera is attached to the camera, use the UI created by uianchor to set the fixed size and position, no matter how large the screen size is.

Events-ngui powerful Event System
Uievents-Event System
You can add the following method script to the control or a game object with a collision box. You can also assign it to the camera, but the camera must have a uicamera script at the same time:
Void onhover (bool isover): returns a Boolean value when the mouse moves out or hovers over a collision. It does not work on the touch device.
Void onpress (bool isdown): returns a Boolean value when the mouse or touch the collision tool.
Void onselect (bool selected): This Boolean value is returned when the mouse or touch is released from onpress.
Void onclick (): It has the same conditions as onselect. It is triggered when you click or touch the collision tool without dragging.
Void ondrag (vector2 delta): triggered when the displacement exceeds the specified threshold when the mouse is moved or the mouse is pressed.
Void ondrop (gameobject drag): When the mouse or touch is released from the different collision tools of ondrag, the transferred parameter is the game object that generates ondrag.
Void oninput (string text): When an onselect occurs, the input is triggered on the same collision generator. Generally, only the uiinput is used.
Void ontooltip (bool show): this command is triggered when the mouse hover time exceeds the tooltipdelay time. The touch device does not work.

You can use uicamera. lastcamera to find out who sent the event. You can use uicamera. lasthit to get who accepts the event and use uicamera. lasttouchposition to get the touch or screen position.

When the following script assigns a collision server, clicking the collision server will output helloworld.