¿Cómo Crear una INTERFAZ (UI) en Unreal Engine 5? - Widgets Blueprints

▶

Te voy a mostrar cómo puedes agregar estos Widgets (objetos o recursos) a la interfaz de usuario justo cuando inicias tu juego en Unreal Engine 5.

1. Uso y Aplicaciones Comunes

Esta técnica es fundamental para crear el HUD (Heads-Up Display) y mostrar información relevante al jugador:

• Estadísticas del Jugador: Porcentaje de objetos recogidos, número de enemigos eliminados, contador de muertes, etc.
• Información de Estado: Porcentaje de vida o salud (que será nuestro ejemplo), barras de energía, o mana.

2. Elementos del Ejemplo

En nuestro caso práctico, vamos a añadir una interfaz simple que incluye:

• Una barra que utilizaremos para representar la vida.
• Algún texto informativo.
• Algunas imágenes de referencia.

Esto es solo una muestra; la implementación final depende de lo que necesites mostrar.

Widget Blueprint

Para esto lo primero es ahora aquí tu person character en mi caso viene siendo este y por aquí te recomiendo que te crees una carpeta yo la llamé como UI para la interfaz gráfica click derecho user interface y el llamado aquí widget blueprint:

Buscar aquí en la de en este panel por Canvas panel:

Al crear la interfaz de usuario, se te presentará una "cajita" que será tu espacio de diseño para agregar todos tus widgets, componentes, textos, imágenes y botones.

1. ️ Agregando Elementos

Agregar elementos es intuitivo:

• Arrastrar y Soltar: Simplemente tienes que buscar el elemento deseado (por ejemplo, Image o Text) en la barra lateral y arrastrarlo al espacio de diseño.
• Personalización: Una vez agregado, puedes navegar por el panel lateral para ajustar las opciones específicas de ese widget (tamaño, color, fuente, etc.).

Próximos Pasos: En otro video te mostraré cómo realizar el binding para que estos elementos (como un campo de texto) puedan actualizarse dinámicamente mediante variables del juego.

2. Posicionamiento y Anclas (Anchors)

Para organizar y posicionar tu widget de manera efectiva, debes usar las Anclas (Anchors):

• Función: Las anclas te permiten indicar en qué posición de la pantalla deseas que aparezca tu widget (ej., esquina superior izquierda, centro inferior, etc.).
• Ajuste: Luego puedes mover y refinar la posición del widget dentro de ese marco. Esto es crucial, ya que al establecer los límites mediante estas herramientas, te aseguras de que el widget aparezca correctamente sin importar la resolución o el tamaño de la pantalla del usuario.

Nodo Create Widget

Una vez que has diseñado tu página o Canvas (el Widget de Interfaz de Usuario), el siguiente paso es atar este Widget al Viewport para que aparezca en pantalla cuando el juego comience.

Como puedes notar, la interfaz solo es visible cuando el juego se inicia. Para lograr esto, debes seguir los siguientes pasos en tu Blueprint de personaje:

• Abrir el Character Blueprint: Abre el Blueprint de tu personaje principal (por ejemplo, PlayerCharacter).
• Usar el Evento Inicial: En el Event Graph, busca el nodo Event Begin Play.
• Crear el Widget: Conecta el Event Begin Play al nodo Create Widget.
  • Clase: En la opción de Class del nodo Create Widget, busca y selecciona el archivo de Widget que acabas de diseñar (en mi caso, Player Hud).
• Añadir al Viewport: Finalmente, conecta el nodo Create Widget a un nodo Add to Viewport.

Esto garantiza que al comenzar el juego, el Widget se cree y se muestre inmediatamente en la pantalla del jugador.

Nodo Viewport

Una vez que has seleccionado la clase del Widget (Player Hud), el nodo Create Widget cambia automáticamente para reflejar la clase que acabas de elegir.

• Creación del Widget: En este punto, hemos creado la instancia del Widget (la clase que diseñaste).
• Acción Requerida: Ahora tenemos que decidir qué hacer con esa instancia. El objetivo es que aparezca en pantalla.

Conexión Final

Añadir a la Pantalla: Para mostrar el Widget en el juego, debemos utilizar el nodo Add to Viewport.

• Conexión: Conecta el resultado de la instancia (Return Value) del nodo Create Widget al nodo Add to Viewport.
• Nota: Al buscar el nodo, ten cuidado de escribir Add to Viewport correctamente para asegurarte de que aparezca en las opciones.

Eso es todo. Con estos sencillos pasos, aseguras que tu HUD (la instancia de tu Widget) se muestre correctamente en la pantalla cuando el juego se inicia.

Ya esta parte del nodo esto es otra cosa que estoy haciendo y no tiene nada que ver con esto lo importante es el vi y el widget Y eso sería prácticamente todo ya con esto cuando inicies tu juego vas a ver tus elementos en pantalla