Unity Ngui and Ugui with the model, effects of the hierarchical relationship

Directory

1, introduce two big UI plug-ins Ngui and Ugui
2. Unity Rendering Order Control mode
3, the control of Ngui
4, the control of Ugui
5, the model depth control
6, particle effect depth control
7, Ngui and model and particle effects interspersed level management
8, Ugui and model and particle effects interspersed level management

Write in front

This note is to organize the previous record, in the process of doing the project, encountered a variety of interface interspersed problems, interface level confusion, for example, the mobile phone card or point is fast, resulting in two interfaces cross each other. For the interface, this should be considered a very serious bug, a large part of the reason is that the entire UI framework is not considered this overall, and later determined to clear the level of control, and some of the current project feasible methods of application, interface interspersed with a lot less problems, note I just in the existing framework to hit the patch. If it's a scratch, this note should be useful in the schema UI.

The Ngui plugin used by the previous project, the UI is placed by one person, our client will get these prefab, add the corresponding logical script. But it is precisely this pendulum interface of the people do not pay attention to the level of the interface, each panel, each weight depth not unified management, leading to the development of the late, the interface more up, a lot of interface at the same time, the panel and weight hierarchy is chaotic.

What GUI frameworks do unity have

Unity comes with a GUI system
Generally do not use it to develop the game, as the development of Unity editor more, Unity comes with a very low GUI efficiency, each rendering is a drawcall, not good, can not do what is WYSIWYG.

unity4.6 after the Ugui
Ugui is a Ngui author, and Unity's official new UI system feels good, and the efficiency issue should be better than Ngui. 5.x after Ugui has a great promotion, after Ugui should gradually replace Ngui.
Tried this set of Ugui system very early, it is when I study the interface level, with Ngui display model particle effects did not find a good method, so explored the Ugui, how to control the level, the following will be discussed.

NGUI
is an old Unity UI plug-in, before Ugui is launched, most unity games use the Ngui plug-in development UI, which offers a lot of benefits, provides a common UI control, implements almost all of the required functionality, and is also controlled rigorously in terms of efficiency, The drawcall merge greatly improves control rendering efficiency and also supports 3D GUI. But there are a lot of shortcomings, version update is too frequent, a lot of version bugs, for understanding Ngui developers can use it very well, but for beginners, Ngui is easy to learn, but the drawcall of the reconstruction rules do not understand, will still be inefficient (the notes from the analysis Ngui will be collated later).

Fairygui
A recently discovered cross-platform UI editor, combining various complex UI components and animating the UI, without writing code, can export Unity,starling,egret, Layaair,flash and many other mainstream applications and gaming platforms with one click.

Characteristics:
What you see is what you gain. Easy to use and consistent with Adobe series software, art designers can easily get started.
You can combine a variety of complex UI components in the editor without writing code. No programmer code is required to extend the UI component.
A powerful text control. Support for dynamic fonts, bitmap fonts, and Bmfont-made bitmap fonts, support for HTML syntax and UBB syntax, support for graphic blending.
Powerful list control that supports multiple layouts, supports virtual lists and circular lists, and rejects stuttering even if the number of items in the list is huge.
Support the nine Gongge of the picture and the shop, support picture color change and grayscale, support sequence frame animation edit and use.
Built-in gesture support.
Provides timeline design UI animations to see the location of each frame or other effects in real time.
Use distributed footage in edit state, and automatically package the atlas when publishing. Supports the definition of multiple atlas, automatically supports the extraction of a-channel compression method.
Multi-lingual support.
Various resolutions are adaptive.
Provides a plug-in mechanism to add personality to the editor based on the needs of the project.
Provide a consistent API for each game platform, thanks to the editor's powerful editing capabilities, programmers need to understand a small number of APIs to complete the UI presentation, compared to feathers, NGUI, Ugui and other UI frameworks, Fairygui improve UI production efficiency, reduce costs.

Of course, there are many UI frameworks, such as: Daikon Forge GUI, EZ GUI, 2dTookit, etc., there is time to see, but the main use is still Ngui, Ugui.

Why do you care about rendering order?

In the case of 2D games, the rendering order is related to each level of the display, such as UI in front of the game content, game content and multi-layered. To give a simple example, in the horizontal version of 2D games, often use multi-layer scrolling background, the game objects layered management, can effectively reduce the chance of error, very good control display effect.

For 3D games, the game content is 3D, the UI is generally 2D, there are a lot of times need to put a model ah, particle effects ah, put on the interface, so there is a problem, 3D object and 2D interface relations, such as some interface is on the model, some below, try a lot of ways, can achieve the demand, But not every method is so comfortable.

How the rendering order is controlled in unity

Camera
Camera is the highest-priority rendering order control in unity. The larger the depth, the higher the rendering order.

Sortinglayer and Sortingorder
For this attribute, I am also foggy, not too clear. In the literal sense that the layers are sorted, both canvas and renderer have this attribute, and unity officials have taken it in a single sentence. Priority is second only to camera depth.

Look at the online blog, it is generally written that the sorting layer is a lower level than the camera to control the rendering order of the properties. And then I did a lot of trying to find out that not all renderer components this attribute function, according to the results of the experiment, do the following summary:

The sorting layer in the canvas controls the level of the canvas, which is what is in Ugui, which is discussed below;

The Renderer property in Gameobject is the renderer component that hangs on the gameobject, renderer is the base class for the rendering component, and there are a number of derived classes that have been tested and now know only spriterenderer sorting Layer and sorting order controls the rendering order. So I also think that the sorting layer and sorting order is Unity's support for 2D games;

Renderer components are available in the following categories:

Renderqueue
This is a concept in unity, (at least not previously heard in OpenGL), roughly meaning the order of rendering, which is undoubtedly controlling the order of rendering.

So the general setting of the material renderqueue or directly in the shader set.

In Shaderlab, there are 4 pre-defined render queues, and you can set more values between them:

Background: Indicates rendering before any object
Geometry (default): Render queue for rendering most geometric objects
Alphatest: for Alpha testing
Transparent: For rendering translucent objects
Overlay: Render all objects above

There is four pre-defined render queues, but there can is more queues in between the predefined ones. The predefined queues is:
Background-this the render queue was rendered before any others. You ' d typically with this for things that really need to be in the background.
Geometry (default)-This is the used for most objects. Opaque geometry uses this queue.
Alphatest-alpha tested geometry uses this queue. It ' s a separate queue from Geometry one since it's more efficient to render alpha-tested objects after all solid ones is Drawn.
Transparent-this render queue is rendered after Geometry and alphatest, in Back-to-front order. Anything alpha-blended (i.e. shaders that don ' t write to depth buffer) should go here (glass, particle effects).
Overlay-this render queue is meant for Overlay effects. Anything rendered last should go-here (e.g. lens flares).
Spatial depth
the z-axis in the camera's coordinate system, which controls the depth of the object under the camera, and the depth test in fragment shader, which controls the order in which the rendering is rendered to the screen. (You can see the specific principles of the depth test to see how to control the order of the display)

Ngui how to control the rendering order

Now that you've finished controlling the rendering order in unity, let's talk about the two unique methods of the UI system. First of all, the space position in Ngui does not affect the screen display relationship, because the z-coordinate value is discarded when the vertex is processed internally.

UIPanel
First talk about is UIPanel, used Ngui plug-in friends should be very familiar with this component, in the future will be finishing an analysis Ngui notes, which will focus on uipanel, so this note on a stroke: UIPanel is very important. Ha ha.

Depth
The most Orthodox control panel hierarchy between Ngui is its depth property. The larger the depth, the more it is rendered on the back.

Sorting order:
This property of the Panel can also control the order of the Panel.

Expand

It is prioritized before depth, and is controlled internally by setting the sorting order of render. Take a look at some source code:

UIPanel.cs

public int Sortingorder
{
Get
{
return msortingorder;
}
Set
{
if (msortingorder! = value)
{
Msortingorder = value;
#if Unity_editor
Nguitools.setdirty (this);
#endif
Updatedrawcalls ();
}
}
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
It then finds the index of the Msortingorder and finds that Msortingorder is used in the function updatedrawcalls.

Continue tracking Dc.sortingorder

Mrenderer is then found to be a meshrenderer type, which, as previously stated, does not understand the sorting order of render and does not control the rendering order. However, the Ngui is used internally and can control the rendering order. I was puzzled, and then on the internet for a long time, and finally in the Rain Pine blog Comment area to see: Unity in the 3D object's Z rendering area and the UI area is different, must also be a piece to line. The mesh inside the Ngui generated in the Uidrawcall is a slice, so the sorting order is useful for it, and the previous one creates a cube, which is a 3D object, and 3D objects and UI have no way of controlling the hierarchy.

Why does the depth in a panel have a lower priority than the sorting order?

Because the panel's depth controls the order in which the uidrawcall is generated, affecting the order of the Renderqueue, as mentioned earlier, sorting order and sorting layer have higher precedence than renderqueue.

Uiweight's Depth
Each weight under the same panel can use the weight depth attribute to control their relationship. The depth controls the sequence of vertices passed in weight at panel vertex rebuild, which is known by tracking Ngui source. (I'll tidy up a few articles on the analysis Ngui, including this)

Renderqueue
To use this attribute in Ngui, you have to first look at the three ways UIPanel about Renderqueue:

Automatic: Automatically generated by Ngui
StartAt: Setting a value manually
Explicit: The same value as the Renderqueue under the same panel

Look at the code to understand, UIPanel.cs.

Ugui how to control the rendering order

Canvas
The rendering level can be controlled with the following two properties between different canvases
Sorting Layer
Order in Layer

Canvas and Ngui UIPanel, these calculations do not control the parent-child relationship between two, one count.

Hierarchy in order
In the same canvas, the order of hierarchy determines the hierarchical relationship of the control.

Control of the depth of the model

Space depth
The display of the 3D object is exactly in the order of the space, of course, you can close the depth test in fragment shader, or other affect the frame buffer operation. Just like in OpenGL.

Renderqueue
Renderqueue is suitable for all objects that can be rendered in unity.

Add: With sorting order you can control the hierarchical relationship of the slice model, and Ngui sorting order is realized by this feature.

Control of particle effect rendering levels

Space depth
Consistent with the 3D model.

Renderqueue
Consistent with the 3D model.

Sorting order
The particle system itself is a renderer component that renders a sprite and is a slice that is valid for that property.

Ngui model interspersed between two interfaces

After finishing the above, already understand how each place can control the rendering order, then to solve some of the problems encountered in the project.

Ngui 3D model, the implementation method:
1. Multiple cameras
This approach is certainly achievable and simple and brutal. But think about it and never just add a camera so simple, that's what I did before. And then...... And then...... In the development of the middle and late, a variety of bugs came out, because the multi-camera did not manage well, a variety of problems really difficult to tangle, ha-ah bottom is not what I write, so we top developers on the patch Ah, the whole project code in some places beyond recognition.

Multi-camera is actually using the camera's depth to control the rendering order, generally speaking, the model of a camera, the UI a camera, and so on ... Do you think two cameras are enough? Have you ever thought that there might be an interface on the model? You may say add a camera, but some need to jump on each interface is multiple, and do not directly in the interface to determine which interface is on the top of which interface is below, so it is not feasible to add multiple cameras.

So what should I do?

Later, the idea is that each interface corresponds to a camera, a camera with a model, or a model that is displayed together, using the camera's depth to control their occlusion relationship, but need to manage the camera in the client frame, make a "pool", so that the camera can be reused, and. You may be worried about performance issues, but this is not a problem, a game may have a lot of interfaces, but need to display at most not more than 5, 6 bar, plus the model needs, each time the work of the dead 10, and as long as the camera only exposed to the corresponding interface, which will not cause the loss of performance, The difference is just the transformation matrix.

Control with Renderqueue
Compared to the management of the camera, I think with renderqueue to control will be more simple, after all, Ngui also used a lot of renderqueue to control the relationship, you can see their source:

This is in the UIPanel in the lateupdate, you can see three modes, www.gsktv.net renderqueue specific value of the way, generally we are using automatic mode, This mode automatically calculates the value of Renderqueue based on the drawcall generated in each uipanel.

Regardless of the 3D model, particle effects, or ngui, you can use Renderqueue to control the rendering order, so I think of a way.

Modify Ngui source code, let two UIPanel renderqueue value interval Some, empty a few values to set to model or particle effect, very simple:

See, it's not that simple. Then just set the renderqueue of the model or particle effects displayed on the interface as these empty values.

The script hangs on the corresponding model, and target indicates which panel the model is to be displayed under.

A, B two interface, I adjusted the rendering order: A-model-B

Just a part of this, we just use renderqueue to control the rendering order, but the depth of the space relationship still affects the relationship that is displayed on the screen. In fragment shader, in-depth testing, regardless of who you first render after rendering, as long as all objects are written to the depth buffer, then the rendering order does not really affect the last screen display of the relationship.

So one more step is to close the depth test when rendering the model, for example A, B two interface, the model between AB, then the rendering process is as follows:

A-close depth test-model-open depth test-b

The way to turn off depth testing in shader lab is to:

Zwrite OFF
1
A simple shader is provided here:

Shader "Custom/depthtest" {
Properties {
_maintex ("Base (RGB)", 2D) = "White" {}
}
Subshader {
Tags {"Queue" = "Transparent"}

Zwrite OFF

LOD 200

Cgprogram
#pragma surface surf Lambert

Sampler2d _maintex;

struct Input {
FLOAT2 Uv_maintex;
};

void Surf (Input in, InOut surfaceoutput o) {
Half4 C = tex2d (_maintex, In.uv_maintex);
O.albedo = C.rgb;
O.alpha = C.A;
}
Endcg
}
FallBack "Diffuse"
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21st
22
23
24
25
26
27
28
29
Supplement: The model and the model can also be used in the above rendering process to control the relationship between the screen display.

Show only one interface at a time
At the same time, only one interface is displayed on the screen, and each time the new interface is opened, the following interface is hidden, even the model and the particles are hidden away. So there is no two interface at the same time to display the situation.

Space depth
In the case of other control conditions, the Ngui and the model under a camera are controlled by the normal rendering pipeline, that is, the spatial position relationship can affect the rendering to the screen hierarchy. Note the "thickness" of the model.

Ngui particle effects across two interfaces

Particle effects can also be controlled using the camera's depth, but there are a lot of particle effects, so it's not possible to use a camera, so this is a straightforward rule.

Sorting Order
The particle effect itself is rendered with a "point Sprite", where each particle is a point sprite that can be viewed as a piece model, and the slice model can be affected by that attribute.

You can do a test by hanging the following script on the particle effect:

public class SortUtil:www.wuxing1688.cn Monobehaviour {
void Awake ()
{
Renderer.sortingorder = 1;
}
}
1
2
3
4
5
6
Sorting order defaults to 0, existing A, b two interfaces, set a panel to 0, B's Panel setting 2:

a:0
Particle Effects: 1
B:2

The particle effect is just inserted between A and B, and the effect is also a particle effect interspersed between a and B.

Added: unity5.3 Particle effects Support Direct setup of sorting order

Renderqueue
Here there is no model and Ngui cross trouble, just need to complete the Renderqueue www.yinb666.cn settings can be, do not need to change shader.

Suppose A, B two interface, renderqueue the value of the size relationship:
A < particle effects < B

Referring to the specific method of the above model, let the renderqueue of the particle effect be inserted between A and b two interfaces.

Ugui model interspersed between two interfaces

Multiple cameras
The same can be done with multiple cameras, but this way is always not very good, not recommended.

Shader Lab
In the fragment shader, the input mask data is used to filter the data of the model fragment, which conforms to the condition of the left, and does not conform to the discard. This approach actually applies to Ngui.

Specific how to do can refer to the Rain Pine Momo a blog post: here.

Rendertexture
Image in Ugui can accept a material, can put rendertexture on a material. This can be controlled according to the sort of Ugui itself.

Ugui particle effects across two interfaces

Sorting order
As with Ngui, the canvas component supports these properties, as can be controlled by sorting order.

Rain Pine Momo also over an article, I will not say here, here

Summarize

Write so much, roughly summed up the common way, more familiar with Ngui, so for the Ngui in the various are relatively clear, write more detailed. The Ugui may be summarized not very complete, so will continue to summarize. In the article mentioned a few places shader lab, I explained here, using Shader Lab can also complete the above various occlusion relations, hierarchical relationship, but this article is not clear, mainly considering the length, so later will be specifically written shader www.lxinyul.cc Lab implementation method, the idea and the Rain pine Momo.

Written in the last

These things are the actual problems encountered in the project, as well as thinking and try to use, now take notes into this article, there are any errors directly comments together to discuss, grow together.

Unity Ngui and Ugui with the model, effects of the hierarchical relationship