A probe into the new UI system of Unity4.6 (Ugui)

First, Introduction

Unity finally integrates the WYSIWYG UI solution (VIDEO) within the upcoming 4.6 release. In fact, from recent releases, unity has been expanding the system to ensure that the ideal UI system is eventually implemented. This paper attempts to give a general understanding of the system through preliminary introduction and trial, so as to further evaluate the UI system is not easy to use, suitable for the project. To avoid digging too deep, further trials and evaluations will be discussed in "Developing custom toggle slider controls with Ugui." For ease of discussion, this new UI system is abbreviated as Ugui, and X-ui refers to the existing third-party UI plug-in.

(The test is only for unity 4.6.0 Beta 10, and the official version may differ.) At present unity does not provide documents, I half a bucket of water, welcome to the masses in Weibo or issues spit groove! ）

Two, Rect Transform

Rect transform inherits from transform, which is the most significant difference between Ugui and X-ui [Note 1]. When you add a UI component for empty Gameobject, Transform is automatically converted to rect Transform. The Rect transform as far as possible integrates X-ui common anchor(relative to the parent object's anchor point), pivot(midpoint), stretch(extrude) and other properties. It is worth mentioning that the anchor here is rect, not Vector2, because it is not only used for offsets, but also for scaling. Click on the transform icon on the rect and quickly set it up in the pop-up Anchor presets panel.

This panel is still not intuitive enough, we can think of it as a table, the above four icons for the Set column, the left four icons for setting the row, you can also directly click on the inside of the 16 icons at the same time set the row and column. The strong point is that when you hold down shift , you can set pivotat the same time, and you can see that the control is not moving but the position is already changing. If you hold down alt, set anchor and set positionat the same time. If shift and ALT are pressed simultaneously, you can set anchor, Pivot, and position at the same time. This is a much smarter way to operate than X-ui, and it's helpful for multi-resolution adaptation.

In addition to this, the Rect transform also provides the blueprint and lock Rect options, which are used to position the rotated element, which is explained to be able to remain in place at the time of setting the anchor, temporarily not understood.

Third, sort

Ugui can be directly up and down in the hierarchy panel to sort the rendering (Support program control), the more the upper UI will be rendered first, compared to X-ui's global depth sort, such a drag design is pleasing to the user. It is also structurally similar to the local depth used by ex2d, so that go is only sorted with other go in the same class, and it is easy to develop components. It is important to note that the sorting is only relative to the UI, the other 3D objects are rendered in the original order, and the UI is always rendered on top of the 3D object. This makes it impossible for you to insert the particle system directly between the two UI as you would with ex2d.

This kind of ordering without filling in the depth value, easy to cause The Free edition user who does not have the manual sprite packing to encounter the increase of draw call. Because the depth of all objects are set automatically, unity guarantees that the depth of each object is unique. Let's say you have a grid control with two sprites per control, but you don't have to spell the sprite on the same poster. As you copy a new grid, draw call will increase by 2, because unity will be drawn in grid units. Pro users do not have to worry about this problem because of the sprite packing mechanism. (in ex2d, this is done by default rendering "unordered", which is also the default for Ngui.) In this case, the ex2d will first be drawn in the same sprite as the same depth, so the draw call is 2 regardless of the number of squares. Unless you want to render a grid-based rendering [note 6], you can set the rendering mode to "ordered" in ex2d, or set a different depth for each grid in Ngui.

Iv. controls

Ugui comes with a control, where image is used to display the Sprite,raw image used to display texture,image mask and rect mask for clipping. All controls are monobehaviour and can be dragged directly from the inspector to other Gameobject.

4.1 Image

Ugui the image control to display the picture, the picture is a sprite, which means that pro users no longer have to make Atlas, compared to X-ui is a big step forward, free users can do packing. Image provides simple , sliced, tiled, Filled Four effects, and x-ui consistency.

4.2 Button

In Ugui, the button control consists of two gameobject, one containing the image, button, and so on component, and a component containing text. This design is very modular, the only problem is that when the user wants to modify the button, it is easy to accidentally select a label or other entity.

Button component primarily performs transition and event two operations.

• Transition can choose to change the color, change the map or custom animation, easy to use, but also can use the animation to define a richer performance. I'll write another article that shows the transition of the button.
• events are also WYSIWYG, in the onclick can add more than one command, the command can choose the corresponding target, operation and parameters. Simple to use, with the need to change program control.
  • The target can be any object, such as other gameobject or asset in project
  • Actions can be parameters that need to be set or methods that are called
  • Parameters are divided into dynamic and static,dynamic to bind the control's parameters one way to the target parameter, and static sets the target parameter to a preset value. Buttons do not have dynamic parameters, Toggle, slider, and other controls.

V. Events5.1 Event Trigger

Ugui controls often provide only one self-brought event , and the event trigger component needs to be added in response to more basic events . The event trigger contains the following events:

• Pointerenter, Pointerexit, Pointerdown, Pointerup, Pointerclick
• Move, Drag, Drop, Scroll
• KeyDown, KeyUp, Select, deselect

You can add multiple events in the event trigger, each of which can have multiple commands added, and the usage and control are consistent with their own events.

5.2 Graphic Raycaster

Each canvas has a graphic raycaster that gets the Ugui control that the user has selected. Multiple canvases set the order of event responses by setting the priority of graphic raycaster. When canvas uses world space or camera space, the block option of the Graphic Raycaster can be used to set occlusion targets.

5.3 Event System

Once the Ugui control is created, Unity creates a gameobject called EventSystem, which controls all types of events at the same time [Note 4]. You can see that unity comes with two input Module, one for responding to standard input, and one for responding to touch operations. The input module encapsulates the call to the input block, triggering each Event Triggerbased on user action. In theory, we can write our own input Module, which encapsulates the input of various external devices, as long as the gameobject of the event system is added to the line.

The Event system component manages multiple input modules and various raycasteruniformly. It calls more than one input module per frame to handle user actions, and it is also responsible for invoking multiple raycaster to get the Ugui controls for user clicks, as well as 2D and 3D objects.

Vi.. Performance

The

2D rendering is divided into two categories, one of which is simple sprite drawing, which is used to render scenes, characters, particles, and so on, and the other is UI drawing. Unity divides the two types of requirements into Spriterenderer and Ugui , which are made up of Transform  +   Spriterenderer implementation, which is Rect Transform  +  canvasrenderer  +  UI Control  +  canvas[Note 2] implementation, Such two sets of relatively independent mechanisms are more reasonable to inherit from Spriterenderer than X-ui UI controls. Because in the 2D game spriterenderer only need to care about the most basic patch rendering, focus on efficiency, and UI focus on all kinds of transformations, alignment, operation, animation, but also often need resize VBO. If the spriterenderer is designed to take care of the UI, it will be as complex as the x-ui, which is bad for both user experience and performance.

Here we discuss the rendering mechanism of Ugui, when we render multiple controls that use the same sprite, there is no dynamic batching, but Drawcall does not rise. This means unity uses a dedicated set of batching mechanisms internally, merging the VBO of multiple controls into one beforehand. That is, Canvasrenderer is not responsible for the actual rendering, but rather the batch rendering of multiple canvasrenderer by the canvas, which is consistent with some x-ui practices. In this way, individual batch designs may make performance better than spriterenderer and may result in worse performance. Performance will be better in the ex2d has been confirmed, the main reason is to better balance the CPU and GPU load , and to achieve a more optimized batching algorithm . Worse performance, in last year's old version of the Ngui test also encountered, the root cause or optimization is not in place caused (not derogatory, different tools and market-oriented are different). and Unity's spriterenderer on the phone's rendering run is ex2d flat, and canvasrenderer faster than Spriterenderer [Note 3], so Ugui performance do not worry. Since there is no Mac version at this time, I will run a mobile test after the release of the official version.

Vii. Summary

Ugui function is perfect, simple operation, very ground gas. It can be said that Ugui is a relative x-ui of the overall upgrade, the overall structure is more rigorous, to achieve clearer. The 4.5 module Manager,ugui is available as a package and can be upgraded quickly [Note 5]. As one of ex2d v2.0 developers, I am optimistic about its future development, Ugui will replace X-ui on most occasions.

Initial experience:

7.1 Highlights

• Recttransform
• event/one-way data binding
• Sort directly in Hierarchy
• Pro users can use sprites for dynamic puzzles without manual puzzles

7.2 Insufficient

• There is no need to fill in the order of depth values, which can easily lead to free version users who do not have manual sprite packing to encounter the increase of draw call.

7.3 Little Regrets

• The Anchor presets panel is not intuitive enough.
• When the user wants to modify the button, it is easy to modify to the label.
• When the target node in the hierarchy panel expands the child nodes, it is not possible to drag the other nodes directly below the target.

7.4 Minor problems

• There is a problem with the input component's support for the arrow keys.
• When the Game View dock is in the main window, top is positioned incorrectly, and the height of the toolbar is counted.

Viii. notes

1. When we developed the class Entity-component framework on other platforms, we discussed why unity does not have special handling of transform at the bottom, to avoid the plug-in author manually caching transform to optimize query transform overhead. Even the transform is integrated directly into the gameobject. The reason is that the current Transform is 3D, it is possible to launch 2D Transform in the future. So unity has retained the independence of transform in previous versions.
2. I'm not entirely sure it must be canvas, but with the interface between canvas and Canvasrenderer, this is a big possibility.
3. Based on better balanced CPU and GPU load + more optimized batching algorithm, the strength of unity canvasrenderer beyond Spriterenderer problem is small. And if performance does not improve, Ugui as long as 2D Toolkit to add meshrenderer to each control directly, that is to say Ugui directly with the existing spriterenderer is good, It is unlikely that adding new canvasrenderer performance will be slower.
4. Unity allows multiple event system to exist simultaneously, but only one at a time can take effect.
5. Ugui controls, event modules are provided in the form of packages, %unity%\editor\data\unityextensions\unity\guisystem\4.6.0in the program directory, UNITY Two runtime versions of DLLs are available for authoring and publishing, respectively. The main difference is that the release version does not contain some code that is used in the editor. Because DLLs have no way to conditionally compile by pre-compiling symbols, unity uses this approach to trade-offs, users do not have to manually switch the DLL version when publishing, to meet the closed source, but also take into account the efficiency of execution. This will throw off the third-party plug-in a few streets, many plug-ins in this issue is not sacrificing performance is helpless open source.
6. Sometimes it is necessary to render in grid units, for example, when the lattice needs to overlap, this requirement is not common in the UI.

A probe into the new UI system of Unity4.6 (Ugui)