rythm_game_tutorial_2

en Tutoriales, UE4

Juego de ritmo utilizando AudioAnalyzer (Parte 2)

Ahora que ya hemos empezado nuestro proyecto y definido nuestra instancia de juego con las variables de AudioAnalyzerManager, podemos continuar con los widget de interfaz de usuario. Con ellos vamos a mostrar la información más relevante como el título de la canción, la puntuación actual y alguna opción para interactuar.

Diseño y nivel principal
Interfaz de usuario
Game Actor

ui_widgets
Interfaz de juego
ui_game_widget

Nuestra interfaz va a ser muy simple. Vamos a mostrar solo el nombre del fichero de audio, la puntuación y un botón para abandora el juego.

quit_game_node

Para obtener el nombre del fichero podemos utilizar la variable que pusimos en la instacia de juego. El valor de esta variable debe establecerse antes de realizar este acceso.

songname_set
Widget para cuenta atrás

El segundo widget será el encargado de mostrar una cuenta atrás antes de comenzar a jugar. El jugador tendrá unos pocos segundos para prepararse.

ui_countdown_widget

CUando el contador llegue a cero tendremos que esconder el widget (Remove from parent) y comenzar la reproduccion de la canción utilizando la llamada del objecto de juego (BP_Game). Utilizaremos la referencia del actor que tenemos guardada en la instancia de juego para hacer la llamada al nodo Start Audio Playback. Podremos ver los detalles de este nodo en la siguiente parte del tutorial.

startplayback_call

Para dibujar la barra de progreso vamos a hacerlo dinámicamente utilizando un material y un parámetro escalar, con el cual controlaremos el progreso del circulo. El Dominio de este material debe ser User Interface y su modo de mezcla Translucent para permitir la transparencia en la parte interior.

ui_material

Utilizando el nodo RadialGradientExponential podemos dibujar dos círculos, el segundo de ellos un poco más pequeño que el primero, y se lo restamos para vaciar la zona interior del círculo.

Con VectorToRadialValue podemos definir una segunda máscara que aplicaremos al anillo anterior, con esta zona definiremos el progreso del anillo. Podemos ver más detalles sobre este nodo en un viejo tutorial sobre efectos de transición utilizando materiales

countdown_material

Para cambiar el progreso solo tendremos que usar Set Scalar Parameter Value y cambiar el valor de la variable (Parameter Name) Progress de una instancia dinámica del material.

countdown_progress

Para obtener la instancia dinámica de un material de un widget imagen podemos utilizar el nodo Get Dynamic Material y guardar su valor como una variable en nuestro widget de cuenta atrás para llamadas posteriores.

Este anillo de progreso completará un ciclo cada segundo, y en el último esconderá el widget y comensará el juego. Necesitamos actualizar tanto la barra de prgreso como el texto dentro del mismo utilizando el Event Tick del widget.

Con esta última modificación la interfaz de usuario está terminada, ahora continuaremos con el actor proncipal del juego.

content_browser_2

Continúa en Parte 3: Game Actor

Tutorial files

Ayudanos con este blog!

El último año he estado dedicando cada vez más tiempo a la creación de tutoriales, en su mayoria sobre desarrollo de videojuegos. Si crees que estos posts te han ayudado de alguna manera o incluso inspirado, por favor considera ayudarnos a mantener este blog con alguna de estas opciones. Gracias por hacerlo posible!

Escribe un comentario

Comentario