Animación de IU

Actualmente, hay un error por el que no se ve un campo de condición de animación de la IU en las vinculaciones de vistas cuando no se han creado vistas de vinculaciones normales. Primero debes crear una vinculación de vista normal para poder ver los campos de enlace de condición. Este error se ha corregido en la versión 33.00.

Utiliza Sequencer en UMG para animar widgets. Los widgets se animan en función de los valores introducidos en un parámetro de material.

Actualmente, la animación de la IU solo funciona con variables de tipo float e int. Próximamente se añadirán más funciones a la animación de la IU.

Cómo configurar el widget

El widget utiliza el widget Rastreador del ejemplo de Configuración de los parámetros del material en UMG.

Crea un widget Rastreador si no tienes ninguno listo para usar. A continuación, haz lo siguiente:

1. Añade un bloque de texto que muestre un +1 sobre el widget Rastreador existente. Esto indica que el rastreador de eliminaciones aumenta en función del número de zombis eliminados.

   

2. En Renderizado > Opacidad de renderizado, establece Opacidad de renderizado en 0.0 para este bloque de texto.

   

3. El widget está listo para ser animado.

Cómo configurar la animación

Para añadir animación a tu IU, abre Sequencer en el Grafo de eventos para animar el icono y "+1". A continuación, configurarás la animación en Sequencer.

En este ejemplo, el icono aparece y el texto «+1» aparece cuando el rastreador del jugador progresa, como se muestra en el siguiente gif.

Para obtener información sobre cómo utilizar Sequencer, consulta el documento Sequencer y el rig de control.

1. Abre la ventana Animación en Ventana > Animaciones.

   

2. Haz clic en +Animación y nombra la animación OnIncrement.

   

Cómo animar la visibilidad de un widget

Para animar la IU, identifica el widget que quieres animar y, a continuación, anima el material o la textura asociados a ese widget en Sequencer, en la ventana de animación. Inicia la animación seleccionando IncrementText (+1).

1. Selecciona OnIncrement, luego selecciona el Texto +1 y, a continuación, selecciona +Añadir > Incrementar texto.

   

2. Selecciona el icono +más en la pista de IncrementText y selecciona Opacidad de renderizado. Esto te permite seguir la opacidad en el cronograma de la animación.

   

3. Establece una clave para el inicio de la animación. Determina dónde empieza y desaparece el texto.

   

4. Establece Opacidad de renderizado en:

   1. 1.0 a los 0.25 segundos

   2. 0.0 a los 0.50 segundos

   

5. Ahora tienes una animación que hace un fundido de entrada y salida del texto cada vez que el jugador consigue una eliminación.

   

Cómo animar la posición de un widget

Añade una animación a la posición del widget de texto para que el texto se mueva hacia arriba cuando sea visible antes de desvanecerse.

1. Haz clic en el icono +más en IncrementText y selecciona Transformar.

   

2. Expande Transformar > Traslación y ajusta Y en la cantidad que quieres que se mueva hacia arriba el texto +1 mientras es visible. En este ejemplo, los fotogramas clave de traslación Y del texto están ajustados del modo siguiente:

   1. 0.0 a 0.0s

   2. -20.0 a 0.25s

   3. -20.0 a 0.50s

   

   Recuerda establecer fotogramas clave para cada movimiento del texto.

Ahora el texto se mueve hacia arriba cuando aparece.

Cómo animar la escala de un widget

Aumenta el tamaño del texto +1 animado mientras se mueve para llamar la atención sobre las eliminaciones animando la configuración de escala del widget. Esta animación da la ilusión de que el texto «aparece» en la pantalla.

1. Expande IncrementText > Transformar > Escala. Los valores X e Y aparecen en Escala.

   

2. Establece la escala X e Y como fotogramas clave en tu cronograma de OnIncrement. En este ejemplo, los fotogramas clave de la escala se han ajustado del modo siguiente:

   1. 0.0 a 0.0s

   2. 2.0 a 0.10s

   3. 0.0 a 0.50s

Ahora el texto +1 aparece con un efecto dramático cuando se reproduce la animación.

Cómo animar un parámetro de material del pincel de imagen

Para hacer que el icono del material se expanda con el progreso del rastreador, accede al material a través de Sequencer.

1. Selecciona Imagen de TrackerMaterial y, a continuación, haz clic en +Añadir > TrackerMaterial en la animación OnIncrement.

   

2. Haz clic en el icono +más de la pista TrackerMaterial y selecciona Brush.Brush Material. Esto añade una pista de material a la propiedad Brush.Brush Material.

   

3. Haz clic en el icono +más de la nueva pista Brush.Brush.Material y selecciona IconScaleX e IconScaleY.

   

   Expande IconScaleX e IconScaleY. Puedes manipular fácilmente estos parámetros en Sequencer cuando se reproduzca la animación de OnIncrement. Con estos ajustes puedes animar el icono escalando hacia arriba y hacia abajo.

4. Establece IconScaleX y IconScaleY del modo siguiente:

   1. 0.7 a 0.00

   2. 1.0 a 0.25

   3. 0.7 a 0.00

   

Ahora la animación utiliza los parámetros de material de TrackerMaterial para animar el icono, como en el gif siguiente.

Cómo añadir una condición de animación

Ahora que tu animación está lista, vincúlala a un valor del juego para que reproduzca una animación cuando cambie un valor del juego.

1. Abre la ventana Vinculaciones de vistas desde Ventana > Vinculaciones de vistas.

   

2. En la ventana Vinculaciones de vistas, selecciona +Añadir condición.

   

   El cuadro de la izquierda es para el valor del juego cuyos cambios quieres registrar, de modo que se reproduzca la animación de la derecha. En este momento, +Añadir condición solo acepta valores float o int.

   
   

3. Selecciona la casilla de la izquierda y, a continuación, selecciona MVVM_UEFN_Tracker > Valor. Esto hace un seguimiento del progreso del rastreador mediante la reproducción de una animación cada vez que se incrementa el valor del rastreador.

   

4. Haz clic en el menú desplegable del medio y selecciona Más de (>).

   Las dos casillas del centro son las condiciones que quieres que se cumplan para reproducir la animación. Siempre que cambie el valor, comprueba si está dentro de esa condición y, si es así, reproducirá la animación.

   Configurándolo en Más de (>) 0.0, la IU reproducirá la animación siempre que cambie este valor.

   

5. Selecciona la casilla de la derecha y, a continuación, selecciona WBP_{NombreDeTuWidget} > Poner en cola la reproducción de la animación. La casilla de la derecha es la acción que se debe realizar cuando este valor cumple la condición. En este caso, reproducir la animación OnIncrement creada anteriormente.

   

   En Vinculaciones de vistas aparece una lista de opciones pertenecientes a la animación que quieres reproducir.

   • En animación = Reproducir

   • Hora de inicio = Selecciona una hora

   • N.º de bucles de reproducción = Número de veces que se repite la animación.

   • Modo de juego = Avance, Retroceso o Ida y vuelta

   • Velocidad de reproducción = Acelera o ralentiza la animación.

   • Restaurar estado = Restaura la animación a su estado predeterminado.

   

6. Haz clic en el icono de enlace situado junto a InAnimation y, a continuación, selecciona WBP_{NombreDeTuWidget} > OnIncrement > Seleccionar.

   

Ahora tu animación está configurada para reproducirse siempre que el rastreador progrese.

Resultado final

A medida que los jugadores eliminan enemigos o PNJ, la interfaz de usuario muestra el progreso de la eliminación con el icono explotando y el +1 apareciendo, explotando y desapareciendo.