Crea un temporizador animado personalizado para juegos sensibles al tiempo. Con las animaciones de la IU, puedes hacer que el temporizador parpadee y desaparezca, o incluso añadir un material de cuenta regresiva personalizado que rodee al reloj.
Con este tutorial aprenderás a hacer lo siguiente:
Configurar un material.
Animar una carátula de reloj.
Cambiar el color del reloj.
Crea un widget de usuario en el explorador de contenido siguiendo las instrucciones del tutorial sobre ventanas emergentes de la IU.
Paso 1: Configura los widgets
Una vez que hayas creado el widget de usuario, haz doble clic en su miniatura para abrir el editor de widgets.
Arrastra un widget de superposición al gráfico de widgets y cambia su tamaño a 1920 x 1080 arrastrando la esquina inferior derecha. Este widget actúa como la pantalla donde se mostrará la IU.
Haz clic derecho en el widget de superposición en el panel Jerarquía para cambiar el nombre del widget a Raíz. Este nombre también te recuerda que se trata del widget que actúa como modelo de la pantalla.
Arrastra un segundo widget de superposición al widget Raíz. Este widget contendrá todos los widgets que componen el diseño y la función del temporizador animado.
Cambia el nombre del segundo widget de superposición a ParentContainer en el panel Jerarquía.
En el panel de detalles, establece las siguientes propiedades:
Relleno = 25.0
Alineación horizontal = Alineación centrada horizontalmente
Arrastra un widget de caja de tamaño hasta el widget ParentContainer. Esto determinará y aplicará el tamaño de sus widgets derivados. Los widgets derivados de la caja de tamaño se convertirán en la carátula del reloj.
Cambia el nombre del widget de caja de tamaño a BGSizeBox en el panel Jerarquía.
En el panel de detalles, establece Alineación horizontal y Alineación vertical en Alineación centrada.
Marca para seleccionar el ancho mínimo deseado y la altura máxima deseada y activar esta opción; luego, establece las propiedades en 130.0.
El contenedor debe estar en el widget Raíz como se muestra a continuación.
Arrastra un widget de imagen al widget BGSizeBox.
Cambia el nombre del widget de imagen a Temporizador en el panel Jerarquía.
En el panel de detalles, establece Alineación horizontal y Alineación vertical en Alineación centrada.
Añade una instancia de material a la propiedad Pincel > Imagen. Este podría ser un material que cuenta el tiempo.
El material llena el espacio dentro del widget Contenedor base.
Arrastra un widget de cuadro de texto al widget Contenedor base.
Cambia el nombre del widget de cuadro de texto a TimerText en el panel Jerarquía.
En el panel de detalles, establece la propiedad Texto en 00:00.
El widget de texto del temporizador o TimerText se encuentra justo en el centro del widget de usuario.
A continuación, animarás el widget de texto del temporizador para que el tiempo sea más dinámico durante el estado de urgencia.
Paso 2: Anima el texto del temporizador
Para crear una sensación de peligro inminente en el estado de urgencia durante los últimos segundos del temporizador, anima la hora del reloj.
En la animación que se crea a continuación, el texto del temporizador se agranda, se vuelve rojo y luego se desvanece. Esta animación se repetirá mientras dure el modo de urgencia establecido en el dispositivo temporizador.
Haz clic en Animaciones en la parte inferior de la pantalla del editor de widgets. Esto abre un panel de Sequencer donde puedes crear animaciones y agregar widgets a la secuencia de animación.
Haz clic en +Animación para crear un archivo de animación en tu widget de usuario.
Asigna el nombre de Urgencia a la animación. Esta animación se definirá más adelante, cuando añadas vinculaciones al widget de usuario.
Un cuadrado azul SELECCIONADO rodea el gráfico de widgets.
Haz clic en +Añadir para abrir la lista de objetos que se pueden añadir a la animación en el widget de usuario.
En el panel Jerarquía, selecciona el widget TimerText.
Selecciona TimerText de la lista para añadir TimerText al panel de Sequencer.
Junto a TimerText, selecciona el ícono + para abrir la lista de propiedades que pueden animarse.
Selecciona Transformar de la lista. Esto añade todas las formas en que puedes transformar el texto: traslación, rotación, escala y corte.
Abre las opciones en Escala y selecciona el ícono + Fotograma clave para añadir fotogramas clave a la línea de tiempo. Las opciones en Eje X y del Eje Y aumentan y disminuyen el tamaño del texto cuando ingresas nuevos valores.
Mueve el cursor de reproducción en la línea de tiempo a 0.25 segundos, cambia los valores de Eje X y Eje Y a 1.5, y luego pulsa el ícono +Fotograma clave junto a las opciones Eje X y Eje Y. Los fotogramas clave aparecen en la línea de tiempo y muestran una progresión en el TimerText.
Mueve el cursor de reproducción en la línea de tiempo a 0.5 segundos, cambia los valores de Eje X y Eje Y a 2.0, y luego pulsa el ícono +Fotograma clave junto a las opciones Eje X y Eje Y. Aparecen fotogramas clave adicionales en la línea de tiempo que muestran una progresión del texto.
Selecciona el ícono + junto a TimerText y selecciona Color y opacidad de la lista. Esto añade las propiedades Rojo, Verde, Azul y Alfa a Sequencer.
Restablece el cursor de reproducción en la línea de tiempo y selecciona el ícono + Fotograma clave junto a Color y opacidad. Esto define el primer fotograma clave para cada una de las propiedades de color y opacidad en la línea de tiempo.
Expande Color y Opacidad, cambia el valor de Rojo a 1.0, el valor de Verde a 0.0 y los valores de Azul a 0.0. Esto crea un color rojo.
Mueve el cursor de reproducción a 0.25 segundos, luego selecciona el ícono + Fotograma clave junto a cada una de las propiedades en Color y opacidad. Esto añade fotogramas clave a la línea de tiempo.
Mueve el cursor de reproducción a 0.5 segundos, cambia el valor de Alfa a 0.0 y selecciona el ícono + Fotograma clave. Cuando la animación alcanza los últimos fotogramas clave en la línea de tiempo, el texto desaparece.
Si mueves el cursor de reproducción hacia adelante y hacia atrás a través de la línea de tiempo, verás que la animación que creaste se reproduce en el gráfico de widgets.
A continuación, añadirás un modelo de vista y vinculaciones de vista para reemplazar el dispositivo temporizador por el widget de usuario.
Paso 3: Agrega las vinculaciones de vista
Para reemplazar la IU predeterminada del dispositivo temporizador, vincularás el widget de cuadro de texto (TimerText) a la configuración del dispositivo temporizador.
En el menú Ventanas, selecciona Modelo de vista. Se abrirá la ventana Modelo de vista.
Haz clic en +Modelo de vista y, luego, selecciona Dispositivo - Modelo de vista de temporizador > Seleccionar. Todos los modelos de vista del dispositivo temporizador ahora están disponibles para vincularse a tu widget de usuario.
En el panel Jerarquía, selecciona el widget TimerText.
Haz clic en Vinculaciones de vista en la barra de herramientas inferior para abrir el panel Vinculaciones de vista.
Haz clic en +Widget TimerText para añadir el widget TimerText al panel Vinculaciones de vista.
Selecciona el campo TimerText para abrir el menú desplegable de propiedades del widget.d
En el menú desplegable, selecciona TimerText > Texto > Seleccionar. Esto identifica el texto del widget TimerText como la propiedad que se vincula.
Selecciona el campo derecho en blanco para abrir el menú desplegable de vinculaciones.
En el menú desplegable de vinculaciones, selecciona Modelo de vista de TimerText > Tiempo actual > Seleccionar. Esto vincula el widget TimerText al tiempo actual del dispositivo temporizador y muestra el tiempo actual en la pantalla.
A continuación, añadirás la animación al modelo de vista para que se reproduzca en pantalla durante el modo de urgencia.
Paso 4: Añade la animación
Añadirás la animación de forma similar a como añadiste las vinculaciones para TimerText en el panel Vinculaciones de vista.
Selecciona +Añadir condición en la parte superior del panel Vinculaciones de vista. Esto añade una fila condicional al panel Vinculaciones de vista.
Abre el menú desplegable del modelo de vista y selecciona Widget de usuario > Seleccionar. Esto añade el widget de usuario a la condición.
Selecciona el campo izquierdo para abrir el menú desplegable de vinculación del modelo de vista.
Selecciona Modelo de vista en el temporizador del modo Creativo > Indica urgencia > Seleccionar. Esto usa IsUrgency como propiedad de comparación para ver si es igual a un valor específico; luego, según el valor devuelto (verdadero/falso), se activa la animación.
Cambia el campo de tiempo a 1.0. Esto significa que si Indica urgencia es igual a 1.0, el valor es verdadero y se reproduce la animación.
Selecciona el campo derecho para abrir el menú desplegable de la cola y selecciona Widget de usuario > Animación de reproducción en cola > Seleccionar. Ahora, la animación que creaste se pondrá en cola para reproducirse cuando el modo Indica urgencia sea igual a 1.0.
Junto a En animación, selecciona el ícono de vinculación para que se convierta en un ícono de enlace azul.
Selecciona el campo En animación y, luego, Widget de usuario > Nombre de la animación > Seleccionar. La animación seleccionada se reproduce cuando está en cola.
Personaliza el valor de Comenzar a la hora en 10.0. Este valor indica el segundo o fotograma en que debe comenzar la animación. Si se establece en 0.0, significa que reproducirá la animación a partir de los 0.0 segundos o fotogramas de la animación.
Establece Velocidad de reproducción en 0.5. Esto hace que la animación se reproduzca a la mitad de la velocidad definida en Sequencer.
Haz clic en Compilar para guardar tu widget de usuario.
Paso 5: Añade el dispositivo temporizador
El último paso es añadir un dispositivo temporizador al visor y personalizar su configuración.
En el explorador de contenido, selecciona la carpeta Fortnite > Dispositivos para abrir todas las carpetas de dispositivos.
Escribe Temporizador en la barra de búsqueda de la vista de recursos para que aparezca el dispositivo temporizador.
Arrastra el dispositivo temporizador hacia el visor.
En el panel de detalles, establece la duración en 30.0 segundos.
Expande la opción Avanzado para ver Clase de widget personalizado.
Selecciona tu widget de usuarioen el menú desplegable Clase de widget personalizado.
En el segundo conjunto de opciones avanzadas, utiliza la siguiente configuración:
Puede interactuar = No
Comportamiento de finalización = Restablecer
Visible durante la partida = Oculto
Habilitar modo de urgencia = Marcar
Tiempo en modo de urgencia = 10.0 segundos
Ahora los jugadores no pueden interactuar con el dispositivo, y cuando se agote el tiempo de duración definido del temporizador, este se reiniciará. Con el modo de urgencia habilitado, tu animación personalizada ahora se pondrá en cola y se reproducirá durante el tiempo definido en Tiempo del modo de urgencia.
Guarda los cambios y realiza una prueba de juego de tu proyecto para ver cómo funciona el widget de usuario en el HUD.
Tu prueba de juego debería hacer que el tiempo personalizado reemplace el temporizador predeterminado y que la animación se reproduzca durante el tiempo especificado.
Hazlo por tu cuenta
Existen varias formas de hacer que el temporizador se adapte específicamente a tu propio proyecto.
Agrega un material alrededor del TimerText que desaparezca lentamente a medida que el temporizador se agote.
Añade una textura para rodear el TimerText que parezca un reloj.
Mueve el cronómetro a la esquina en lugar de al centro de la pantalla.