¡Hola de nuevo!
Hoy vamos a ver la continuación de nuestro anterior post sobre las interfaces en aplicaciones de Realidad Aumentada, el cual recomendamos que echéis un vistazo, dado que hoy vamos a hablar de consejos técnicos y haremos un botón paso a paso.
Al hacer este post también asumimos un conocimiento básico de las interfaces en Unity, puedes mirar la documentación aquípara ponerte al día.
Pasos para la creación de un botón sencillo en Unity
- Creamos un GameObject vacío y le añadimos un componente Canvas, cambiamos «Dynamic Pixels per Unit» a 10 para tener bordes suaves en el texto. También cambiamos la escala en X e Y a 0,0625, la posición en X e Y a 0 y en Z a 3. Llamaremos a este GameObject «Canvas«.
- El modo de render lo cambiamos a World Space. Añadimos un componente Canvas Scaler con los valores Dynamics Pixels per Unity 10 y Reference Pixels per Unit 100, también un componente Graphic Raycaster si no está ya (lo dejamos por defecto). Si además queremos verlo fácilmente al testear, le añadimos un componente Billboard.
- Creamos un GameObject hijo de Canvas, que dejaremos vacío y llamaremos «Button«. Nos servirá de padre por si luego queremos hacerlo prefab y replicarlo o animarlo.
- Creamos GameObjects hijos de Button para cada elemento que necesitemos (en nuestro caso vamos a hacer un par de imágenes de fondo y un texto. También crearemos un objeto al que le añadiremos un Box Collider. Este workflow nos evita usar un script «Button» directamente para asegurarnos compatibilidad entre versiones, funcionamiento previsible y que no se nos cuele el botón detrás de una pared y no podamos pulsarlo en la aplicación (si no fuera una preocupación podríamos usarlo).
- Asignamos componentes de imagen a los objetos de imagen de fondo y asignamos un material usando el shader «fast-default».
- Creamos las animaciones de hover in-out y press del botón. Creamos un parámetro bool llamado «gazed» que servirá para las transiciones entre animaciones.
- Creamos un prefab usando Button. Con este prefab y creando GameObjects para nuestras secciones podremos crear un menú completo. Para organizar mejor los botones, al GameObject padre le añadiremos un componente Grid Layout Group, que tiene opciones para controlar la ordenación automática de elementos. A su vez, a todos los hijos les añadimos un Layout Element. Para añadir elementos ornamentales que no respeten la organización automática, activamos «Ignore Layout» en su Layout Element particular. Escribimos y asignamos los scripts para controlar la UI según nos convenga.
Buenas prácticas en cuanto a UI:
- Los elementos que hagan overlap generarán buenas draw calls adicionales. Los grupos de botones organizados en grid con separación inferior a 1 píxel también suman.
- Evitar usar Dynamic Text y la opción Best Fit si es posible.
- Cada vez que cambia algo en un Canvas se redibuja entero con su contenido, por lo que si tenemos un elemento que cambia en un Canvas muy poblado, es aconsejable dividir la UI en varios. Con la misma filosofía, si va a haber elementos que se muevan o cambien simultáneamente a menudo, lo propio es dejarlos dentro del mismo Canvas, dado que se va a redibujar de todas formas.
- Evitar Scroll Review. En su lugar usar el nuevo Rect Mask 2D.
- Si tenemos elementos no interactivos en World Space en nuestra aplicación, desactivar el componente Graphic Raycaster mejora el rendimiento.
- Empleamos elshader Fast Default, más sencillo que el default.
Con todo esto, no hemos hecho más que rascar la superficie del mundo de la UI en Unity, pero esperamos que con este artículo os haya quedado más claro cómo creamos las nuestras para HoloLens.
¡Esperamos que os guste!
Stay tuned!
