Spanish (Español) translation by Ricardo Mayén (you can also view the original English article)
Las cuentas regresivas son elementos simples que aparecen en muchos juegos, pero su diseño puede ser fácilmente ignorado.
Con unas pocas simples adiciones, no obstante, un reloj regular se puede hacer mucho más atractivo y adecuado para el universo del juego presentado y de esta manera realzar la experiencia del jugador.
Muchos de estos elementos están inspirados en la charla "Sácale el jugo o piérdelo" de Martin Jonasson y Petri Purho sobre como sacarle "más jugo" a tu juego. El punto es que no es suficiente sólo presentar la información en su forma más básica; también necesitas realzar y acentuar lo qué está pasando con el color, los sonidos y el movimiento, lo que hará la experiencia de tu juego mucho más atractivas. Definitivamente recomiendo ver esta charla para aprender también sobre otras aplicaciones.
En esta serie de dos partes, exploraremos estos elementos y luego los implementaremos en un simple proyecto Unidad, para lo cual necesitarás la versión más reciente. En la parte 2 que sigue, veremos elementos más detallados y matizados.
¿Listo? ¡Vamos!
El Propósito de las Cuentas Regresivas
Los relojes en los juegos pueden servir diferentes propósitos, los cuales no necesariamente se superposicionan con las aplicaciones. Estos son:
- Tienes X cantidad de tiempo para llevar a cabo una tarea.
- Necesitas sobrevivir por X cantidad de tiempo.
El diseño de un reloj puede cambiar entre estos dos, ya que la información necesaria para el jugador cambia en su aplicación.
Cuando se te dan cinco minutos para desactivar una bomba en Metal Gear Solid 2, necesitas saber la cantidad exacta de tiempo que tienes, puesto que cada segundo se vuelve vital para el progreso y planeación en general. El reloj necesita comunicarle al jugador cuanto tiempo queda, y alertarlo si esa cantidad se está volviendo críticamente baja.
Cuando tienes que resistir por cierta cantidad de tiempo, ese elemento de exactitud se vuelve menos importante. Mientras que por supuesto sería agradable conocer la cantidad exacta de tiempo en segundos que necesitas sobrevivir, el juego puede también funcionar sin esa información. Podría aún ser mejorado, ya que una pieza de información como "¡Necesitas resistir por unos segundos más!" se entiende más fácilmente en una situación estresante que "por favor lee este indicador en la esquina de la pantalla", y puede realzar la inmersión dentro del mundo del juego.
Cómo Mejorar las Cuentas Regresivas
Ahora veamos los elementos que harán a las cuentas regresivas y relojes más interesantes y atractivos.
1: Crea Tu Propio Reloj Que No Dependa de Números e Incrusta el Reloj En el Mundo
En lugar de poner un número en algún lugar, puedes crear tu propia gráfica de cuenta regresiva lo que le dirá al usuario en términos generales cuanto tiempo queda.
Una implementación gráfica de 2D requerirá de cierta delicadeza, ya que necesitas asegurarte que el jugador puede intuir y leer la idea de que "el tiempo se está agotando y te quedan aproximadamente X segundos".
Esto funciona muy bien si usas indicadores ambientales para mostrar el progreso y tienes voces incorporadas al juego que te digan cuanto tiempo te queda. Un número pegado en la parte superior de la pantalla se puede sentir no degiético y podría posiblemente sacar a algunos jugadores de la experiencia del juego.
En Half Life 2, por ejemplo, necesitas defender una posición hasta que un teleportador haya cargado. Al comienzo, una carga completa se muestra, la cual entonces se tiene que llenar de nuevo.
La carga se muestra por elementos de la máquina que se encienden y comienzan a girar, dándote un reloj rudimentario que te comunica cuanto tiempo más tienes que resistir.
La carga del teleportador también es un buen ejemplo de cómo una pantalla incrustada, que está directamente en el mundo del juego. Estas son útiles puesto que mantienen al jugador enfocado en el mundo, mientras que un reloj en una capa GUI estaría sobre el mundo del juego.
2: Haz que los Números Luzcan Como Números
¡Obtén una fuente genial para tus cuentas regresivas! Ciertas fuentes como esta Fuente de Pantalla Digital emula a la iluminación de pantallas más viejas, las cuales eran mayormente usadas para números en pantallas "digitales" viejas.
El jugador ya asociará estas fuentes con relojes y cuentas regresivas, y hará leerlos mucho más simple, como si estuviera en algo como Arial o Times New Roman.
La legibilidad básica y composición del texto también aplican. No apiles los números verticalmente, no uses números romanos, etc.
3: Dale al Jugador la Cantidad en Segundos, No en Minutos
La serie Metal Gear Solid hace este truco maravilloso donde ellos dicen "¡tienes solamente 500 segundos más!" y luego muestra un número que se lee como "5:00".
Cuando lo jugué por primera vez, mi mente auto completó esto para leerlo como "5 minutos", pero era un engaño. "500 segundos" es un formato de tiempo poco común pero correcto, y la gente generalemente no está entrenada para entender esto correctamente.
El efecto es que los jugadores pensarán que sólo tienen 5 minutos, mientras que en realidad son 5 minutos y 20 segundos.
Esto usualmente no tiene inconvenientes, ya que serán estimulados por el tiempo límite reducido y se concentrarán en completar la tarea (en Metal Gear Solid 2: desactivar bombas), lo cual les distraerá del hecho que cinco minutos podrían haber pasado, y aún hay tiempo.
4: Haz que un "Minuto" dure 100 segundos
Esto va de la mano con decirle al jugador la cantidad de tiempo que queda en segundos.
Un elemento recurrente en las cuentas regresivas de MSG2 es que no tienen rotaciones de 60 segundos, sino "rotaciones" de 100 segundos. Esto no significa que en verdad un minuto se pase al siguiente, sino los segundo siendo listados. Así que en lugar de que un minuto se vuelva 00:59, es que 0100 se vuelva 0099. Necesitas solamente obtener el valor en si mismo, lo que hace una cuenta regresiva de hecho más fácil de crear, ya que te puedes saltar el cálculo del minuto.
5: Usar Milisegundos y Fracciones para Agregar Tensión
¡El tener milisegundos desplegados después de los números principales lo hace mucho más interesante!
Esto es bastante fácil, puesto que el tiempo puede ser guardado ya en una flotadora. De dos a tres números de puntos flotantes son una buena cantidad que sigue siendo legible y potencialmente útil para el jugador.
6: ¡Usa el Color a Tu Ventaja!
Cuando el reloj alcanza una cierta baja cantidad, dále un color diferente al texto. Colorearlo de amarillo funciona bien, ya que hace que el reloj resalte más.
Una vez que alcance sus segundos finales, hazlo rojo, más grande y que parpadee. Ahora la baja cantidad no puede ser ignorada, y esto crea tensión en el jugador.
¡Construyamos un Reloj Más Simple con Estas Cosas!
Ahora comencemos con cómo mejorar un reloj vía código. Transformaremos esto:
En esto:
Usaremos unos cuantos recursos especiales que puedes obtener fácilmente o crearlos tú mismo, u obtenerlos de los archivos fuentes que puedes descargar en la parte superior derecha de este artículo.
¿Listo? ¡Vamos!
Configuración y Reloj Básico
Inicia Unity y crea un nuevo proyecto.
Luego crea un objeto de juego vacío, colócalo en frente de la cámara, y agrégale una malla de texto vía Component>Mesh>Textmesh. Esto será el despliegue para el reloj en el mundo del video.
Usaremos el 3d-textmesh (malla de texto en 3D) por ahora, pero esto tambien funcionará en otras áreas, como la interfaz básica de Unity. Por ahora el texto en 3D también tiene el beneficio de que puede estar dentro del mundo del juego, como se mencionó anteriormente, y no sobre el mundo dentro de la capa GUI.
Nuestro nuevo texto en 3D no se mostrará inmediatamente; necesitamos alterar unos cuantos valores.
Configura el tamaño del carácter a 0.1, el ancla al medio a la izquierda, el alineamiento al centro, y el tamaño de fuente en 80. También agrega un texto temporal en el campo de "texto". Esto se hace sólo para que tengamos algo que ver en el editor; durante el juego real, esto se adaptará directamente vía código. 00:00 nos funcionará.
Luego crea un nuevo archivo llamado Countdown.sc, agrégalo a nuestro objeto reloj, y agrégale este código:
1 |
using UnityEngine; |
2 |
using System.Collections; |
3 |
|
4 |
public class Countdown : MonoBehaviour { |
5 |
|
6 |
float timer = 120f; |
7 |
|
8 |
void Update (){ |
9 |
timer -= Time.deltaTime; |
10 |
GetComponent<TextMesh>().text = timer.ToString(); |
11 |
}
|
12 |
}
|
Tenemos una variable llamada timer, la cual contendrá el tiempo que se está contando regresivamente. Justo ahora está en 120 segundos o 2 minutos. Luego en la función Update, que es llamado cada cuadro, deduciremos Time.deltaTime. Esto es un atajo para obtener el tiempo transcurrido ahí. Siguiendo eso, obtenemos el componente textMesh del objeto y adaptamos su valor text al reloj, convertido en una secuencia.
Ahora cuando ejecutes el juego, el textmesh te mostrará el número descendiendo. ¡Felicidades! Has construido un reloj rudimentario.
Pero está lejos de ser atractivo aún. Tambien muestra entre 4 y 5 números despues del punto decimal, y al llegar a cero, continuará en valores negativos.
Haz que Pare en Cero
Un reloj negativo parecerá estar roto, así que asegurémonos que no suceda. Adapta la función Update para que se vea así:
1 |
if (timer > 0f){ |
2 |
timer -= Time.deltaTime; |
3 |
} else { |
4 |
timer = 0f; |
5 |
}
|
6 |
|
7 |
GetComponent<TextMesh>().text = timer.ToString(); |
Esto sólo disminuirá el tiempo si en realidad es positivo. Si de todos modos se vuelve negativo (lo cual podría pasar cuando substrae el tiempo transcurrido), será configurado a cero.
Obtén Números Más Llamativos
¿Recuerdas aquel Digital Display Font genial que te mencioné antes? ¡Ve a obtenerlo y agrégalo a tu proyecto!
La sección textmesh en el inspector tiene un campo para la fuente, así que arrastra la fuente de tus recursos hasta ahí.
¡Y ahora nuestro reloj se verá mucho mejor!
Arregla la cantidad de numerales
Justo ahora la cantidad de números después del punto decimal varía, lo cual hace que el reloj fluctúe incontroladamente. Arregla eso adaptando la línea que aplica el valor al texto para que se vea así:
1 |
GetComponent<TextMesh>().text = timer.ToString("F2"); |
Esto automáticamente recortará todo después de dos números, constantemente mostrandote decenas y centenas de segundos.
Haz el Cambio de Color.
¡Agreguemos un poco de coloración adaptativa! Adapta la función Update para que se vea así:
1 |
if (timer > 0f){ |
2 |
timer -= Time.deltaTime; |
3 |
} else { |
4 |
timer = 0f; |
5 |
}
|
6 |
|
7 |
if (timer < 10f) { |
8 |
GetComponent<TextMesh>().color = Color.red; |
9 |
} else if (timer < 20f) { |
10 |
GetComponent<TextMesh>().color = Color.yellow; |
11 |
}
|
12 |
|
13 |
GetComponent<TextMesh>().text = timer.ToString("F2"); |
Y el reloj se volverá amarillo cuando queden menos de 20 segundos , y rojo cuando queden menos de 10 segundos .
El archivo Countdown.cs completo debería verse así:
1 |
using UnityEngine; |
2 |
using System.Collections; |
3 |
|
4 |
public class Countdown : MonoBehaviour { |
5 |
|
6 |
float timer = 60f; |
7 |
public AudioClip soundBlip; |
8 |
|
9 |
void Update (){ |
10 |
if (timer > 0f){ |
11 |
timer -= Time.deltaTime; |
12 |
} else { |
13 |
timer = 0f; |
14 |
}
|
15 |
|
16 |
if (timer < 10f) { |
17 |
GetComponent<TextMesh>().color = Color.red; |
18 |
} else if (timer < 20f) { |
19 |
GetComponent<TextMesh>().color = Color.yellow; |
20 |
}
|
21 |
|
22 |
GetComponent<TextMesh>().text = timer.ToString("F2"); |
23 |
}
|
24 |
}
|
¡Y eso es todo! Ahora tenemos una cuenta regresiva mucho más atractiva e interesante.
También puedes mirar el proyecto completo en los archicos fuente en el lado superior derecho de este artículo.
Conclusión
Le echamos un vistazo a varios elementos que mejorarán los relojes en los juegos, cuyas lecciones pueden también ser aplicadas a muchos otros elementos. Además, el reloj que construímos puede adaptarse e introducirse fácilmente a cualquier juego, y será un elemento interesante sin que tengas que desarrollar sus contenidos de nuevo.
¡Pero hay más! En la siguiente parte de esta serie, echaremos un vistazo a muchos más elementos y seguiremos mejorando nuestro reloj.
By
