A arte pixel é eterna, mas isso não significa que as ferramentas e técnicas para trabalhar com ela permaneçam no nível de 1993.
A desenvolvedora de jogos britânica Cardboard Sword está trabalhando no jogo de plataforma furtivo bidimensional
The Siege and the Sandfox , criado no Unreal Engine 4 com o Paper2D. A equipe publica uma série
de diários de desenvolvimento, apresentando outros desenvolvedores a como usar essas ferramentas em seus próprios jogos.
Uma das principais características técnicas de
The Siege and the Sandfox é o uso de tilesets e sprites desenhados à mão com mapas normais, permitindo que você use métodos de iluminação tridimensionais neste jogo com uma arte pixel bidimensional bastante tradicional.
Uma das diretoras de arte da Cardboard Sword, Kate Duke-Cox, disse recentemente a Gamasutra como a empresa passou a usar essa técnica, por que ela se adapta ao jogo e como você pode aplicar técnicas semelhantes em seus próprios jogos 2D.
Adicione uma sensação de profundidade
Quais são os benefícios dos mapas normais em comparação com a iluminação plana tradicional em um jogo 2D?Kate Duke-Cox : a tarefa do diretor de arte é inteiramente dedicada a encontrar um estilo individual e alcançar o efeito desejado. Queríamos que nossa arte fosse rica, profunda e "convexa". Os normais permitiram atingir esse objetivo, dando uma sensação de forma e força ao mundo e seus objetos.
Esta imagem, postada por Keith Duke Cox no Twitter em agosto de 2017, é um exemplo impressionante de uma técnica.Por exemplo, o uso de normais dá às fontes de perigo uma aparência mais tangível. A luz responde mais corretamente à superfície e, sem normais, foi criada uma sensação de uma "folha de papel" muito plana.
Quando usados corretamente, os mapas normais podem adicionar aos objetos na cena uma sensação de profundidade e peso que as imagens 2D planas não podem alcançar.O uso de mapas normais é mais uma solução visual do que uma opção de jogabilidade funcional. Queríamos que o jogador mergulhasse mais fundo no ambiente, para que o parkour desse uma sensação de profundidade e autenticidade física, em vez da impressão de padrões de corte de papel típicos de alguns jogos de pixel. Se você aderir a cores simples e brilhantes ou estilo retro, a iluminação plana será bastante adequada.
O que inicialmente o atraiu a usar mapas normais para iluminação 2D? Como você descobriu isso, ou onde você viu uma implementação de qualidade?A aplicação de normais a gráficos 2D foi uma continuação natural de seu uso em 3D, o que não era possível em sistemas mais antigos que inspiramos ao criar o estilo. Obviamente, não fomos os primeiros a usá-los em jogos modernos de pixel art, mas os resultados foram diferentes.
Inicialmente, nos recusamos a usar esse efeito, porque em muitos dos efeitos que vimos, ele destruiu o charme e a estética da pixel art, dando muito brilho metálico. Em nossa primeira tentativa de criar mapas normais de pixels desenhados à mão para pixel art, obtivemos padrões muito detalhados - afinal, esse é seu principal objetivo nos gráficos 3D. Mas cada bloco em nosso jogo tem um tamanho de apenas 32x32 pixels, portanto, não restam muitos pixels para transmitir informações da superfície. Como resultado, o resultado se transformou em um caos barulhento.
Mas então vimos a arte de Gwenael Masset para
Dead Cells , na qual a pixel art com normais foi muito bem, e decidimos dar a ele uma segunda chance. [Aqui está
um artigo sobre o uso de modelos 3D neste jogo bidimensional.] Desta vez, usamos um mapa normal, não para os pequenos detalhes das superfícies que podem ser vistas nos gráficos 3D. Agora, o mapa normal foi usado para "modelar" grandes formas de pixel art.
Esculpir formulários usando mapas normais
Você pode falar brevemente sobre o processo de desenvolvimento de um ativo, em particular sobre as diferenças da criação de um recurso 2D similar simples de sprite?Geralmente, as pixel art são desenhadas levando em consideração a direção "geral" da luz. No nosso caso, para a maioria dos sprites e ladrilhos de primeiro plano, a luz principal caiu de cima e levemente para a direita, e os ladrilhos de fundo tinham uma “luz da câmera” mais geral para simular salas escuras e não distrair o jogador do primeiro plano.
Isso significava que, quando se tratava de renderizar as normais para sprites e azulejos, os detalhes e materiais das superfícies já estavam selecionados. Descobrimos que essa abordagem realmente funcionou muito bem. Ele quis dizer que todas as formas e detalhes que precisávamos imitar nas normais já eram muito óbvias e perceptíveis.
Dependendo da natureza do sprite ao qual as normais foram adicionadas, usamos uma combinação de desenhar as cores dos cantos das normais da "esfera dos mapas normais" (na verdade, essa é uma esfera que serve como uma paleta de todos os ângulos possíveis que podem ser desenhados no mapa de normais tangentes) e desenhar em canais RGB separados escala de cinza com outras ferramentas como ND, Crazybump ou AwesomeBump. Eles ajudaram com algumas formas e misturaram corretamente diferentes partes dos normais.
Usamos o Nvidia TextureTools for Photoshop para ajustar / normalizar vetores após terminar de desenhar um mapa normal.
Quais são os benefícios de desenhar mapas normais manuais como este com ferramentas pré-criadas como o Sprite DLight?Quando começamos a procurar maneiras de criar normais para um objeto 2D sem um modelo de alto poli, descobrimos aplicativos que, em certa medida, executavam essa tarefa.
Estudamos os tutoriais para descobrir como os mapas normais são criados, mas descobrimos que eles fazem suposições com base nos valores de cores dos pixels, que não fornecem resultados completamente precisos ou completamente incorretos, ou exigem várias imagens em escala de cinza para simular a luz de diferentes direções, criando essencialmente os canais normais do mapa de forma independente.
O programa não pode saber qual altura e ângulo um pixel tem em um sprite, especialmente quando é um jogo de pixel art com uma paleta muito limitada, onde uma cor é usada para indicar as muitas profundidades e ângulos de um objeto. No entanto, vale acrescentar que na verdade não usamos esses programas, mas simplesmente avaliamos as perspectivas de sua aplicação.
Existem dois métodos padrão para geração automatizada acelerada de mapas normais - Conversão em escala de cinza e Reconhecimento de forma. Realizamos testes com os três métodos e descobrimos que o método de desenho manual definitivamente oferece os melhores resultados.
A conversão em escala de cinza e o reconhecimento de formas podem criar efeitos melhores do que os mostrados aqui, mas mesmo com trabalho e tempo significativos, eles ainda não são tão precisos e bons quanto o desenho manual.
Usando mapas normais em jogos 2D nativos
Que conselho você pode dar aos desenvolvedores que desejam seguir seu próprio caminho?Criar normais 2D precisos manualmente não é tarefa fácil. O trabalho em todos os conjuntos de mosaicos em primeiro e segundo plano levou cerca de três meses-homem. Portanto, para obter resultados de alta qualidade, prepare-se para investir muito tempo.
As normais criadas rapidamente para gráficos 2D, especialmente pixel art, geralmente parecem ruins. Sistemas como “criar uma solução com um botão” geralmente levam à criação de ativos fracos que, quando renderizados em um jogo, parecem ainda piores do que pixel art apagado. Teste em uma pequena parte do jogo (uma pequena amostra do primeiro plano, plano de fundo, objetos e personagens) e descubra o que combina com você e com o estilo do seu jogo.
Por outro lado, em termos de renderização, os custos de adicionar normais ao nosso mundo são muito pequenos. Em quase todo o mundo do jogo, tivemos dois mapas normais de 2k. Eles não ocupam muita memória e algumas texturas adicionais para o passe de renderização normal não afetam muito as chamadas de desenho. As fontes de iluminação dinamicamente executam apenas a iluminação; elas não projetam sombras em tudo no jogo; portanto, também são muito baratas.
Se você ainda não entende como funcionam as normais do espaço tangente e o que elas significam, mesmo um breve estudo permitirá que você as desenhe com muito mais facilidade.
Para usar esse método, você teve que adaptar os ativos existentes e não implementá-lo desde o início do desenvolvimento. Você pode dar conselhos para aqueles que estão tentando complementar os gráficos de sprite prontos com mapas normais?Se tivéssemos que fazer isso de novo, faríamos o mesmo: primeiro crie gráficos difusos e depois desenhe os normais usando pixel art como referência.
Talvez desenhemos alguns objetos de maneira um pouco diferente. Ocorreram problemas na pixel art quando um pixel poderia indicar, por exemplo, um prego ou rebite, mas esse pixel no mapa normal pode corresponder a apenas um canto, para que pudéssemos aumentar alguns elementos para melhor transmitir os ângulos da imagem.
Se você usar uma resolução menor do que a usada em nossos conjuntos de blocos (32x32), talvez o tamanho o limite demais. Com uma resolução de 16x16 ou 8x8, você provavelmente não poderá transferir forma ou volume apenas se um bloco não for uma parte grande, como uma pedra ou bloco de concreto.
Na arte pixel, os gradientes claros não parecem tão bons quanto as superfícies volumosas com ângulos agudos. Se o seu estilo gráfico permitir, sugiro usar mais ângulos do que gradientes em superfícies normais. Por exemplo, se você tem um barril, certifique-se de que cada quadro individual do qual ele possui tenha seu próprio ângulo, e o barril em si seja mais octogonal do que redondo.
Você tem algum conselho para os desenvolvedores que desejam usar essas técnicas fora do Unreal? Por exemplo, no Unity ou no Gamemaker.Antes de começar, verifique a orientação do mapa normal. A abordagem para desenhar normais é a mesma para todos os mecanismos, apenas o significado de cada canal de cores do mapa é diferente.
Normalmente, apenas o eixo Y (canal verde) muda em diferentes motores. O Unreal usa os normais do sistema de coordenadas do lado Y do DirectX, mas o Unity usa os normais Y + do sistema de coordenadas do lado direito OpenGL (como nos parece), portanto o canal verde deve ser virado de cabeça para baixo.
No entanto, se você pintou incorretamente, na maioria das vezes basta um simples movimento do canal verde. Você verá que o canal está confuso se a imagem estiver iluminada oposta ao resultado esperado.