prefacio
Este artículo es para resolver todo tipo de problemas intercalados de interfaz y confusión de niveles de interfaz en el proceso de trabajo en el proyecto.Por ejemplo, el teléfono móvil está atascado o se hace clic demasiado rápido, lo que hace que las dos interfaces se crucen entre sí.
Hay un grupo de intercambio de aprendizaje de unidad aquí.
Para la interfaz, esto debe considerarse como un error muy grave. Gran parte de la razón es que todo el marco de la interfaz de usuario no considera esto como un todo. Más tarde, decidí averiguar el nivel de control y aplicar algunos métodos factibles. para el proyecto actual. La interfaz está intercalada. Mucho menos, tenga en cuenta que solo estoy parcheando el marco existente. Si está comenzando desde cero, espero que este artículo pueda ayudarlo en lo que respecta a la arquitectura de la interfaz de usuario.
El complemento NGUI utilizado en el proyecto anterior, la interfaz de usuario fue colocada por una persona, y nuestro cliente obtuvo estos prefabricados y agregó los scripts lógicos correspondientes. Pero es precisamente la persona que colocó la interfaz la que no prestó atención al nivel de la interfaz. La profundidad de cada panel y cada widget no se maneja de manera uniforme. Como resultado, en las etapas intermedias y posteriores del desarrollo, cuando hay son más interfaces, cuando aparecen muchas interfaces al mismo tiempo, los niveles de paneles y widgets están desordenados. .
¿Qué marcos de GUI tiene Unity?
1. Sistema GUI propio de Unity
Generalmente, no se usa para desarrollar juegos. Como una extensión del editor de Unity, está más desarrollado. La GUI que viene con Unity es muy ineficiente. Cada renderizado es un DrawCall, que no es fácil de usar y no puede lograr lo que desea. ver es lo que obtienes.
2. UGUI después de la unidad 4.6
UGUI fue desarrollado por el autor de NGUI. El nuevo sistema de interfaz de usuario oficial de Unity se siente muy fácil de usar. En cuanto a la eficiencia, debería ser mejor que NGUI. Después de 5.x, ugui se ha mejorado mucho y ugui debería reemplazar gradualmente a ngui en el futuro.
Probé este sistema ugui hace mucho tiempo. Fue cuando estaba estudiando el nivel de interfaz y no pude encontrar una buena manera de mostrar los efectos de partículas del modelo con NGUI, así que exploré ugui y se discutirá cómo controlar el nivel. luego.
3. IU
Es un complemento de interfaz de usuario de Unity anticuado. Antes de que se lanzara ugui, la mayoría de los juegos de Unity usaban el complemento NGUI para desarrollar la interfaz de usuario. Tiene muchos beneficios. Proporciona controles de interfaz de usuario comunes e implementa casi todas las funciones requeridas. En términos de eficiencia También está estrictamente controlado.La fusión DrawCall mejora en gran medida la eficiencia de representación del control, y también es compatible con GUI 3D. Sin embargo, también hay muchas deficiencias. La versión se actualiza con demasiada frecuencia y tiene muchos errores. Los desarrolladores que conocen NGUI pueden hacer un buen uso. Pero para los principiantes, NGUI es fácil de usar y fácil de usar, pero lo hacen. Si no comprende las reglas de reconstrucción de DrawCall, seguirá siendo ineficiente (las notas para analizar NGUI se resolverán más adelante).
4. FairyGUI
Un editor de interfaz de usuario multiplataforma recientemente descubierto, que combina varios componentes de interfaz de usuario complejos y diseña efectos de animación para interfaz de usuario, sin escribir código, puede exportar Unity, Starling, Egret, LayaAir, Flash y otras aplicaciones y plataformas de juegos principales con un solo clic.
característica:
- Lo que ves, es lo que tienes. La operación es simple y los hábitos de uso son consistentes con el software de la serie Adobe, por lo que los diseñadores de arte pueden comenzar fácilmente.
- Puede combinar varios componentes de interfaz de usuario complejos en el editor sin escribir código. No se requiere codificación de programador para extender los componentes de la interfaz de usuario.
- Potentes controles de texto. Admite fuentes dinámicas, fuentes de mapa de bits y fuentes de mapa de bits creadas por BMFont, admite la sintaxis HTML y la sintaxis UBB, y admite la combinación de imágenes y texto.
- Potente control de lista, admite múltiples diseños, admite listas virtuales y listas circulares, y se niega a quedarse atascado incluso si la cantidad de elementos de la lista es enorme.
- Admite el procesamiento de imágenes en mosaico y cuadrícula de nueve cuadrados, admite la decoloración de imágenes y la escala de grises, y admite la edición y el uso de animaciones de cuadros de secuencia.
- Soporte de gestos incorporado.
- Proporciona efectos de animación de interfaz de usuario de diseño de línea de tiempo, puede ver la posición de cada cuadro u otros efectos en tiempo real.
- Use materiales dispersos en el estado de edición y empaquete automáticamente el atlas al publicar. Admite la definición de múltiples atlas y admite automáticamente el método de compresión para extraer el canal A.
- Soporte multi-idioma.
- Adaptación de varias resoluciones.
- Proporciona un mecanismo de complemento para agregar funciones individuales al editor de acuerdo con las necesidades del proyecto.
- Proporciona una API coherente para cada plataforma de juego. Gracias a las potentes funciones de edición del editor, los programadores solo necesitan comprender algunas API para completar la presentación de la interfaz de usuario. En comparación con los marcos de interfaz de usuario como Feathers, NGUI y UGUI, FairyGUI mejora la eficiencia de producción de la interfaz de usuario. Reduciendo costos.
Por supuesto, hay muchos marcos de interfaz de usuario, como: Daikon Forge GUI, EZ GUI, 2dTookit, etc. Puede echar un vistazo cuando tenga tiempo, pero actualmente se utilizan principalmente NGUI y UGUI.
¿Por qué debería preocuparse por el orden de renderizado?
1. Si se trata de un juego en 2D, el orden de representación está relacionado con la secuencia de visualización de cada nivel. Por ejemplo, la interfaz de usuario se encuentra frente al contenido del juego y el contenido del juego tiene varios niveles. Para dar un ejemplo simple, en un juego 2D horizontal, a menudo se usa un fondo de desplazamiento de varias capas, y la gestión en capas de los objetos del juego puede reducir efectivamente la posibilidad de errores y controlar bien el efecto de visualización.
2. Para los juegos 3D, el contenido del juego es 3D y la interfaz de usuario generalmente es 2D. Hay muchas ocasiones en las que necesita colocar un cierto modelo o efecto de partículas en la interfaz, por lo que hay un problema, la relación entre los objetos 3D y Interfaz 2D. Por ejemplo, algunas interfaces están por encima del modelo y otras por debajo. He probado muchos métodos y puedo lograr los requisitos, pero no todos los métodos son tan cómodos.
Cómo controlar el orden de renderizado en Unity
1. Cámara
La cámara es el primer control de orden de renderizado en Unity. Cuanto mayor sea la profundidad, más tarde en el orden de renderizado.
2. sortingLayer 和 sortingOrder
Para este atributo, también estoy en la niebla, y no lo entiendo muy bien. De acuerdo con el significado literal del orden de las capas, Canvas y Renderer tienen esta propiedad, y Unity la trajo oficialmente en una oración. La prioridad es superada solo por la profundidad de la cámara.
Mirando blogs en línea, generalmente se escribe que la capa de clasificación es un atributo que controla el orden de renderizado un nivel más bajo que la Cámara. Luego hice muchos intentos y encontré que no todos los componentes de Renderer tienen esta propiedad, de acuerdo a los resultados de los intentos se hace el siguiente resumen:
La capa de clasificación en Canvas puede controlar el nivel de Canvas, que es algo en ugui, que se discutirá a continuación;
La propiedad de renderizador en GameObject es el componente Renderer que cuelga en GameObject. Renderer es la clase base del componente de renderizado. Hay varias clases derivadas a continuación. Después de la prueba, solo se sabe que la capa de clasificación y el orden de clasificación de SpriteRenderer controlan el renderizado. pedido. Entonces, también creo que la capa de clasificación y el orden de clasificación son lo que Unity admite para juegos 2D;
El componente renderer tiene las siguientes categorías:
3. Cola de procesamiento
Este es un concepto en la unidad (al menos no lo he escuchado antes en opengl), lo que significa aproximadamente el orden de representación, que sin duda controla el orden de representación.
Por lo general, configure el renderQueue del material o configúrelo directamente en el sombreador.
En ShaderLab, hay 4 colas de procesamiento predefinidas, puede establecer más valores entre ellas:
Fondo: significa representación antes de cualquier objeto
Geometría (predeterminado): la cola de renderizado utilizada para renderizar la mayoría de los objetos geométricos
AlphaTest: para pruebas alfa
Transparente: se utiliza para renderizar objetos translúcidos.
Superposición: renderizar encima de todos los objetos
Hay cuatro colas de procesamiento predefinidas, pero puede haber más colas entre las predefinidas. Las colas predefinidas son:
Fondo: esta cola de procesamiento se procesa antes que cualquier otra. Por lo general, usaría esto para cosas que realmente necesitan estar en segundo plano.
Geometría (predeterminada): se utiliza para la mayoría de los objetos. La geometría opaca usa esta cola.
AlphaTest: la geometría probada alfa utiliza esta cola. Es una cola separada de la de Geometría, ya que es más eficiente renderizar objetos con prueba alfa después de dibujar todos los sólidos.
Transparente: esta cola de procesamiento se procesa después de Geometry y AlphaTest, en orden inverso. Cualquier cosa mezclada alfa (es decir, sombreadores que no escriben en el búfer de profundidad) debe ir aquí (vidrio, efectos de partículas).
Superposición: esta cola de procesamiento está diseñada para efectos de superposición. Todo lo que se renderice en último lugar debe ir aquí (por ejemplo, destellos de lente).
1. Profundidad espacial
El eje Z debajo del sistema de coordenadas de la cámara controla la profundidad del objeto debajo de la cámara, y la prueba de profundidad se realiza en el sombreador de fragmentos, que controla el orden de representación en la pantalla. (Puede consultar los principios específicos de la prueba de profundidad para comprender cómo controlar el orden de visualización)
Cómo NGUI controla el orden de renderizado
Bueno, después de hablar sobre el método para controlar el orden de representación en Unity, hablemos sobre los métodos únicos de los dos sistemas de interfaz de usuario. En primer lugar, la posición espacial en NGUI no afectará la relación de visualización de la pantalla, porque el valor de la coordenada Z se descarta cuando procesa los vértices internamente.
1. Panel de interfaz de usuario
Lo primero de lo que hablar es de UIPanel. Los amigos que han usado el complemento NGUI deben estar muy familiarizados con este componente. En el futuro, organizaré una nota sobre el análisis de NGUI, que se centrará en UIPanel, por lo que esta nota será cubierto de una sola vez: UIPanel es muy importante. Jaja.
1 profundidad:
El control más ortodoxo de la relación jerárquica entre paneles en NGUI es su atributo de profundidad. Cuanto mayor sea la profundidad, más tardío será el renderizado.
orden de clasificación:
Esta propiedad de panel también puede controlar el orden de los paneles.
expandir
Su prioridad es anterior a la profundidad y se controla internamente estableciendo el orden de clasificación del renderizado. Echemos un vistazo a un código fuente:
> public int sortingOrder
｛
get
｛
return mSortingOrder;
｝
set
｛
if (mSortingOrder != value)
｛
mSortingOrder = value;
#if UNITY_EDITOR
NGUITools.SetDirty(this);
#endif
UpdateDrawCalls();
｝
｝
｝Luego busqué el índice de mSortingOrder y descubrí que mSortingOrder se usaba en la función UpdateDrawCalls
Seguir siguiendo dc.sortingOrder
Luego descubrí que mRenderer es del tipo MeshRenderer.Como dije antes, no entiendo el orden de clasificación del renderizado y no puedo controlar el orden de renderizado. Sin embargo, NGUI lo usa internamente y puede controlar el orden de renderizado. Estaba desconcertado, luego revisé la información en Internet durante mucho tiempo y finalmente vi en el área de comentarios del blog de Yusong: el área de representación Z de objetos 3D en Unity es diferente del área de la interfaz de usuario, y debe ser la misma pieza. La malla en el UIDrawCall generado en NGUI son todos los segmentos, por lo que el orden de clasificación es útil para ello, y se crea un cubo entre ellos, que es un objeto 3D, y el objeto 3D y la interfaz de usuario no pueden controlar el nivel a través de él.
¿Por qué la profundidad en el panel tiene menor prioridad que el orden de clasificación?
Esto se debe a que la profundidad del panel controla el orden de generación de UIDrawCall, lo que afecta el orden de RenderQueue.Como se mencionó anteriormente, el orden de clasificación y la capa de clasificación tienen mayor prioridad que RenderQueue.
1. Profundidad del widget de interfaz de usuario
Cada widget en el mismo panel puede usar el atributo de profundidad del widget para controlar su contexto. La profundidad controla la secuencia de vértices que pasa el widget cuando se reconstruye el vértice del panel.Esto se puede saber rastreando el código fuente de NGUI. (Organizaré varios artículos analizando NGUI más adelante, incluido este)
2. Cola de procesamiento
Para usar esta propiedad en NGUI, primero debe observar las tres formas de UIPanel sobre RenderQueue:
Automático: generado automáticamente por NGUI
StartAt: establecer manualmente un valor
Explícito: el valor de RenderQueue en el mismo panel es el mismo
Mire el código para entender, UIPanel.cs
Cómo UGUI controla el orden de renderizado
1. Lienzo
Las siguientes dos propiedades se pueden usar para controlar el nivel de renderizado entre diferentes Canvas
Capa de clasificación
Ordenar en Capa
Canvas es lo mismo que UIPanel de NGUI. Estos cálculos no se preocupan por la relación padre-hijo entre los dos. Uno se cuenta como uno.
2. Secuencia en Jerarquía
En el mismo Canvas, el orden de la Jerarquía determina la relación jerárquica de los controles.
Modelo de control de profundidad
1. Profundidad espacial
El orden de visualización de los objetos 3D se basa completamente en el orden del espacio. Por supuesto, puede desactivar la prueba de profundidad en el sombreador de fragmentos o realizar otras operaciones que afecten el búfer de fotogramas. Al igual que en opengl.
2. Cola de procesamiento
RenderQueue se aplica a todos los objetos que se pueden representar en Unity.
Complemento: el orden de clasificación se puede utilizar para controlar la relación jerárquica de los modelos de corte. El orden de clasificación en NGUI se realiza mediante esta función.
Control de nivel de representación de efecto de partículas
1. Profundidad espacial
De acuerdo con el modelo 3D.
2.Cola de procesamiento
De acuerdo con el modelo 3D.
3 orden de clasificación
El sistema de partículas en sí es un componente Renderer, que genera sprites y cortes, y esta propiedad es válida.
Deje que el modelo se intercale entre las dos interfaces en NGUI
Después de la clasificación anterior, he entendido cómo controlar el orden de renderizado en varios lugares. A continuación, resolvamos algunos problemas encontrados en el proyecto.
Coloque el modelo 3D en NGUI, el método de implementación:
1. Múltiples cámaras
Este método ciertamente se puede lograr, y es simple y rudo. Pero si lo piensas bien, no es tan simple como agregar una cámara, que es lo que he hecho en proyectos anteriores. Luego... luego... en las etapas media y tardía del desarrollo, surgieron varios errores. Dado que las cámaras múltiples no se manejaron bien, varios problemas fueron realmente difíciles de manejar. Jaja, la capa inferior no fue escrita por yo, así que nuestros desarrolladores de nivel superior lo corrigieron Ah, todo el código del proyecto es un poco diferente.
La multicámara en realidad usa la profundidad de la cámara para controlar el orden de renderizado. En términos generales, una cámara para el modelo, una cámara para la interfaz de usuario, etc. ¿Crees que dos cámaras son suficientes? ¿Alguna vez pensó que podría haber una interfaz en el modelo? Puede decir agregar otra cámara, pero existen algunos requisitos para que cada interfaz tenga múltiples saltos, y no es posible determinar directamente qué interfaz está en la parte superior y qué interfaz está debajo al crear la interfaz, por lo que agregar varias cámaras en de esta manera no funciona No es factible.
¿Qué se debe hacer entonces?
Más tarde, pensé en una forma, es decir, cada interfaz corresponde a una cámara, una cámara toma un modelo, o un modelo se muestra junto, y la profundidad de la cámara se usa para controlar su relación de oclusión, pero la cámara necesita ser administrado en el marco del cliente Haga un "grupo" para que la cámara pueda reutilizarse, y. Tal vez te preocupen los problemas de rendimiento, pero esto no es un problema. Puede haber muchas interfaces en un juego, pero no necesitas mostrar más de 5 o 6 al mismo tiempo. Además de las necesidades del modelo, cada tiempo que trabaja al mismo tiempo, habrá 10., y siempre que la cámara solo se irradie a la interfaz correspondiente, esto no causará pérdida de rendimiento, la diferencia es solo la matriz de transformación.
1. Control con RenderQueue
En comparación con la administración de cámaras, creo que es más fácil usar RenderQueue para controlar. Después de todo, RenderQueue también se usa ampliamente en NGUI para controlar la relación contextual. Puede ver su código fuente:
Este es el LateUpdate en UIPanel. Puede ver cómo el valor específico de RenderQueue se agrega en tres modos. Generalmente, usamos el modo Automático. En este modo, el valor de RenderQueue se calcula automáticamente de acuerdo con el DrawCall generado en cada UIPanel.
Independientemente de los modelos 3D, los efectos de partículas o la NGUI, RenderQueue se puede usar para controlar el orden de renderizado, así que pensé en una forma.
Modifique el código fuente de NGUI, haga que los valores de RenderQueue de los dos UIPanels estén separados y libere algunos valores para configurar el modelo o los efectos de partículas. Es muy simple:
Mira, no es tan simple. Luego, solo necesita configurar RenderQueue del modelo o efecto de partículas que se muestra en la interfaz en estos valores vacíos.
Este script se cuelga en el modelo correspondiente, y el objetivo indica en qué panel se mostrará el modelo.
Dos interfaces, A y B, después de ajustar el orden de renderizado: A - Modelo - B
Solo hemos hecho una parte aquí. Solo usamos RenderQueue para controlar el orden de renderizado, pero la relación de profundidad del espacio todavía afecta la secuencia que se muestra en la pantalla. La prueba de profundidad se realiza en el sombreador de fragmentos. No importa quién renderice primero y quién renderice después, siempre que todos los objetos se rendericen en el búfer de profundidad, el orden de renderizado no afecta realmente a la secuencia de visualización de la pantalla final.
Entonces, otro paso es desactivar la prueba de profundidad al renderizar el modelo. Por ejemplo, hay dos interfaces A y B, y el modelo está entre AB. Luego, el proceso de renderizado es el siguiente:
A - Prueba de profundidad desactivada - Modelo - Prueba de profundidad activada - B
La forma de desactivar las pruebas de profundidad en el laboratorio de sombreado es:
<pre class="code" data-lang="javascript" style="box-sizing: border-box; margin: 0px; padding: 0px; white-space: pre-wrap;">ZWrite Off</pre>
Aquí hay un sombreador simple:
>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"
｝Suplemento: el proceso de renderizado anterior también se puede utilizar para controlar la secuencia de visualización de pantalla entre modelos.
1. Mostrar solo una interfaz a la vez
Al mismo tiempo, solo se muestra una interfaz en la pantalla. Cada vez que se abre una nueva interfaz, se oculta la siguiente interfaz, e incluso se ocultan el modelo y las partículas. De esta forma, no hay ninguna situación en la que se muestren dos interfaces al mismo tiempo.
2. Profundidad espacial
Cuando otras condiciones de control son las mismas, NGUI y el modelo están bajo la misma cámara y están controlados por la canalización de representación normal, es decir, la relación de posición espacial puede afectar la relación jerárquica entre la representación en pantalla. Tenga en cuenta el "grosor" del modelo.
Los efectos de partículas se intercalan entre las dos interfaces en NGUI
Los efectos de partículas también se pueden controlar usando la profundidad de la cámara, pero habrá muchos efectos de partículas, por lo que no es factible usar la cámara, por lo que se excluye directamente aquí.
1. Orden de clasificación
El efecto de partículas en sí se representa con "sprites de puntos", cada partícula es un sprite de puntos, que puede considerarse como un modelo de división, y el modelo de división puede verse afectado por este atributo.
Puedes hacer una prueba y colgar el siguiente script en el efecto de partículas:
>public class SortUtil : MonoBehaviour ｛
void Awake()
｛
renderer.sortingOrder = 1;
｝
｝El valor predeterminado del orden de clasificación es 0. Hay dos interfaces, A y B. Establezca el panel de A en 0 y el panel de B en 2:
R: 0
Efectos de partículas: 1
segundo: 2
El efecto de partículas simplemente se inserta entre A y B, y el efecto de visualización también es el efecto de partículas intercalado entre A y B.
Suplemento: después de Unity5.3, los efectos de partículas admiten la configuración directa del orden de clasificación
1. Cola de procesamiento
No es necesario cruzar el modelo y la NGUI aquí, solo necesita completar la configuración de RenderQueue y no necesita cambiar el sombreador.
Suponiendo dos interfaces A y B, la relación de tamaño del valor de RenderQueue:
A < Efectos de partículas < B
Refiriéndose al método específico del modelo anterior, permita que RenderQueue del efecto de partículas se inserte entre las dos interfaces A y B.
Deje que el modelo se intercale entre las dos interfaces en UGUI
1. Múltiples cámaras
De igual forma, es posible hacerlo con múltiples cámaras, pero este método no es muy bueno y no es recomendable.
2. laboratorio de sombreado
Utilice los datos de máscara entrantes en el sombreador de fragmentos para filtrar los datos de fragmentos del modelo, deje los que cumplan las condiciones y descarte los que no. Este enfoque también se aplica a NGUI.
3. Renderizar textura
La imagen en UGUI puede aceptar un material y RenderTexture se puede colocar en un material. De esta forma, se puede controlar de acuerdo con los métodos de clasificación de la propia UGUI.
En UGUI, los efectos de partículas se intercalan entre las dos interfaces
1. orden de clasificación
Al igual que NGUI, también se puede controlar mediante el orden de clasificación y el componente Canvas admite estas propiedades.
Resumir
Después de escribir tanto, he resumido aproximadamente los métodos comunes y estoy más familiarizado con NGUI, por lo que tengo claro todo tipo de NGUI y escribo con más detalle. El resumen de UGUI puede no ser muy completo, por lo que continuaré resumiéndolo en el futuro. En el artículo se mencionan varios laboratorios de sombreado. Explicaré aquí que las relaciones de oclusión y las relaciones jerárquicas anteriores también se pueden completar mediante el uso de laboratorios de sombreado. Escriba específicamente el método de implementación del laboratorio de sombreado.