Temas de UI para Unity

Para qué sirve este sistema

Reutilizar prefabs de UI en Unity suena bien hasta que dos pantallas quieren que el mismo botón tenga un aspecto ligeramente distinto. Entonces los prefabs se duplican como variantes, los colores se ajustan localmente, las tipografías derivan y el sistema de diseño antes compartido se fragmenta. Lo mismo pasa con los sonidos de UI: cada botón coge su propio clip de clic hasta que los clics suenan distintos en cada pantalla.

El sistema de Temas de UI de Serenity te permite describir la personalidad visual y sonora de una UI como un asset de definición y compartirla entre menús, modales y otras pantallas.

El problema en Unity

Sin una capa de tema, la coherencia de UI depende de la disciplina humana. Diseñadores y desarrolladores tienen que acordarse de usar el mismo color, la misma tipografía y el mismo sonido al pasar el ratón. Los proyectos reales se olvidan. Peor: cuando el tema cambia, los cambios tienen que propagarse a mano entre cada variante de prefab.

El feedback sonoro es la misma historia. Clic, hover, confirmación y cancelación aparecen en botones individuales y poco a poco van divergiendo hasta que cada pantalla tiene su firma sonora, a menudo por accidente.

Cómo lo aborda Serenity

Serenity describe los temas de UI mediante IUiThemeDefinition y lo empareja con dos contratos de componente: IUiThemeComponents para los componentes visuales e IUiThemeSounds para los componentes de audio. El lado de sonido tiene su propio contrato de definición IUiThemeSoundsDefinition. Assets específicos de Unity como UnityUiThemeDefinition, UnityUiThemeComponents, UnityUiThemeSounds y UnityUiThemeSoundsDefinition implementan esas interfaces como ScriptableObjects.

Un UiThemeValidator y un UnityUiThemeDefinitionEditor soportan el lado de editor. Los menús referencian el tema a través de UnityMenuThemeSoundFactory, así que los sonidos de UI del menú vienen del tema y no de cada botón.

Como el tema es un único asset, reestilizar la UI se convierte en un cambio controlado. Editas la definición, los consumidores recogen los nuevos valores y los prefabs no hace falta tocarlos. Pueden coexistir varios temas en el proyecto y el activo se puede asignar por build o por modo de juego.

Cómo encaja en Serenity

Los Temas de UI viven en el namespace Serenity.Ui. Las interfaces de Dominio definen el contrato del tema. La capa de Infraestructura aporta las implementaciones Unity como ScriptableObject. La capa de Installation aporta la configuración del asset y el soporte de editor, incluido el validador que detecta referencias ausentes antes de tiempo de ejecución.

Los Temas de UI conectan con el Sistema de Menús para las pantallas de menú, con el Sistema de Modales para diálogos de confirmación y entrada, con el Reproductor de audio para que los sonidos de UI pasen por el mismo servicio que los de gameplay y con Localización cuando hay assets localizados en el tema. Cambiar el tema activo cambia la apariencia y el sonido de cada consumidor a la vez.

La separación entre IUiThemeComponents e IUiThemeSounds es importante. Significa que puedes cambiar la identidad sonora de la UI sin tocar la visual, y al revés. Los proyectos que envían varios temas visuales pero un único tema sonoro, o al contrario, no tienen que duplicarlo todo para mantener independientes los dos ejes.

Flujo de trabajo práctico

1. Crea un asset UnityUiThemeDefinition para la identidad visual y sonora que quieras.
2. Configura UnityUiThemeComponents con los prefabs y referencias visuales usados por menús y modales.
3. Configura UnityUiThemeSounds con los clips de clic, hover, confirmación y cancelación.
4. Ejecuta UiThemeValidator para detectar referencias ausentes durante la autoría.
5. Asigna el tema a los servicios de menú y modal mediante sus instaladores.
6. Cambia el tema cambiando la definición asignada, sin editar prefabs.

Qué incluye

• Contratos de tema IUiThemeDefinition, IUiThemeComponents e IUiThemeSounds
• Implementaciones Unity como ScriptableObject UnityUiThemeDefinition, UnityUiThemeComponents y UnityUiThemeSounds
• Contrato de definición de sonidos IUiThemeSoundsDefinition con su contraparte Unity
• Validador de tema UiThemeValidator para detectar errores pronto
• Soporte de editor mediante UnityUiThemeDefinitionEditor
• UnityMenuThemeSoundFactory conectando los sonidos del menú a través del tema
• Integración con menús, modales, reproducción de audio y localización
• Cambio de tema sustituyendo la definición asignada, no editando prefabs

Cuándo usarlo

• Proyectos con más de una pantalla de UI que deben compartir visuales y feedback sonoro.
• Equipos que quieren reestilizar la UI sin tocar prefabs individuales.
• Juegos que necesitan soportar varios temas, por ejemplo variantes claro y oscuro o estilizado por facción.
• Bases de código que se mueven del sonido y los visuales configurados por botón a algo compartido.

Sistemas relacionados

• Sistema de menús para Unity Menús declarativos, temas de UI compartidos y navegación predecible, configurados como assets en vez de cableados a mano sobre GameObjects.
• Sistema de modales para Unity Modales de confirmación, aviso y entrada reutilizables, dirigidos por señales tipadas y parámetros compartidos.
• Reproductor de audio para Unity Reproducción centralizada con assets de definición, emisores y señales tipadas para sonidos de UI y de juego.
• Sistema de localización para Unity Cambio de idioma en tiempo de ejecución, pistas separadas para idioma de juego y de voz, y menús y modales localizados desde el primer momento.