HUD del jugador

La interfaz de usuario (IU) de un juego es cualquier elemento con el que el jugador interactúa visualmente, como los menús, las pantallas de pausa, el inventario, los cuadros de diálogo y la visualización frontal (o el HUD) del jugador. El HUD es cualquier parte de la IU que permanece visible en pantalla durante el juego, como la salud del jugador, el equipo o los indicadores de objetivos.

Ahora que tu personaje puede recoger objetos, obtendrás más información sobre cómo usar el sistema UMG (Unreal Motion Graphics) de Unreal Engine para compilar un HUD que muestre al jugador qué llaves ha cogido. Con UMG, puedes diseñar un HUD arrastrando y organizando los elementos de la IU en un editor visual para saber exactamente qué verá el jugador en el juego.

Antes de empezar

Asegúrate de que comprendes los temas ya tratados en secciones anteriores de El diseño de una aventura de puzles:

• Aspectos básicos de los blueprints, como variables, funciones, grafos de eventos e incorporación de nodos.

Necesitarás los siguientes recursos de Cómo crear una llave:

• Clase de blueprint BP_Key

• Clase de blueprint BP_AdventureCharacter

• Enumeración Enum_KeyType

Creación de un blueprint de widget

UMG incluye un tipo especial de blueprint llamado widget que puedes usar para compilar varios elementos de la IU. Para empezar a construir tu HUD, crea un nuevo recurso de blueprint de widget. 

Para crear un nuevo blueprint de widget, haz lo siguiente:

1. En el explorador de contenido, ve a Contenido > AdventureGame > Diseñador > Blueprints y crea una carpeta llamada Widgets para almacenar los recursos de tu IU.

   

2. En la nueva carpeta Widgets, crea un nuevo recurso haciendo clic derecho en un área vacía de la carpeta y seleccionando Interfaz de usuario > Blueprint de widget.

   

3. En la ventana Escoger clase padre, haz clic en Widget de usuario.

   

4. Introduce un nombre para tu widget. En este tutorial usaremos WBP_PlayerHUD.

5. Haz doble clic en el blueprint para abrirlo.

Explorar el editor de blueprints de widget

Los blueprints de widget se abren en un editor de widgets especial que tiene dos modos: Diseñador y Grafo. Para cambiar entre los modos, usa los botones que hay cerca de la esquina superior derecha del editor. 

En el Diseñador, puedes añadir y editar partes individuales de tu IU. 

En la parte izquierda del editor de widgets, la paleta contiene todos los distintos tipos de widget que puedes añadir a tu IU. El panel Jerarquía muestra la estructura de los componentes de tu IU. El orden y el anidamiento de los widgets en este panel afecta a la disposición y al renderizado de tu IU.

La cuadrícula del centro de la ventana es el diseñador visual. Al igual que con los grafos de eventos de tu blueprint, usa la rueda del ratón para acercar y alejar la imagen y usa el botón derecho del ratón para desplazarte por el diseño.

El nivel de zoom en la esquina superior izquierda de la cuadrícula se actualiza a medida que te acercas o te alejas. Un zoom 1:1 significa que estás viendo tu IU a una escala del 100 %, lo que muestra cómo aparecerán los elementos de la IU en el juego en una pantalla de esa resolución. Si un jugador ejecuta tu juego en una pantalla más pequeña, Unreal Engine usará la función Escalado de puntos por pulgada (DPI) para adaptar tu IU a esa pantalla.

La esquina inferior izquierda de la cuadrícula contiene información sobre el preajuste actual del tamaño de pantalla. Este es el tamaño de pantalla que previsualiza el blueprint de tu widget. De forma predeterminada, se establece para una pantalla de TV de 720p.

Comienza con un panel de lienzo

En la pestaña Paleta, los widgets se ordenan por tipo. Los widgets de tipo panel no muestran nada en pantalla; son como contenedores que controlan la disposición y la posición de los widgets colocados dentro de ellos. Los paneles son útiles para cambiar automáticamente la escala de la IU para que se ajuste a distintos tamaños de pantalla de TV y resoluciones de monitor.

Los paneles de lienzo son el tipo de widget de panel más flexible y son perfectos para los HUD. Mientras que otros paneles organizan los widgets con una determinada disposición u orientación, los paneles de lienzo usan anclajes para colocar los widgets exactamente donde quieres que estén en la pantalla, garantizando así que todo permanezca en su sitio aunque la pantalla cambie de tamaño.

Para crear un panel de lienzo, sigue estos pasos:

1. En la pestaña Paleta, busca Lienzo y arrastra un panel de lienzo al panel Jerarquía encima de [WBP_PlayerHUD] para que quede anidado debajo.

   

   Aparecerá un rectángulo en el área del diseñador de elementos visuales, en el centro de la ventana.

Este lienzo es el widget raíz de la IU. Cada blueprint de widget debe tener un widget raíz, el elemento de nivel superior de la IU que contiene todos los demás widgets. Cuando colocas otro widget dentro del lienzo, existe una relación jerárquica entre ambos, en la que el lienzo es el padre y el otro, el widget hijo.

De forma predeterminada, un panel de lienzo tiene 1920x1080 píxeles y representa la pantalla completa. Esta es una resolución común y un gran punto de partida para trabajar, así que mantén este tamaño de lienzo. Durante el tiempo de ejecución, Unreal Engine escala la IU para que se ajuste a la pantalla del jugador.

Crea la disposición de tu HUD

Ahora que ya tienes el lienzo, anclarás áreas para la salud y el inventario de los jugadores en la esquina superior izquierda de la IU. 

Para definir las áreas de texto en el lienzo, sigue estos pasos:

1. En Paleta, busca Superposición y arrastra un panel Superposición a la jerarquía para que quede anidado como widget hijo debajo del panel de lienzo.

   

   Las superposiciones son un tipo de panel que superpone varios widget en el mismo espacio. Son útiles para añadir una imagen de fondo detrás de los elementos de la IU, un icono estático o una etiqueta de texto encima de los elementos de la IU. Para este HUD, crearás una capa de efecto de desenfoque detrás del texto de la IU para que sea más fácil de leer.

2. Selecciona la nueva superposición. Este panel es un hijo del lienzo, por lo que tiene un punto de anclaje en la esquina superior izquierda del lienzo.

   

   En este tutorial, dejarás el punto de anclaje así, pero en el panel Detalles, puedes usar la propiedad Anchors para mover el punto de anclaje.

   

3. En el panel Detalles, fija la posición X y la posición Y en 20. Es la cantidad de píxeles que hay entre el panel de superposición y el anclaje. Añadir un desfase mejora el aspecto de la IU y evita que el texto quede recortado por los bordes de la pantalla.

4. Para definir el área en la que dibujarás el texto de la IU, arrastra los controladores del cuadro delimitador del panel de superposición para cambiar su tamaño hasta que tenga unos 250 píxeles de ancho por 200 píxeles de alto.

   También puedes usar Tamaño X y Tamaño Y en el panel Detalles para cambiar el tamaño del panel.

   

   Esta área mostrará la salud (PS) del jugador y los nombres de las llaves que ha recopilado.

5. En la paleta, busca un panel Caja vertical y arrástralo para que sea un hijo de la superposición. Este tipo de panel organiza los elementos de la IU en su interior de forma vertical, como en la columna de una tabla.

6. Añade dos paneles Caja horizontal como subordinados de la caja vertical. Las cajas horizontales organizan en horizontal cualquier elemento de la IU que contengan, como en la fila de una tabla. Una caja horizontal será el contenedor para la información de salud del jugador y la otra será el contenedor para la etiqueta Llaves recopiladas.

   

Las cajas verticales y horizontales son widgets de disposición. Estos paneles son como organizadores invisibles: no tienen un fotograma visible en el diseñador y cambian de tamaño automáticamente para adaptarse a su contenido.

Cada tipo de caja alinea y organiza el texto que añadirás a la IU:

• El panel Superposición permite superponer, por lo que la caja vertical fuerza a las cajas horizontales a alinearse verticalmente en lugar de apilarse unas sobre otras.

• Tendrás dos cuadros de texto en la primera fila, por lo que al añadir cajas horizontales podrás controlar la alineación y el relleno de cada cuadro de texto de la fila.

Añade etiquetas de texto

Ahora que has definido la estructura del HUD, puedes añadir el texto estático que no cambiará en función de lo que suceda en el juego. 

Necesitarás una etiqueta PS antes de la salud del jugador y una etiqueta Llaves recopiladas antes de la lista de nombres de las llaves. Por ahora, también añadirás texto de marcador de posición para el valor actual de PS del jugador. En una sección posterior de esta serie de tutoriales, cambiarás este marcador de posición por una variable que refleje la salud real del jugador.

Para añadir etiquetas de texto para la salud del jugador (PS), sigue estos pasos:

1. En la paleta, busca texto y arrastra dos widget de texto a la jerarquía como hijos de la primera caja horizontal. 

   

   Es muy importante añadir un widget de texto, no un cuadro de texto.

2. Selecciona el primer widget debajo de la caja horizontal. En el panel Detalles, en la sección Ranura (ranura de caja horizontal), fija el relleno en 5. Esto establece el texto a 5 píxeles del borde de la caja horizontal.

   

3. En la sección Contenido, ajusta el texto como PS:.

   

4. En la sección Apariencia, haz clic en la muestra de color junto a Color y opacidad y elige un color para tu texto. En este tutorial usamos el verde (sRGB hexadecimal = 78FF3FFF).

   

5. Selecciona el segundo widget de texto. En la parte superior del panel Detalles, cambia el nombre del widget de TextBlock a txtHP. En futuras partes de este tutorial haremos referencia a este widget, así que dale un nombre de variable único y descriptivo ahora.

   

6. Cambia el relleno a 5 y el texto a 100.

   

Para añadir una etiqueta de texto para las llaves que el jugador ha recopilado, sigue estos pasos:

1. En la paleta, arrastra un widget de texto para que se convierta en el hijo de la segunda caja horizontal.

2. Cambia su relleno a 5 y el texto a Llaves recopiladas:.

3. En Color y opacidad, elige un color. En este tutorial usamos el naranja (sRGB hexadecimal = FF6200FF).

Ahora que hay algo de texto en cada caja horizontal, puedes ver la estructura flexible de esta disposición. Si seleccionas un widget de caja horizontal o uno de texto, aparecerán botones de flecha en los bordes del widget. Haz clic en las flechas para reorganizar los widgets. Al usar las opciones de relleno y alineación de cada widget de texto, tienes mucho control sobre el espaciado entre elementos de la misma fila y en filas diferentes.

Añade espacio para una variable

En un juego, la mayor parte del HUD del jugador necesita actualizarse durante el juego debido a las acciones que realizas, como recibir daño, recibir o usar objetos o conseguir un potenciador. Para hacer esto en tu proyecto, conectarás el HUD a una variable que realice un seguimiento de las llaves del jugador, de modo que pueda actualizarse a medida que el jugador las recopila.

Si quieres añadir un cuadro de entrada de texto para mostrar la lista de llaves, sigue estos pasos:

1. En la paleta, busca y arrastra un cuadro de texto de varias líneas para que se convierta en el último hijo de la caja vertical. Este widget de entrada utiliza varias líneas de texto introducidas por el usuario. Sin embargo, puedes usar la lógica del grafo de eventos para añadir texto a este widget cuando el usuario recopile una llave.

   

2. En el panel Jerarquía, selecciona el cuadro de texto. En el panel Detalles, cámbiale el nombre a txtKeys.

   

   También puedes ver y cambiar el nombre de un widget haciendo clic derecho sobre él en el panel Jerarquía.

3. En el diseñador visual, verás que el cuadro de texto de entrada viene con un fondo predeterminado, así que quítalo:

   1. Cerca de la parte superior del panel Detalles, amplía Relleno y establece los siguientes valores para rellenar el cuadro de texto con una sangría:

      • Izquierda: 15

      • Superior, Derecha e Inferior: 4

      

   2. En la sección Estilo, amplía Estilo > Imagen de fondo en estado normal y haz clic en la muestra de color junto a Matiz.

      

   3. Cambia sRGB hexadecimal a FFFFFF00 para que el fondo sea transparente y haz clic en Aceptar.

      

4. Este widget no incluye un estilo de fuente predeterminado, por lo que tendrás que establecer las propiedades de la fuente por tu cuenta. En la sección Estilo, amplía Estilo del texto > Fuente y establece lo siguiente:

   1. Cambia Familia de fuentes a Roboto.

   2. Cambia Tipo de letra a Negrita.

   3. Cambia Tamaño a 24.

   4. Cambia el color a blanco.

      

Con la opción txtKeys seleccionada en la parte superior del panel Detalles, verás que la opción Es variable está activada. Los cuadros de texto esperan texto introducido por el usuario, por lo que se configuran automáticamente como variables. Al activar Variable, podrás referenciar y usar txtKeys en el grafo de eventos del blueprint de widget. 

Crea una capa en un efecto especial

Puedes hacer que el texto del HUD sea más legible desenfocando el fondo del cuadro delimitador de la superposición. Usa la función de capas del panel de superposición para aplicar un efecto de desenfoque detrás de las cajas vertical y horizontal.

Para usar un widget y desenfocar el área de la pantalla detrás del texto del HUD, sigue estos pasos:

1. En la paleta, busca Desenfoque y arrastra un widget de desenfoque del fondo a la jerarquía como hijo de la superposición.

2. El editor añade el desenfoque del fondo al final de la lista, así que arrástralo para que sea el primer hijo debajo de la superposición, encima de la caja vertical.

   

3. En la sección Apariencia del panel Detalles, fija el valor de Intensidad del desenfoque en 2.

   El uso de efectos de desenfoque intenso supone un mayor coste de tiempo de ejecución para la GPU. Como alternativa más económica, puedes usar un widget Límite opaco o aplicar una textura con un widget Imagen.  

4. Haz que el efecto ocupe las dimensiones del widget de superposición:

   1. En la sección Ranura (ranura de superposición), junto a Alineación horizontal, haz clic en Rellenar horizontalmente.

   2. Junto a Alineación vertical, selecciona Rellenar verticalmente.

   

Aquí tienes un ejemplo de cómo aparece el texto de la IU sin fondo desenfocado y con un efecto de desenfoque exagerado:

Compila la lógica del HUD

Para terminar tu blueprint de widget, compilarás la lógica que muestre el nombre de cualquier llave que recoja el jugador. 

Configura bloques de creación para la recopilación de llaves

Antes de empezar a crear la lógica que añade los nombres de las llaves al HUD, necesitarás lo siguiente:

• Una variable de matriz que realice un seguimiento de las llaves del jugador.

• Una función a la que el blueprint de tu personaje pueda llamar cuando el jugador encuentre una nueva llave.

Para activar la ejecución de la lógica del HUD a partir de otros blueprints, usarás una función en lugar del grafo de eventos. La función tomará la llave que el jugador ha recopilado, la guardará en la variable con nombre e introducirá los nombres de las llaves de esa variable en el cuadro txtKeys.

Para añadir una nueva variable y función que lleve un seguimiento de las llaves del jugador, sigue estos pasos:

1. Cerca de la esquina superior derecha de la ventana, haz clic en grafo para editar el grafo de eventos del blueprint de widget. Este grafo funciona igual que el resto de blueprints en los que has estado trabajando hasta ahora.

   

   Tu variable txtKeys aparece en el panel de la izquierda de la ventana.

2. Crea una función que ejecute toda la lógica del HUD cuando se la llame:

   1. En la sección Funciones, haz clic en el botón del signo más (+) para añadir una función. Encima del grafo, aparecerá una nueva pestaña para esa función.

   2. Dale el nombre fnAddKeyHUD.

   3. Con la función seleccionada, en la sección Entradas del panel Detalles, haz clic en + para añadir una nueva entrada de la función.

      

   4. Asigna a la entrada el nombre KeyType y cambia su tipo a Enum Key Type.

      

3. En el panel My Blueprint, crea una variable de matriz para almacenar las llaves del jugador:

   1. En la sección Variables, haz clic en + para crear una nueva variable.

   2. Dale el nombre KeysToDisplay.

   3. Cambia su tipo a Enum Key Type. Esta es la enumeración que has creado con las opciones de tipo de llave roja, amarilla y azul.

   4. Haz clic derecho en el tipo de variable para convertirla en una matriz. También puedes usar el panel Detalles para cambiar el tipo de contenedor.

      

      Podrías pasar la matriz de llaves del blueprint del personaje a la función en lugar de reconstruirla aquí, pero hacer un seguimiento de las llaves de forma independiente en el HUD te da más flexibilidad si quieres aplicar cualquier lógica específica del HUD, como mostrar imágenes para cada llave.

4. Para imprimir los nombres de las llaves en el cuadro de texto de varias líneas, tendrás que combinarlos en una cadena.

   En la sección Variables locales, haz clic en el botón + para añadir una nueva variable. Nómbrala Llaves, cambia el tipo a Cadena y el tipo de contenedor a Único.

   

Imprime las llaves del jugador en la pantalla

Ahora puedes empezar a añadir lógica a la función fnAddKeyHUD. 

Cuando se haga una llamada a esta función, empezará con un KeyType de color rojo, amarillo o azul. Tienes que añadir ese tipo de llave a tu matriz KeysToDisplay, añadir todas las llaves a tu variable de cadena y luego convertir esa cadena en texto para poder mostrarla en pantalla.

Primero, para compilar la matriz KeysToDisplay, sigue estos pasos:

1. En la vista Grafo del blueprint de widget, asegúrate de que estás viendo la pestaña fnAddKeyHUD.

2. Para compilar la matriz KeysToDisplay, añade un nodo Add Unique después del nodo de entrada de función.

3. Para su Target Array, conecta una referencia a la variable KeysToDisplay.

4. Como segunda entrada, conecta la entrada de función Key Type.

   

   El nodo Add Unique toma una matriz y un nuevo valor y añade ese valor a la matriz (si no está ya en la matriz). Este nodo garantiza que los nombres de las llaves no aparezcan en el HUD más que una vez.

Para combinar todas las llaves recopiladas en la cadena Keys, sigue estos pasos:

1. Recorre en bucle cada elemento de la matriz KeysToDisplay. Después del nodo Add Unique, añade un nodo For Each Loop.

2. Conecta otra referencia KeysToDisplay a la entrada Array del bucle.

   

   Para cada elemento de la matriz o cada iteración del bucle, tienes que convertir ese elemento en una cadena, añadirlo a la variable de cadena Keys y añadir una nueva línea después del nombre de la llave (como pulsar Intro en el teclado). 

   Recuerda que cualquier lógica que conectes al pin de ejecución Bucle en el cuerpo se ejecuta una vez por cada elemento de la matriz. Cuando el bucle haya terminado, la ejecución pasará por el pin Completado.

3. Haz clic derecho en el grafo del nodo, busca Append String y añade un nodo Append de tipo cadena. Esto combina entradas de cadena para formar un único valor de retorno de cadena.

4. Configura el nodo Append para que tome el contenido actual de la variable Keys, añade el nuevo elemento de matriz y un salto de línea:

   1. Para la entrada A, conecta una referencia a Keys.

   2. Para su entrada B, conecta el pin Elemento de matriz del nodo del bucle. Unreal Engine añade un nodo Enum to String para convertir el valor.

   3. Haz clic en Añadir pin para añadir una entrada C. Haz clic en el cuadro de texto y pulsa Mayús + Intro para añadir una nueva línea.

      

5. Arrastra desde el pin Valor devuelto del nodo Append y añade un nodo Set Keys.

6. Conecta el pin de salida de ejecución del bucle al nodo Set Keys.

   

Cuando el cuerpo del bucle se complete, tendrás una cadena larga con los nombres de todas las llaves del jugador.

Para pasar la cadena Keys al cuadro de texto TxtKeys del HUD, sigue estos pasos:

1. Arrastra desde el pin de ejecución Completado del bucle y añade un nodo SetText (Multi-Line Text Box).

   Si encuentras este nodo, desactiva Sensible al contexto cerca de la esquina superior derecha de la lista de acciones del nodo. 

   

   El nodo SetText recibe entradas de tipo texto y las muestra en un cuadro de texto objetivo.

2. Configura el nodo SetText (Multi-Line Text Box):

   1. En Objetivo, conecta una referencia a TxtKeys.

   2. En En texto, conecta una referencia a Keys. Unreal Engine añade un nodo To Text (String) que convierte la cadena Keys en texto. 

      

      El texto es un tipo de dato independiente. Mientras que las cadenas sirven para la programación y la depuración, el texto está diseñado para que el usuario pueda verlo y es compatible con la traducción y el formato.

3. Compila y guarda tu blueprint.

Tu función fnAddKeyHUD completa debería tener el siguiente aspecto:

¡Tu HUD está listo para funcionar! Ahora tienes que añadirlo a tu personaje jugable para que se muestre en pantalla al iniciar la partida.

Actualiza el personaje jugable

Para terminar los ajustes de tu HUD, tienes que añadir una lógica al blueprint de tu personaje que añada el widget del HUD cuando empiece la partida y lo actualice cuando el jugador recoja una llave. 

Llama a FnAddKeyHUD desde el blueprint de personaje

Conecta la lógica de la llave en BP_AdventureCharacter a la lógica del HUD para que, al añadir una llave al jugador, también se añada una llave al HUD. 

Para activar el HUD cuando el jugador obtenga una llave, sigue estos pasos:

1. Abre tu blueprint BP_AdventureCharacter. En la sección Variables del panel My Blueprint, haz clic en + para añadir una nueva variable.

2. Nómbrala HUD y cámbiale el tipo a HUD del jugador del blueprint de widget (referencia a objeto). 

   

   Esto almacena el widget de HUD que crearás en el grafo de eventos del personaje.

3. Ve a la sección del grafo de eventos donde el evento fnBPIAddKey añade una nueva llave a la matriz HeldKeys del jugador.

   

   En la sección Grafos del panel My Blueprint, amplía Grafo de eventos y haz doble clic en un evento para ir a esa área del grafo.

4. Después del nodo Add, conecta un nodo FnAddKeyHUD.

5. Configura el nodo FnAddKeyHUD:

   1. En Objetivo, conecta una referencia a la variable HUD.

   2. En Tipo de llave, conecta el pin al pin Tipo de llave del nodo Event fnBPIAddKey.

      

   Ahora, esto toma la nueva llave del jugador y llama a la función FnAddKeyHUD en el blueprint de widget del HUD.

6. Guarda y compila tu blueprint.

Muestra el HUD cuando comience la partida

Para crear una HUD cuando el jugador aparezca en el nivel, sigue estos pasos:

1. Busca un espacio vacío en el grafo de eventos de tu personaje y añade un nodo Event Possessed. Es el evento que se emite cuando el jugador toma el control o posee al personaje jugable.

2. Haz clic derecho en el nodo Event Possessed y selecciona Añadir llamada a función padre para garantizar que se sigue ejecutando la lógica Event Possessed en la clase de personaje padre. Conecta los pines Ejecución y Nuevo controlador de cada nodo.

   

   En la esquina superior derecha del blueprint de tu personaje, verás que se deriva de la clase de blueprint BP_FirstPersonCharacter. Esto significa que tu personaje usa su propia lógica y la del padre. Si añades un evento que ya existe en el blueprint de tu personaje padre, lo anularás. Al anular un evento, asegúrate de llamar también a la versión del padre para que se ejecute su lógica antes de añadir la tuya propia.

   

3. Para crear el HUD, conecta un nodo Create Widget y cambia su clase a HUD del jugador del blueprint de widget. Esto crea una instancia de tu blueprint de widget.

4. Después del nodo Create Widget, añade un nodo Set HUD que conecte ambos pines. Esto guardará el nuevo blueprint de widget en tu variable.

   

5. Para mostrar el objeto HUD en la pantalla, añade un nodo Add to Viewport. Establece como objetivo tu variable HUD.

   

   Aunque puedes conectar el nodo Create Widget directamente al nodo Add to Viewport, en este tutorial se explica por separado la creación del widget y cómo dibujarlo en pantalla. Esto es útil cuando quieres que el widget esté listo pero oculto hasta un momento determinado, como una alerta combinada que aparece después de que el jugador consiga varios impactos. Si un widget incluye muchas animaciones, efectos y sonidos, puede que sea mejor cargarlo antes de tiempo para evitar retrasos en la jugabilidad.

6. Compílalo y guárdalo.

Tu nueva lógica de blueprint de personaje debería tener este aspecto:

Prueba el HUD 

Haz clic en Reproducir para probar tu juego. Cuando comience el juego, deberías ver los PS del jugador y las etiquetas de las llaves recogidas en el HUD. Tocar una llave debería añadir su nombre al HUD.

Haz ajustes en el HUD si quieres. Algunas cosas que podrías probar por tu cuenta son las siguientes: 

• Ajusta el tamaño del panel de superposición.

• Cambia el tamaño y el estilo de las fuentes.

• Mueve la ubicación a áreas que no se limiten a la parte superior izquierda.

• Añade distintos widgets para los fondos, como texturas o materiales.

Para mejorar el HUD, prueba a sustituir las etiquetas de texto por iconos. Para ello, importa una imagen al explorador de contenido y añádela a tu HUD con un widget de imagen. Para obtener más información sobre cómo importar recursos en Unreal Editor, consulta la sección Importing Assets Directly.

Diseño de HUD eficaces 

Aquí tienes algunas estrategias de diseño más para crear un HUD claro y fácil de usar.  

Haz que sea fácil de leer:

Usa texto con mucho contraste, fuentes claras y tamaños de fuente apropiados. Garantiza que tu HUD sea legible a una distancia de visualización típica de la pantalla y cuando el jugador se esté moviendo por un entorno concurrido, no solo cuando está parado.

Haz que todo sea claro y conciso:

Muestra solo lo que el jugador necesita en ese momento y oculta o minimiza la información menos relevante hasta que la necesite. Sin embargo, el jugador siempre debería poder ver lo que necesita de un vistazo para poder tomar decisiones rápidamente. 

Añade información dinámica:

Cuando el HUD se actualiza (como cuando se recoge una llave), se puede usar una animación breve, un cambio de color o un sonido para que el jugador se dé cuenta del cambio.

Prioriza con ayuda del tamaño y la posición:

Debe destacarse la información importante. Usa texto más grande, colores llamativos o coloca esta información en la parte superior izquierda o el centro, donde los jugadores miran primero de forma natural. 

Siguiente

En la siguiente sección, seguirás añadiendo más elementos de jugabilidad a tu nivel y aprenderás a programar un interruptor para que realice una acción cuando se pulse.

• 

  Rompecabezas: interruptores y cubos

  En la primera parte de la sección de rompecabezas del juego de plataformas, usa materiales, física y blueprints para crear un interruptor que se active con un cubo.