Barra de objetos en Unreal Engine: crea una hotbar de selección rápida con IA
Barra de objetos en Unreal Engine: tres slots en las teclas 1, 2 y 3, el elegido en dorado al 115 % y el nombre encima, con una petición a la IA.
Una barra de objetos en Unreal Engine se reduce a tres ideas sencillas: una fila de slots, cada uno con su propio aspecto; un número, el slot seleccionado; y una tecla para cada slot que cambia ese número. Todo lo que ves, el borde, el tamaño, la atenuación y el nombre, es solo una reacción a ese único número. La forma más fácil de construirla es pedirle a una IA la hotbar completa en una sola petición.
En este paso a paso, Ultimate Engine CoPilot construye una barra de selección rápida de tres slots en las teclas 1, 2 y 3. Tienes el prompt exacto, cómo probó la IA cada tecla y una explicación sencilla de cómo funciona una barra de objetos.
Qué hace la barra terminada
En la parte inferior izquierda de la pantalla hay tres slots pequeños: una gema roja, una gema azul y una gema verde. El primero está seleccionado, con un borde dorado y un poco más grande que los demás, y el nombre de encima dice “Fire”. Pulsas 2 y el borde pasa a la gema azul y el nombre dice “Frost”. Pulsas 3, la gema verde, “Heal”. Y 1, de vuelta a Fire.
La barra con el slot verde Heal seleccionado: borde dorado, tamaño completo y los demás atenuados.
El prompt
Copia esto, cambia los colores o añade un cuarto slot y mira qué construye la IA:
Make a quick-select item bar. Create WBP_ItemBar in /Game/Series/EP38_ItemBar, a row of three square slots at the bottom left of the screen, above the existing ability bar and clear of it, each 72 pixels wide with the key number 1, 2 or 3 in the corner and a coloured gem in the middle: red for Fire, blue for Frost and green for Heal. The selected slot has a gold border and is scaled up to 115 percent, the other two are dimmed to 55 percent. Above the bar, show the name of the selected item, Fire, Frost or Heal. Create BP_ItemBarController in the same folder, an actor that I place once, that adds the widget on BeginPlay and listens for the keys 1, 2 and 3 to select the matching slot. The change animates over 0.15 seconds. Slot 1 is selected at the start. Keep the slot size and the animation time as variables. Place the actor near the player start. Then play test it: check slot 1 is selected at the start, press 2 and check slot 2 is selected and the name reads Frost, press 3 and check Heal, press 1 and check Fire, and fix anything that does not work.Fíjate en los dos números: 115 % y 55 %. Si solo dices “resalta el slot seleccionado”, la IA elige algo por su cuenta. Si das los números, obtienes el aspecto que quieres a la primera. Y un detalle pequeño: “above the existing ability bar and clear of it”. Indica siempre dónde va la interfaz nueva cuando la pantalla ya tiene alguna.
Cómo lo construye la IA
La IA empieza leyendo el proyecto y el HUD, para ver dónde está la barra de habilidades. Después aparecen los assets: el widget de la barra de objetos, el Blueprint del controlador y tres acciones de Enhanced Input (IA_ItemSlot1, 2 y 3) más un mapeo de entrada, porque no hay un evento de tecla directo disponible para un actor.
El widget tiene muchas piezas pequeñas: tres slots, tres gemas, los números de las teclas, el texto del nombre y tres animaciones de selección. Las acciones de entrada están configuradas para no consumir las teclas, así que cualquier otra cosa asignada a 1, 2 o 3 sigue funcionando. Es un detalle muy cuidado.
El grafo del controlador: cada tecla llama a Select Slot con su número.
La prueba de juego
Pasa al primer intento:
- Al empezar, el controlador indica el slot 1, el nombre es Fire, y la captura muestra el slot 1 con el borde dorado y más grande, y los otros dos atenuados.
- Pulsa 2: slot 2, Frost, y el borde se movió.
- Pulsa 3: slot 3, Heal.
- Pulsa 1: slot 1, Fire otra vez.
Cuatro comprobaciones, todas superadas, y nada que corregir.
El informe
Seis assets en total, y las notas sobre lo que no se midió.
El informe enumera lo que se construyó, seis assets en total: el widget, el controlador, tres acciones de entrada y el mapeo. Es sincero sobre lo que no midió:
- La animación de 0,15 segundos no se cronometró durante el juego. Cada comprobación se leyó unos 0,6 segundos después de la tecla, así que solo confirma el estado final.
- El menú principal tapaba la barra en las capturas de la prueba, por lo que se ve apagada.
- Cambiar SlotSize no mueve la gema ni el cuadro de diseño. Los slots cambian de tamaño, pero la gema se queda en 26 píxeles y el contenedor de la barra es fijo, de 320 por 130, así que un tamaño de slot mucho mayor se desbordaría.
- El nivel está sin guardar.
Cómo funciona una barra de objetos, en palabras sencillas
El widget guarda un único número, el índice seleccionado. Cuando el controlador recibe la tecla 2, le dice al widget: selecciona el slot 2. El widget guarda ese número. Después, cada slot se hace una sola pregunta: ¿soy el seleccionado? Si es así, reproduce la animación de selección: borde dorado, escala al 115 % y brillo completo. Si no, la reproduce al revés: atenuado al 55 %. Y el texto del nombre se elige según el índice: tres slots, tres nombres.
Como el tiempo de animación y el tamaño del slot son variables, puedes hacer una barra ágil o una lenta con dos números.
Ideas para ampliarlo
- La rueda del ratón para cambiar de slot.
- Objetos que hagan algo de verdad: Fire lanza una llama, Frost ralentiza a un enemigo, Heal restaura la salud.
- Un barrido de enfriamiento sobre cada slot y un contador de cuántos tienes. El sistema de inventario en Unreal Engine muestra cómo contar objetos.
Cuatro consejos para prompts de barra de objetos
- Da el aspecto del slot seleccionado y del atenuado como números.
- Indica dónde va la barra, en relación con la interfaz que ya existe.
- Indica qué slot está seleccionado al empezar.
- Pide a la IA que pruebe todas las teclas, en un orden mezclado.
Preguntas frecuentes
¿Cómo hago una hotbar en Unreal Engine 5?
Guarda un único índice seleccionado en un widget, añade una tecla para cada slot que lo establezca, y haz que cada slot reaccione con una animación según sea o no el seleccionado.
¿Por qué la IA usa aquí acciones de Enhanced Input?
No hay un evento de tecla directo disponible para un actor a través de las herramientas, así que añadió una acción de entrada por tecla y un mapeo. Están configuradas para no consumir la entrada, de modo que otras asignaciones a esas teclas siguen funcionando.
¿Puedo cambiar el tamaño del slot?
SlotSize es una variable, pero la gema y el contenedor no se escalan con ella. Un slot mucho más grande se desbordaría del contenedor fijo, así que ajusta también el diseño.
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 sistema de inventario en Unreal Engine, el arma a distancia en Unreal Engine y el menú principal en Unreal Engine.