Advertisement
  1. Game Development
  2. Game Design
Gamedevelopment

A Verdade Distorcida de Boas Contagens Regressivas, 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

Portuguese (Português) translation by Marcos Fuchter Leandro (you can also view the original English article)

Final product image
What You'll Be Creating

Contagens regressivas são elementos simples que aparecem em muitos jogos, embora seu design possa ser facilmente descuidado.

Com algumas adições simples, porém, um temporizador regular pode ser muito mais atraente e encaixado no universo do jogo apresentado e, portanto, melhorar a experiência do jogador.

Muitos desses elementos são inspirados na palestra "Juice it or lose it" de Martin Jonasson e Petri Purho sobre como tornar seu jogo "mais suculento". A conclusão é que não é suficiente apenas apresentar a informação na sua forma mais básica; você também precisa aprimorar e acentuar o que está acontecendo com cores, sons e movimentos, o que tornará toda a experiência muito mais atrativa. Eu recomendo totalmente que você assista essa palestra para também aprender sobre outras aplicações.

Nesta série de duas partes, passaremos por esses elementos e depois os implementaremos em um projeto Unity simples, para o qual você precisará da versão mais recente. Na seguinte parte 2, analisaremos elementos mais detalhados e matizados.

Pronto? Vamos lá!

O Propósito de Contagens Regressivas

Os temporizadores nos jogos podem servir para propósitos diferentes, que não necessariamente são aplicações sobrepostas. Esses são:

  1. Você tem X tempo para cumprir uma tarefa.
  2. Você precisa sobreviver X tempo.

O design de um temporizador pode mudar entre esses dois, pois a informação necessária para o jogador muda em sua aplicação.

Quando você recebe cinco minutos para desarmar uma bomba em Metal Gear Solid 2, você precisa saber o tempo exato que você tem, pois cada segundo torna-se vital para o progresso e planejamento geral. O temporizador precisa transmitir ao jogador quanto é restado e alertá-los se esse valor estiver ficando extremamente baixo.

Quando você tem que aguentar por um certo período de tempo, esse elemento de exatidão torna-se menos importante. Embora seja óbvio que seja bom conhecer a quantidade exata de tempo em segundos que você precisa sobreviver, o jogo também pode funcionar sem essa informação. Poderia até ser melhorado, com uma informação como "você precisa aguentar por apenas alguns segundos mais!" é mais fácil de entender em uma situação estressante do que "leia este número de leitura no canto da tela", e pode melhorar a imersão dentro do mundo de jogo.

Como Melhorar Contagens Regressivas

Agora vamos dar uma olhada em elementos que tornarão a contagem regressiva e temporizadores mais interessantes e atraentes.

1: Crie Seu Próprio Temporizador Que Não Seja em Números e Coloque O Timer No seu Mundo

Em vez de apenas colocar um número em algum lugar, você pode criar seu próprio gráfico de contagem decrescente que informará o usuário quanto tempo falta.

Uma implementação gráfica em 2D exigirá alguma delicadeza, pois você precisa ter certeza de que o jogador pode intuir e ler corretamente a ideia de "o tempo está acabando e você tem mais ou menos 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
Contagem regressiva não numérica da Star Trek Generations. O tempo exato não é prontamente legível, mas o gráfico permite que quem vê deduza facilmente que uma contagem decrescente está acontecendo e o tempo está se esgotando

Isso funciona muito bem se você usa indicadores no ambiente para mostrar o progresso, e tem vozes no jogo lhe dizem o quanto falta. Um número colado na parte superior da tela pode se sentir não-diegético e pode muito bem tirar alguns jogadores do jogo.

Em Half Life 2, por exemplo, você precisa defender uma posição até um teletransporte carregar. No início, é exibida uma carga total, que deve ser novamente preenchida.

Full charge for a teleport in Half Life 2 The element is highly visible inside the otherwise sparsely decorated room
Carga total por um teletransporte em Half Life 2. O elemento é altamente visível dentro da sala de outra forma escassamente decorada.

O carregamento é mostrado por elementos da máquina que se acendem e começam a girar, dando-lhe um relógio rudimentar que transmite quanto tempo você precisa aguentar.

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
Depois de ser usado, o teletransporte precisa recarregar. Os elementos lentamente se acendem novamente, dando ao jogador uma indicação de quanto tempo eles precisam aguentar (de Half-Life 2)

A carga do teletransporte também é um bom exemplo de uma exibição embutida, que está diretamente no mundo do jogo. Estes são úteis, pois mantêm o jogador focado no próprio mundo, enquanto um temporizador em uma camada GUI ficaria no topo do mundo do jogo.

An oxygen-timer in Metro Last Light directly inside the gameworld
Um temporizador de oxigênio em Metro: Last Light, diretamente dentro do mundo do jogo

2: Faça os Números Parecerem Números

Obtenha uma fonte legal para sua contagem regressiva! Certas fontes, como essa Fonte de exibição digital, emulam telas mais antigas, que eram principalmente usadas para números em antigos ecrãs "digitais".

Digital Display Font Example

O jogador já associará essas fontes com temporizadores e contagens regressivas, e fará a leitura muito mais simples, como se estivesse em algo como Arial ou Times New Roman.

A legibilidade básica e a composição do texto também se aplicam. Não empilhe os números verticalmente, não use números romanos, etc.

3: Dê ao Jogador a Quantidade em Segundos, Não em Minutos

A série Metal Gear Solid faz esse maravilhoso truque onde eles dizem "você só tem 500 segundos restantes!" e então exiba um número que lê como "5:00".

Quando joguei pela primeira vez, minha mente completou automaticamente isso para ler como "5 minutos", mas foi enganado. "500 segundos" é um formato incomum mas correto para o tempo, e as pessoas em geral não estão treinadas para corretamente captar isso.

O efeito é que os jogadores pensam que só têm 5 minutos, enquanto na realidade são 8 minutos e 20 segundos.

Optional mini-missions in Metal Gear Solid V The Phantom Pain Time is given in seconds obscuring the amount in minutes
Mini-missões opcionais no Metal Gear Solid V: The Phantom Pain. O tempo é dado em segundos, obscurecendo o valor em minutos

Isso geralmente não tem inconveniências, pois eles serão estimulados pelo limite de tempo apertado e se concentrarão em realizar a tarefa (em Metal Gear Solid 2: bombas de desarmamento), o que os distrai do fato de que cinco minutos podem ter passado, e existe ainda é tempo.

4: Faça um "Minuto" Ter 100 Segundos

Isso vai de mãos dadas com dizer ao jogador a quantidade de tempo restante em segundos.

Um elemento recorrente nas contagens regressivas do MGS2 é que eles não possuem volumes de 60 segundos, mas "turnovers" de 100 segundos. Este não é, na verdade, um minuto virando para o próximo, mas os segundos estão listados. Então, em vez de 01:00 tornando-se 00:59, é 0100 que se torna 0099. Você precisa apenas obter o valor em si, o que torna a contagem decrescente mais fácil de criar, pois pode ignorar o cálculo do 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
Uma contagem regressiva usada em Metal Gear Solid 2: Sons of Liberty. Observe os números exibidos novamente em segundos totais, mas de uma maneira que se assemelham a contadores de minutos e segundos. Enquanto o segundo símbolo (") também é mostrado, o público jovem possivelmente não está familiarizado com ele.

5: Usar Milisegundos e Frações para Adicionar Tensão

Ter milissegundos exibidos após o número principal torna isso muito mais interessante!

Isso é bastante fácil, já que o tempo já pode ser armazenado em um float. Dois a três números de ponto flutuante são uma boa quantidade que ainda é legível e potencialmente útil para o jogador.

6: Use Cor para Sua Vantagem!

Quando o temporizador atinge uma certa quantidade baixa, coloque o texto de forma diferente. Tornar o amarelo funciona bem, pois faz com que o temporizador se destaque mais.

Uma vez que ele atinja seus segundos finais, torná-lo vermelho, maior e flash. Agora, a quantidade baixa não pode ser ignorada e cria tensão no player.

Red countdown from Metal Gear Solid V The Phantom Pain
Contagem regressiva vermelha da Metal Gear Solid V: The Phantom Pain

Vamos Construir um Timer Simples Com Essas Coisas!

Agora vamos começar a melhorar um timer via código. Vamos transformar isso:

A basic timer-display
Um temporizador básico

Nisso:

Our improved timer-display
Nosso timer melhorado

Usaremos alguns assets especiais que você pode obter ou criar rapidamente, ou obter dos arquivos fonte que você pode baixar no canto superior direito deste artigo.

Pronto? Vamos lá!

Configuração e Timer Básico

Inicie a Unity e crie um novo projeto.

Em seguida, crie um objeto de jogo vazio, coloque-o na frente da câmera e adicione um textMesh via Componente> Mesh> TextMesh para ele. Esta será a exibição para o temporizador no mundo do jogo.

Usaremos o 3d-textmesh por enquanto, mas isso também funcionará em outras áreas, como a interface Unity básica. Por enquanto, o texto em 3D também tem o benefício de que ele pode estar dentro do mundo do jogo, como mencionado anteriormente, e não no topo do mundo dentro de uma camada GUI.

Nosso novo texto 3d não será exibido imediatamente; precisamos alterar alguns valores.

Changing some values for our timer

Defina o tamanho do caractere para 0,1, a âncora para o meio esquerdo, o alinhamento para o centro e o tamanho da fonte para 80. Adicione também algum texto do espaço reservado ao campo "texto". Isso é apenas por isso temos algo a ser observado no editor; Durante a jogabilidade real, isso será adaptado diretamente pelo código. 00:00 vai fazer bem.

Em seguida, crie um novo arquivo chamado Countdown.cs, adicione-o ao nosso timer-object e adicione este código a ele:

Nós temos uma variável chamada timer, que manterá o tempo que está contando para baixo. Agora, é em 120 segundos, ou 2 minutos. Então, na função Update, que é chamado em cada quadro, deduzimos Time.deltaTime. Este é um atalho para obter o tempo realmente decorrido lá. Depois disso, obtemos o componente textMesh do objeto e adaptamos seu valor de text para ser o temporizador, transformado em uma string.

Quando você agora executar o jogo, o textmesh mostrará o número decrescente. Parabéns! Você criou um temporizador rudimentar.

Mas está longe de ser atrativo ainda. Além disso, ele mostra 4 a 5 números após o ponto decimal, e continuará a entrar em valores negativos depois de atingir zero.

Faça Ele Parar no Zero

Um temporizador negativo parecerá quebrado, então asseguremos que isso não aconteça. Adapte a função Update para ficar assim:

Isso só diminuirá o cronômetro se for realmente positivo. Se ele se tornar negativo de qualquer forma (o que poderia acontecer quando resta o tempo decorrido), ele será ajustado para zero.

Consiga Números Melhores

Lembre-se da fonte de exibição digital legal que mencionei acima? Vá buscá-lo e adicione-o ao seu projeto!

A seção textmesh no inspetor tem um campo para a fonte, então arraste a fonte de seus recursos lá.

E agora o nosso temporizador ficará muito mais limpo!

A much cleaner timer

Corrija a Quantidade de Numerais

Agora, a quantidade de números após o ponto decimal varia, o que faz com que o temporizador flutue de forma selvagem. Corrija isso adaptando a linha que aplica o valor ao texto para se parecer com isto:

Isso cortará automaticamente tudo depois de dois números, mostrando constantemente dezenas e centésimos de segundos.

Removing extraneous numbers

Faça a Cor Mudar

Vamos adicionar algumas cores adaptativas! Adapte a função Update para ficar assim:

E o temporizador ficará amarelo quando menos de 20 segundos permanecerem vermelhos quando menos de 10 segundos permanecerem.

The timer will turn yellow when less than 20 seconds

Todo o arquivo Countdown.cs deve ficar assim:

E é isso! Agora temos uma contagem regressiva muito mais envolvente e interessante.

Você também pode ver o projeto completo nos arquivos de origem no canto superior direito deste artigo.

Conclusão

Examinamos diversos elementos que irão melhorar os tempos nos jogos, cujas lições também podem ser aplicadas a muitos outros elementos. Além disso, o temporizador que construímos pode ser facilmente adaptado e encaixado em qualquer tipo de jogo, e será um elemento interessante sem que você tenha que desenvolver seu conteúdo novamente.

Mas há mais! Na próxima parte desta série, analisaremos ainda mais elementos e continuaremos a melhorar o nosso temporizador.

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.