Oferta flash30% de descuento en la licencia y paquetes de tokens más grandes al mismo precio.30% de descuento en la licencia + paquetes de tokens más grandesTermina en …Ver precios → Descubre las novedades de V2 · Interfaz renovada, Crew, Blueprint a C++, pruebas multijugador y actualizaciones dentro del editor Leer el registro de cambios →
Todas las entradas
5 min de lectura

Brújula en Unreal Engine: crea una barra de brújula HUD con IA

Brújula HUD en Unreal Engine: letras N, E, S y W que se desplazan al girar la cámara, un marcador y el rumbo en grados, probada en cuatro direcciones.

Una barra de brújula en Unreal Engine se reduce a tres ideas sencillas: la dirección hacia la que mira la cámara, expresada como un ángulo; una fila de letras, cada una situada en el ángulo que le corresponde; y una ventana, para que solo se vean las letras cercanas al centro. La fila se desplaza a medida que la cámara gira. La forma más fácil de construirla es pedirle a una IA el elemento completo del HUD en una sola petición.

En este paso a paso, Ultimate Engine CoPilot construye una barra de brújula en la parte superior de la pantalla con N, E, S y W en dorado. Tienes el prompt exacto, cómo probó la IA las cuatro direcciones y una explicación sencilla de cómo funciona una barra de brújula.

Qué hace la brújula terminada

En la parte superior de la pantalla, una barra fina muestra la dirección hacia la que miras. Giras la cámara y las letras se deslizan hacia los lados, como una brújula de verdad en un videojuego. La N en dorado, luego la E, luego la S, luego la W, y un número pequeño bajo el marcador indica el rumbo en grados.

La barra de brújula en la parte superior de la pantalla con el número de rumbo debajo, mientras dos personajes están sobre la nieve

La barra de brújula bajo el recuadro Blizzard, siguiendo a la cámara.

El prompt

Copia esto, cambia los grados visibles o los colores y mira qué construye la IA:

Make a compass bar. Create WBP_CompassBar in /Game/Series/EP37_Compass, a thin horizontal bar at the very top of the screen, 600 pixels wide and centred, below the existing Blizzard box. It shows the direction the player's camera is facing as letters that slide sideways as the camera turns: N, NE, E, SE, S, SW, W, NW, with a small white triangle marker in the middle. The letters for the main directions N, E, S and W are larger and gold, the in-between ones smaller and white. Also show the heading in degrees as a number under the marker, for example 90. Create BP_CompassController in the same folder, an actor that I place once, that adds the widget to the screen and updates it every frame from the player camera's yaw. Treat world +X as North and world +Y as East. Keep the bar width and the number of visible degrees as variables. Place the actor near the player start. Then play test it: turn the camera to face +X and check the heading reads 0 with N in the middle, turn it to +Y and check 90 with E, turn it to -X and check 180 with S, turn it to -Y and check 270 with W, and fix anything that does not work.

El detalle importante es la última parte de la configuración: “Treat world +X as North and world +Y as East”. Unreal no tiene norte, solo ejes. Si no indicas qué eje es el norte, la IA tiene que elegir uno, y puedes acabar con una brújula que apunta al lado equivocado. Así que dilo siempre.

Cómo lo construye la IA

La IA empieza leyendo el proyecto. Encuentra el recuadro Blizzard en la parte superior del HUD y mide dónde termina, para que la barra pueda ir justo debajo. Después aparecen los assets: el widget de la barra de brújula y el Blueprint del controlador.

La lógica del controlador: Begin Play añade el widget, y Tick lee el yaw de la cámara y mueve las letras. Las letras se desvanecen cerca de los extremos de la barra, para que no aparezcan y desaparezcan de golpe.

El grafo de eventos de BP_CompassController leyendo el yaw de la cámara en cada fotograma

El grafo del controlador: añade el widget y después lo actualiza desde la cámara en cada Tick.

La prueba de juego

Primero la IA tiene que girar la cámara, así que busca cómo hacerlo. Después comprueba cuatro direcciones:

  • Mirando hacia +X: el rumbo es 0 y la N está en el centro.
  • Mirando hacia +Y: 90 y la E.
  • Mirando hacia -X: 180 y la S.
  • Mirando hacia -Y: 270 y la W.

Lee los números del controlador y las letras de una captura, y las letras vecinas están bien colocadas a ambos lados, como NW y NE alrededor de la N. Las cuatro pasan.

Después, un detalle menor de la captura: el triángulo del marcador tocaba la parte superior de la letra central. Así que la IA hizo la barra un poco más alta, de 40 a 46 píxeles, y bajó las letras.

El informe

El informe de la IA con la descripción del widget y del controlador y los puntos a tener en cuenta

Qué se construyó y qué conviene saber.

El ancho de la barra (600) y el número de grados visibles (180) son variables del actor colocado. El informe es sincero en varios puntos:

  • El último cambio, la barra más alta, no se probó en otra sesión de juego. El diseño compila, pero no se hizo ninguna ejecución más.
  • La barra está a una altura fija, y=150, para despejar el recuadro Blizzard, cuyo texto se sale de su panel. El desplazamiento no está vinculado al HUD, así que si mueves el recuadro, la brújula no se mueve.
  • El nivel está sin guardar.
  • El menú principal oscurecía las capturas. Por eso el vídeo también muestra una ejecución real dando una vuelta completa.

Cómo funciona una barra de brújula, en palabras sencillas

En cada fotograma, el controlador toma el yaw de la cámara y lo convierte en un rumbo de 0 a 360. El cero es +X, al que llamamos Norte. Cada letra tiene un ángulo: la N en 0, la E en 90, y así sucesivamente.

Para cada letra, el controlador calcula a qué distancia está del rumbo y lo convierte en una posición en píxeles sobre la barra. Las letras fuera de los grados visibles se ocultan, y las que están cerca de los bordes se desvanecen. Como el ancho de la barra y los grados visibles son variables, puedes hacer una brújula amplia o una ajustada con dos números.

Ideas para ampliarlo

  • Marcadores en la brújula, como un marcador de misión que se desliza por la barra. Consulta el marcador de objetivo en Unreal Engine.
  • La distancia al marcador, en metros, debajo de él.
  • Una barra que se desvanece cuando no mueves la cámara.

Cuatro consejos para prompts de brújula

  1. Indica qué eje del mundo es el norte.
  2. Indica el tamaño de la barra y dónde va.
  3. Indica qué letras son grandes y cuáles pequeñas.
  4. Pide a la IA que pruebe las cuatro direcciones.

Preguntas frecuentes

¿Cómo hago una barra de brújula en Unreal Engine 5?

Lee el yaw de la cámara en cada fotograma como un rumbo de 0 a 360, coloca una fila de letras según la diferencia entre el ángulo de cada letra y el rumbo, y oculta las letras que queden fuera de una ventana visible.

¿Qué dirección es el norte en Unreal Engine?

Unreal no tiene norte, solo ejes. Elige uno e indícalo en la petición. Aquí +X es el Norte y +Y es el Este.

¿Por qué la IA hizo la barra más alta?

En la captura, el triángulo del marcador tocaba la parte superior de la letra central. La IA subió la barra de 40 a 46 píxeles y bajó las letras.

Pruébalo en tu proyecto

Descubre lo que Ultimate Engine CoPilot puede construir en la página del producto, o consíguelo en Fab. Descubre cómo funciona el generador de Blueprints con IA.

Más creaciones de esta serie: el marcador de objetivo en Unreal Engine, el viaje rápido en Unreal Engine y el zoom en Unreal Engine.

¿Qué te pareció?

Pruébalo en tu editor
1655 herramientas para Unreal Engine 5.
Obtener el plugin