Cuando se desarrollan juegos móviles, hay momentos en los que es bastante frustrante lograr que el diseño de la interfaz de usuario sea correcto con todas las diferentes relaciones de aspecto. Esto es especialmente cierto con los teléfonos inteligentes y tabletas modernos con muescas de diferentes formas y tamaños.
La forma más sencilla de hacer que el diseño de la interfaz de usuario de su juego se ajuste para evitar muescas en la pantalla y el indicador de deslizamiento de los dispositivos iOS, también conocido como el botón «Inicio», en la parte inferior de la pantalla es usar un paquete de Unity llamado Safe Area Helper. Es gratis en la tienda de activos de Unity.
Safe Area Helper es una herramienta increíble para el desarrollo de juegos móviles, ya que puede ajustar los paneles de la interfaz de usuario sobre la marcha para ajustarse al área segura cuando cambia la orientación de la pantalla. ¡Y es automático!
Cómo usar el asistente de área segura para lidiar con elementos de la interfaz de usuario obstruidos por muescas
Muescas de teléfonos inteligentes modernos
Tener los elementos de la interfaz de usuario obstruidos por muescas aleatorias en los dispositivos móviles de los usuarios es molesto. Afortunadamente, la mayoría de los dispositivos móviles con muescas tienen diseños bastante similares y las muescas suelen ocupar aproximadamente el mismo porcentaje de la pantalla.
La forma más rápida de evitar esto es mediante la combinación del uso de un paquete de Unity llamado Safe Area Helper y los elementos de la interfaz de usuario del panel.
Aquí hay un breve resumen de lo que te mostraré en esta guía. Puede usar la tabla de contenido a continuación para omitir algunos pasos, como agregar activos de la tienda de activos o instalar paquetes de vista previa si ya sabe cómo hacer esas cosas. Quiero hacer esta guía lo más detallada posible para principiantes.
Tabla de contenido
Instalación del paquete auxiliar de área segura
Comencemos instalando las herramientas necesarias.
Safe Area Helper es una herramienta para ajustar automáticamente los elementos de la interfaz de usuario para evitar las muescas de los dispositivos móviles modernos (o algunos pueden referirse a ellos como recortes).
Bajo el capó, está usando la propiedad estática «safeArea» (Screen.safeArea) de la clase Screen de Unity para obtener un área rectangular que no se superpone con las muescas en la pantalla del dispositivo en el que se está ejecutando el juego actualmente, y luego ajusta automáticamente el panel de la interfaz de usuario base para que sea el mismo que el rectángulo sobre la marcha a medida que cambia la orientación.
El paquete está disponible en Unity Asset Store de forma gratuita, así que adelante, agréguelo a su cuenta de Unity aquí.
Haga clic en el botón Agregar a mis activos
Una vez que haya agregado el paquete a sus activos, debería estar disponible para que lo descargue e instale en Unity Editor ahora.
Ventana > Administrador de paquetes
Abra la ventana del Administrador de paquetes yendo a Ventana > Administrador de paquetes. Aquí es donde puedes encontrar paquetes de tu propiedad y otros paquetes de Unity.
Seleccione Mis activos
Cambie el registro de paquetes a Mis activos para cambiar a la lista de paquetes que posee.
Encuentre el paquete Safe Area Helper
Desplácese hacia abajo para encontrar o buscar el paquete. Si es la primera vez que descarga el paquete en su máquina, verá un botón Descargar. Haga clic en él para comenzar a descargar.
Importar el paquete
Una vez finalizada la descarga, debería poder ver el botón Importar. Haga clic en él para abrir la ventana Importar paquete de Unity.
Puede excluir todo lo que se encuentra en la carpeta Demos, ya que solo necesitamos el archivo SafeArea.cs. O simplemente puede importar todo si desea echar un vistazo a la escena de demostración que viene con él.
Eso debería ser todo por esto. Pero hay un problema más antes de que podamos comenzar a trabajar con Safe Area Helper.
Instalación del simulador de dispositivos
Simulador de dispositivos de Unity
Device Simulator es un paquete de Unity para simular pantallas de dispositivos móviles. También puede simular otros aspectos de un dispositivo móvil, como los idiomas del sistema, la conectividad a Internet y la información del sistema.
Usaremos el simulador para obtener una vista previa de cómo se verán nuestros juegos en varios tipos de pantallas.
Unity 2021 y posteriores vienen con el paquete Device Simulator preinstalado para cada proyecto de Unity de forma predeterminada. Si está utilizando la versión 2020 de Unity y una anterior, deberá instalarla a través del Administrador de paquetes.
En primer lugar, en el momento de escribir este artículo, Device Simulator para Unity Editor versión 2020 y anteriores se encuentran en su etapa de vista previa. Para poder encontrarlo en el Administrador de paquetes, deberá habilitar la visualización de paquetes de vista previa.
Asegúrese de que los paquetes de vista previa estén habilitados
Abra la ventana Configuración del proyecto (Editar > Configuración del proyecto…) y vaya a la sección Administrador de paquetes. En la configuración avanzada, asegúrese de que Habilitar paquetes de vista previa esté habilitado.
Instalar simulador de dispositivo
Ahora debería poder encontrar el paquete Device Simulator en Unity Registry.
Simulador instalado
Una vez que esté instalado, debería poder cambiar la vista del juego en Unity Editor al modo Simulador.
Ejemplos de áreas seguras en dispositivos
Una escena con botones, texto y sprites.
En esta guía, usaré la escena anterior para demostrar cómo funciona Safe Area Helper. La escena contiene algunos botones, algunos textos y sprites. Todos anclados a sus respectivos costados y esquinas.
Configuración del lienzo
La configuración del lienzo es la siguiente:
- Modo de renderizado: Espacio de pantalla – Superposición
- Modo de escala de interfaz de usuario: escala con tamaño de pantalla
- Modo de coincidencia de pantalla: Coincidencia de ancho o alto
- Partido: 0.5
Esto garantizará que los tamaños de los elementos de la interfaz de usuario no se escalen de manera extraña cuando se encuentre en modo vertical.
La muesca está en el camino
Como puede ver, la muesca recorta el botón de la izquierda. Esto no esta bien. No queremos que la muesca obstruya la vista. En algunos casos, la muesca puede hacer que algunos elementos de la interfaz de usuario no puedan interactuar o leerse.
Por lo tanto, queremos un «área segura» para que los elementos de la interfaz de usuario se muestren lejos de esas muescas.
Varios dispositivos en Simulator
El Simulador de dispositivos de Unity tiene una amplia selección de dispositivos móviles para que pueda obtener una vista previa de su juego. Algunos de ellos tienen muescas o agujeros para cámaras frontales en sus pantallas.
La cuestión es que Device Simulator sabe dónde debe estar el área segura para cada uno de esos dispositivos.
El botón de alternancia del área segura
En la vista del simulador, hay un botón llamado «Área segura» en el que puede hacer clic para alternar la visualización del área segura de cada dispositivo.
Una vez habilitada, el área segura de la pantalla se representa mediante un rectángulo de borde verde:
Área segura del Apple iPhone X
Tome la imagen de arriba como ejemplo. El área segura del iPhone X está ligeramente alejada del lado izquierdo y derecho de la pantalla para evitar la muesca, y ligeramente por encima del borde inferior de la pantalla para evitar el «Indicador de inicio» (la barra negra) que está presente en todos Dispositivos táctiles basados en iOS.
Un dispositivo con un orificio para la cámara frontal
Aquí hay otro ejemplo. Como puede ver, hay un orificio para la cámara frontal en la pantalla. En este caso, el área segura solo se desplazó ligeramente hacia la izquierda ya que no es necesario ajustar otros lados.
El problema es que el simulador solo te muestra el área segura. No ajusta los elementos de la interfaz de usuario por ti. ¿Por qué?
Éste es el comportamiento correcto. No sabe lo que debe ser ajustado. No sabe si la imagen de fondo también debe ajustarse. Por lo tanto, le deja la decisión a usted, el desarrollador.
Como se mencionó anteriormente, la clase Screen de Unity proporciona una propiedad estática para obtener el área segura del dispositivo en el que se está ejecutando el juego. Pero eso es todo. Por lo demás, tendrás que hacerlo manualmente tú mismo.
Afortunadamente, otra persona ya creó una secuencia de comandos para usted y está disponible de forma gratuita en la tienda de recursos de Unity.
Sí, es el paquete Safe Area Helper.
Cómo configurar correctamente el lienzo de la interfaz de usuario y habilitar el asistente de área segura
En primer lugar, debe crear un panel de interfaz de usuario para que actúe como contenedor de interfaz de usuario de nivel superior.
Interfaz de usuario > Panel
Puede agregar un panel haciendo clic con el botón derecho en la ventana Jerarquía y seleccionando IU > Panel.
panel creado
Esto creará un objeto de panel debajo del lienzo de la interfaz de usuario.
Establecer para estirar en todos los lados
De forma predeterminada, el panel se estirará y anclará a las 4 esquinas de la pantalla. Si por alguna razón ese no es su caso, configure el ancla en el ajuste preestablecido de la parte inferior derecha para estirar el panel para que coincida con el lienzo.
Todos los paneles vienen con un fondo por defecto. Si no lo quieres, puedes eliminarlo.
Otros elementos de la interfaz de usuario debajo del panel de nivel superior
Agregue algunos elementos de la interfaz de usuario. No olvide colocar su ancla correctamente para que cuando cambie el área segura, los elementos también se desplacen correctamente.
La razón por la que tenemos que tener un panel base es que el objeto Canvas en sí no se puede cambiar de tamaño. Siempre cubrirá toda la pantalla.
Es por eso que necesitamos un panel que actúe como base. Será donde agreguemos el script Safe Area Helper.
El guión del área segura
Agregue el script de SafeArea al panel de nivel superior. El archivo de secuencia de comandos debe estar dentro de Activos > CrystalFramework > Utilidad. Arrástrelo y suéltelo en el objeto Panel o agréguelo a través del botón Agregar componente.
Elementos de la interfaz de usuario ajustados para que coincidan con el área segura
¡Y eso es! Intente iniciar el modo de reproducción y los elementos de la interfaz de usuario deberían permanecer dentro del área segura automáticamente.
Modo retrato
El script también actualizará el área segura cada vez que cambie la orientación.
Parámetros del script de área segura
Si no desea que los elementos de la interfaz de usuario se desplacen en un eje determinado, puede desactivar Conform X/Y en el inspector.
Cuando el registro está habilitado
La opción de registro, cuando está habilitada, registrará los detalles del área segura en la ventana de la consola cada vez que cambie el área segura.
Otras alternativas para lidiar con muescas
Si todo lo que desea es que la interfaz de usuario se ajuste y se adapte al área segura, el Asistente de área segura gratuito debería ser suficiente.
Y, por supuesto, si cree que le faltan algunas funciones que necesita, siempre puede crear su propio script o ampliar el script de SafeArea.
Pero si realmente necesita algo más sólido y que ofrezca algo más que una adaptación de área segura, le recomiendo Universal Device Preview de Wild Mage Games en Unity Assets Store.
Universal Device Preview es un conjunto de herramientas todo en uno para probar y obtener una vista previa de su juego con precisión en los dispositivos.
Ofrece características tales como:
- Vista previa de área segura y adaptación automática. (Similar al Ayudante de Área Segura.)
- Obtenga una vista previa de su juego en varios dispositivos al mismo tiempo dentro de Unity Editor.
- Simule el tamaño de pantalla física de los dispositivos en el mundo real.
- También viene con una función para generar imágenes de tu juego dentro de un dispositivo.
- Incluyendo todas las funciones de Ultimate Screenshot Creator.
Puedes obtener todas estas funciones por €44.99 en la tienda Unity Assets. Si te tomas en serio la creación de juegos móviles, te lo recomiendo encarecidamente. Esto le ahorrará mucho tiempo.
El enlace de arriba es un enlace de afiliado, lo que significa que obtengo un porcentaje de las ventas realizadas a través de este enlace. No pagarás extra, así que no te preocupes. Realmente me ayudaría mucho si compra el producto (u otros productos en la tienda) a través de mi enlace.
Gracias.
Conclusión
Trabajar y desarrollar su juego alrededor de muescas de dispositivos móviles de diferentes formas y tamaños puede ser bastante agotador.
Afortunadamente, Unity ha proporcionado una propiedad estática conveniente que es Screen.safeArea para decirnos dónde debe estar el área segura lejos de esas muescas.
Esto ayuda a disminuir bastante el esfuerzo necesario, especialmente ahora que hay un paquete gratuito creado por una persona generosa para ayudar con la adaptación automática del área segura usando la propiedad estática antes mencionada.
Espero que esta guía haya valido la pena. ¡Y te veré de nuevo la próxima vez!
