El menú es algo esencial en un videojuego. Nos orienta y nos deja acceder a diferentes opciones como los ajustes, créditos, o jugar, entre otros.
Hay muchas formas de hacer un menú ya que dependiendo de lo que necesites y pretendas mostrar necesitarás hacerlo de una forma u otra.
Hoy vamos a aprender cómo hacer un menú dinámico al estilo Just Cause 3 de una forma sencilla y práctica.
Crear el Blueprint Widget para el menú
Vamos a empezar creando un blueprint widget, para hacer eso en el buscador de contenido damos clic derecho, nos posicionamos sobre «User Interface» y clicamos en «Blueprint Widget«, le damos el nombre que queramos y ya lo tendremos creado.
Añadir texto de interacción en el Widget
Cuando lo abramos, veremos un recuadro. Este representa la pantalla.
Vamos a añadir un texto que indicará qué letra que hay que pulsar para iniciar partida.
Comenzamos posicionándonos sobre la paleta de la esquina superior izquierda y buscamos un bloque llamado ‘Text’, lo arrastramos al recuadro y ya lo habremos añadido. Para cambiar el contenido de este texto nos dirigimos a el panel de detalles, en la zona derecha de la pantalla, y dentro del apartado «Content«, cambiamos el texto al que queramos, como por ejemplo «pulsa la tecla Z para empezar«. Finalmente, le damos la posición correcta en nuestra «pantalla virtual».
Hacer por código que el texto parpadee
Para hacer que el texto parpadee y así llamar la atención nos dirigimos al apartado «Graph» situado en la esquina superior derecha junto al apartado «Designer«.
Una vez allí damos clic derecho en un sitio vacío y escribimos «Custom Event«, lo seleccionamos y le ponemos de nombre ‘Blink‘, o el que os apetezca. De ese evento personalizado sacamos un «Set visibility» (bloque que ajusta la visibilidad del widget en este caso como su nombre indica) y seguidamente un «Delay» (bloque que provoca un retraso de un determinado tiempo) el cual ajustamos al tiempo que queramos que parpadee. Copiamos los últimos 2 bloques creados (SetVisibility y Delay), los pegamos al lado y conectamos el primer Delay con el segundo Set Visibility, recordad que en el segundo bloque de SetVisibility tenemos que cambiar la opción de In Visibility de «Visible» a «Collapsed«.
Después de estos 4 bloques vamos a sacar otro, llamado de la misma forma que el Custom Event, en nuestro caso «Blink», de esta forma haremos que al terminar el proceso de cambiar de Visible a No Visible se vuelva a ejecutar a el mismo creando así un bucle infinito.
Por último en el «Event Construct» (bloque que ya debe estar al entrar, si no lo creamos como cualquier otro) sacamos otra vez nuestro Custom Event (Blink).
Transición de la cámara – De menú a jugador
Ahora ya hemos hecho que el texto parpadee, pero si ejecutamos el juego podremos ver que sigue sin aparecer, eso es porque aún no lo hemos añadido a la pantalla, para hacer eso cerramos la pestaña de widget y en la parte superior seleccionamos Blueprints > OpenLevel Blueprint
Una vez dentro creamos un Custom Event y en nuestro caso le pondremos de nombre «SpawnMenu» de allí sacamos un «set view target with Blend«, es importante para poder elegir ese nodo, tener deseleccionada la casilla «Context Sensitive«.
Nos va a pedir un «New View Target» para indicar cual será la cámara que se proyectará al mostrar el menú, para eso tendremos que crear una.
Vamos a la pantalla principal y en «Modes» buscamos «Camera«, la arrastramos dentro del nivel y la colocamos de forma que muestre lo que queramos que se vea en el menú.
Una vez ajustada la cámara volvemos al Open Level Blueprint con la cámara seleccionada y con clic derecho (recordad volver a marcar el Context Sensitive) seleccionamos «Create a Reference to *Nombre de la cámara*«, esta referencia la conectamos a New View Target.
Seguidamente vamos a conectar el Target sacando un «Get Player Controller«.
Esto que acabamos de crear se encarga de llamar al evento de ‘Spawn Menú‘ y que la cámara se posicione donde nosotros elijamos. Entonces ahora lo que tenemos que crear es otro custom event que borre el mensaje de <Pulsa Z para comenzar> y hacer la transición de la cámara del menú a la del personaje.
Primero creamos un Custom Event, nosotros le llamaremos ‘First’ y de él sacaremos un «Remove All Widgets» (bloque que como bien indica su nombre borra todos los Widgets que estén creados en ese momento), sacamos otro set view target with Blend y el Get Player Controller también lo conectamos a este Target. En el New View Target, como os podréis imaginar, tenemos que seleccionar a nuestro personaje, para eso vamos a seleccionar nuestro personaje en el nivel y vamos a crear una referencia a él como antes, lo conectamos y ya lo tenemos ajustado para que se cambie.
Para que funciones, solo faltará asignarle un botón a ese evento, damos clic derecho y buscamos Input + la letra que queramos (o en el caso de que tengamos los inputs configurados con nombres personalizados, también podemos ponerlos).
Seguidamente, desde Pressed sacamos un DoOnce (bloque que provoca que todo lo que tenga conectado después de él solo se ejecute una sola vez a no ser que se reinicie), sacamos un «Disable Input» (bloque que nos quita el control) y en su target conectamos la referencia del personaje.
De él sacamos el evento ‘First‘, en nuestro caso, y finalmente añadimos un «Delay«.
Es muy importante ajustar el tiempo del Delay al mismo que el «set view target with Blend».
Por ultimo sacamos un «Enable Input» y ya tendríamos terminado el sistema para mover la cámara de un sitio a otro. Ahora vamos a hacer que al iniciar partida se muestre en la pantalla.
Mostrar Widget en pantalla del jugador
Nos dirigimos al bloque «BeginPlay» (este bloque se ejecuta una sola vez siempre que se inicia el nivel), en el caso que no lo tengamos, lo creamos. De él sacamos el evento personalizado de «SpawnMenu» y de este sacamos un Disable Input en el cual el Target es el jugador (ya sabéis como hacer una referencia a él).
Seguidamente, desde Disable Input sacamos un «Create Widget» (bloque que creará el widget en el nivel pero no lo va a mostrar), te pedirá la Class, lo desplegamos y seleccionamos el menú que creamos al inicio del tutorial, y por último sacamos un «Add to Player Screen» (bloque que va a mostrar el widget creado anteriormente en la pantalla).
Listo, ya tenemos el sistema creado por completo y listo para usar.
¡Disfrutad y recordad visitar los demás artículos para poder aprender mucho más!