Crea un HUD para el juego

Ha llegado el momento de hablar con más profundidad de algunos aspectos que hemos visto de pasada en anteriores artículos. En concreto el HUD. Muy pocas veces se habla de él, pero un mal diseño de este elemento puede hacer desesperarse al jugador

Daniel González (Diseñador de videojuegos)

Crea un HUD para el juego

8 junio 2008

Tras estos apasionantes meses metiéndonos de lleno en las particularidades de la creación de videojuegos para diversas plataformas, vamos a adentrarnos en algunos temas más concretos a los que vamos a dar la importancia que se merecen. Aunque seguro os sonará a muchos, lo primero que hay que hacer el explicar qué es el HUD. La palabra significa Head Up Display y hay varias teorías sobre la procedencia del concepto, pero quizá la más acertada sea la que alude a las «pegatinas» que se ponen en las cabinas de los cazas de combate para mostrar información como, por ejemplo, una cruceta de disparo. En videojuegos, el HUD es la interfaz de comunicación con el jugador durante el desarrollo, es decir, todo lo que vemos en la pantalla de información: la vida, la energía, la munición que queda, el mini mapa, la vida de los enemigos, etc. Por tanto, es todo lo que se «pinta» por encima del render del juego para dar información al jugador.

Como todo, este elemento tiene varios aspectos a trabajar. El primero es el concepto de información, ya que no necesitamos mostrar la misma información en un título de combate que en un juego de rol. Lo segundo es la colocación de elementos teniendo en cuenta qué partes de la pantalla son las más visibles para el ojo. Por último tenemos la estética que queramos darle.

Se trata de un elemento que siempre «da mucha guerra» hasta el final de desarrollo, porque es muy difícil diseñarlo perfecto al inicio. Así, es muy frecuente que el HUD de la demo de un juego varíe del definitivo, a veces en diseño y otras incluso en la colocación de los elementos.

Paso 1

Diferencias según géneros

Como ya hemos visto en anteriores entregas, lo primero es saber qué tipo de juego vamos a hacer y sus particularidades a la hora de crear el HUD:

* Juegos de rol: Se trata del más complicado, ya que durante una partida se necesitan muchas herramientas, barras de armas y magias, de vida y energía, un mini mapa detallado para saber por dónde movernos, información de los elementos que nos rodean… Es decir, mucha información que si no sabemos colocar hará que el usuario no pueda ver el juego entre tanto elemento.

* Shotter´s: Aquí es fundamental que no moleste nada, porque son juegos muy rápidos donde hay que apuntar y no puede ser, por ejemplo, que un enemigo esté tapado por la barra de vida. Se suelen poner los elementos en la parte inferior, donde normalmente no pasa nada porque está el arma. En el centro se coloca el punto de mira y se deja todo lo demás, que es donde van a aparecer los enemigos, lo más limpio posible. Esta es la razón de que hoy día muchos juegos de este tipo ya ni siquiera tengan barra de vida.

* Acción y/o aventuras: Aquí sí es crucial la barra de vida del jugador y la de los enemigos, así como tener información de objetos recogidos o armas seleccionadas. Se suele utilizar el clásico 4 esquinas, que consiste en poner información en todas las esquinas de la pantalla.

* Juegos de lucha: Suele tener un HUD que, aunque parece simple, puede ser tremendamente complicado: la barra de vida es esencial, pero también podemos tener una barra de vitalidad, una de magia y, además, es muy común poner la imagen del personaje junto a su barra de vida para asociarlo rápidamente, ya que la velocidad de estos juegos no deja mucho tiempo para mirar con calma el HUD.

* Infiltración/sigilo: Posiblemente éste sea el caso donde el HUD se convierte más en una mecánica de juego que en un elemento de información. Poniendo el ejemplo del aclamado Metal Gear Solid, es fundamental observar en el mapa la posición de los enemigos y su radio de visión para poder actuar en consecuencia. Ha de ser un HUD muy visible y claro, ya que lo vamos a tener que utilizar con calma y asiduidad.

* Estrategia: Son muy parecidos a los juegos de rol en cuanto a que necesitamos muchos elementos en pantalla: hay que dar órdenes a grupos de soldados, controlar los recursos, explorar un mapa… Sin embargo, hay una especie de tradición que es colocar todos los objetos en la parte inferior, a veces formando un elemento sólido que los englobe a todos y que «esconda» lo que hay debajo. Al tener una vista bastante aérea en la mayoría de los casos, sacrificar la parte de abajo para el HUD y dejar el resto de la pantalla lo más despejada posible no es una mala idea.

Paso 2

Cómo organizar adecuadamente los elementos en pantalla

Para ello se emplea un sistema muy lógico y que está dentro de nuestra propia cultura; tan sencillo como seguir un orden de lectura de elementos. Al igual que en una revista o periódico tenemos nuestro orden de lectura y una forma de mirar, en el HUD pasa lo mismo. Lo primero es saber qué es lo más importante y esa respuesta en la mayoría de los casos es la barra de vida. Siguiendo el ejemplo de Metal Gear Solid 2, el orden de lectura es: primero la barra de vida, después el mini mapa que permite no ser detectado y, por último, el arma y la munición.

Ahora hay que saber dónde los colocamos. Nuestro ojo se ha acostumbrado a mirar primero la esquina superior izquierda; la causa no es otra que nuestra costumbre de leer de arriba hacia abajo y de izquierda a derecha (esto cambia en culturas donde se lee de derecha a izquierda como los árabes). Así, lo normal es tener la barra de vida arriba a la izquierda, que es el lugar más importante. Nuestro orden de lectura hace que el último lugar que el ojo recorre al ver la imagen sea la parte inferior derecha, por lo que ésta se suele usar para poner muchos elementos útiles, como los mini mapas o las armas que también se pueden situar en la parte superior derecha. Por último, un lugar que no suele ser muy efectivo (porque solemos pasar la vista rápido por él) es la parte inferior izquierda; por tanto, aquí se suelen poner las cosas menos importantes.

La parte superior central suele ser un lugar idóneo para las barras de vida de los enemigos y la parte inferior central se suele utilizar para textos, información de objetos o para que aparezca por unos instantes el inventario de objetos. Cada uno puede colocar los elementos donde mejor le convenga para su juego, pero tener claro en qué sitios suele detenerse el ojo humano es importante para situar con criterio los elementos del HUD.

Paso 3

Cómo diseñar gráficamente nuestro HUD

Esta es una de las partes más complicadas de un videojuego, porque los usuarios piden que el HUD no moleste y que pase desapercibido pero, a la vez, que sea atractivo y encaje en la estética del proyecto. La barra de vida (tanto la nuestra como la de los enemigos) suele tener un diseño muy trabajado al ser un elemento que tendremos que mirar mucho. A la hora de diseñarla hay que tener en cuenta si vamos a tener varias barras de vida. Esto es algo muy común en los jefes finales donde, al finalizar una barra, se pasa a otra de debajo con otro color, y así hasta tener que quitarle tres o cuatro barras de vida. Por otro lado, también hay que tener en cuenta el que la barra de vida del jugador puede hacerse más grande al desbloquear objetos o subir de nivel. Con los enemigos comunes hay dos formas básicas de barra: las que están estáticas en un lugar de la pantalla o las que se posicionan encima del enemigo y se desplazan con él, lo que suele ser para juegos más tipo arcade.

El mapa es muy importante que esté perfectamente integrado en el juego, ya sea porque tenga una transparencia que lo hace muy sutil o porque tenga un diseño como en La Batalla por la Tierra Media, con forma de pergamino que encaja a la perfección. Al ser un elemento grande, si se ve mucho o resulta tosco puede molestar, y mucho, al usuario.

Respecto a las armas y munición, dependiendo cómo sea tu juego este elemento en diseño es vital. Imagina que vas armado con tu «supermetralleta» de destrucción masiva y en tu HUD no aparece la munición. Tú vas confiado y cuando te aparece un enemigo lo que oyes al disparar es el cargador vacío (y fin de la partida porque te han derribado). Si hubieras visto en tu HUD lo que te queda de munición hubieras recargado o, si no era posible, al menos hubieras entrado en combate de otra forma. Este es un buen ejemplo de lo importante que es este elemento.

El HUD, en la mayoría de los casos, es un diseño 2D creado en Photoshop (o cualquier otra herramienta de diseño 2D), que con un canal Alpha se consigue poner con transparencias, degradados etc. Al crearlo hay que tener muy claro las resoluciones de pantalla que va a soportar nuestro juego. Si es para consola es fácil, pero si es para PC puede que nuestro HUD se vea de maravilla a 1.280 x 1.024 y fatal en 1.024 x 768; además, hay que tener en cuenta las resoluciones de las pantallas panorámicas si no queréis tener un HUD «espachurrado».

Esperamos que hayáis entendido la relevancia del HUD a la hora de diseñar vuestro juego. Si no se le da la importancia que se merece puede que hagamos un juego tan lioso que el usuario no sepa qué tiene que hacer. Como un mal ejemplo de HUD podemos poner el juego Battlefield 2142, pidiendo perdón de antemano a quien se pueda ofender por el comentario. Es un gran juego con un pésimo HUD, lleno de elementos en pantalla y donde la gente tarda horas en saber extraer la información que presenta.

Terminamos por este mes recordando, como siempre, que podéis enviar dudas, sugerencias y cualquier comentario a [email protected] o bien a través del blog http://crearvideojuegos.blogspot.com.