2D Pixel Perfect: Como configurar seu projeto Unity para jogos retrô de 16 bits

Em nosso primeiro guia 2D Pixel Perfect para jogos retrô, mostramos como configurar a ferramenta 2D Pixel Perfect e como os gráficos de 8 bits eram feitos antigamente. Neste post, avançamos rapidamente para a era dos 16 bits. Com a ajuda do Mega Cat Studios, você aprenderá a criar arte autêntica para jogos no estilo Sega Genesis (ou Mega Drive) e Super NES usando configurações, estruturas gráficas e paletas de cores do Unity .

Leve sua experiência de desenvolvimento 2D para o próximo nível e exploreo conjunto nativo de ferramentas 2D do Unity.

A Mega Cat Studios transformou a criação de jogos retrô altamente precisos em uma forma de arte. Tanto é verdade que vários de seus títulos também podem ser adquiridos em cartucho e jogados em consoles retrô como o Sega Genesis.

Antes de mergulhar neste post, recomendamos que você se familiarize com nosso guia retrô anterior, onde abordamos as configurações do 2D Pixel Perfect e como recriar gráficos no estilo de 8 bits. Com o Unity 2019.2, o 2D Pixel Perfect agora faz parte do 2D Renderer, que está no pacote Lightweight Render Pipeline (LWRP). O 2D Pixel Perfect também existe como um pacote independente (com a mesma funcionalidade) para criadores que não usam LWRP. Neste guia, mostraremos como configurar o projeto no LWRP.

No Unity Hub, clique em Novo, selecione 2De nomeie seu projeto.

2. Para importar o pacote 2D Pixel Perfect , clique no menu Janela na barra de ferramentas e selecione Gerenciador de Pacotes. Na janela pop-up, selecione o pacote Lightweight RP , certificando-se de obter a versão 6.9.0 ou superior.

3. Em seguida, você configurará o Renderizador 2D no Editor e criará um novo Ativo de Pipeline. Na janela Projeto, clique com o botão direito do mouse na visualização Ativos e selecione Criar > Renderização > Pipeline de renderização leve > Ativo de pipeline.

4. Na exibição Ativos da janela Projeto, crie um novo Renderizador 2D clicando com o botão direito e selecionando Criar > Renderização > Pipeline de Renderização Leve > Renderizador 2D.

5. Selecione o ativo do pipeline que você criou. Selecione Gerale altere o Tipo de renderizador de Renderizador direto para Personalizado.

6. Atribua o renderizador 2D que você criou ao campo de dados.

7. Nas configurações gráficas, defina as configurações do pipeline de renderização programável para usar o novo ativo de pipeline que você criou.

O renderizador 2D agora deve estar configurado, incluindo a câmera 2D Pixel Perfect .

No Unity 2019.2, os Sprites 2D podem ter um material “Sprite-Lit”, que permite que eles reajam às condições de iluminação 2D. Se você não estiver usando luzes 2D em seu projeto, certifique-se de ter material que não exija luzes 2D para tornar os Sprites visíveis. Nesse caso, você pode alterar o material para “Sprites-Default”.

Você precisa adicionar o componente Pixel Perfect Camera à sua Câmera Principal. Recomendamos marcar Executar no Modo de Edição.

O console Sega Genesis tem uma resolução de 320x224 px (ou uma grade de 40x28 peças de 8x8 pixels). Essa é a versão NTSC. O Super NES tem uma resolução de 256×224 (30x28 blocos de 8x8 pixels) também em sua versão NTSC.

É recomendado usar uma resolução de altura de 224 px e projetar ativos com 8 PPU para ambos os estilos gráficos.

Se precisar relembrar o que cada opção faz no componente Câmera 2D Pixel Perfect , veja nossa postagem anterior no blog sobre jogos retrô.

Nesta seção, abordaremos o fluxo de trabalho para criar artes que imitem a aparência de diferentes consoles, como fizemos em nossa postagem do blog sobre o NES. Há menos restrições do que em um projeto de 8 bits e mais liberdade com cores, mas o Genesis tem suas próprias limitações. Também achamos importante explicar como o hardware original funciona para que você possa aplicar essas limitações ao seu próprio projeto retrô.

Mudar de consoles de 8 para 16 bits oferece mais opções em hardware mais sofisticado. Dito isso, os fundamentos para fazer uma ótima arte para o NES ainda se aplicam. Todos os gráficos ainda são armazenados em blocos de 8x8, por exemplo, e depois montados em imagens maiores, sejam elas Sprites ou elementos de fundo. Você ainda precisa trabalhar com subpaletas limitadas com uma cor transparente comum, embora 16 bits ofereçam maior liberdade nas paletas em alguns aspectos. Você provavelmente ficará aliviado ao saber que os consoles de 16 bits geralmente não têm uma paleta de cores codificada como seus equivalentes de 8 bits, o que significa que as cores disponíveis são muito maiores do que as do NES.

Em seguida, o Genesis conta com subpaletas que contêm 15 cores, além da cor comum usada para transparência de Sprites e transparência de camadas. Uma das fraquezas do design de arte para Genesis vem das subpaletas. Subpaletas podem ser atribuídas livremente a Sprites ou peças de fundo, mas o Genesis permite que apenas quatro subpaletas sejam usadas por vez. Por isso, os artistas devem estar atentos a quais cores estão sendo usadas em uma subpaleta para que elas possam ser maximizadas tanto para uso em Sprites quanto em fundos. Uma subpaleta para o Genesis geralmente contém cores que estão sendo usadas tanto pelos planos de fundo quanto pelos Sprites para que tudo se encaixe perfeitamente.

Para criar para qualquer plataforma de 16 bits, você precisa trabalhar com uma paleta indexada. Para isso, o Gimp pode ser uma alternativa de código aberto ao Photoshop que permite muita manipulação de paletas indexadas.

Para criar a paleta indexada no Gimp, vá em Imagem > Modo > Indexado…

A janela Conversão de cores indexadas é exibida.

Defina o número máximo de cores como 15. Você pode usar padrões de pontilhamento automáticos, mas eles tendem a ficar melhores quando criados manualmente.

As cores da imagem agora estão indexadas. Essas informações são salvas automaticamente com a imagem para que o índice de cores possa ser usado. Se precisar alterar a ordem das cores no índice, basta clicar com o botão direito do mouse no mapa de cores e selecionar Reorganizar mapa de cores...

Um menu pop-up aparece, permitindo que você arraste e solte as cores em uma nova ordem.

Um truque popular para criar maior profundidade de cor é controlar a paleta ao longo de uma linha raster especificada, assim como a rolagem parallax era obtida no NES. O Genesis é capaz de alterar as seleções de subpaletas para a arte ao longo de uma linha raster especificada. Esse truque é frequentemente usado para criar a ilusão de que parte de um nível está debaixo d'água. As cores “subaquáticas” são adicionadas a uma seleção de subpaleta completamente separada, e a seleção de subpaleta é carregada quando uma determinada linha raster é renderizada na tela.

Em geral, os consoles de 16 bits não carregam blocos gráficos da mesma forma que os consoles de 8 bits. Os consoles de 8 bits carregam os blocos de Sprite e de fundo separadamente e em grandes blocos de dados para evitar o uso de muito poder de processamento, enquanto os consoles de 16 bits têm poder de processamento para maior flexibilidade. Eles podem carregar e trocar peças individuais rapidamente, permitindo que você carregue apenas os gráficos necessários, quando precisar deles. Isso permite que uma gama maior de artes seja usada em um único nível ou tela de um jogo.

Outro aspecto exclusivo do Genesis/Mega Drive é que os dados gráficos e de paleta não são as únicas coisas carregadas na VRAM do console durante o jogo. Isso pode dificultar o design de arte para o console, porque o número de blocos gráficos que podem ser carregados na memória em um determinado momento varia dependendo do que mais está acontecendo no jogo. De modo geral, a maioria dos jogos permite espaço suficiente para carregar cerca de 1.000 peças e, se houver um elemento dinâmico, as peças sempre podem ser trocadas livremente.

Embora uma gama maior de peças disponíveis possa ser carregada na VRAM de uma só vez, na maioria das vezes essa liberdade extra fica reservada para os Sprites, para permitir animações mais variadas e mais tipos de Sprites na tela ao mesmo tempo. Isso significa que a filosofia básica de design de usar segmentos repetidos de peças ainda tende a ser muito usada na arte de 16 bits para que o fundo não ocupe muito espaço disponível. As resoluções do NES, Genesis e SNES são todas bem parecidas, então segmentos de 16x16 tendem a ser o ponto de partida para esses tipos de designs.

O Genesis/Mega Drive permite que duas camadas de fundo fiquem ativas ao mesmo tempo na tela. Isso significa que elementos em camadas ficam mais facilmente disponíveis para criar planos de fundo. Dito isso, ainda são apenas duas camadas, então o artista e o desenvolvedor podem ter que contar com alguns truques de linhas raster para criar maior profundidade em uma cena. Felizmente, como tudo isso pode ir para uma segunda camada, os designers têm liberdade para colocar objetos do primeiro plano na frente do fundo sem quebrar a ilusão.

Ter uma segunda camada também torna obsoleto o uso de truques de prioridade de Sprite para criar objetos em primeiro plano. Em vez de ter que alterar repetidamente as prioridades dos Sprites, agora você pode simplesmente definir a segunda camada de fundo para ser exibida na frente do jogador, embora camadas mais avançadas ainda possam exigir manipulação rápida das prioridades dos Sprites. O segundo painel de fundo também apresenta um subpainel que pode ser usado para heads-up displays (HUDs). O subpainel ficará travado no lugar e nunca rolará.

Ao trabalhar com Sprites, você tem mais liberdade para migrar para 16 bits. O Genesis/Mega Drive permite que você tenha 80 Sprites na tela ao mesmo tempo e cerca de 20 em uma única linha horizontal antes de parar de renderizar novos Sprites. Além disso, os Sprites não são mais contados como peças individuais de 8x8. O Genesis é capaz de gerar Sprites únicos feitos de múltiplas peças. Eles podem ser tão pequenos quanto um único ladrilho ou tão grandes quanto ladrilhos de 4x4. Qualquer coisa maior que isso ainda exigiria a criação de vários Sprites.

Uma das características que definem a arte da era de 16 bits é o uso de dithering. Os jogos naquela época eram exibidos em monitores CRT, onde os pixels na tela tinham uma tendência a se misturar. Os artistas tiravam vantagem desse fato usando padrões de pontilhamento na arte, de modo que quando um pixel se misturava a outro em um padrão repetitivo, criava-se a ilusão de haver mais cores do que realmente estavam disponíveis. Até hoje, o dithering é muito usado em pixel art, apesar das atualizações em nossos monitores, para manter uma estética precisa.

Dos dois principais consoles de 16 bits, o Genesis/Mega Drive exibe suas cores com muito mais contraste. Isso também é algo que você precisa estar ciente ao escolher suas subpaletas. Criar algo com tons mais suaves e opacos não vai acabar tendo a aparência esperada quando se trata de renderizar a imagem no hardware. A arte geralmente deve ser criada com uma paleta de cores de alto contraste para que o resultado final fique alinhado com a visão original do artista.

Para projetos do Super NES, ainda estamos trabalhando com blocos/grades de 8x8 pixels, então trabalhar com blocos repetíveis é extremamente útil. Em termos gerais, eles estarão em algum múltiplo de oito.

A primeira diferença fundamental entre o Genesis/Mega Drive e o SNES diz respeito à paleta de cores. Assim como o Mega Drive, o SNES não tem uma paleta de cores fixa, então você pode escolher as cores.

O problema do SNES é que ele usa cores de 5 bits por pixel (BPP), o que não é muito comum hoje em dia. Você pode resolver isso usando o Gimp para criar uma arte. Depois, você pode simplesmente posterizar a imagem em 32 tons de RGB, o que resultará em 5 cores BPP, mesmo que você não tenha salvo a imagem como tal. Isso permite que as cores da imagem sejam exibidas com precisão no console.

Você pode encontrar essa opção no Gimp em Cores > Posterizar… Uma janela pop-up aparece, onde você pode definir os níveis de Posterizar para 32 para criar 5 cores compatíveis com BPP.

A próxima grande diferença entre os dois sistemas diz respeito à resolução da tela. Como o SNES é o sucessor do NES, os dois sistemas compartilham resoluções de tela semelhantes. A resolução interna do SNES é 256x224. Isso permite que qualquer imagem renderizada seja exibida dentro das zonas seguras da maioria das televisões CRT, de modo que nenhuma parte da imagem será cortada. Essa resolução nunca muda, então esse será o tamanho de imagem que um artista precisará usar como referência.

Esta seção fornece uma referência rápida sobre o que os vários modos de tela têm a oferecer.

A diferença mais significativa entre os sistemas é que o SNES pode renderizar gráficos de fundo em sete modos de tela diferentes. O SNES é capaz de renderizar um total de 256 cores na tela ao mesmo tempo em uma única subpaleta em certos modos de tela. Aqui estão alguns dos modos de tela mais populares:

• Modo 1: Este é um dos modos de tela mais comumente usados no SNES. Ele ostenta a melhor média de desempenho dos recursos do console. O Modo 1 permite que você tenha três camadas de fundo, onde duas delas têm sua própria subpaleta de 16 cores, e a camada final tem uma subpaleta de 4 cores.
• Modo 3: Este modo é geralmente usado para imagens estáticas maiores, como telas de título e telas de história. Possui dois planos de fundo. O primeiro usa uma subpaleta completa de 256 cores, e o segundo permite uma subpaleta de 16 cores.
• Modo 7: Essa era uma das principais características do SNES. Como foi mostrado na maior parte do material promocional do console, o Modo 7 foi a primeira vez que um console doméstico conseguiu aplicar transformações a uma imagem em tempo real, permitindo dimensionamento, rotação, alongamento e inclinação no plano de fundo. Isso foi usado para criar os efeitos pseudo-3D vistos em muitos jogos de corrida e voo para SNES.

O plano de fundo único no Modo 7 é tratado de forma muito diferente de todos os outros modos de tela para permitir que esses recursos funcionem. Primeiro, há apenas um único plano de fundo de 256 cores para trabalhar, o que significa que todos os Sprites precisam compartilhar suas cores com a subpaleta do plano de fundo. Em seguida, em vez de trabalhar com o tamanho de tela normal do SNES, um plano de fundo do Modo 7 tem 1024x1024 pixels de tamanho. Em seguida, ele é dimensionado e ajustado para caber na tela da maneira que o designer quiser.

Depois da complexidade dos modos de tela de fundo, as regras para Sprites são relativamente simples. O SNES tem vários modos Sprite diferentes, assim como o Mega Drive tinha, mas com a limitação de só poder usar dois modos Sprite diferentes durante todo o jogo.

Os sprites podem ter 8x8, 16x16, 32x32 ou 64x64. Além disso, os designers devem escolher entre uma lista pré-determinada de combinações de tamanhos de Sprites. Os jogos no SNES podem incluir as seguintes combinações:

• 8x8, 16x16
• 8x8, 32x32
• 8x8, 64x64
• 16x16, 32x32
• 16x16, 64x64
• 32x32, 64x64

Esses tamanhos são "gravados em pedra" quando você os escolhe, e todos os Sprites no jogo devem estar de acordo com eles. O SNES é capaz de renderizar 32 Sprites em uma única linha raster horizontal por vez, mas possui um limite robusto de 128 Sprites no que pode ser exibido na tela por vez. Qualquer coisa além disso não será renderizada na tela.

Os sprites têm oito subpaletas de 16 cores para trabalhar. Assim como em todos os consoles retrô, a primeira cor de qualquer subpaleta é uma cor comum compartilhada que é usada para transparência. A grande quantidade de subpaletas, em comparação com os outros consoles abrangidos, oferece maior liberdade na hora de escolher cores para Sprites. Você só precisa ter em mente que há um limite rígido de 256 cores.

Esperamos que você tenha gostado deste post sobre como criar jogos retrô de 8 e 16 bits usando o 2D Pixel Perfect na versão mais recente do Unity.

Ainda não terminamos com o 2D Pixel Perfect , pois o recurso será verificado para produção no Unity 2019.3 e também será mais compatível com o Cinemachine 2D.

Conte-nos como foi seu projeto 2D Pixel Perfect e não se esqueça de visitar o fórum 2D para interagir com a comunidade Unity e a equipe de desenvolvimento 2D.