¿Qué estás buscando?
Hero background image
Consejos de optimización para Unity UI
Descubra cómo optimizar completamente su interfaz de usuario, con consejos para dividir lienzos y grupos de diseño, agrupar objetos de interfaz de usuario y más.

Esta es una de varias páginas que brindan orientación detallada sobre cómo optimizar los juegos de su PC y consola. Puede encontrar la colección completa en el libro electrónico gratuito Optimice el rendimiento de los juegos de su consola y PC, que contiene más de 80 consejos prácticos y mejores prácticas para optimizar el rendimiento.

Divide tus lienzos

Problema: Cuando un solo elemento cambia en el lienzo de la interfaz de usuario, ensucia todo el lienzo.

Canvas es el componente básico de Unity UI. Genera mallas que representan los elementos de la interfaz de usuario colocados en él, regenera las mallas cuando los elementos de la interfaz de usuario cambian y emite llamadas de dibujo a la GPU para que la interfaz de usuario realmente se muestre.

Generar estas mallas puede resultar costoso. Los elementos de la interfaz de usuario deben recopilarse en lotes para que se extraigan en la menor cantidad de llamadas de sorteo posible. Debido a que la generación por lotes es costosa, solo queremos regenerarlos cuando sea necesario. El problema es que, cuando uno o más elementos cambian en un Canvas, se debe analizar todo el Canvas una vez más para descubrir cómo dibujar de manera óptima sus elementos.

Muchos usuarios crean toda la interfaz de usuario de su juego en un único lienzo con miles de elementos. Cuando cambian un elemento, pueden experimentar un aumento de CPU que cuesta varios milisegundos. Para obtener más información sobre por qué la reconstrucción es tan costosa, vaya al minuto 24:55 en esta sesión de Unite.

Solución Divide tus lienzos.

Cada Canvas es una isla que aísla sus elementos de los de otros Canvas. Aproveche la capacidad de UGUI para admitir múltiples lienzos dividiendo sus lienzos para resolver los problemas de procesamiento por lotes con Unity UI.

También puede anidar lienzos, lo que permite a los diseñadores crear grandes interfaces de usuario jerárquicas, sin tener que pensar en dónde se encuentran los diferentes elementos en pantalla en los lienzos. Los lienzos secundarios también aíslan el contenido de sus lienzos principales y hermanos. Mantienen su propia geometría y realizan su propio procesamiento por lotes. Una forma de decidir cómo dividirlos es en función de la frecuencia con la que deben actualizarse. Mantenga los elementos estáticos de la interfaz de usuario en un lienzo separado y los elementos dinámicos que se actualizan al mismo tiempo en sublienzos más pequeños. Además, asegúrese de que todos los elementos de la interfaz de usuario en cada lienzo tengan el mismo valor Z, materiales y texturas.

Interfaz de Graphic Raycaster
Limite los Raycasters gráficos y desactive Raycast Target

Problema: Uso inadecuado del Graphic Raycaster

Graphic Raycaster es el componente que traduce su entrada en eventos de UI. Más específicamente, traduce los clics en la pantalla o las entradas táctiles en pantalla en eventos de la interfaz de usuario y luego los envía a los elementos de la interfaz de usuario interesados. Necesita un Graphic Raycaster en cada lienzo que requiera entrada, incluidos los sublienzos. Sin embargo, también recorre cada punto de entrada en pantalla y verifica si están dentro de RectTransform de una interfaz de usuario, lo que genera una posible sobrecarga.

A pesar de su nombre, el Graphic Raycaster no es realmente un raycaster. De forma predeterminada, solo prueba los gráficos de la interfaz de usuario. Toma el conjunto de elementos de la interfaz de usuario que están interesados ​​en recibir información sobre un lienzo determinado y realiza comprobaciones de intersección. Por ejemplo, verifica si el punto en el que ocurre el evento de entrada contra RectTransform de cada elemento de la interfaz de usuario en el lienzo del Graphic Raycaster está marcado como interactivo.

El desafío es que no todos los elementos de la interfaz de usuario están interesados ​​en recibir actualizaciones.

Solución Elimine los Raycasters gráficos de los lienzos de la interfaz de usuario no interactivos y apague Raycast Target para elementos estáticos o no interactivos.

En particular, el texto en un botón que apaga Raycast Target reducirá directamente la cantidad de comprobaciones de intersección que Graphic Raycaster debe realizar en cada cuadro.

Problema: A veces, el Graphic Raycaster actúa como un raycaster.

Si configura el modo de renderizado en su lienzo en Worldspace Camera o Screen Space Camera, puede agregar una máscara de bloqueo. La máscara de bloqueo determina si Raycaster emitirá rayos a través de física 2D o 3D, para determinar si algún objeto físico está bloqueando la capacidad del usuario para interactuar con la interfaz de usuario.

Solución Proyectar rayos mediante física 2D o 3D puede resultar costoso, así que utilice esta función con moderación.

Minimice la cantidad de Graphic Raycasters excluyéndolos de los lienzos de interfaz de usuario no interactivos, ya que, en este caso, no hay razón para verificar los eventos de interacción.

Obtenga más información sobre Graphic Raycaster en esta documentación.

Interfaz de malla
Evite los costosos elementos de la interfaz de usuario

Problema: Las vistas de lista grande, cuadrícula y numerosos elementos de interfaz de usuario superpuestos son costosos.

Las vistas de lista y cuadrícula grandes son caras y la superposición de numerosos elementos de la interfaz de usuario (es decir, cartas apiladas en un juego de batalla de cartas) genera un sobregiro.

Solución Evite numerosos elementos de interfaz de usuario superpuestos.

Personalice su código para fusionar elementos de la interfaz de usuario en capas en tiempo de ejecución en menos elementos y lotes.

Si necesita crear una vista de lista o cuadrícula grande, como una pantalla de inventario con cientos de elementos, considere reutilizar un grupo más pequeño de elementos de la interfaz de usuario en lugar de un solo elemento de la interfaz de usuario para cada elemento.

Consulte este proyecto de GitHub para ver un ejemplo de una lista de desplazamiento optimizada.

Interfaz de grupos de diseño
Evite los grupos de diseño cuando sea posible

Problema: Cada elemento de la interfaz de usuario que intente ensuciar su diseño realizará al menos una llamada a GetComponent.

Cuando uno o más elementos secundarios de la interfaz de usuario cambian en un sistema de diseño, el diseño se vuelve "sucio". Los elementos secundarios modificados invalidan el sistema de diseño que los posee.

Un sistema de diseño es un conjunto de grupos de diseño contiguos directamente encima de un elemento de diseño. Un elemento de diseño no es solo el componente Elemento de diseño (imágenes de UI, textos y Scroll Rects), sino que también comprende elementos de diseño, al igual que Scroll Rects también son grupos de diseño.

Ahora, con respecto al problema que nos ocupa: Cada elemento de la interfaz de usuario que marque su diseño como "sucio" realizará, como mínimo, una llamada a GetComponent. Esta llamada busca un grupo de diseño válido en el elemento principal del diseño. Si encuentra uno, continúa ascendiendo en la jerarquía de Transformación hasta que deja de buscar grupos de diseño o llega a la raíz de la jerarquía; lo que sea que venga primero. Como tal, cada grupo de diseño agrega una llamada GetComponent al proceso de limpieza de cada elemento de diseño secundario, lo que hace que los grupos de diseño anidados sean extremadamente malos para el rendimiento.

Solución Evite los grupos de diseño cuando sea posible.

Utilice anclajes para diseños proporcionales. En las UI más populares con una cantidad dinámica de elementos de UI, considere escribir su propio código para calcular los diseños. Asegúrese de utilizar esto según demanda, en lugar de para cada cambio.

Obtenga más información sobre los grupos de diseño en nuestra documentación.

Interfaz de agrupación de objetos
Objetos de UI de piscina de forma inteligente

Problema: Agrupar objetos de la interfaz de usuario al revés

Las personas a menudo agrupan objetos de la interfaz de usuario reparándolos y luego deshabilitándolos, lo que provoca una suciedad innecesaria.

Solución Primero deshabilite el objeto y luego vuelva a colocarlo en el grupo.

Ensuciarás la antigua jerarquía una vez, pero una vez que la repares, evitarás ensuciar la antigua jerarquía una segunda vez y no ensuciarás la nueva jerarquía en absoluto. Si está eliminando un objeto del grupo, primero reparenlo, actualice sus datos y luego habilítelo.

Obtenga más información sobre los conceptos básicos de agrupación de objetos en Unity.

Componente UI Canvas
Cómo ocultar un lienzo

Problema: No estoy seguro de cómo ocultar un lienzo

A veces resulta útil ocultar elementos y lienzos de la interfaz de usuario. Pero, ¿cómo puedes hacer esto de manera eficiente?

Solución Deshabilite el componente Canvas.

Deshabilitar el componente Canvas impedirá que Canvas emita llamadas de extracción a la GPU. De esta forma, el lienzo ya no será visible. Sin embargo, Canvas no descartará su buffer de vértices, mantendrá todas sus mallas y vértices. Luego, cuando lo vuelvas a habilitar, no activará una reconstrucción, simplemente comenzará a dibujarlos nuevamente.

Además, deshabilitar el componente Canvas no activa las costosas devoluciones de llamadas OnDisable/OnEnable a través de la jerarquía Canvas. Solo tenga cuidado de desactivar los componentes secundarios que ejecutan código costoso por cuadro.

Obtenga más información sobre el componente Canvas aquí.

Uso óptimo de animadores en elementos de la interfaz de usuario.

Problema: Usar animadores en tu interfaz de usuario

Los animadores ensuciarán sus elementos de la interfaz de usuario en cada cuadro, incluso si el valor de la animación no cambia.

Solución Utilice código para la animación de la interfaz de usuario.

Coloque animadores únicamente en elementos dinámicos de la interfaz de usuario que siempre cambian. Para elementos que rara vez cambian o que cambian temporalmente en respuesta a eventos, escriba su propio código o utilice un sistema de interpolación. Hay varias soluciones excelentes para esto disponibles en Asset Store.

Cuando utilice una interfaz de usuario de pantalla completa, oculte todo lo demás

Problema: Mal rendimiento con la interfaz de usuario en pantalla completa

Si su juego muestra una pantalla de inicio o pausa que cubre completamente la escena, el resto del juego aún se procesa en segundo plano, lo que puede afectar el rendimiento.

Solución Oculta todo lo demás.

Si tiene una pantalla que cubre todo lo demás en la escena, desactive la cámara que representa la escena 3D. De manera similar, deshabilite los elementos del Lienzo ocultos detrás del Lienzo superior.

Considere reducir Application.targetFrameRate durante una interfaz de usuario en pantalla completa, ya que no debería necesitar actualizar a 60 fps.

Más recursos
Optimiza el rendimiento del juego
Obtenga el libro electrónico gratuito para obtener más información

Ofrezca a sus jugadores la mejor experiencia de juego posible. Con más de 80 consejos prácticos y mejores prácticas de los ingenieros expertos de Unity, puedes optimizar tus juegos de PC y consola.

Creadas por los equipos de ingeniería Success y Accelerate Solutions de Unity, más específicamente, estas prácticas detalladas, recopiladas de interacciones de la vida real con los mejores estudios, ayudarán a mejorar el rendimiento general de su juego.

¿Te resultó útil este contenido?