El humo y los espejos de las buenas cuentas regresivas, parte 1

Lo que vas a crear

Las cuentas regresivas son elementos simples que aparecen en muchos juegos, pero su diseño puede pasarse por alto fácilmente..

Sin embargo, con unas pocas adiciones simples, un temporizador regular puede ser mucho más atractivo y adecuado para el universo del juego presentado, y así mejorar enormemente la experiencia del jugador..

Muchos de estos elementos están inspirados en la charla "Juice it o pierda" de Martin Jonasson y Petri Purho sobre cómo hacer que su juego sea "más jugoso". La conclusión es que no basta con presentar la información en su forma más básica; También necesita mejorar y acentuar lo que está sucediendo con el color, los sonidos y el movimiento, lo que hará que toda la experiencia sea mucho más atractiva. Recomiendo totalmente ver que hablar también para aprender sobre otras aplicaciones..

En esta serie de dos partes, analizaremos estos elementos y luego los implementaremos en un proyecto sencillo de Unity, para el cual necesitará la versión más reciente. En la próxima parte 2, veremos elementos más detallados y matizados..

Listo? Vamonos!

El propósito de las cuentas regresivas

Los temporizadores en los juegos pueden servir para diferentes propósitos, que no necesariamente tienen aplicaciones superpuestas. Estos son:

1. Tienes X cantidad de tiempo para realizar una tarea.
2. Necesitas sobrevivir por X cantidad de tiempo.

El diseño de un temporizador puede cambiar entre esos dos, según la información necesaria para que el jugador cambie en su aplicación.

Cuando te dan cinco minutos para desactivar una bomba en Metal Gear Solid 2, necesitas saber el exacto cantidad de tiempo que tiene, ya que cada segundo se vuelve vital para el progreso general y la planificación. El temporizador debe transmitir al jugador cuánto queda y alertarlo si esa cantidad se está volviendo extremadamente baja.

Cuando tiene que esperar durante un cierto período de tiempo, ese elemento de exactitud se vuelve menos importante. Si bien, por supuesto, sería bueno saber la cantidad exacta de tiempo en segundos que necesitas para sobrevivir, el juego también puede funcionar sin esa información. Incluso podría mejorarse, ya que una información como "necesita esperar unos segundos más". es más fácil de entender en una situación estresante que "lea la lectura de este número en la esquina de la pantalla", y puede mejorar la inmersión en el mundo del juego.

Cómo mejorar las cuentas regresivas

Ahora echemos un vistazo a los elementos que harán que las cuentas regresivas y los temporizadores sean más interesantes y atractivos..

1: Cree su propio temporizador que no se base en números e incruste el temporizador en el mundo

En lugar de simplemente poner un número en alguna parte, puede crear su propio gráfico de cuenta regresiva que le dirá al usuario aproximadamente cuánto tiempo queda.

Una implementación gráfica en 2D requerirá algo de delicadeza, ya que necesitas asegurarte de que el jugador pueda intuir y leer correctamente la idea de que "el tiempo se está acabando y te quedan aproximadamente X segundos".

Cuenta atrás no numérica desde Generaciones de Star Trek. La hora exacta no es fácil de leer, pero el gráfico le permite al espectador deducir fácilmente que se está produciendo una cuenta regresiva y se está acabando el tiempo

Esto funciona muy bien si usa indicadores ambientales para mostrar el progreso y tiene voces dentro del juego que le dicen cuánto queda. Un número pegado en la parte superior de la pantalla puede parecer no diegético y podría sacar a algunos jugadores del juego..

En Half Life 2, por ejemplo, debe defender una posición hasta que un teletransportador haya cobrado. Al principio, se muestra una carga completa, que luego se debe rellenar nuevamente.

Cargo completo por un telepuerto en Half Life 2. El elemento es altamente visible dentro de la habitación, por lo demás escasamente decorada..

La carga se muestra con elementos de la máquina que se encienden y comienzan a girar, lo que le brinda un reloj rudimentario que transmite cuánto tiempo más tiene que resistir.

Después de ser utilizado, el telepuerto debe recargarse. Los elementos se vuelven a encender lentamente, lo que le da al jugador una indicación de cuánto tiempo más tienen que resistir (desde Half-Life 2)

El cargo del teletransportador es también un buen ejemplo de incrustado pantalla, que está directamente en el mundo del juego. Estos son útiles ya que mantienen al jugador enfocado en el mundo mismo, mientras que un temporizador en una capa GUI estaría en la cima del mundo del juego.

Un temporizador de oxígeno en Última luz del metro, directamente dentro del mundo del juego

2: hacer que los números se vean como números

Obtenga una fuente genial para sus cuentas regresivas! Ciertas fuentes como esta fuente de pantalla digital emulan pantallas de iluminación antiguas, que se utilizaron principalmente para números en pantallas antiguas "digitales".

El jugador ya asociará estas fuentes con los temporizadores y las cuentas regresivas, y hará que la lectura sea mucho más simple, como si estuviera en algo como Arial o Times New Roman..

La legibilidad básica y la composición del texto también se aplican. No apile los números verticalmente, no use números romanos, etc..

3: Darle al jugador la cantidad en segundos, no en minutos

La serie Metal Gear Solid hace este maravilloso truco donde dicen "¡solo te quedan 500 segundos!" y luego muestra un número que se lee como "5:00".

Cuando lo jugué por primera vez, mi mente completó esto automáticamente para que se leyera como "5 minutos", pero fue engañado. "500 segundos" es un formato poco común pero correcto para el tiempo, y las personas en general no están capacitadas para responder correctamente a este.

El efecto es que los jugadores pensarán que solo tienen 5 minutos, mientras que en la actualidad son 8 minutos y 20 segundos..

Mini misiones opcionales en Metal Gear Solid V: The Phantom Pain. El tiempo se da en segundos, oscureciendo la cantidad en minutos.

Esto generalmente no tiene inconvenientes, ya que se verán estimulados por el límite de tiempo ajustado y se concentrarán en cumplir la tarea (en Metal Gear Solid 2: desactivando bombas), lo que los distraerá del hecho de que pueden haber pasado cinco minutos y aún hay tiempo.

4: Haz un "minuto" de 100 segundos de duración

Esto va de la mano con decirle al jugador la cantidad de tiempo restante en segundos.

Un elemento recurrente en el MGS2 la cuenta atrás es que no tienen pérdidas de balón de 60 segundos, sino "pérdidas de balón de 100 segundos". Esto no es realmente un minuto que pasa al siguiente, sino que se enumeran los segundos. Entonces, en lugar de que 01:00 se convierta en 00:59, es 0100 que se convierte en 0099. Solo necesita obtener el valor en sí, lo que hace que la cuenta atrás sea más fácil de crear, ya que puede omitir el cálculo de los minutos..

Una cuenta regresiva utilizada en Metal Gear Solid 2: Sons of Liberty. Tenga en cuenta que los números se muestran de nuevo en segundos totales, pero de una manera que se parece a los contadores de minuto y segundo. Si bien también se muestra el segundo símbolo ("), es posible que el joven objetivo demográfico no esté familiarizado con él..

5: Usando milisegundos y fracciones para agregar tensión

Tener milisegundos mostrados después del número principal lo hace mucho más interesante!

Esto es bastante fácil, ya que el tiempo ya se puede almacenar en un flotador. Dos a tres números de punto flotante son una buena cantidad que aún se puede leer y es potencialmente útil para el jugador.

6: Usa el color a tu ventaja!

Cuando el temporizador alcance una cierta cantidad baja, colorea el texto de manera diferente. Hacerlo amarillo funciona bien, ya que hace que el cronómetro destaque más..

Una vez que alcance sus segundos finales, hágalo rojo, más grande y destellará. Ahora la cantidad baja no puede ser ignorada, y crea tensión en el jugador..

Cuenta regresiva roja de Metal Gear Solid V: The Phantom Pain

Vamos a construir un temporizador simple con estas cosas!

Ahora comencemos cómo mejorar un temporizador a través de un código. Vamos a convertir esto:

Una pantalla de temporizador básica

Dentro de esto:

Nuestra pantalla de temporizador mejorada

Usaremos algunos recursos especiales que puede obtener o crear rápidamente, u obtener de los archivos de origen que puede descargar en la parte superior derecha de este artículo..

Listo? Vamonos!

Configuración y temporizador básico

Pon en marcha Unity y crea un nuevo proyecto..

Luego cree un objeto de juego vacío, colóquelo frente a la cámara y agregue un textMesh a través de Componente> Malla> TextMesh lo. Esta será la pantalla para el temporizador en el mundo del juego..

Usaremos 3d-textmesh por ahora, pero esto también 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 ser dentro El mundo del juego, como se mencionó antes, y no encima del mundo dentro de una capa GUI.

Nuestro nuevo texto en 3D no se mostrará de inmediato; Necesitamos alterar algunos valores..

Establece el tamaño del carácter en 0.1, el ancla a medio izquierdo, la alineación a centrar, y el tamaño de fuente para 80. También agrega algún texto de marcador de posición en el campo "texto". Esto es solo para que tengamos algo que ver en el editor; durante el juego real, esto se adaptará directamente a través del código. 00:00 hará bien.

Luego crea un nuevo archivo llamado Countdown.cs, Agréguelo a nuestro objeto temporizador y agregue este código:

utilizando UnityEngine; utilizando System.Collections; Cuenta atrás de clase pública: MonoBehaviour float timer = 120f; void Update () timer - = Time.deltaTime; GetComponent() .text = timer.ToString (); 

Tenemos una variable llamada temporizador, que mantendrá el tiempo que se está contando. Ahora mismo está en 120 segundos, o 2 minutos. Entonces en el Actualizar función, que se llama cada fotograma, deducimos Time.deltaTime. Este es un atajo para obtener el tiempo realmente transcurrido allí. Después de eso, obtenemos la textMesh componente del objeto y adaptar su texto valor para ser el temporizador, convertido en una cadena.

Cuando ahora ejecutas el juego, textmesh mostrará el número decreciente. ¡Felicidades! Has construido un temporizador rudimentario..

Pero aún está lejos de ser atractivo. Además, muestra de 4 a 5 números después del punto decimal, y continuará obteniendo valores negativos después de llegar a cero..

Haz que se detenga en cero

Un temporizador negativo se verá roto, así que asegurémonos de que no suceda. Adaptar el Actualizar funciona para parecerse a esto:

if (timer> 0f) timer - = Time.deltaTime;  else timer = 0f;  GetComponent() .text = timer.ToString ();

Esto solo disminuirá el temporizador si es realmente positivo. En caso de que se vuelva negativo de todos modos (lo que podría suceder cuando resta el tiempo transcurrido), se establecerá en cero..

Obtener mejores números

¿Recuerdas esa genial fuente de pantalla digital que mencioné anteriormente? Ve a buscarlo y agrégalo a tu proyecto.!

La sección textmesh en el inspector tiene un campo para la fuente, así que arrastre la fuente desde sus activos allí..

Y ahora nuestro temporizador se verá mucho más ordenado.!

Fijar la cantidad de números

En este momento, la cantidad de números después del punto decimal varía, lo que hace que el temporizador fluctúe violentamente. Arregle eso adaptando la línea que aplica el valor al texto para que se vea así:

GetComponent() .text = timer.ToString ("F2");

Esto cortará automáticamente todo después de dos números, mostrando constantemente decenas y centésimas de segundo.

Hacer el cambio de color

Vamos a añadir un poco de coloración adaptativa! Adaptar el Actualizar funciona para parecerse a esto:

if (timer> 0f) timer - = Time.deltaTime;  else timer = 0f;  si (temporizador < 10f)  GetComponent() .color = Color.red;  else if (temporizador < 20f)  GetComponent() .color = Color.yellow;  GetComponent() .text = timer.ToString ("F2");

Y el temporizador se volverá amarillo cuando queden menos de 20 segundos, y rojo cuando queden menos de 10 segundos..

El archivo completo de Countdown.cs debería verse así:

utilizando UnityEngine; utilizando System.Collections; Cuenta atrás de clase pública: MonoBehaviour float timer = 60f; AudioBip público SoundBlip; void Update () if (timer> 0f) timer - = Time.deltaTime;  else timer = 0f;  si (temporizador < 10f)  GetComponent() .color = Color.red;  else if (temporizador < 20f)  GetComponent() .color = Color.yellow;  GetComponent() .text = timer.ToString ("F2");  

¡Y eso es! Ahora tenemos una cuenta regresiva mucho más interesante y atractiva..

También puede ver el proyecto completo en los archivos de origen en la parte superior derecha de este artículo.

Conclusión

Echamos un vistazo a varios elementos que mejorarán los temporizadores en los juegos, cuyas lecciones también se pueden aplicar a muchos otros elementos. Además, el temporizador que construimos se puede adaptar y ubicar fácilmente en cualquier tipo de juego, y será un elemento interesante sin que tenga que desarrollar su contenido nuevamente..

¡Pero hay más! En la siguiente parte de esta serie, veremos aún más elementos y continuaremos mejorando nuestro temporizador..