O artista técnico em 3D Banzai Games Roman Tersky falou sobre como o quadro é desenhado e os materiais para os personagens são organizados no jogo móvel Shadow Fight 3, e também revelou alguns truques na criação do ambiente.

Shadow Fight 3 é um jogo de luta / RPG desenvolvido com base no mecanismo Unity3d. O projeto foi lançado no iOS / Android em novembro de 2017 e, desde então, o número total de instalações de jogos ultrapassou 80 milhões.Para atingir um público tão amplo, a equipe de desenvolvimento realizou uma ótima otimização de jogos e, como resultado, o projeto trabalha a 60 FPS em muitos dispositivos modernos com desempenho médio.

Críticos e jogadores frequentemente apontam o componente visual do Shadow Fight 3. Neste artigo, sugerimos que você olhe "por baixo do capô" do jogo e descubra como conseguimos alcançar essa qualidade.

Renderização de quadro

Existem muitos fatores que afetam diretamente o desempenho do jogo e o número de quadros que ele pode reproduzir por segundo. Um dos indicadores mais importantes para nós foi o número de Draw Calls durante a renderização de um desses quadros no jogo. Proponho considerar esse conceito em mais detalhes.

Ao renderizar um quadro de jogo para cada grupo estático de objetos unidos por um material, o Unity inicia Chamadas Draw e as sobrepõe. Cada Chamada Draw requer recursos da CPU, portanto, uma importante etapa de otimização é reduzir o número de chamadas. Nosso objetivo era minimizar esse indicador para 100 chamadas por quadro de jogo, em média.


Processo de renderização de quadro único

O primeiro estágio de renderização no Shadow Fight 3 é desenhar sombras dinâmicas de personagens e efeitos Glow para elementos luminosos nas armaduras e armas dos jogadores.



Ambos os processos têm características próprias e devem ser considerados com mais detalhes.

Sombras

Além da câmera principal, na qual o quadro principal é renderizado, um projetor de câmera ortográfica adicional é instalado no palco, projetado para desenhar sombras dos personagens em uma superfície separada chamada ShadowReciever. Esta câmera segue o ponto médio entre os oponentes e cada quadro cria sua projeção no plano, dependendo da posição atual. O resultado é renderizado como uma textura alfa, que substitui a textura pela renderização do quadro anterior no material dinâmico do objeto ShadowReciever. Essa abordagem evita a necessidade de calcular sombras reais e desenhá-las em todos os modelos de localização, o que afetaria significativamente o desempenho geral.


Área ShadowReciever

Nesse quadro, esse processo recebeu 20 chamadas de empate.

Brilho

O processo de criação de um efeito de brilho nas armaduras e armas dos personagens é semelhante ao processo de criação de sombras dinâmicas. Um cubo BlurCube é criado em torno de um modelo com elementos luminosos.Os efeitos de brilho são projetados em cada quadro com base nas informações armazenadas no canal azul da textura RGB do material deste objeto (ou seja, o canal azul atua como uma "máscara" para a projeção de brilho - mais sobre isto abaixo, na seção sobre materiais). Em seguida, o desfoque é aplicado e as informações são salvas como uma textura alfa, que substitui a textura pelo resultado da renderização do quadro anterior no material dinâmico do BlurCube.


Blurcube

Em nosso quadro, esse processo levou 15 chamadas de empate e mais 2 para desfocar o efeito.

Desenho de malhas

Primeiro, partes da armadura, armas dos personagens, depois partes da localização do plano próximo, depois a distante, e também o fundo, que é um avião com uma textura de 1024x512, são desenhados individualmente. A seguir, são apresentados sistemas de partículas desenhados, pequenos detalhes do plano próximo e distante e, finalmente, modelos com animação de vértice (mais sobre isso abaixo). No final, para 2 chamadas, as sombras calculadas e previamente desenhadas e os efeitos de brilho (Brilho) são aplicados.

UI

Além das câmeras acima, outra também está envolvida na renderização do quadro final, projetado para desenhar a interface do usuário separadamente. Ao contrário do projetor de câmera principal e ortográfico, ele não é exclusivo para cada local, mas existe durante toda a sessão do jogo. Assim, após renderizar a cena, os personagens e todos os efeitos, a interface do usuário é renderizada e colocada na parte superior do quadro principal e, com ela, o efeito de uma vinheta de escurecimento é sobreposto nas bordas.


Resultado de renderização da câmera principal


Resultado de renderização da câmera da interface do usuário


Resultado final da renderização do quadro

No total, a renderização do quadro final do jogo exigiu 92 calls.

Como é o material da armadura do personagem

Para criar o material da armadura do personagem, são usadas texturas com resolução de 512x512: Difusa (1) , máscaras RGB (2) , MatCap (3) , um mapa difuso adicional para a forma da sombra (4) , bem como uma pequena textura de ruído MorphMask (5) usada para criando o efeito da transição do personagem para uma forma de sombra.



E se tudo estiver padronizado com a carta Diffuse (essa é apenas a textura da armadura), iremos nos concentrar no restante com mais detalhes:

Máscaras de textura RGB

Como a textura RGB consiste convencionalmente em três canais de cores especificados por números de 0 a 1 para cada pixel, é conveniente usá-la para armazenar vários dados sobre o material em cada ponto específico da varredura UV do objeto.

No nosso caso, os canais da textura RGB (máscara) contêm informações para os seguintes processos:

• Vermelho (canal vermelho) indica quais elementos do material mudarão de cor se os oponentes da mesma armadura participarem da batalha (usamos este sistema para que o jogador não confunda seu personagem com o oponente; certas partes da armadura especificadas no canal vermelho , repintado para o oponente em uma cor alternativa, definida pelo artista separadamente);
• Verde (o canal verde) pretende indicar a quais elementos da armadura a textura MatCap é aplicada para dar o efeito de uma superfície de metal, bem como a força do efeito desse efeito (quanto mais leve, mais forte o brilho metálico);
• Azul (canal azul) contém informações sobre quais detalhes o brilho será aplicado, criando o efeito de uma superfície luminosa.

Matcap

  Textura MatCap Textura de canal verde RGB 

Para criar um efeito de reflexão para elementos metálicos de armadura e armas de personagens para cada local, é criada uma textura MatCap exclusiva com uma resolução de 512x512, baseada em uma captura de tela processada do local com todos os recursos de sua estrutura e iluminação.

Dependendo do local em que a batalha é travada, a textura correspondente do MatCap é aplicada ao material da armadura e das armas dos personagens. O efeito da superfície do metal é aplicado a determinadas seções do material, com base nas informações no canal verde da textura RGB do material. Essa abordagem é barata de processar, mas cria o efeito de uma superfície refletora realista de elementos metálicos, levando em consideração todos os recursos da arena atual.

  Antes de aplicar o MatCap Depois de aplicar o MatCap 

Forma da sombra

Quando o personagem entra na forma de sombra Difusa, a textura do material é substituída por uma textura adicional criada especificamente para a forma de sombra.

Para uma transição suave de uma textura para outra, é usada uma máscara Morph de ruído, com a qual é alcançado um efeito de substituição gradual:

Localização Iluminação

Toda iluminação e sombras no local são agrupadas em texturas de lightmap com uma resolução de 2048x2048, o que elimina a necessidade de calcular a iluminação em tempo real e aumenta significativamente a produtividade.



A única fonte de luz direcional é projetada para iluminar os personagens de acordo com a atmosfera geral da arena em que a batalha ocorre. No entanto, com essa abordagem, em qualquer ponto do local, a iluminação dos personagens seria a mesma, independentemente de estarem sob as copas das árvores ou sob a luz do sol. Essa pergunta pode ser resolvida calculando sombras dinâmicas de objetos ambientais e sobrepondo-as a modelos de personagens, mas isso afetaria muito o desempenho do jogo.

Como alternativa a cada local, armazenamos um gradiente separado e exclusivo de mapa de sombreamento: na verdade, essa é uma textura com uma resolução de 1024x1, que é um gradiente com base em uma captura de tela de local e transmite o grau de sombreamento em cada parte dele. Quando um personagem se move pela arena, a cor de sua armadura após aplicar a luz direcional é multiplicada pela cor do gradiente correspondente à sua posição atual no local. Assim, em áreas sombreadas, a iluminação aplicada é mais fraca do que em áreas abertas.


Mapa mapa sombreado


Caracteres de iluminação na parte sombreada do local


Caracteres de iluminação na área aberta

Como toque final, a tecnologia Rim Lighting é usada para destacar as bordas do modelo de personagem, que é claramente visível, por exemplo, em um local com uma vila em chamas. Essa tecnologia permite destacar o contorno dos personagens para que sejam lidos bem no fundo da arena.

Efeitos dinâmicos da arena

Um papel importante na “revitalização” dos locais de Shadow Fight 3 é desempenhado por efeitos de efeitos e objetos dinâmicos, como bandeiras, folhas em movimento nas árvores, grama balançando etc.

Fx

A maioria dos efeitos de FX (fogo, chuva, raios solares, etc.) no SF3 é feita de acordo com o princípio da aplicação de material animado em modelos estáticos de baixo poli. No entanto, existem efeitos criados em um sistema de partículas.

Objetos dinâmicos

Existem dois tipos de objetos dinâmicos nos locais do SF3: físicos - acionados por meio de simulação de tecidos e aplicando um impulso a eles simulando rajadas de vento, além de modelos 3D com animação de vértices. Para esses objetos, é criada uma trilha de animação em loop que define os vértices do modelo 3d em movimento.

  Animação de folhagem de vértice Simulação de tecido em bandeiras 

Reflexões

Os locais no SF3 são construídos com base no princípio de um palco teatral. Como o público no teatro, a câmera do jogo é direcionada em apenas uma direção e nunca a muda. Os objetos do ambiente também são executados com base no princípio do cenário teatral: eles existem exatamente tantos quanto o jogador pode ver. Não há nada nas laterais e atrás da câmera, e todos os modelos têm geometria apenas nos locais que podem cair no campo de visão da câmera.

Para resolver os problemas de reflexão com desempenho máximo em arenas onde há superfícies refletivas (piso de mármore, água, etc.), os elementos que deveriam ser refletidos foram duplicados e seu tamanho ao longo do eixo Z foi definido como um valor negativo. A posição duplicada é definida para que, do lado ambos os objetos pareçam um reflexo um do outro. O material das superfícies refletivas possui translucidez, cuja resistência depende da natureza da superfície. Se o objeto refletido estiver a uma distância suficiente e os detalhes desaparecerem em segundo plano, em vez de duplicar, o Plane será instalado com uma textura baseada em uma captura de tela da superfície refletida espelhada ao longo do eixo Z. Essa abordagem não apenas melhora o desempenho do jogo, mas também fornece um resultado muito realista.

  Resultado final Sem gênero 

Conclusão

A questão da otimização da renderização para dispositivos móveis agora é mais relevante do que nunca. O que você viu neste artigo são as soluções que desenvolvemos especificamente para o projeto Shadow Fight 3. Atualmente, o Banzai Games começou a desenvolver dois novos jogos nos quais tentaremos melhorar ainda mais os gráficos, usando os desenvolvimentos atuais e adicionando algo novo.

A equipe do Banzai Games requer desenvolvedor gráfico. Leia mais sobre a vaga aqui .