Post-mortem: A arte de Infection

Após trabalhar em algumas Game Jams acabei pegando alguns atalhos e macetes para trabalhar mais rápido, produzindo mais assets em menos tempo. Vendo a resposta da comunidade ao jogo e todos os comentários impressionados com a qualidade gráfica do mesmo, decidi escrever um pouco mais sobre a criação da arte do mesmo, detalhando um pouco mais estes atalhos e macetes que apliquei neste processo.

Nota do editor: se você ainda não conhece o game Infection, pode saber mais clicando aqui.

 

  Em toda Jam a primeira coisa que eu gosto de criar é o personagem. Geralmente é o Asset que mais leva tempo em sua criação, então priorizo isto para ficar livre e ter uma melhor noção do tempo que tenho para trabalhar nos outros assets. Como este é o Asset que leva mais tempo também tento fazer o possível para que todos os persoagens do jogo compartilhem o Rig e as Animações para só ter que fazê-los uma vez. Criei a Basemesh a partir de um Cilindro de 8 lados, usando outro cilindro para os braços e fazendo um Extrude das pernas de cada lado do cillindro. Com isto tinha rapidamente uma basemesh lowpoly para usar de base na criação de todos os meus personagens. Para o personagem principal inclui um sorriso na mesh e grandes olhos redondos para ficar mais amigável. Os olhos em si tem mais polys do que o resto do corpo (Eu realmente queria que eles fossem bem redondinhos hahahah). Levei o personagem ao ZBrush para dar uma forma mais orgânica a ele (Adoro o jeito que a ferramenta Move Topological do ZBrush move as coisas, fica mais fácil de cutucar o personagem usando esta ferramenta até que as coisas pareçam mais corretas... É uma pena que o maya não tem ferramentas de escultura). Depois passo para fazer o UV do personagem. Quando estou criando arte para Game Jams geralmente tento fazer todos os meus UVs espelhados, para que os dois lados do personagem ocupem o mesmo espaço. Desta forma só preciso pintar metade do personagem e a outra metade já estará pintada, além de ter que me preocupar menos com seams. Como você pode ver na imagem, já que todos os personagens usam a mesma basemesh e o mesmo UV é bem tranquilo adaptar as texturas de um para outro, criando variação sem gastar muito tempo. Para ainda mais variação nos inimigos eu brinco com o Hue & Saturation no photoshop em cada uma das texturas para criar um bocado de opções de cor, sem gastar tempo quase nenhum. Para o inimigo Gordão com dentes eu quis ter um pouco mais de detalhe (Ele inicialmente seria maior que os outros personagens no jogo, teria mais Hp e moveria mais devagar, então eu queria que ele fosse bem diferente). Subdividi a mesh dele e puxei um bocado de "espinhos" de suas costas com a topologia extra da subdivisão. Com a basemesh pronta, fui puxando os vertices para criar as variações de inimigos. Você pode ver na foto acima como todos os personagens foram criados a partir da mesma mesh base. Tive bastante cuidado para não mover os braços e pernas para fora do lugar, desta forma pude reciclar o rig e as animações, usando apenas um rig e um set de animações para todos os personagens. Eu exportei o rig com todas as meshes juntas, animando ao mesmo tempo, para que o Sebastian pudesse simplesmente esconder e mostrar a mesh adequada no jogo. Com o Rig funcionando comecei a criar as animações. Antes de me envolver com desenvolvimento de jogos eu estudei para ser um animador, então esta é para mim uma das partes mais divertidas. Para Game Jams também há algumas coisas que faço para facilitar o processo.   A Primeira coisa que eu faço é criar uma animação de movimento para frente. Aqui tem um ótimo tutorial sobre Walk cycles que explica a criação destes muito melhor do que eu poderia explicar. Com a animação funcionando eu crio uma cópia da mesma, eu seleciono todos os frames desta cópia, vou no Dope Sheet e multiplico a escala de tempo por -1. A animação estará passando de trás pra frente. Daí eu seleciono o controle de COG (Centro de Gravidade), seleciono a curva com a rotação que quero e puxo a curva para baixo até que o personagem esteja inclinado para trás. Com isso eu tenho a minha animação de andar para trás pronta.     A partir daí eu crio uma nova cópia da animação de andar para frente. Desta vez eu seleciono o controlador principal (O controlador que move O PERSONAGEM INTEIRO de uma vez) e rotaciono para que ele esteja virado quase todo para o lado. Então pego o controle de COG, seleciono a curva para a rotação Yaw e puxo até que o personagem esteja com o seu torso mais voltado para frente, enquanto suas pernas movem-se para o lado. Faço a mesma coisa nos outros controles da espinha para que esta rotação pareça mais natural. Depois faço a mesma coisa para os braços, para ter a arma ainda apontando para frente, e o outro braço esteja em uma posição que não vá interceder com o corpo. E é assim que eu faço 4 walk cycles a partir de um só, sem ter que recriar tudo. A próxima coisa que eu faço é a animação de Idle. Idle é bem importante já que a maioria das outras animações deveriam começar com a mesma pose da Idle para ter transições melhores. Geralmente para Game Jams eu mantenho a animação de idle bem simples, usando uma moving hold com algumas rotações na espinha para simular respiração. Depois de terminar o Idle eu faço a animação de Hurt, começando pela posição de idle e terminando na mesma. Depois eu duplico a animação de Hurt, deleto a parte final onde a animação retorna a posição Idle, e faço uma nova posição com o personagem morto no chão, animando a transição entre estas. Também gosto de animar um pequeno pop depois da queda como um detalhezinho extra. Por ultimo as animações de ataque, sempre começando com a pose idle e terminando na mesma. Faço pelo menos 2 para que não fique parecendo muito repetitivo no jogo. Com isso eu tenho os meus personagens terminados (Levou de 8 da manhã até 12:45PM de acordo com as screenshots de timelapse, então em torno de 5 horas.) Eu só criei 3 personagens a principio, e fiz os outros 3 no ultimo dia quando percebi que ainda tinha um tempo extra para mais detalhes. Agora é o momento de criar os assets para o level. Geralmente a primeira coisa que eu faço para um level é a textura do chão. Para agilizar o processo eu não queria pintar a mão livre levando o tempo para fazer o blending entre as cores e etc. Então decidi tentar criar as minhas texturas usando a Pen Tool do Photoshop, Desenhos Vetoriais! :D Comecei com a cor pura e adicionei algumas formas aleatórias com uma cor mais clara. Depois criei formas menores dentro destas formas com uma cor ainda mais clara. Por ultimo usei o filtro Offset do Photoshop para checar como o chão estava repetindo. A repetição estava bem obvia então alterei algumas das formas para disfarçar mais o tiling. Por ultimo adicionei umas formas fininhas em cor mais escura entre as formas maiores para dar um Pop nas mais claras. Fiz praticamente o mesmo para todos os outros assets, com alguns assets recebendo um layer de Baked Ambient Occlusion em Multiply aqui ou ali para adicionar um sombreamento mais bonitinho. Depois de terminar o chão, é hora de criar as paredes. Comecei com um cubo subdividido, deletei tudo menos a parte da frente e do topo. Ajusto o UV e então começo a amassar a malha tomando um CUIDADO ESPECIAL para que os vertices dos lados estejam na mesma posição Y e Z para que eles possam se conectar. Também é importante ressaltar que eles devem estar perfeitamente alinhados ao Grid. Desta forma nos podemos facilmente colar paredes umas nas outras para criar os leveis. Neste caso usamos um antigo script de geração de leveis procedurais que escrevi há algum tempo atrás, ele usa as paredes modulares que criei para fazer o level. Com a metade da parede pronta, com UVs e amassada, eu espelho a geometria para que a frente e as costas da parede sejam a mesma, com os lados livres. Fiz algumas variações com diferentes amassadas na malha para que não ficasse parecendo sempre a mesma coisa. (Lembrando de não tocar nos lados, somente no meio). Agora que tenho uma parede que se conecta a outras peredes perfeitamente como uma boa peça modular deveria, eu preciso de algumas paredes curvas, para que eu possa ter curvas no meu level, senão o level acabaria sendo todo quadrado com paredes retas.   Para isso os deformers do Maya ajudam muito. Eu posso usar Bend Deformers para fazer um bom começo para a minha parede curva (Não vai magicamente ficar modular só por usar o Bend Deformer, mas já é um bom ponto de partida.) A partir daí eu posiciono uma parede adjacente a esta no grid e vou movendo os vertices até que esteja conectando perfeitamente. A partir daí eu geralmente ponho 4 destas paredes curvas juntas para formar uma coluna. Colunas são ótimas para esconder imperfeições e para posicionar no meio de mapas para criar caminhos divergentes. Uma última coisa que eu faço é criar uma parede mais diagonal/reta ao invés de gordinha. Eu seleciono as edges do meio com Soft Select tomando cuidado para não mover os vertices dos lados que são usados para conectar-se a outras paredes e empurro a minha seleção pra dentro. Agora temos todos os assets que precisamos para começar a gerar os niveis. Importei estes assets para o Unity e trouxe com eles o meu antigo Gerador de Levei Procedurais, que criei para outro projeto baseado no Exemplo C# deste artigo: Cellular Automata Method for Generating Random Cave-like Levels no site Rogue Basin. Gastando quase nada de tempo tinhamos LITERALMENTE INFINITAS variações de interessantes formas para niveis, só precisava escolher uma e começar a decorar. Fui apertando a barra de espaço para gerar novos niveis até que vi uma forma que gostei e copiei para uma nova cena. Agora eu preciso de alguns assets de decoração. Neste momento já era quase 5 da tarde, então já estava trabalhando nesse projeto há 10 horas. Comecei a me perguntar que tipo de decoração poderia encontrar dentro do corpo humano e a primeira coisa que me veio a mente foram glóbulos vermelhos e glóbulos brancos. Criei o glóbulo vermelho a partir de um cilindro (novamente usando metade do UV para fazer texturas mais rápido e a mesma técnica de pintura vetorial para texturas). Pensnado em ter mais variação de assets em menos tempo, criei um glóbulo vermelho danificado empurrando um dos lados deste para dentro. Também criei um glóbulo branco usando uma esfera com A MESMA TEXTURA do chão, com mais tiling e uma cor diferente usando Hue & Saturation no photoshop. Depois pensei que poderia criar um cilindro para simbolizar uma veia ou artéria e riga-lo. Com este rig pude fazer um bocado de assets diferentes contorcendo-o em posições diferentes. Eu dividi a textura em 2 lados, vermelho e azul, e puxei os UVs de cada cilindro para ocupar um dos lados da textura para ter uma variação de cores ainda usando a mesma textura. Daí comecei a experimentar com outros deformers para fazer outras variações ainda mais interessantes em segundos. Você pode ver aqui um exemplo do uso de Rig, Twist Deformer, Twist + Flare, Twist + Flare + Squash e por fim Twist + Flare + Bend. Como você pode ver nos podemos combinar diversos deformers para ter ainda mais variação nos assets. Então com um cilindro e alguns deformers eu criei uma grande quantidade de assets diferentes. Para a grama eu acabei cortando a parte inferior do cilindro e usando somente o topo, também editei a mesh um pouco rearrumando os vertices. A partir daí criei um tipo de geiser (puz vários destes no mapa com bolhas e gosma) começando com um glóbulo vermelho (já estava ali de bobeira e tinha a topologia que eu queria no topo então... por que não?), precisei recriar o UV mas pelo menos aproveitei um pouco da topologia. Este asset se tornou TANTOS OUTROS ASSETS, usando o mesmo UV também, então salvou MUITO tempo que eu teria gasto fazendo UVs e texturas. Cortando a parte inferior ele se tornou as portas para o spawn dos inimigos e para os objetivos. Com o Bend Deformer, Flare Deformer e Squash deformer ele se torno um bocado de caldeirões de gosma e canos para gosma. Com um Flare Deformer e algumas extrusões ele se tornou uma base para corpo de torre, do qual com Twist Deformer, Flare Deformer e Inverted Flare Deformer acabou se tornando 4 variações de corpos de torre. Fechando a parte inferior e ajustando a mesh ele se tornou uma cabeça de torre. Com um mais ajuste de malha, e alguns deformers, esta cabeça de torre se tornou 8 variações de cabeça de torre (Só tivemos 3 torres no jogo lol, fiz demais!) Criei o corpo e a cabeça separadamente para que o Sebastian pudesse criar diversas torres misturando os elementos, também para que ficasse mais fácil dele fazer a cabeça rotacionar para seguir o inimigo sem que eu precisasse riggar a torre. E por último a partir das cabeças de torre eu puxei um pedaço da parte inferior para a empunhadura e encaixei mais algumas entradas ali para as armas. Também fiz um tipo de pedra feito de gordura (ou qualquer coisa pegajosa) e fiz varias variações dela usando deformers e Soft Selection. Também fiz algumas deletando a parte inferior e usando somente a parte superior para as menores. A gosminha de luz usa a mesma mesh que o Glóbulo branco (Basicamente uma esfera com as extremidades corrigidas para não haver estrelas na topologia) só que mais achatada. Adicionei algumas veias na textura do chão com um alpha para fazer um decal e quebrar a mesmice do chão em vários pontos do cenário. Sebastian também usou essa textura depois para fazer o fundo do Shop. Já que eu estava brincando de usar alpha, aproveitei e fiz aquela melequinha verde para colocar em um Quad com Alpha, acabei não usando muito no cenário mas está lá em algum lugar. E estes são praticamente todos os assets 3D usados nos cenários. A diferença é que alguns tem ajustes de Hue & Saturation e Color Balance para ter visuais diferentes através das cores. Já que eu estava indo muito bem com o tempo e já tinha bastante assets, decidi fazer uns detalhes extras e animar alguns dos modelos de decoração. Eu nem riggei propriamente estes assets, só joguei umas joints aleatórias ali e animei-os diretamente nas joints. Outra pequena animação é nos pinheiros feitos com veias, eles possuem um script que constantemente rotaciona eles como naquelas coisas que barbearias de filmes usam... São uns detalhes bem pequenos que provavelmente ninguém irá notar durante o jogo, mas me deixam feliz de observar, então acho que valeu a pena XD Então eu decorei o level todo com os assets e mandei para o Sebastian. Ele colocou o jogo pra funcionar e me mandou de volta e o jogo estava bem assim:   Então ok... Os assets estão todos aí... Por que não está bonito? Hora de iluminar isso! E mudar a câmera, a câmera não tá nada legal D: Nem dá pra ver direito os assets desse ângulo! Vamos mostrar esses assets! Primeiro eu ajustei a Directional Light um pouco, já ficou melhor do que estava parecendo antes, mas rapidamente percebi que não faria muito sentido ter um sol dentro do corpo humano, então diminui bastante a luz para ter um ambiente mais escuro e decidi experimentar point lights. Agora, a coisa com iluminaçao é que TEM QUE FAZER SENTIDO. Você simplesmente não joga uma Point Light ali e acabou, você precisa ter uma explicação lógica de por que essa luz está ali. Então eu fui passeando pela cena olhando que assets que eu tinha poderiam emanar luz, e fui posicionando point lights sobre eles. O jogo começou a ficar mais bonito instantâneamente. (Também ajuda que eu encontrei um ângulo melhor para a câmera que mostra os assets um pouco mais). Então eu comecei a posicionar mais destes assets que iriam emitir luz e fui preenchendo o cenário com luzes de diferentes cores. Depois de ter o cenário inteiramente populado com luzes bacanas comecei a futucar os efeitos de Post Processing do Unity Pro e os resultados me deixaram bastante satisfeito. Esta screenshot aparenta estar mais escura por que está mais distante, mas dá pra ver o cenário inteiro ali. Você pode clicar na imagem para vê-la em tamanho maior. Agora precisavamos de uma cena de Menu e uma cena de Game Over. Nos sabiamos que queriamos ter essas cenas fora do corpo, para serem algo completamente diferente, já que o tema do jogo é "Abaixo da superficie"... Precisamos começar acima! Mesmo sendo uma cena completamente diferente, ainda consegui reusar alguns dos assets. A grama do cemitério é a mesma "grama" feita de veias/artérias que está dentro do corpo. Os tubos que conectam aos saquinhos são o mesmo tubo que riggei para fazer as veias. A coisa que pendura os saquinhos também. Os saquinhos, cama, travesseiro, monitor e bandeja todos começaram com o mesmo cubo subdividido. O Dave teve que ser modelado do zero, começando com um cilindro para o rosto. Ele não tem bem um corpo, para na parte superior da camiseta. Eu cobri o resto com um cobertor para evitar gastar tempo modelando um corpo para ele. Com tudo pronto, o Sebastian perguntou se eu poderia animar algo para essas cenas, então joguei umas joints ali e animei diretamente nela sem riggar propriamente já que não seria muito movimento. Neste ponto tinhamos 3 horas até o final da Jam e eu estava bem livre, a parte pesada do trabalho estava agora nas mãos do Sebastian ja'que ainda tinha um bocado de bugs para corrigir e novas coisas para adicionar. Então decidimos que seria uma boa ideia eu fazer um segundo level. Comecei fazendo umas mudanças de Hue & Saturação nas paredes e chão, encontrei um bom tom de Azul/Roxo que deu um visual legal no gerador de cenário. Queriamos que esse cenário fosse maior, com 2 portas de saída de inimigos opostas para uma maior dificuldade. Enviei para ele esta pintura sobre um dos cenários que o gerador fez e ele gostou do formato então comecei a trabalhar nele. Já que eu já tinha o primeiro cenário com todos esses pedaços legais juntos eu simplesmente copiei o cenário, movi para a direita fora do cenário atual e deletei todas as paredes e chão para deixar somente a decoração. A partir daí comecei a puxar pedaços da decoração para o novo cenário, tornando o processo de decoração MUUUUITO mais rápido do que foi para o primeiro cenário. Claro que também adicionei algumas novas combinações de coisas para deixar o visual mais interessante. O resultado é que o segundo cenário ficou com um visual muito melhor do que o primeiro (pelo menos para mim). Isso é engraçado por que a pessoa joga, vê o quão bom o primeiro nível parece, e provavelmente pensa que se há outro nível é provavelmente mais do mesmo, mas chegando lá vê que o segundo nível tem uma aparência bem diferente e ainda mais bonita! É uma pequena surpresa legal para as pessoas que conseguirem passar do primeiro nível :)   É isso, foi assim que a arte de Infection foi criada :D Desculpa pelo tamanho do texto e por todas as imagens pesadas, creio que pelo menos está trazendo uma informação bacana que vale a pena de compartilhar. Caso você queira saber mais, cheque o vídeo que o Sebastian fez Timelapse Dia 3

Daniel Silveira Responsável pelos gráficos de Infection

Malegra Mauricio Alegretti ("Malegra") é fundador do Indústria de Jogos, e desenvolve jogos digitais por paixão e profissão há mais de três décadas. Foi diretor das associações Abragames, IGDA e Acigames, co-fundou e dirigiu o estúdio Smyowl e a comunidade Portalxbox, foi Microsoft MVP em Xbox, e é creditado em dezenas de jogos em diversas plataformas e consoles.