Crea un cronómetro animado personalizado para juegos en los que el tiempo es importante. Con las animaciones de la interfaz de usuario, puedes hacer que el cronómetro emita pulsos y desaparezca, o incluso añadir un material de cuenta atrás personalizado que rodee al reloj.
Este tutorial te muestra cómo:
Configurar un material.
Animar la esfera de un 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 interfaz de usuario.
Paso 1: Configura los widgets
Una vez que hayas creado el widget de usuario, haz doble clic en la miniatura del widget de usuario para abrir el editor de widgets.
Arrastra un widget Superposición al grafo 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 Superposición en el panel Jerarquía para cambiar el nombre del widget a Raíz. Este nombre también te recuerda que es el widget que actúa como modelo de la pantalla.
Arrastra un segundo widget Superposición al widget Raíz. Este widget contendrá todos los widgets que componen el diseño y el funcionamiento del cronómetro animado.
Cambia el nombre del segundo widget Superposición a Contenedor padre en el panel Jerarquía.
En el panel Detalles, establece las siguientes propiedades:
Relleno = 25.0
Alineación horizontal = Alineación horizontal centrada
Arrastra un widget Caja de tamaño al widget Contenedor padre. Esto determinará y aplicará el tamaño de sus widgets hijos. Los widgets hijos de la caja de tamaño se convertirán en la esfera del reloj.
Cambia el nombre del widget Caja de tamaño a BGSizeBox en el panel Jerarquía.
En el panel Detalles, establece Alineación horizontal y la Alineación vertical en Alineación centrada.
Marca Anchura mínima deseado y Altura máxima deseada para activar esta opción y, a continuación, establece las propiedades en 130.0.
El contenedor debe estar en el widget raíz, tal y como se muestra a continuación.
Arrastra un widget Imagen al widget BGSizeBox.
Cambia el nombre del widget Imagen a Cronómetro en el panel Jerarquía.
En el panel Detalles, establece Alineación horizontal y la Alineación vertical en Alineación centrada.
Añade una instancia de material a la propiedad Pincel > Imagen. Puede ser un material que cuente el tiempo.
El material rellena el espacio dentro del widget contenedor padre.
Arrastra un widget Cuadro de texto al widget Contenedor padre.
Cambia el nombre del widget Cuadro de texto a Texto del cronómetro en el panel Jerarquía.
En el panel Detalles, establece la propiedad Text en 00:00.
El widget Texto del cronómetro se encuentra justo en el centro del widget de usuario.
A continuación, animarás el widget Texto del cronómetro para que el tiempo sea más dinámico durante el estado de urgencia.
Paso 2: Anima el texto del cronómetro
Para crear una sensación de peligro inminente para el estado de urgencia durante los últimos segundos de tu cronómetro, anima el tiempo del reloj.
En la animación que se crea a continuación, el texto del cronómetro se agranda, se vuelve rojo y luego se desvanece. Esta animación se repetirá mientras dure el modo de urgencia establecido en el dispositivo Cronómetro.
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 añadir widgets a la secuencia de animación.
Haz clic en +Animación para crear un archivo de animación en tu widget de usuario.
Nombra la animación Urgencia. Esta animación se establecerá más tarde cuando añadas vinculaciones al widget de usuario.
Un cuadrado azul SELECCIONADO rodea el grafo 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 Texto del cronómetro.
Selecciona Texto de cronómetro en la lista para añadirlo al panel Sequencer.
Junto a Texto del cronómetro, selecciona el icono + para abrir la lista de propiedades que se pueden animar.
Selecciona Transformar en la lista. Esto añade todas las formas en que puedes transformar el texto: traslación, rotación, escala y cizallamiento.
Abre las opciones de Escala y selecciona el icono +Fotograma clave clave para añadir fotogramas clave al cronograma. Las opciones Eje X y Eje Y aumentan y disminuyen el tamaño del texto cuando introduces nuevos valores.
Mueve el cabezal de reproducción en el cronograma hasta 0.25 segundos, cambia los valores de los ejes X e Y a 1.5 y, a continuación, pulsa el icono +Fotograma clave situado junto a las opciones Eje X y Eje Y. Los fotogramas clave aparecen en el cronograma mostrando una progresión en el texto del cronómetro.
Mueve el cabezal de reproducción en el cronograma hasta 0.5 segundos, cambia los valores de los ejes X e Y a 2.0 y, a continuación, pulsa el icono +Fotograma clave situado junto a las opciones Eje X y Eje Y. Aparecen fotogramas clave adicionales en el cronograma que muestran la progresión del texto.
Selecciona el icono + junto a Texto del cronómetro y selecciona Color y opacidad en la lista. Esto añade las propiedades de rojo, verde, azul y alfa a Sequencer.
Restablece el cabezal de reproducción en el cronograma y selecciona el icono +Keyframe junto a Color y opacidad. Establece el primer fotograma clave de cada una de las propiedades de color y opacidad del cronograma.
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 cabezal de reproducción a 0.25 segundos y, a continuación, selecciona el icono +Keyframe situado junto a cada una de las propiedades en Color y opacidad. Esto añade fotogramas clave al cronograma.
Mueve el cabezal de reproducción a 0.5 segundos, cambia el valor alfa a 0.0 y selecciona el icono +Fotograma clave. Cuando la animación alcanza los últimos fotogramas clave del cronograma, el texto desaparece.
Si mueves el cabezal de reproducción hacia delante y hacia atrás por el cronograma, verás que la animación que has creado se reproduce en el grafo de widgets.
A continuación, añadirás un modo de visualización y vinculaciones de vistas para sustituir el dispositivo Cronómetro por el widget de usuario.
Paso 3: Añade las vinculaciones de vistas
Para sustituir la IU predeterminada del dispositivo Cronómetro, vincularás el widget Cuadro de texto (Texto del cronómetro) a la configuración del dispositivo Cronómetro.
En el menú Ventana, selecciona Viewmodel. Se abre la ventana Viewmodel.
Haz clic en +Viewmodel y, a continuación, selecciona Dispositivo - Modelo de vista del cronómetro > Seleccionar. Todos los Viewmodels del dispositivo están ahora disponibles para ser vinculados a tu widgets de usuario.
En el panel Jerarquía, selecciona el widget Texto del cronómetro.
Haz clic en Vinculaciones de vistas en la barra de herramientas inferior para abrir el panel Vinculaciones de vistas.
Haz clic en +Widget Texto del cronómetro para añadir el widget Texto del cronómetro al panel Vinculaciones de vistas.
Selecciona el campo Texto del cronómetro para abrir el menú desplegable de propiedades del widget.
En el menú desplegable, selecciona Texto del cronómetro > Texto > Seleccionar. Esto identifica el texto del widget Texto del cronómetro como la propiedad que se está vinculando.
Selecciona el campo en blanco de la derecha para abrir el menú desplegable de vinculaciones.
En el menú desplegable de vinculaciones, selecciona Modelo de vista Texto del cronómetro > Hora actual > Seleccionar. Esto vincula el widget Texto del cronómetro a la hora actual del dispositivo Cronómetro y muestra la hora actual en 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 de Texto del cronómetro en el panel Vinculaciones de vistas.
Selecciona +Añadir condición en la parte superior del panel Vinculaciones de vistas. Esto añade una fila condicional al panel Vinculaciones de vistas.
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 de la izquierda para abrir el desplegable de vinculación del modelo de vista.
Selecciona el modelo de vista del cronómetro del modo Creativo > Es urgencia > Seleccionar. Utiliza `Es urgencia` como propiedad de comparación para ver si es igual a un valor específico y, a continuación, en función del valor devuelto (sí/no), activa la animación.
Cambia el campo de tiempo a 1.0. Esto significa que si `Es urgencia` es igual a 1.0, el valor es correcto y se reproduce la animación.
Selecciona el campo de la derecha para abrir el menú desplegable de la cola y selecciona Widget de usuario > Poner en cola la reproducción de la animación > Seleccionar. Ahora la animación que has creado se pondrá en cola para reproducirse cuando el modo de urgencia sea igual a 1.0.
Junto a En animación, selecciona el icono de vinculación para que se convierta en un icono de vínculo azul.
Selecciona el campo En animación y luego selecciona Widget de usuario > Nombre de la animación > Seleccionar. La animación seleccionada se reproduce cuando está en cola.
Personaliza el valor de Hora de inicio en 10.0. Este valor es el segundo/fotograma en el que la animación debe empezar a reproducirse. Si se establece en 0.0, significa que reproducirá la animación a partir de los 0.0 segundos/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 establecida en Sequencer.
Haz clic en Compilar para guardar tu widget de usuario.
Paso 5: Añade el dispositivo Cronómetro
El último paso es añadir un dispositivo Cronómetro 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 Cronómetro en la barra de búsqueda de la vista de recursos para que aparezca el dispositivo Cronómetro.
Arrastra el dispositivo Cronómetro al visor.
En el panel Detalles, establece Duración en 30.0 segundos.
Expande la opción Avanzado para mostrar la clase de widget personalizada.
Selecciona tu widget de usuarioen el menú desplegable Clase de widget personalizada.
En el segundo conjunto de opciones de Avanzado, utiliza los siguientes ajustes:
Puede interactuar = No
Comportamiento de compleción = Reiniciar
Visible durante la partida = Oculto
Habilitar modo de urgencia = Seleccionado
Tiempo en modo de urgencia = 10.0 segundos
Ahora los jugadores no pueden interactuar con el dispositivo, y cuando el cronómetro termine su tiempo establecido, se reiniciará. Con el Modo de urgencia activado, tu animación personalizada se pondrá en cola y se reproducirá durante el tiempo establecido en Tiempo en modo de urgencia.
Guarda los cambios, y luego haz 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 dar como resultado que el tiempo personalizado reemplace al dispositivo Cronómetro predeterminado y reproduzca la animación durante el tiempo especificado.
Por tu cuenta
Hay varias formas de hacer que el cronómetro sea único en tu propio proyecto.
Añade un material alrededor del texto del cronómetro que desaparezca lentamente a medida que se agote el tiempo.
Añade una textura para rodear el texto del cronómetro que parezca un reloj.
Mueve el cronómetro a la esquina en lugar de al centro de la pantalla.