Unlimited WordPress themes, graphics, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Game Development
  2. Game Design
Gamedevelopment

El Humo y Espejos de las Buenas Cuentas Regresivas, Parte 1

by
Difficulty:BeginnerLength:MediumLanguages:
This post is part of a series called The Smoke & Mirrors of Good Countdowns.
The Smoke & Mirrors of Good Countdowns, Part 2

Spanish (Español) translation by Ricardo Mayén (you can also view the original English article)

Final product image
What You'll Be Creating

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:

  1. Tienes X cantidad de tiempo para llevar a cabo una tarea.
  2. 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".

Non-numerical countdown from Star Trek Generations The exact time is not readily readable but the graphic lets a viewer easily deduce that a countdown is happening and time is running out
Cuenta regresiva no numérica de Star Trek Generations. El tiempo exacto no es fácilmente legible, pero el gráfico le permite a quien lo vea deducir fácilmente que una cuenta regresiva está tomando lugar y que el tiempo se está agotando.

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.

Full charge for a teleport in Half Life 2 The element is highly visible inside the otherwise sparsely decorated room
Una carga completa para un teleportador en Half Life 2. El elemento es altamente visible dentro de un cuarto que de otra manera está escasamente decorado.

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.

After being used the teleport needs to recharge The elements slowly light up again giving the player an indication how much longer they have to hold out from Half-Life 2
Después de ser usado, el teleportador necesita recargar. Los elementos se encienden lentamente de nuevo, dándole al jugador una indicación sobre cuánto tiempo más tienes que aguantar (de Half Life 2)

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.

An oxygen-timer in Metro Last Light directly inside the gameworld
Un reloj de oxígeno en Metro: Last Light, directamente dentro del 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.

Digital Display Font Example

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.

Optional mini-missions in Metal Gear Solid V The Phantom Pain Time is given in seconds obscuring the amount in minutes
Las mini-misiones opcionales en Metal Gear Solid V: The Phantom Pain. El tiempo se da en segundos, obscureciendo la cantidad en minutos.

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.

A countdown used in Metal Gear Solid 2 Sons of Liberty Note the numbers being displayed again in total seconds but in a way that resembles minute-and-second counters While the second-symbol is also shown the young target demographic is possibly not familiar with it
Una cuenta regresiva usada en Metal Gear Solid 2: Sons of Liberty. Nota que los números se muestran de nuevo en total de segundos, pero de una manera que se parece a los contadores de minutos y segundos. Mientras que el símbolo de segundos (") se muestra también, el público joven al cual está dirigido está posiblemente no familiarizado con este.

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.

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

¡Construyamos un Reloj Más Simple con Estas Cosas!

Ahora comencemos con cómo mejorar un reloj vía código. Transformaremos esto:

A basic timer-display
Un despliegue de reloj básico

En esto:

Our improved timer-display
Nuestro despliegue de reloj mejorado

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.

Changing some values for our timer

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:

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í:

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!

A much cleaner timer

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í:

Esto automáticamente recortará todo después de dos números, constantemente mostrandote decenas y centenas de segundos.

Removing extraneous numbers

Haz el Cambio de Color.

¡Agreguemos un poco de coloración adaptativa! Adapta la función Update para que se vea así:

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

The timer will turn yellow when less than 20 seconds

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

¡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.

Advertisement
Advertisement
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.