Arte técnica por trás da cor feroz de I See Red

Nesta publicação convidada, a Whiteboard Games detalha a história do primeiro lançamento comercial do estúdio, I See Red, e compartilha o pensamento técnico que contribuiu para a abordagem exclusiva do jogo à cor.

Somos a Whiteboard Games, um estúdio de desenvolvimento fundado em 2021 em Buenos Aires, Argentina, por cinco estudantes universitários que queriam traçar seu próprio caminho na indústria de jogos. Desde então, o Whiteboard cresceu para uma equipe de 30 jovens profissionais, e você está lendo esta introdução porque nos reunimos aqui hoje para falar sobre nosso primeiro lançamento comercial: Vejo o Red.

Eu Vejo Red é um assustador roguelite de tiro de cópia que é tudo sobre raiva, luta, vingança, sangue, passados trágicos e – sim, é o nome – RED. Não é difícil identificá-lo entre outros jogos, não apenas devido aos ambientes de ficção científica e à câmera de cima para baixo, mas também devido a uma estética crucial: Você será desafiado a encontrar mais cores do que preto, branco, cinzento e vermelho. Essa é uma decisão que foi tomada cedo e está intimamente vinculada aos aspectos de narrativa e jogabilidade. Claro, isso vem com seus desafios: Criar (e jogar) um jogo com uma gama tão limitada não é para todos. Como, então, resolvemos isso? Continue lendo para descobrir.

Vamos começar com um breve desvio de história, para examinar como o visual evoluiu ao longo do tempo e as decisões fundamentais que levaram ao que eu vejo vermelho hoje.

Tudo começou com um projeto de tese para o curso “Design e programação de vídeo games” na Da Vinci First School of Multimedia Art em Buenos Aires. A partir desse trabalho, nasceu um jogo que precisava ser artisticamente menos exigente já que os estudantes não têm muito dinheiro. Nesse ponto, a cor vermelha ainda não tinha assumido o controle. Houve azul, até mesmo verde, no jogo, mas não se conecte muito porque as cores adicionais não estarão por muito tempo.

Após a conclusão do curso, nossa equipe fundadora não conseguiu abandonar o projeto, vendo um potencial comercial real nele. Decidimos continuar o desenvolvimento fora da universidade e reunir uma equipe, o que levou à criação da Whiteboard Games como um estúdio. (Fato engraçado: Alguns dos nossos professores também viram o potencial e, quando solicitados, decidiram participar da equipe.)

Nesse ponto, a base do jogo já estava coberta: um jogo de tiro de ficção científica ágil sobre uma vingança violenta e vermelha.

Meses e até anos passaram. Em meio a palestras com editores e investidores, I See Red cresceu para ter muitos níveis interconectados – agora não apenas com inimigos humanos, mas também com alienígenas – uma quantidade enorme de passivos, cenas e um estilo artístico ainda mais polido. Com correção de bugs, testes, conteúdo e melhorias de desempenho suficientes (tudo bem, sem precisar nos agradecer), o jogo estava se preparando para ver o sol.

O momento certo foi o lançamento da demonstração do jogo. Participamos de alguns eventos e concursos e ficamos orgulhosos do que criamos. Neste estágio, decidimos planejar um possível lançamento para consoles, passando do HDRP para o URP e trocando HD nítido para uma estética ainda mais estilizada. Também adicionamos uma tonalidade fria sutil às cores na escala de cinza (sim, o azul voltou... mas não diga a ninguém) para um toque mais metalizado, e aperfeiçoamos tudo ainda mais. Fazer essa troca significou que tivemos que reverter alguns recursos do HDRP no URP, mas temos certeza que o esforço valeu a pena.

Adicionando aos níveis alienígenas do estágio anterior, Eu vejo o Red agora também tinha inimigos de robôs, vários chefes, história, QA, localização e muito mais “feitos”. Era hora de apertar o grande botão verde.

Com certeza foi uma longa jornada com muitos desafios e mudanças ao longo do caminho, para não falar em anos de trabalho. Nós achamos que se sente e parece incrível; e, se Reggie Fils-Aimé e outros dos “executivos mais experientes da indústria” dizem isso, não devemos estar loucos. Em qualquer caso, nós fizemos e lançamos. Mas a questão de como permaneceu. Boas notícias para todos os amantes de arte técnica que existem: É hora de ficar técnico. (Aviso de conteúdo: Saimos com o sangue.)

Passamos muito tempo com sangue pois é o feedback visual principal que você recebe ao atingir um inimigo ou ser atingido no jogo. Esse elemento precisava ser claro e satisfatório, e o vermelho é a cor mais importante do jogo, então não havia espaço para preguiça.

Queríamos pintar o mundo em vermelho com sangue, então precisávamos de um contraste forte entre o cinza dos ambientes e o sangue, bem como variações para decalques. Podíamos ter usado texturas para mascarar os decalques, mas com a quantidade necessária, acabou sendo muito repetitivo. Claro, não queríamos isso.

O que descobrimos foi combinar ruído, o projetor de decalque do URP e as coordenadas do mundo para que, dependendo de onde colocamos os decalques, a forma mudasse. Usando essa técnica, fizemos isso para que a largura, altura, suavidade da borda e rugosidade do sangue pudessem ser alteradas com animação suave. Isso é útil quando precisamos gerar, por exemplo, um grupo de sangue sob um inimigo derrotado.

Ao alterar as cores do albedo e as propriedades das máscaras de ruído, também conseguimos gerar diferentes tipos de sangue para alienígenas e robôs, que têm algo semelhante ao óleo. Isso não era apenas para fazer uma diferença estética entre inimigos. Era igualmente importante, do ponto de vista de uma jogabilidade, saber qual é o sangue, pois os jogadores podem Acquirir uma capacidade passiva através da qual são capazes de “absorver” o sangue deixado para trás, com efeitos diferentes: o sangue humano é neutro, danos ao sangue alienígena e a cura do sangue robótico.

Além de decalques, também há muitas partículas de sangue usadas em Eu Vejo Vermelho. Pense na capacidade passiva que acabamos de falar: Precisávamos de uma maneira de comunicar a absorção aos jogadores. O resultado é, claro, os minidornados de sangue.

Esses ventos redondos foram alcançados usando uma textura rolante e um efeito de partículas. O efeito de partículas é uma fita modelada em 3D (uma faixa de polígonos) e um shader que rola a textura até o topo usando o UV principal. Ao fazer isso, conseguimos usar os dados personalizados do sistema de partículas para alterar a velocidade, o fluxo e o formato da malha, além de adicionar um desfoque para as faixas de modo que o efeito pudesse aparecer e desaparecer suavemente na parte superior e na parte inferior do tornado. Pegue isso, adicione algumas cordas de sangue para obter mais sumo e você terá um tornado de sangue inverso que absorve sangue no jogador.

Falando em partículas, não podemos esquecer dos efeitos de partículas acertadas quando o jogador ou os inimigos são danificados. Essas partículas são geradas no mesmo quadro do grupo de sangue/decal de que falamos, ambos animando para uma transição perfeita em uma corrotina de código. Eles geram na direção que a bala estava indo, geralmente oposta ao jogador.

Fazer isso por meio de código se mostrou muito útil para personalizar o efeito, tornando-o maior se o dano fosse maior, se o inimigo estivesse mais próximo ou mesmo se o efeito estivesse próximo de uma parede. Usamos raycasting para determinar qual poderia ser o comprimento do decalque e das partículas antes de cortar uma parede e qual deveria ser a inclinação do decalque (se precisar ir em uma parede, por exemplo). Depois, passamos esses valores para a animação, e a mágica aconteceu.

Isso é muito sangue. Muito vermelho. Como o jogo usa uma paleta limitada, precisamos garantir que a legibilidade não seja perdida em nenhum aspecto. As limitações do visual de nossa assinatura fizeram com que tivéssemos que se tornar criativos e usar muitas ferramentas e truques. Por exemplo, as coisas vermelhas nem sempre são vermelhas.

Você pode perceber uma porta com um esboço vermelho e brilhar, mas ao atravessá-la, fica cinza. O mesmo acontece com os inimigos, que são vermelhos e, uma vez que são hostis e cinza, não são mais hostis. Por meio desses sinais, o jogo usa sua cor distinta para comunicar quais coisas são de interesse: áreas inexploradas, objetos importantes, obstáculos perigosos e muito mais. De um jeito, é como se o jogador tivesse “detective Vision” constantemente ativado, e atualizando constantemente para mostrar apenas o que é relevante no momento.

Mas e se você não ver o vermelho do mesmo jeito que nós? E se alguém que quiser jogar Eu vejo vermelho também não perceber as diferenças entre o vermelho e o cinza? Nós certamente queremos que todos possam experimentar “a raiva”, é o mesmo motivo pelo qual eu vejo o vermelho está disponível em 13 idiomas. Certamente, muitos dos falantes desses 13 idiomas se beneficiariam dos recursos de acessibilidade. Entre no nosso modo colorblind personalizado do URP.

Ao criar o I See Red, sabíamos que um universo em preto, branco e vermelho pode não ser legível para todos, por isso descobrimos uma solução para implementar modos de cego a cores diferentes para que todos pudessem jogar. A melhor forma de fazer isso foi usando os recursos de Renderização de Scripts em Unity e um simples shader. A principal ideia por trás disso é transformar todos os valores nos diferentes canais usando uma espécie de tabela de pesquisa dentro do SRF que, depois, traduz esses valores no shader para o passe de renderização final. Como o efeito precisava ser executado como um passo final acima de qualquer outro objeto que estava sendo renderizado no mundo, esse passo é feito após as renderizações da IU e é o passo final em cada quadro em I See Red.

Depois de investigar os diferentes tipos de cegueira a cores e como podemos usar o Scriptable Render para atendê-los ao entender como cada pessoa pode perceber as cores em Eu vejo vermelho, conseguimos criar modos diferentes para aprimorar ou modificar as cores de acordo: Protanomalia, Protanopia, Deuteranomalia, Deuteranopia, Tritanomalia, Tritanopia, Acromatomalia e Acromatopsia. Dependendo de quem você está perguntando, o vermelho do jogo pode não parecer tão vermelho sob esses, mas isso é bom por parte de nós: No final das contas, o mais importante é que todos possam aproveitar o jogo. Há muitos sistemas em vigor para comunicar toda a raiva de que você precisará.

Por fim, nosso sangue é lindo e para todos... pelo menos desde que tenham mais de 14, 15, 16 ou 17 anos, dependendo de onde você mora. Mas sangue certamente não é tudo que compõe a estética de I See Red. Não devemos esquecer que o vermelho vem de muitas formas, tons e formas, assim como o cinza.

Tivemos que descobrir uma maneira de criar um esquema de cores que pudesse se adaptar a novos modelos sem recriar a textura do zero, o que leva muito tempo. Nessa fase, precisamos ser claros: Eu vejo vermelho não é na verdade preto, branco e vermelho, mas na verdade vermelho, verde e azul, como a maioria dos outros jogos. Mentiramos no início (sinto muito), mas ainda não parece exatamente como a maioria dos outros jogos. Isso é porque usamos um Shader personalizado que aplica um Splatmap, que é uma textura que combina várias texturas ou máscaras na escala de cinza em uma, usando um canal diferente (vermelho, verde, azul ou alfa) por textura.

Isso nos permite ter melhor controle das cores dentro do jogo, controlando cada valor de canal individualmente dentro da engine e economizando recursos ao carregar menos texturas. Também ajuda muito com o tempo de iteração.

Temos sangue. Temos inimigos. Temos ambientes. Temos as cores que precisamos. Me sinto bem. Depois, podíamos falar em nebulosas personalizadas, iluminação e matemática de câmera, mapeamento de tons ou aquela coisa legal com a perspectiva falsa em cenas...

Sim, muito mais poderia ser dito, mas estávamos aqui por horas (e isso leva tempo para escrever), então é melhor concluir. Chega de coisas técnicas. Basta ir e experimentar: Jogue eu vejo vermelho você mesmo e diga se você encontrar algo relacionado ao que falamos aqui. Por último, mas não menos importante, não hesite em entrar em contato conosco ou com as belas pessoas da Unity se quiser saber mais.

Obrigado por ler, até próxima vez!

Você pode baixar I See Red na Steam hoje mesmo. Depois de jogar, descubra mais histórias de desenvolvedores Made with Unity.