Shulou(Shulou.com)06/02 Report--

UICamera-can be added to any camera, contains event system.

UICamera is an important part of every UI. It is responsible for sending all NGUI activity in Camera. If there is only one Camera in the scene, make sure it comes with the UI Camera script. If there are multiple cameras, make sure that at least the camera used to render the UI has UICamera scripts. When this script is placed on the main camera, everything in the game scene will have OnClick, OnHover, OnDrag, etc. events.

parameters

Tooltip Delay: Sets how many seconds hover over an object before executing the OnTooltip event.

If you are using an Orthographic Projection camera, it is recommended that you set the camera's Size size to half the current resolution height. For example, for iPad screen resolution of 1024*768, set Size to 384. Another method is to keep Size equal to 1, zoom UI Root to the reciprocal of this value, for example, on iPad to get the perfect size you need to set Root zoom to 1/384 or 0.002604167. The second method is easier to implement, but the object in the scene view will be smaller than other objects.

If you still don't know how to set the size of an orthographic camera, try this image below.

UIAtlas-Define the texture map of sprites

UIAtlas is a container that contains coordinate information for a bunch of sprites. If you're not familiar with the concept. You can think of it this way: it is more efficient to use a large map with many small maps than several small maps. The smaller ones in the big map are called sprites and the bigger ones are called atlas.

Before you can use NGUI you need to create an atlas (or use an existing one). You can learn about Atlas practices here. You can use UI Texture directly, but it doesn't solve all problems.

Material: is the material describing the drawing of this atlas. Unlit shaders are generally recommended, such as.Unlit - Transparent Colored for NGUI.

TP Import: Used to import sprites exported from TexturePacker. Just drag and drop the exported Txt file and all sprites.

Coordinates: This allows you to switch from a pixel based coordinate system to a UV based coordinate system. It's usually done in pixel coordinates, but if you need to resize the texture, switch to texture coordinates first.

New Sprite: Allows the currently selected sprite to create new sprites for the template.

Delete: Delete the selected sprite.

Sprite: All sprites in use can be selected from the drop down list.

Edit Name: Rename the name of the sprite.

Outer Rect: Sets the outer border of the sprite.

Inner Rect sets the sprite's inner border, which can be skipped if you don't use UISliced Sprite.

Padding: fine tuning the offset of the correction sprite

Correction: The coordinates of the base correction sprite use perfect integer pixels.

Show: Check the sprite's position in the set.

prompt

You can organize sprites into groups to create multiple galleries. As long as the gallery shares the same material, the controls will still use very few DrawCalls.

For best results, it is recommended to set the wrap mode of the texture to "Clamp" and the format to "Truecolor."

An atlas of similar textures is a good way to do this, but minimize the number of atlases used at the same time.

If you are using the Texture Packer tool to create an atlas, select unity3d in the Output Settings.

If you are creating your gallery in Photoshop, you can find out the sprite's location and size by selecting Tools with the info panel.

UIFont-Font Gallery

UIFont can set font data and materials used by UI. You can use the free BMFont or the more professional Glyph Designer. You can make fonts once and save them as a preset for new labels. Parameters:

Import Font: Used to import FNT(suffix changed to TXT) data exported by Glyph Designer. or BMFont.

UIAtlas: The atlas used to set the font texture, depending on whether UIAtlas is selected, you will see the following options

If UIAtlas has been specified, you can choose to use font sprites.

If UIAtlas is not specified, you can select the material used to draw the font. In NGUI it is common to use shaders under the category "Unlit," such as "Unlit - Transparent Colored."

You can adjust the font within the pixel rectangle of the material texture.

Quickly correct perfect pixel coordinates, rounding to the nearest pixel value.

Spacing: You can adjust the spacing between characters.

Show: Check the position of fonts in texture maps.

prompt

For best results, it is recommended to set the wrap mode of the texture to "Clamp" and the format to "Truecolor."

You can combine multiple fonts into an atlas. This way the entire UI uses these fonts and still maintains a DrawCall.

You can add bevels, shadows, strokes, etc. to your font, just make sure you set enough margins and spacing before exporting BMFont.

UISprite-Draw a sprite from an atlas

UISprite is the second, less commonly used plug-in (the first is UI Texture), whose sole purpose is to draw part of an atlas.

parameters

Transform: is a very important component, each control can be transformed to adjust the position and size. It also affects "Make Pixel-Perfect". You can choose between it and UICamera to make "Perfect Pixel" adjustments.

UI Atlas: Used to specify the atlas to use. Drag or press the button on the left to select the most recently used gallery.

Sprite: Select sprites to use in the gallery. After choosing a good elf. Clicking on "Make Pixel-Perfect" automatically adjusts the Transform's size for you.

Depth is to avoid Z sorting with Unity (inefficient), and if you want to rotate UI windows. Simply sorting by adjusting the Z axis of each control's Transform will not work. So we're going to sort at this depth.

Color Tint: Used to adjust the hue.

Make Pixel-Perfect: lets you quickly adjust the size of a control to its actual pixel size.

Pivot: Select the coordinate origin location of the subassembly.

Preview: Preview sprite textures.

Tip:

If you see two controls flashing, it means you set the same Depth to overlap, and you adjust the different depths so they don't overlap.

Do not mix multiple controls together, otherwise it will affect the perfect pixel function. Be careful to keep creating new child objects when adding new controls.

You can also use the Perfect Pixel button before moving the group control.

Label-Draws a text label in the specified font

UILabel is used to display text. Support multiple lines, just use "\n" to wrap. Allow [RrGgBb] to create color text

Parameters:

Transform: is a very important component, each control can be transformed to adjust the position and size. It also affects "Make Pixel-Perfect". You can choose between it and UICamera to make "Perfect Pixel" adjustments.

UIFont: You can choose the font to use for this label. You can drag presets or press buttons to select the most recently used font.

You can use "\n" to determine whether a label is multi-line or single-line, and you can also define color text using hexadecimal color values, starting with [RrGgBb] and ending with [-]. Hello [FF0000]World[-]! "And the final result is that World is red text.

Line Width: Specifies the maximum width of a line of text, cutting off excess if it is a single line of text. Multiline text will wrap automatically according to width.

Multi-line: When selected, labels wrap when they reach maximum width.

Password: If checked, the character will be automatically converted to an asterisk.

Encoding: Check to turn off special character processing, generally used for input boxes.

Depth: Change the level of the edge label control.

Color Tint: Change the dominant color of text.

Make Pixel-Perfect: lets you quickly adjust the size of a control to its actual pixel size.

Pivot: Select the coordinate origin location of the subassembly.

Preview: Preview sprite textures.

Tip:

If you see text flashing or see it being overwritten by other controls. Then you have to adjust its depth.

If you encounter complex strings (italics, punctuation, parentheses mixed) you need to increase the line width to avoid excessive width.

With "\n" and color, just one label can do the following.

UIPpanel-groups controls for managing and optimizing DrawCalls

The UI Panel is responsible for creating the actual geometry. You don't have to add a UIPpanel specifically, just create a control and it will be added automatically. You can create multiple Panels for multiple menus.

Parameters:

Normals: Display normals to check whether the UI is positive or negative.

Gizmos: Used to display geometry, available for selection.

Debug: Check scene view geometry with debugging if you have this on. You should cancel the Gizmos option above.

Widgets: Shows how many widgets are on the Panel.

Draw Calls: You can see how many DrawCalls are used, the lower the better.

Clipping: You can select the part you want to display, default is not clipped. If this option is turned on,NGUI will automatically switch to a shader with clipping attributes.

If crop is enabled. You can set the crop box by Center and Size. Units are pixels.

If Soft Edge Cuts is selected, there will be a soft edge of 40 pixels for processing the soft effect.

Material: is read-only, you can see how many materials are used in the panel. A material will occupy a DrawCall.

Tip:

By default, if there is no UIPpanel, it will be created by the root control as its parent. And it's best to let you multiple controls with a parent object, easy to manage.

If there are no controls under Panels. You can safely delete this panel.

If you delete a Panel with controls, it and the controls underneath it disappear, but when you play it, all the controls reappear because a new UIPpanel is automatically created.

When there is no change, the geometry is not rebuilt, which means that if you have a completely static UI, you don't update the geometry every frame, but it's reused to improve performance.

UIAnchor-UI that enables controls to automatically fit screen size, fill the screen, and maintain true pixel size.

UIAnchor has a variety of uses, including relative positioning of screens in a variety of resolutions.

If you put it on the root of the 2D UI, it automatically performs pixel perfect processing.

If used with an object, it aids in positioning objects on the screen, such as sides or corners.

For example, on a sprite, can be used to automatically fill the screen sprite, such as a background.

Parameters:

HUD Camera is the camera used to draw the object, usually selected automatically.

Side: Set anchor point, 4 sides, 4 corners and center to choose from.

Half Pixel Offset: Make controls have a half pixel offset to avoid a Bug in DirectX 9 on Windows machines.

Stretch To Fill: Zoom fill, usually used for background.

Depth Offset: Used to adjust the depth of a calculated point when based on perspective cameras.

Tip:

If an object has a script called UIAnchor, its Transform will not accept your changes because it is controlled by the script. If you want to add a displacement based on this anchor point, you can add a child object. For example, if you want a widget to always be at the screen offset (100,100), you should structure it like this in the hierarchy pane.UI->Anchor->Offset->Widget.

UIAnchor can also be used with non-orthogonal cameras.

If a UIOrthoCamera is attached to a camera, the interface created with UIAnchor will have a fixed size and position, no matter how large you change the screen size.

Events-NGUI Powerful event system

UIEvents-Event Systems

You can add the following method scripts to controls or GameObjects with Collision Boxes, or to cameras, but only if the camera has UICamera scripts:

void OnHover (bool isOver): Returns a Boolean value when the mouse moves out or hovers over a collider. Doesn't work on touch devices.

void OnPress (bool isDown): Boolean returns when mouse or touch collider occurs.

void OnSelect (bool selected): This boolean will be returned when the mouse or touch is released from OnPress.

void OnClick(): Same conditions as OnSelect, triggered when the collider is clicked or touched and no drag occurs.

void OnDrag (Vector2 delta): Triggered when the mouse is moved or the touch is pressed beyond a certain threshold.

void OnDrop (GameObject drag): Triggers when the mouse or touch is released on a different collider injury from which OnDrag occurs. The parameter passed is the game object that generated the OnDrag.

void OnInput (string text): Triggers input on the same collider when an OnSelect occurs. Usually only UIInput uses it.

void OnTooltip (bool show): Triggers this command when the mouse hover exceeds tooltipDelay. Touching the device does not work.

You can use UICamera.lastCamera to find out who sent the event, UICamera.lastHit to find out who received the event, and UICamera.lastTouchPosition to find out where the touch or screen is.

When the script below assigns a collider, clicking the collider outputs HelloWorld.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.