Cómo crear una interfaz en Unreal Engine 5

La interfaz es una parte muy importante de todas las aplicaciones, videojuegos, programas, entre otros. Prácticamente encontramos interfaz en todos los sitios y en todos los lugares de internet. Es por eso mismo que crear una interfaz en nuestros proyectos es muy importante. Por eso he decidido crear este tutorial enseñándote cómo crear una interfaz en Unreal Engine 5. Por lo que estás interesado en conocer más sobre esto te invito a que sigas leyendo este artículo además de seguir los pasos que te iré indicando. 

Crear una interfaz en nuestra pantalla

Para poder crear este tutorial voy a hacer una interfaz sencilla en la cual mostraré una imagen y un texto. Te enseñaré cómo puedes añadir esta imagen y el texto además de modificarla un poco para que quede como nosotros queremos. También te enseñaré cómo podemos aplicar esta interfaz para que salga en nuestra pantalla.Para explicarte cómo puedes hacerlo he creado un proyecto de prueba pero tú puedes hacer esto en tu proyecto que estés trabajando hoy en crear uno de 0 para poder practicar los pasos que te iré indicando.

En primer lugar tendremos que abrir el content para poder crear lo que llevará a nuestra interfaz. Para ello haremos clic derecho de nuestro ratón en un espacio libre el cual desplegamos un menú y elegiremos user interface. Después en el siguiente elegiremos la opción llamada Blueprint Widget. Al hacer esto se mostrará una ventana la cual tendremos que seleccionar la única opción que nos permite. A continuación tenemos que hacer doble clic a lo que acabamos de crear para poder abrirlo.

Construir la interfaz

Ahora que ya  tenemos la base para poder crear la interfaz vamos a hacerla  en unos pasos. 

Si vemos en la parte izquierda del programa encontramos una opción llamada paleta. Dentro de esta opción encontramos diferentes opciones como puede ser la barra de progreso, borde, botón, casilla de verificación, imagen, entre otras opciones que podemos añadir para crear nuestra interfaz. Pero para este tutorial nos vamos a centrar solamente en la imagen y el texto. Para yo seleccionaremos imagen y la arrastraremos al espacio libre que tenemos en nuestra ventana. Al hacer esto veremos que no  podemos mover la imagen ni el texto pero podemos arreglarlo yendo al buscador de la paleta y escribiremos Panel de lienzo. Esto lo que hará es representar nuestra pantalla.

Crear un texto

Ahora podremos arrastrar el texto dentro de nuestro panel de lienzo. Para poder modificar el texto iremos a la parte derecha y donde pone texto podremos cambiar lo que queremos que diga. También podemos cambiar el color y la opacidad de nuestro texto dentro de las configuraciones que encontramos en la parte derecha cuando estamos seleccionando el texto.

Crear una imagen

Para poder crear una imagen en nuestro lienzo tendremos que seleccionar dentro de la paleta la opción de imagen y arrastrarla dentro de nuestro lindo. Para poder cambiar la imagen, tendremos que ir a la parte  derecha en el panel de detalles. Dentro de este buscaremos una opción pincel y si la desplegamos no es mostrar a una función de imagen.  Si hacemos clic en esta función podemos elegir imágenes que tengamos dentro del motor gráfico. De forma predefinida tenemos ya imágenes pero nosotros podemos añadir si descargamos o bien creamos nuestras propias imágenes. El formato ideal es el PNG ya que el motor gráfico trabaja muy bien con este formato. La imagen la puedes hacer más grande o más pequeña directamente de la imagen. También podemos cambiar el color de la misa y su posición con el panel de detalles.

Cómo añadir la interfaz en la pantalla

Cuando guardamos lo que acabamos de hacer de la interfaz en Unreal Engine 5 y le damos play podemos ver que no aparece en la pantalla la interfaz creada. Lo que tenemos que hacer es ir a la parte superior de la interfaz y seleccionar ventana. Dentro de la ventana seleccionaremos la opción ajustes del mundo. Esto lo que hará es que la parte derecha donde encontramos la ventana de detalle aparecerá una nueva ventana llamada ajustes del mundo. 

Dentro del panel que acabamos de crear veremos que hay uno que se llama game mode. El siguiente paso es que en la parte derecha encontraremos un icono de una lupa el cual presionaremos para encontrar el siguiente archivo. Si es la primera vez que abres el archivo que nos ha indicado. Aparecerá una pantalla la cual tenemos que seleccionar open full blueprint editor.

Una vez dentro crearemos un nodo haciendo clic  derecho de nuestro ratón en un espacio libre de la ventana que acaba de salir. Este nodo se llama Event Begin Play. Este nudo se activa cuándo comienza el juego. Tenemos que crear otro nodo llamado Create Widget. Dentro del nuevo nodo donde pone class, abrimos el desplegable y elegiremos interfaz. Ahora sí vamos a guardar y volvemos a dar al play veremos que aún sigue sin aparecer la interfaz en nuestra pantalla.

Por lo que necesitaremos un nuevo nodo extra para indicar a Unreal Engine que queremos mostrar la interfaz en pantalla. Este nodo se llama añadir a ventana gráfica. Tenemos que unir además return value on meta. Ahora cuando le demos a guardar y le demos al play al juego podemos leer que ya tenemos la interfaz que hemos creado anteriormente en nuestra pantalla.

 

“Te recomendamos Cómo funciona la tienda Unity Asset Store”

 

Como puedes ver crear una interfaz en Unreal Engine 5 es bastante sencillo además de que nos permite crear diferentes tipos de objetos en nuestra interfaz. Recuerda que cuando termine de crear la interfaz es importante conectar los nodos para que este aparezca en pantalla.