Kit de herramientas de interfaz de usuario: Demos nuevas y actualizadas para programadores y artistas.
Nos complace anunciar la disponibilidad de dos muestras educativas nuevas y actualizadas para respaldar las diferentes perspectivas de los programadores y artistas/diseñadores en la creación de interfaces de usuario profesionales en el juego con UI Toolkit.
UI Toolkit proporciona un conjunto de herramientas para desarrollar una interfaz de usuario en tiempo de ejecución escalable y de alto rendimiento para juegos y aplicaciones, extensiones personalizadas para el Editor de Unity y herramientas de depuración en tiempo de ejecución. Sus conceptos básicos y flujos de trabajo le resultarán familiares si tiene experiencia en el desarrollo de páginas web o aplicaciones.
Nuestro objetivo con estos ejemplos educativos es ayudarle a crear interfaces de usuario ricas, receptivas y escalables con UI Toolkit. La nueva demostración QuizU, para programadores, y la muestra actualizada de UI Toolkit , Dragon Crashers, para artistas y diseñadores, son dos proyectos muy diferentes, cada uno con un amplio contenido instructivo de apoyo.
QuizU es una muestra centrada en el programador de una aplicación de prueba interactiva que muestra cómo los componentes de UI Toolkit pueden trabajar juntos, aprovechando varios patrones de diseño, en un juego pequeño pero funcional con múltiples pantallas y gestión del flujo del juego.
La demostración consta de dos partes: 10 muestras pequeñas y fáciles de digerir que demuestran diferentes aspectos de UI Toolkit y un minijuego de preguntas que consolida muchas de las técnicas de las 10 escenas en un proyecto completo.
El estilo visual minimalista del minijuego te permite concentrarte en la mecánica de la implementación de la interfaz de usuario, sin perderte en los detalles del diseño.
El juego de preguntas y respuestas ilustra cómo utilizar el patrón de estado para el flujo del juego, administrar múltiples pantallas de menú, utilizar el patrón modelo-vista-presentador, implementar el manejo de eventos en UI Toolkit y más. La mecánica del juego es la de un juego de preguntas y respuestas muy simple, pero la intención es mostrar y enseñar técnicas de implementación que puedas usar en tus propios proyectos.
Al integrar algunos de estos patrones de diseño de manera consistente en su proyecto, puede mejorar la legibilidad del código y hacer que su base de código sea más limpia. Los patrones de diseño no solo reducen la refactorización y el tiempo dedicado a las pruebas, sino que también pueden acelerar los procesos de desarrollo para todo el equipo.
Además, la arquitectura basada en eventos, mediante la cual los componentes del juego se comunican entre sí a través de eventos, promueve un acoplamiento flexible para la escalabilidad y la capacidad de prueba.
La segunda parte de la demo consta de 10 pequeñas escenas de demostración. Cada escena de demostración representa una técnica o característica específica. Considérelos como un conjunto de recetas para inspirarse y guiarse mientras evalúa UI Toolkit para su próximo proyecto. A continuación se muestra una breve muestra de las características y técnicas del UI Toolkit que ilustran las escenas de demostración:
- UXML y árboles visuales: Los archivos UXML forman una estructura jerárquica de elementos de UI. Estos árboles visuales sirven como modelo para su interfaz de usuario.
- Flexbox: El modelo de diseño de caja flexible (Flexbox) proporciona un modelo de diseño eficiente para organizar elementos de la interfaz de usuario de forma dinámica dentro de un contenedor.
- Hojas de estilo de Unity (USS): USS permite a los desarrolladores personalizar los elementos de la interfaz de usuario con estilos predefinidos. Remodelar tu interfaz de usuario es solo una cuestión de intercambiar hojas de estilo.
- Consulta: UQuery simplifica el proceso de búsqueda a través de una jerarquía compleja de elementos de UI, lo que permite una navegación fluida hacia componentes de UI específicos dentro del árbol visual.
- Pseudo-clases: Las pseudoclases se pueden usar para crear elementos de interfaz de usuario interactivos y animados con un mínimo de código adicional, agregando “jugo” extra a su interfaz visual (por ejemplo, agrandar un botón al pasar el cursor sobre él o cambiar el color de un campo de texto después de la selección).
- Sistema de eventos del kit de herramientas de interfaz de usuario: UI Toolkit tiene su propio sistema de eventos, diseñado para manejar los clics, los cambios y la entrada del puntero de su interfaz de usuario, incluso en jerarquías complejas.
- Manipuladores: Al encapsular devoluciones de eventos relacionados en una sola clase, un manipulador promueve la reutilización y facilita la definición de interacciones del usuario (por ejemplo, un manipulador de hacer clic y arrastrar para un sistema de inventario, un manipulador de gestos para un efecto de pellizcar para hacer zoom, etc.).
- Controles personalizados: La demostración muestra cómo definir e instanciar VisualElement personalizado a través de las clases UxmlFactory y UxmlTraits. Estos controles personalizados pueden luego reutilizarse a través de scripts o del generador de UI.
Le recomendamos que descargue QuizU utilizando Unity 2022 LTS. También puedes seguir nuestra serie de artículos, publicados en Unity Discussions, que acompañan la demostración. Los artículos están aquí:
- Bienvenido al nuevo proyecto de muestra del kit de herramientas de interfaz de usuario QuizU
- Prueba U: Patrón de estado para el flujo del juego
- Gestión de pantallas de menú en UI Toolkit
- El patrón del presentador Vista de modelo
- Manejo de eventos en el kit de herramientas de UI
- Consejos de rendimiento del kit de herramientas de interfaz de usuario
En septiembre de 2022, lanzamos el kit de herramientas de interfaz de usuario de muestra: Dragon Crashers (puede leer la publicación del blogde lanzamiento). Esta demostración de una interfaz completa sobre una parte del proyecto mini RPG 2D Dragon Crashersle muestra técnicas para aprovechar UI Toolkit en sus propias aplicaciones. Es la pieza complementaria del libro electrónico Diseño e implementación de interfaz de usuario en Unity, también publicado a fines de 2022.
Ahora puedes descargar una nueva versión de UI Toolkit Sample – Dragon Crashers para Unity 2022 LTS. Las mejoras y actualizaciones en esta última versión incluyen:
- Compatibilidad con modos de pantalla horizontal y vertical en tiempo de ejecución a través de temas y GeometryChangedEvent en el kit de herramientas de UI
- Implementación de la API SafeArea para contener la funcionalidad de la interfaz de usuario dentro del área de pantalla utilizable de un dispositivo
- Se aumentó el límite de fps para dispositivos móviles a 60 fps
- Selectores y hojas de estilo USS refactorizados y simplificados
- Iconos de mayor resolución
- Posición de aparición de efectos visuales corregidos mejorada para diferentes proporciones de pantalla y algunas inconsistencias del cursor
- Patrones de diseño refactorizados para una arquitectura de interfaz de usuario más limpia
- Nuevo contenido de aprendizaje proporcionado a través de la ventana Inspector de tutoriales
También agregamos una guía de usuario para el proyecto actualizado. Esto es en respuesta a los comentarios que recibimos de los usuarios que solicitaron un mejor contenido instructivo para ayudarlos a comprender las técnicas y características utilizadas en la demostración.
Finalmente, ahora está disponible un video tutorial del proyecto para ayudarlo a navegar a través de la demostración. Échale un vistazo:
Esperamos que obtengas muchos consejos útiles con QuizU y el kit de herramientas de interfaz de usuario actualizado, ejemplo: Dragon Crashers. Encontrará todos los libros electrónicos avanzados de Unity para programadores, artistas, artistas técnicos y diseñadores en el centro de mejores prácticas de Unity.