Students Save 30%! Learn & create with unlimited courses & creative assets Students Save 30%! Save Now
Advertisement
  1. Game Development
  2. Game Mechanics
Gamedevelopment

Cómo codificar las barras HUD

by
Difficulty:IntermediateLength:LongLanguages:

Spanish (Español) translation by Elías Nicolás (you can also view the original English article)

Las barras HUD son elementos visuales en el juego que no pertenecen necesariamente al mundo del juego, pero son una indicación para el jugador de un período de tiempo durante el cual puede o no puede realizar una acción.

En juegos de rol, escenarios de batalla en línea para jugadores múltiples (como League of Legends o DOTA), o incluso juegos de estrategia en tiempo real, estos indicadores son a menudo críticos para el jugador.

En este tutorial, veremos cómo implementar esas barras de enfriamiento, cualquiera que sea su lenguaje de codificación o herramienta, confiando en el pseudocódigo y desglosando la mecánica utilizada. El tutorial no pretende mostrar la mejor o la única forma de implementar barras de enfriamiento, sino que simplemente analiza y muestra una forma práctica y práctica de hacerlo.

Todas las demostraciones se hicieron con la versión estable Construct 2 R168, y se pueden abrir y ejecutar en su versión gratuita. Se comenta todo el código fuente de los ejemplos.

Vamos a profundizarlo.

El mecánico básico de enfriamiento

Una barra de enfriamiento es principalmente una retroalimentación visual para la mecánica de enfriamiento, y la mecánica de enfriamiento es básicamente un temporizador. Considera una acción que realiza un personaje. En el momento en que se realiza la acción, se inicia un temporizador, y mientras este temporizador cuenta regresivamente, el personaje no puede realizar la acción nuevamente. Ese es el descanso.

Desde la perspectiva del código, para evitar la acción que se realiza durante el período de enfriamiento, una variable booleana se establece en true cuando se realiza la acción. Al intentar realizar su acción, el código verifica que el valor de la variable booleana sea false, y no permite que la acción se realice de otro modo. Al final del temporizador, la variable booleana vuelve a establecerse en false, permitiendo que la acción se realice nuevamente.

Considere el siguiente ejemplo como una ilustración de este concepto:

Una vez que hace clic en el botón Action, el personaje realiza una acción y el botón Action se desactiva. Durante el tiempo de reutilización, a intervalos regulares se muestra el tiempo restante en el HUD. Al final del HUD, el personaje está listo para realizar la acción de nuevo, por lo que el botón Action se vuelve a habilitar.

Echemos un vistazo al pseudo-código:

La función On clicked Button solo se puede ejecutar si el botón está habilitado, y su código solo se ejecuta una vez después del clic. Esa es la acción del usuario que inicia el temporizador y establece que Cooldown sea true.

Cuando se hace clic en el botón, la variable Character.cEndTime variable es el momento en que el período de enfriamiento finalizará; este valor se establece en función del valor en el objeto de texto txtTimer, que se ve al lado del botón Action.

También en este punto, el valor de cTimer se "restablece" a 0 ya que es un temporizador "nuevo", y Cooldown se establece en true para permitir que la segunda parte del código se active. Finalmente, desactivamos el botón. (Podríamos simplemente dejarlo habilitado y agregar otra condición a nuestra función de botón On clicked Button para verificar si el valor de Cooldown es false antes de continuar, pero deshabilitarlo parece una mejor respuesta).

Nota: en el ejemplo, y este pseudo-código, no hay errores de captura para evitar que ingrese algo que no sea un número en ese objeto de texto. Al ingresar cualquier otra cosa, efectivamente se configurará que cEndTime sea 0, por lo que, básicamente, no se producirá ningún HUD.

La línea 10 del pseudocódigo anterior se ejecuta cada tic; comprueba si el valor de Character.Cooldown es true y, si es así, agrega el valor de dt al valor actual de Character.cTimer.

dt, abreviatura de "tiempo delta", es una variable de sistema que devuelve el tiempo que ha transcurrido entre la representación del fotograma anterior y la representación del fotograma actual. Esto significa que, por muy poderosa que sea la computadora del jugador, y cualquiera que sea la frecuencia de muestreo en el que se ejecute, podemos asegurarnos de que el período de enfriamiento dura la misma cantidad de tiempo. (Si definimos el período de enfriamiento en términos de un número de tics o marcos que transcurrieron, la duración del período en segundos podría variar en diferentes máquinas.) El nombre de esta variable dt o su uso puede diferir de acuerdo con su motor de codificación.

Si el enfriamiento continúa activo, comprobamos si el valor actual de cTimer es mayor o igual que cEndTime; si es así, debemos haber llegado al final del período. Mostramos un poco de retroalimentación y establecemos Character.Cooldown en false para que esta sección de código no se ejecute nuevamente hasta que el usuario haga clic en el botón Action. También volvemos a habilitar el botón Action.

Si el tiempo de reutilización sigue activo, mostramos comentarios que lo explican. Este fragmento específico de comentarios es en realidad nuestra "barra de enfriamiento" para este ejemplo basado en texto.

Entonces esa es una mecánica básica de enfriamiento basada en un temporizador básico. Para el resto de este artículo, centrémonos en las barras de enfriamiento, y veamos cómo implementarlas.

Una barra de enfriamiento básico

Una barra de enfriamiento es en realidad un objeto que cambia de tamaño o de visibilidad con el tiempo, durante un período de enfriamiento. Es una mecánica de retroalimentación para el jugador para hacerle saber cuándo podrá realizar la acción nuevamente.

Considere el siguiente ejemplo:

Haga clic en cualquier lugar de la pantalla para realizar la acción. Tenga en cuenta que la barra verde se vuelve roja durante el tiempo de reutilización y crece desde un ancho de 0 hasta su ancho original. Como en el ejemplo textual básico, puede establecer la duración de enfriamiento.

En este ejemplo, la barra (llamada CooldownBar) no es más que un sprite de color que se extiende hasta un ancho de 100 píxeles. Cuando se realiza la acción, su ancho se establece en 0 píxeles. Entonces, cada tic que la variable Cooldown es true, el ancho se establece en función del valor actual de cTimer.

Echemos un vistazo al pseudo-código:

La mecánica de enfriamiento es bastante similar a la descrita en el ejemplo anterior, así que centrémonos en CooldownBar. El objeto tiene dos marcos de animación: un cuadrado verde 32x32px y un cuadrado rojo 32x32px. También tiene una variable de instancia numérica MaxWidth que se establece en 100 (píxeles), el ancho máximo real de la barra.

Cada tic, si Cooldown es true, CooldownBar.width se establece en una fracción de CooldownBar.MaxWidth. Determinamos esta fracción dividiendo el ancho máximo de la barra por el tiempo de finalización de enfriamiento, y luego multiplicando este resultado por el tiempo de cTimer actual.

Al comienzo y al final del período de enfriamiento, también nos aseguramos de cambiar el cuadro de la animación en consecuencia: a rojo, cuando comienza el tiempo de reutilización, y luego a verde una vez que se haya completado el tiempo de reutilización.

Mejorando el Diseño

Podríamos ir un poco más allá en el aspecto visual. Aquí hay algunos pensamientos:

El punto de origen de CooldownBar se encuentra en su centro, lo que le da la sensación de un crecimiento general. Si lo prefiere, puede establecer este punto de origen en el borde izquierdo o derecho del objeto, para darle una sensación más "lineal".

Este ejemplo es muy básico; la barra en sí solo está compuesta por dos marcos de diferentes colores para reforzar el aspecto de enfriamiento. Siempre que la barra esté roja, el usuario entiende que la acción no se puede realizar, ya que el rojo generalmente es un color que se usa para indicar "detente". ¡Pero no olvides a tus jugadores daltónicos! Asegúrese de usar colores que sean realmente diferentes para que incluso ellos puedan notar la diferencia, o use otro método de comentarios visuales además del cambio de color.

También podría agregar un contorno a la barra, un rectángulo fijo que le permitiría al usuario estimar mejor el tiempo restante en el período de enfriamiento.

Aquí hay una ilustración rápida de los puntos anteriores:

Sigue siendo una barra de recarga muy básica, y aún hay más que podría agregar a lo visual. La barra puede consistir en una animación en lugar de solo dos marcos de colores. El sprite debajo de la barra se puede estilizar de tal forma que su fondo parezca transparente, o incluso se puede agregar otro elemento sobre él para dar una impresión de "vidrio". Hay muchas formas de estilizar la barra de enfriamiento para que se adapte mejor al diseño de tu juego.

Botones de habilidades

En algunos juegos, el jugador tiene botones de habilidad a su disposición. Estos botones no solo muestran el tiempo de reutilización o la disponibilidad de la habilidad; también son una interfaz para que el usuario realice la habilidad indicada (a menudo además de algunos atajos de teclado).

Considere este ejemplo, en el que al hacer clic en uno de los botones se arrojará el arma apropiada y también se mostrará el tiempo de reutilización restante:

Como puede ver, cada botón de habilidad mostrará una barra negra que "no se llena" y un temporizador durante el tiempo de enfriamiento. La barra negra es solo un sprite de color negro colocado sobre el botón de habilidad con una opacidad del 45% y el temporizador es un objeto de texto. Cada instancia del botón de habilidad tiene su propia instancia de estos objetos SkillCover y txtSkillTimer.

Esta vez, las variables Cooldown, sTime y sEndTime están "conectadas" a cada instancia de SkillButton. Además, el punto de origen del sprite negro SkillCover está en su borde inferior.

Considera este pseudo-código:

Aquí, seleccionamos la instancia correcta de txtSkillTimer y SkillCover. (Esta es una técnica de Construct 2: determinamos las instancias correctas de acuerdo con el valor de Skill, que debe corresponderse con el cuadro de animación del SkillButton actual que se hizo clic o se seleccionó en el ciclo For each).

A diferencia de nuestras barras de enfriamiento anteriores, SkillCover comienza "lleno", cubriendo toda la altura del SkillButton, y luego, durante el enfriamiento, disminuye lentamente, revelando la imagen del botón.

Para hacer esto, damos a SkillCover una altura que coincida con la de SkillButton para comenzar, y luego, cada cuadro, restamos (SkillButton.Height / SkillButton.sEndTime) * SkillButton.sTime de esta altura completa. Básicamente es la misma fórmula que utilizamos antes para calcular la fracción del período de enfriamiento que ha transcurrido, pero a la inversa.

Algunos juegos formatearán el tiempo de manera diferente y le permitirán al jugador configurar la pantalla que prefiera. Por ejemplo, un minuto y cuarenta segundos podrían mostrarse como 1:40 o como 100 segundos. Para aplicar esto en su propio juego, ejecute una verificación If, antes de mostrar el texto de txtSkillTimer, para ver qué formato ha seleccionado el jugador, y formatee el texto en consecuencia. Algunos juegos o jugadores incluso prefieren no mostrar la hora como texto en absoluto.

Hay más que puedes hacer con SkillCover. Podría jugar con su opacidad para oscurecer el botón más o menos del 45%. Dado que es un elemento que cubre otra imagen, también puede jugar con su modo de combinación, por ejemplo, para desaturar la imagen subyacente y revelar sus colores cada vez más a medida que pasa el enfriamiento. Incluso podría considerar agregar efectos webGL o de sombreado para que se ajusten al resto de su UI o diseño. En cuanto a la barra de enfriamiento, depende de tu imaginación y dirección artística.

Conclusión

Hemos visto que una barra de enfriamiento es una retroalimentación visual para una mecánica simple que evita que una acción se realice durante un cierto período de tiempo.

Puede usar sprites simples y estirar su ancho o alto con el tiempo para indicarle a su usuario que se está produciendo un tiempo de reutilización. Puede visualizar el tiempo restante en texto sin formato, formateándolo en minutos o en segundos. Incluso puede aplicar cualquier tipo de animación, modo de mezcla o efecto de sombreado que se adapte a la dirección artística de su juego.

Si lo piensas por un segundo, también puedes usar este método para controlar la velocidad de disparo de un arma: mientras el arma esté en enfriamiento, no disparará a otro proyectil, incluso si la tecla Fire está abajo; en el momento en que se complete el enfriamiento, se puede disparar otro proyectil. No se requiere una barra de enfriamiento en este caso.

Puedes descargar todos los ejemplos y abrirlos en Construct 2 free edition R168 o posterior.

Espero que hayas encontrado este artículo interesante, y estoy deseando ver tus propios diseños de barras de enfriamiento.

Referencias

Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.