Introducción al HUD en Unreal Engine 4 – Parte 1

En los videojuegos, el HUD (Head Up Display) es el contenedor con toda la información que se encuentra sobre la vista de la cámara (como pegatinas en el lente de la cámara). Su propósito es informar al jugador del estado actual del juego, como puede ser, la salud de su personaje, la energía, las municiones o el mini mapa. El HUD no solo sirve para mostrar en un primer nivel la información propia del personaje protagónico, también nos sirve para mostrar cualquier información que pueda ser útil, por ejemplo, un caso que se usa mucho en los juegos de estrategia, es mostrar el indicador de salud sobre los personajes.

En este tutorial veremos cómo implementar el HUD de nuestro juego en Unreal Engine 4, para que el usuario tenga siempre a la vista la salud de su personaje, el arma que tiene equipada y las municiones que le quedan. También implementaremos un indicador de salud sobre los enemigos al estilo de los juegos de estrategia.

NOTA: Este tutorial ha sido desarrollado con Unreal Engine 4.6.1, si estás trabajando con otra versión puede que encuentres algunas diferencias ya que el Engine está en constante actualización. De ser así, déjame tus comentarios al final del post y buscamos juntos la solución.

El HUD en Unreal Engine 4

En Unreal Engine la clase GameMode es el núcleo de nuestro juego. Desde el Editor podemos definir fácilmente el GameMode que usará el juego dando clic en la opción World Settings del Toolbar y buscando la sección Game Mode, como hemos hecho ya en tutoriales anteriores.

La clase GameMode tiene cuatro atributos puntales de nuestro juego, hasta ahora hemos visto dos de ellos.

Default Pawn Class: Representa el Pawn del personaje protagónico, el que controlará el jugador

Player Controller Class: Es el Player Controller que poseerá al Pawn para poderlo controlar, es como la interfaz entre el jugador y el personaje dentro del juego.

Además de estos, el GameMode tiene dos atributos más, muy importantes:

Game State Class: Contiene el estado del juego, por ejemplo, la lista de misiones que has ganado, la puntuación actual del jugador y todas las cosas que en general determinen el estado del juego. Hasta ahora siempre hemos usado la clase por defecto que nos brinda el Engine.
Por último, el Game Mode tiene el atributo que veremos en este tutorial, el HUD Class.

HUD Class: Este atributo es una instancia de la clase AHUD que nos brinda el framework y nos permite definir la clase que implementará el HUD de nuestro juego. La clase AHUD es la que nos permitirá dibujar todo el contenido que se mostrará sobre la pantalla. Cada PlayerController tiene una instancia de su propio HUD y lo que se dibuje mediante ese HUD será dibujado en el ViewPort de ese Player Controller. En el caso de los juegos multiplayers que dividen la pantalla, varios ViewPorts comparten la misma pantalla, pero cada HUD dibuja su contenido en su propio Viewport, o sea, en su propio espacio en la pantalla.

La clase AHUD cuenta con un Canvas (instancia de UCanvas) sobre el que podemos pintar texturas, textos, rectángulos etc. Sobrescribiendo el método DrawHUD podemos dibujar sobre el HUD toda la información que queramos con métodos como DrawTexts o DrawRect y muchos otros que puedes ver en la declaración de la clase en los fuentes del Engine.

En versiones anteriores del Unreal este era el mecanismo por excelencia para implementar el HUD de nuestro juego. Crear una clase que herede de AHUD, sobrescribir el método DrawHUD para dibujar todo lo que necesitáramos e inicializar el HUDClass del GameMode con una instancia de esta clase. Pero en las versiones más reciente del Engine también contamos con una herramienta mucho más a “alto nivel“ y mucho más cómoda, que nos permite implementar nuestro HUD básicamente mediante “Drag and Drop“ de componentes, el Unreal Motion Graphics (UMG).

Unreal Motion Graphics (UMG) es una herramienta que nos brinda el Engine para crear los elementos UI como el HUD, menues del juego etc. El núcleo del UMG son los Widgets, que no son más que una serie de componentes preconstruidos que podemos usar para confeccionar la interfaz que queramos. Entre estos Widgets tenemos botones, checkboxes, barras de progreso y montón de componentes muy cómunes en las interfaz y que podemos incluir y customizar muy facil.

Estos Widgets son editados desde el Widget Blueprint. Un editor blueprint muy parecido al Blueprint Editor con el que hemos trabajado pero que tiene dos modos, el Graph y el Designer. El Graph ya sabemos para lo que es :) y el Designer es un espacio de trabajo donde podemos diseñar, al estilo “Drag and Drop“, la interfaz.

En este tutorial vamos a explorar ambos mundos. Vamos a implementar la parte del HUD que muestra toda la información del Player mediante el UMG y vamos a crear nuestra propia clase AHUD para mostrar también en el HUD, sobre los enemigos, una barra de salud a modo de indicador. De esta forma podremos dar un acercamiento a las dos variantes y quedará por tu parte seleccionar la vía que más te agrade cuando vayas a desarrollar el HUD de tu juego.

Nota: Para el desarrollo de este tutorial vamos a partir del proyecto que terminamos en el tutorial: Implementando un AI Character con un arma en UE4 donde ya tenemos todas las cosas necesarias del gameplay. Esto nos permitirá centrarnos exclusivamente en lo referente al HUD.

En este tutorial vamos a implementar el HUD para que el jugador tenga siempre a la vista la información del estado del juego (salud nuestra, salud del enemigo, arma equipada, cantidad de municiones, etc). Al terminar el HUD de nuestro juego se verá así:

Captura del juego donde se ve como quedará el HUD una vez que terminemos las dos partes que conforman este tutorial

Captura del juego donde se ve como quedará el HUD una vez que terminemos las dos partes que conforman este tutorial

 

Bien, despues de toda esta teoría ya podemos pasar a la práctica. Lo primero que vamos a agregar al HUD de nuestro juego será una barra de progreso que refleje la salud del personaje, y para esto usaremos los Widgets y el Unreal Motion Graphic.

Creando una barra de progreso que refleje la salud del personaje mediante el Unreal Motion Graphics (UMG)

Crea una nueva carpeta en el Content Browser, una vez dentro da clic derecho en un espacio en blanco y selecciona User Interface/Widget Blueprint, nómbralo HUDWidgetBlueprint y ábrelo.

Opción de widget blueprint para la creación del HUD

Opción de widget blueprint para la creación del HUD

 

Esto nos abrirá el editor de los Widget Blueprint. En el modo Designer es donde diseñaremos nuestro HUD. Has un poco de zoom-out al viewport viewport (usando la rueda del mouse) hasta que veas un cuadro azul. Este cuadro representa el espacio de la pantalla y será el contenedor del HUD de nuestro juego. Todos los componetes que agreguemos aquí se veran en un primer plano (como pegatinas en el lente de la cámara).

Captura del Widget Blueprint en el modo Designer

Captura del Widget Blueprint en el modo Designer

 

En el panel Palette (a la izquierda del editor) podrás encontrar agrupados por categoría todos los widgets que podemos incluir en nuestro HUD, tómate unos minutos para que le des un vistazo a todos los componentes que ya tenemos listos para usar. Busca el Progress Bar que se encuentra en la sección Common y arrástralo al contenedor del HUD en el centro de la pantalla y colócalo centrado en el borde inferior.

Paleta de componentes

Paleta de componentes

 

Una vez agregado a la escena, selecciónalo. A la derecha del editor sale el panel de detalles con las propiedades de este componente. También tómate unos minutos para dar un vistazo por todas las propiedades, para que tengas una noción de todo lo que se puede personalizar.

Panel de detalles

Panel de detalles

 

En la sección Appareance tenemos la propiedad Percent. Esta propiedad define el porciento de progreso de la barra. Inicialmente vamos a ponerle valor 1.0 (100%) aunque en realidad el valor de progreso de esta barra estará vinculado al valor de salud del personaje, más adelante veremos cómo hacerlo.

Captura del WidgetBlueprint con la barra de progreso agregada dentro del espacio de trabajo

Captura del WidgetBlueprint con la barra de progreso agregada dentro del espacio de trabajo

 

En este punto, es válido comentar un detalle. Al correr el juego en distintas dimensiones de pantalla no siempre nos saldrá el componente en la misma posición en la que lo colocamos aquí desde el Designer. Para solucionar este problema el UMG nos brinda varias herramientas para anclar los elementos a determinados lugares de la pantalla y que la posición que le definamos sea relativa a ese anclaje. Selecciona el Progress y en el panel Details busca la propiedad Anchors, despliega el combobox y verás un grupo de opciones que gráficamente nos muestran cual será el comportamiento del anclaje del elemento. En nuestro caso selecciona la que indica que el componente quedará anclado en el borde inferior al centro de la pantalla. Puedes jugar un rato con las otras opciones y moviendo la barra de progreso de lugar para que veas su comportamiento.

Modificación de Anchors del Progress

Modificación de Anchors del Progress

 

Por último en el panel Details, encima del buscador, a la izquierda del checkBox IsVariable se encuentra el nombre que tendrá este elemento. Por defecto Unreal le asigna uno, cámbialo para tenga un nombre más descriptivo y así poder identificarlo más rápido a la hora de buscarlo entre varios elementos. En mi caso le puse HealthProgress.

Bien, de momento solo tendremos eso en el HUD de nuestro juego, una barra de progreso en el borde inferior. Compila, salva los cambios y cierra este editor.

Agregando el HUDWidgetBlueprint al ViewPort

Ya tenemos diseñada una primera versión del HUD que queremos en nuestro juego, pero aún nos falta agregarlo al Viewport y esto lo haremos desde el Level Blueprint.

Mediante el botón Blueprint del Toolbar selecciona Open Level Blueprint. Lo que haremos aquí será muy simple. En el Event Begin Play vamos a crear una instancia del HUDWidgetBlueprint mediante el nodo CreateWidget. Una vez creada una instancia de este widget, la asignaremos a una variable que crearemos previamente, para en el futuro poder acceder fácilmente al HUD. Por último agregaremos este HUDWidgetBLueprint al ViewPort mediante el nodo Add to Viewport.

Captura del Level Blueprint donde se crea una instancia del WidgetBlueprint y se agrega al Viewport.

Captura del Level Blueprint donde se crea una instancia del WidgetBlueprint y se agrega al Viewport.

 

Compila, salva, cierra este editor y corre el juego. Verás el HUD en la pantalla. Pero tenemos pendiente un detalle, cuando nos acercamos al enemigo y este nos dispara, se disminuye la salud del PlayerCharacter porque vemos que llega a morir si recibe muchos disparos, pero la barra de progreso ni se entera. Vamos a ello.

Escenario con la salud del personaje

Escenario con la salud del personaje

 

Ya tenemos la barra de progreso que nos permitirá saber en todo momento la salud que tiene nuestro personaje, pero si te dejas dar un tiro por el enemigo verás que la barra no refleja nada, continua estando en el 100%. Pues es precisamente esto lo que vamos a solucionar ahora, vamos a “bindiar“ el progreso de la barra de estado a la salud del personaje para que cada vez que la salud de nuestro héroe disminuya la barra haga lo mismo.

Creando “Binding” para definir el progreso de la barra de forma dinámica

Abre el HUDWidgetBlueprint, selecciona la barra de progreso y en el panel Details en la sección Appearance en la propiedad Percent da click al boton Bind/Create Binding como se muestra en la imagen.

Creando un Binding para definir el dinámicamente el progreso de la barra de salud

Creando un Binding para definir el dinámicamente el progreso de la barra de salud

 

Una vez que des en el botón Create Binding se abrirá un blueprint editor donde podremos implementar el algoritmo necesario para definir en todo momento el porciento de progreso de esta barra. Como esta barra de progreso representa la salud del personaje será muy simple la implementación de este método. Obtenemos la referencia de nuestro héroe, obtenemos el valor de su variable Health, llevamos ese valor a porciento (dividiendo entre 100) ya que es un valor entre 0 y 1 el que espera este componente y finalmente conectamos este número al Return Value de esta función.

Función que determinará dinámicamente el porciento de progreso que tendrá el ProgressBar del HUD

Función que determinará dinámicamente el porciento de progreso que tendrá el ProgressBar del HUD

 

Compila, guarda, cierra ese editor y dale Play al juego. Acercate al enemigo para que te dispare y verás como cada vez que disminuye la salud de nuestro héroe esta queda perfectamente reflejada en la barra de progreso del HUD.

Escenario con nuestro enemigo disparando y se observa como se refleja en la salud del personaje

Escenario con nuestro enemigo disparando y se observa como se refleja en la salud del personaje

 

Personalizando el estilo de la barra de progreso

Ya tenemos un HUD con una barra de progreso que representa la salud de nuestro personaje, pero el estilo de esta barra es bastante insípido, verdad ? Vamos a jugar un poco con las propiedades que nos brinda este componente para mejorar su look. Lo que haremos será agregar una textura de fondo para el componente, otra a la barra de progreso y por último un icono a la derecha de la barra como indicador de lo que representa esa barra de progreso. Al final nuestra barra de progreso quedará así:

Estilo del Progress Bar para la salud del personaje

Estilo del Progress Bar para la salud del personaje

 

Primero descárgate los recursos para este tutorial desde aquí. Al descomprimir este .zip encontrarás los siguientes archivos:

HealthIcon: Icono para identificar la salud del personaje.
ProgressBackground: Fondo del progress bar para la salud del personaje.
ProgressFillImage: Imagen utilizada mientras se va llenando el progress bar para la salud del personaje.

De vuelta al Unreal Editor, en el Content Browser, dentro de la carpeta HUD, crea una nueva carpeta con el nombre Textures e importa aquí las texturas descargadas.

Al importar las texturas te saldrá un cartel como el que se muestra en la imagen, dale Yes.

Alerta al importar texturas ¨non power of two¨

Alerta al importar texturas ¨non power of two¨

 

El motivo de este alert viene dado por lo siguiente. Cada textura que importes al proyecto, por lo general su tamaño debe ser una potencia de 2, es decir 2n por ejemplo “8”, “16”, “32”, “64”, “128”, “256”, “512”, “1024”, “2048” … Texturas que se importen y que no cumplen esta regla, pierden calidad mientras más lejos estás de ellas. Además, el Engine no las puede optimizar para que puedan ser cargadas rápidamente y procesarla en la memoria. Puedes profundizar un poco sobre este tema en el siguiente link . En nuestro caso esto no nos afecta, por eso puedes aceptar el mensaje sin preocupación.

Una vez importadas las texturas, abre el blueprint del HUD y selecciona el Progress. En el panel Details, desplázate hasta la sección Style. Las propiedades dentro de esta sección nos sirven para modificar el estilo de los componentes. En nuestro caso vamos primero a modificar la propiedad Fill Image que nos permitirá definir el estilo del relleno de la barra. Expande Fill Image y en la propiedad Image despliega el combo a su lado y asígnale la imagen ProgressFillImage que acabamos de importar. Después, expande la propiedad Tint y en el parámetro A asígnale valor 0.7, para darle un poco de transparencia a la imagen.

Cambiando el estilo de la salud del personaje

Cambiando el estilo de la salud del personaje

 

Ahora vamos a personalizar el fondo de la barra. Repite el proceso pero en este caso en la propiedad Background y usa como imagen de fondo la textura ProgressBackground.

Ya casi terminamos, solo nos queda colocar un pequeño icono a la derecha de la barra para que el jugador pueda saber a la primera que esta es la barra de salud de su personaje. Para esto vamos a usar un componente de tipo Image.

Agrega un componente de tipo Image desde la paleta de componentes y asígnale como imagen, en la propiedad Brush/Image, el HealthIcon que importamos. Ahora aquí vamos a topar con un detalle, y es que este elemento se va a superponer sobre un pedazo de la barra de progreso. Como primero agregamos la barra de progreso y después agregamos este componente no tendremos problema, y la imagen nos saldrá por arriba, pero puede darse el caso que fuera al revés y el iconito quedará tapado por la barra de progreso. Para solucionar este problema en cada componente tenemos la propiedad ZOrder que define el orden en el eje z de cada elemento agregado al HUD.

Listo!! ya tenemos terminada la barra que reflejará la salud del personaje en el HUD de nuestro juego. Compila salva lo cambios y dale Play. Muévete hasta el enemigo y deja que te dispare para que veas como disminuye el progreso de la barra a medida que disminuyen las vidas del personaje, y ahora con el estilo que queríamos.

Captura de pantalla del juego donde se ve disminuyendo la barra de progreso que representa la salud del personaje.

Captura de pantalla del juego donde se ve disminuyendo la barra de progreso que representa la salud del personaje.

 

Perfecto !! si has llegado hasta aquí ya tendrás una noción básica del Unreal Motion Graphic y de cómo implementar el HUD de nuestro juego mediante esta herramienta, de momento vamos a dejarlo aquí. En el próximo tutorial vamos a continuar este proyecto y agregaremos nuevos componentes para mostrarle al jugador el arma que tiene equipada, el arma secundaria y la cantidad de municiones restantes.

Ahora . . . como hablamos al inicio, existe otra forma un poco más ¨a bajo nivel¨ pero que creo que vale la pena darle un vistazo. Para esto vamos a implementar un mecanismo para mostrar en el HUD de nuestro juego de forma dinámica, sobre la cabeza de cada enemigo, una barra de salud. Pero en este caso lo haremos heredando de la clase AHUD y sobrescribiendo el método DrawHUD.

Indicador de vidas sobre del enemigo (variante C++)

Lo primero que haremos será crear una nueva clase C++ que herede de HUD y con una instancia de esta clase inicializaremos el atributo HUDClass del Game Mode.

Crea una nueva clase (Add code to project) que herede de AHUD y nómbrala UE4DemoHUD (o como prefieras). Ahora abre el .cpp de tu clase GameMode e inicializa el atributo HUDClass con una instancia de esta nueva clase que acabamos de crear. Para esto, agrega lo siguiente antes de terminar la implementación del constructor del GameMode:

HUDClass = AUE4DemoHUD::StaticClass();

Recuerda incluir el .h de la clase que acabamos de crear para que desde aquí el compilador la pueda localizar.

Ahora vamos a sobrescribir el método DrawHUD de la clase HUD para dibujar lo que queremos. El método DrawHUD es llamado por el Engine automáticamente en cada frame del juego y es aquí donde tenemos que dibujar todo lo que queramos mostrar en el HUD en cada frame. En nuestro caso lo que queremos es dibujar una barra de progreso muy simple pero que siempre se vea sobre cada personaje enemigo y para esto tenemos que hacer algunas cosillas. Aquí te dejo como tiene que quedar el método, tómate unos minutos y ves línea a línea con los comentarios para que entiendas lo que hace.


//En el UE4DemoHUD.h
virtual void DrawHUD() override;

//En el UE4DemoHUD.cpp
#include “AIEnemyCharacter.h“

void AUE4DemoHUD::DrawHUD()
{
    ///Arreglo de actores para pasar por referencia al GetAllActorsOfClass
    //y obtener todos los actores del tipo de clase indicada
    TArray<AActor*> OutActors;
    
    //Guarda en el arreglo que pasamos como tercer parámetro todos los actores que estén en el nivel del tipo de clase indicado en el segundo parámetro
    UGameplayStatics::GetAllActorsOfClass(this, AAIEnemyCharacter::StaticClass(), OutActors);
    
    //Recorre cada uno de los actores devueltos por el GetAllActorsOfClass
    for (int32 Idx = 0; Idx < OutActors.Num(); ++Idx)
    {
        //Obtiene el actor actualmente en el loop casteado ya a la clase de nuestro enemigo
        AAIEnemyCharacter *AiEnemy = Cast<AAIEnemyCharacter>(OutActors[Idx]);
        
        // Si el cast fue satisfactorio y aún está vivo (su salud es mayor que 0)
        if (AiEnemy != NULL && AiEnemy->GetHealth()>0)
        {
            //Offset a la posición del personaje para que le quede el indicador de salud por encima de la cabeza
            FVector Offset = FVector(0, 0, 150);
            
            //Obtenemos la posición del Actor en el mundo
            FVector Location = AiEnemy->GetActorLocation();
            
            //Calculamos la posición donde queremos mostrar el indicador (encima de la cabeza del enemigo)
            //sumándole al vector de la posición del enemigo el offset
            FVector RectLocation = Location + Offset;
            
            //Este es uno de los puntos claves en este método. La clase AHUD cuenta con el método Project que nos permite convertir
            //coordenadas 3D al plano 2D del canvas. Necesitamos convertir las coordenadas RectLocation para poder dibujar el indicador
            //en el Canvas del HUD pero siempre en la posición correcta (sobre el enemigo)
            FVector RectLocation2D = Project(RectLocation);
            
            //Dibuja un primer rectángulo de color rojo que simulará el fondo de una barra de progreso
            //DrawRect nos permite dibujar un rectángulo en el canvas del HUD y espera los siguientes parámetro:
            //Color del rectángulo, posición en X en el canvas, posición en Y en el canvas ancho y alto
            DrawRect(FLinearColor(1.0, 0.0, 0.0, 1.0), RectLocation2D.X - 50, RectLocation2D.Y, 100, 15);
            
            //Dibuja un segundo rectángulo de color verde que será la propia barra de progreso
            //En este caso en vez de dibujar este rectángulo con un ancho de 100, lo dibujaremos con un ancho equivalente
            //a la salud del personaje que puede estar en un rango entre 0 - 100.
            //Como este rectángulo quedará sobre el anterior, la composición simulara una barra de progreso simple.
            DrawRect(FLinearColor(0.0, 1.0, 0.0, 1.0), RectLocation2D.X - 50, RectLocation2D.Y, AiEnemy->GetHealth(), 15);
        }
    }
} 

Listo !!. Compila el proyecto y en el editor desde el Toolbar ve hasta el World Settings y en la sección Game Mode asegúrate que se está usando el GameMode de nuestro juego y que al desplegarlo, en el atributo HUD Class esté indicado el nombre de la clase HUD que acabamos de crear.

Captura de nuestro World Settings donde se observa nuestro HUD

Captura de nuestro World Settings donde se observa nuestro HUD

 

En este punto me gustaría comentar un detalle. En versiones anteriores del Unreal Engine, al agregar una clase C++ al proyecto se tenía que cerrar el editor y volver a compilar y correr desde el IDE para que el editor pudiera encontrar esa clase. A partir de la 4.6.1 ya esto no es necesario. Una de las mejoras que incluyeron a partir de esta versión es que no es necesario cerrar el editor, simplemente al compilar el proyecto el Editor automáticamente detecta y recarga las nuevas clases o cambios hechos en las ya existentes. Para eso solo hace falta compilar el proyecto con el Editor abierto, fíjate que no tienes que Compilar y Correr, solo Compilar. Inmediatamente después que termine la compilación, verás como el Editor recarga los cambios.

Después de compilar, dale Play al juego y acércate al enemigo. Verás como sobre él se muestra una barrita como indicador de salud y si le disparamos la barra se actualiza. En el momento de morir deja de aparecer la barra por la condición que pusimos en el DrawHUD de solo dibujar si las vidas de ese Actor son mayores que 0.

Enemigo con su barra de salud

Enemigo con su barra de salud

 

Indicador de vidas sobre del enemigo (variante Blueprint)

A modo de referencia vamos a ver como sería para lograr esto mismo totalmente desde Blueprint.
Primero crea un nuevo blueprint dentro de la carpeta HUD que herede de HUD. En mi caso le puse HUDBlueprint.
Abre el archivo .cpp del GameMode y tenemos que cambiar para en vez de asignar al atributo HUDClass una instancia de la clase que creamos desde C++, asignarle este blueprint. Para esto sustituye la línea HUDClass = AUE4DemoHUD::StaticClass(); por lo siguiente:

//Obtiene la referencia al Blueprint acabado de crear
static ConstructorHelpers::FObjectFinder<UClass> HUDBPClass(TEXT("Class'/Game/HUD/HUDBlueprint.HUDBlueprint_C'"));

//Inicializa el atributo HUDClass con el HUDBlueprint creado y configurado desde el editor
if (HUDBPClass.Object != NULL)
{
  HUDClass = HUDBPClass.Object;
}

Compila nuevamente el proyecto y asegúrate desde el WorldSettings/GameMode que ahora el HUD Class del GameMode sea este blueprint que acabamos de crear. Una vez hecho esto abre el HUDBlueprint en el modo Graph y vamos a implementar aquí el mismo algoritmo que implementamos en el DrawHUD desde C++.

Agrega el nodo Event Received Draw HUD que es el nodo equivalente al DrawHUD que vimos desde C++ y en este evento implementa el mismo algoritmo que ya hicimos.

Event Received Draw HUD del HUDBlueprint para imprimir en el HUD el indicador de vidas sobre cada enemigo.

Event Received Draw HUD del HUDBlueprint para imprimir en el HUD el indicador de vidas sobre cada enemigo.

 

Compila, salva los cambios y corre el juego. El resultado será el mismo que ya logramos anteriormente desde C++ pero ahora hecho totalmente desde blueprint.

Conclusión

Como has podido notar el Unreal Motion Graphics nos facilita muchísimo la vida a la hora de crear las interfaz al tenernos todos estos Widgets listos para usar. Pero de cualquier forma el DrawHUD y los métodos para dibujar sobre el Canvas también son una alternativa (y muchas veces son el único camino posible).

Te recomiendo que le des un vistazo a la declaración de la clase HUD del Engine para que veas todos los métodos que puedes usar para dibujar distintos elementos en el Canvas. También puedes visitar los siguientes enlaces:

UCanvas
HUD, Canvas, Code Sample of 800+ Lines, Create Buttons & Draw Materials

Otro detalle importante a tener en cuenta es que hemos implementado funcionalidades para el HUD de nuestro juego de dos formas distintas, y como ves, pueden coexistir sin problema, así que no tienes que limitarte por una vía u otra, simplemente úsalas en conjunto para lograr un espectacular HUD en tu juego 😉

Bueno, esto es todo por hoy. Vamos a dejar aquí la primera parte de este tutorial de Introducción al HUD en Unreal Engine 4. En el próximo tutorial vamos a continuar este proyecto y agregaremos al HUD nuevos componentes, mediante el Unreal Motion Graphic, para mostrarle al jugador el arma que tiene equipada, el arma secundaria y la cantidad de municiones restantes. También veremos algunos truquitos para animar los elementos en el HUD.
Mientras tanto, bueno ya sabes . . . nos encantaría escuchar tus comentarios.

Dariel de la Noval Sedano
Follow me
Dariel de la Noval Sedano
Follow me

Latest posts by Dariel de la Noval Sedano (see all)

3 pensamientos en “Introducción al HUD en Unreal Engine 4 – Parte 1

Responder a Dariel de la Noval Sedano Cancelar respuesta

Tu dirección de correo electrónico no será publicada. Los campos necesarios están marcados *

Puedes usar las siguientes etiquetas y atributos HTML: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>