Limitações dos jogos de 16 bits e sua recreação no Unity

Em nosso primeiro tutorial de retro-jogo, mostramos como personalizar a ferramenta 2D Pixel Perfect e como os gráficos foram criados na era dos jogos de 8 bits. Neste post, seremos transportados para a era de 16 bits. Com o Mega Cat Studios, aprenderemos como criar gráficos autênticos para jogos no estilo de Sega Genesis (Mega Drive) e Super NES usando as opções do Unity, estruturas gráficas e paletas de cores.

Crie gráficos autênticos no estilo Genesis

Nesta seção, consideraremos o fluxo de trabalho da criação de gráficos que simulam a imagem de diferentes consoles. Haverá menos restrições do que em um projeto de 8 bits e mais liberdade ao trabalhar com cores, mas ainda assim, o Genesis tem limites. Acreditamos que também será útil explicar como o hardware do console funcionou para que você possa aplicar essas restrições em seu próprio projeto retro.

Paletas e sub-paletas

A transição dos consoles de 8 para 16 bits, devido à complexidade do equipamento, proporcionou aos desenvolvedores mais oportunidades. No entanto, os princípios para a criação de gráficos NES de alta qualidade ainda são válidos. Todos os gráficos ainda são armazenados em blocos, por exemplo, 8 × 8 e coletados em imagens grandes - sprites e elementos de plano de fundo. Os artistas ainda estão limitados a subpaletas com uma cor transparente comum, mas 16 bits fornecem mais flexibilidade para trabalhar com paletas. Você provavelmente ficará satisfeito com o fato de os consoles de 16 bits não possuírem uma paleta de cores bem definida, ou seja, o número de cores disponíveis aumentou bastante em comparação ao NES.

Além disso, o Genesis possui sub-paletas contendo 15 cores mais a cor geral usada para transparência de sprites e camadas. No entanto, uma das desvantagens da criação de gráficos para o Genesis é trabalhar com sub-paletas. As sub-paletas podem ser atribuídas livremente a sprites ou blocos de plano de fundo, mas o Genesis permite que você use não mais que quatro sub-paletas por vez. Portanto, os artistas precisam pensar em quais cores devem ser usadas na sub-paleta, para que seu número de sprites e planos de fundo seja máximo. A sub-paleta Genesis geralmente contém cores usadas para segundo plano e sprites.



A cena do jogo para Genesis é mostrada acima e as sub-paletas usadas abaixo.

Ao criar gráficos para qualquer plataforma de 16 bits, você precisa trabalhar com uma paleta indexada. Para fazer isso, você pode usar o editor Gimp, uma alternativa gratuita ao Photoshop que permite manipular paletas indexadas.

Para criar uma paleta indexada no Gimp, vá em Image> Mode> Indexed ...


A janela Conversão de cores indexadas é aberta.


Para Número máximo de cores, defina o valor como 15 . Você pode usar padrões de pontilhamento automático, mas eles geralmente ficam melhores se você os criar manualmente.


As cores da imagem agora estão indexadas. Esta informação é salva automaticamente com a imagem para que o índice de cores possa ser usado. Se você precisar alterar a ordem das cores no índice, clique com o botão direito do mouse no mapa de cores e selecione Reorganizar mapa de cores ...


Uma janela será aberta, permitindo que você arraste e solte cores, alterando sua ordem.


Um truque popular para aumentar a profundidade de cores é controlar a paleta em uma linha de digitalização específica, semelhante à maneira como a rolagem de paralaxe é implementada no NES. O console Genesis pode alterar a escolha da sub-paleta de gráficos na linha de varredura especificada. Esse truque é frequentemente usado para criar a ilusão de que parte do nível está submersa. As cores subaquáticas são adicionadas a uma sub-paleta separada e essa sub-paleta é carregada quando a linha de digitalização especificada é renderizada na tela.

Armazenamento em blocos e carregamento neste console

Em geral, os consoles de 16 bits carregam blocos gráficos diferentes dos de 8 bits. Os consoles de 8 bits carregavam sprites e blocos de segundo plano com grandes pedaços de dados para economizar energia de processamento, enquanto os recursos dos consoles de 16 bits forneciam maior flexibilidade. Eles podiam carregar e substituir blocos separados rapidamente, graças ao qual era possível carregar apenas os gráficos necessários. Portanto, em uma única tela ou nível, você pode usar uma variedade maior de gráficos.

Outro aspecto exclusivo do Genesis / Mega Drive é que os dados gráficos e da paleta não são os únicos dados carregados no console da VRAM durante o jogo. Isso dificultava a criação de um design gráfico para o console, porque o número de blocos gráficos que podiam ser carregados na memória em um determinado momento dependia do que mais estava acontecendo no jogo. No caso geral, a maioria dos jogos tinha espaço suficiente para carregar cerca de 1000 blocos e, com elementos dinâmicos, os blocos sempre podiam ser baixados e carregados livremente na memória.


Mosaicos carregados na memória na cena mostrada acima. Um grande espaço vazio no meio e artefatos abaixo é o espaço alocado na memória para inimigos e outros elementos do jogo.

Apesar do fato de que no VRAM uma variedade maior de peças pode ser carregada ao mesmo tempo, na maioria das vezes esse espaço adicional é reservado para sprites. Isso forneceu uma animação mais complexa e permitiu exibir mais sprites na tela simultaneamente. Ou seja, a filosofia fundamental do design com segmentos de blocos repetidos ainda era usada ativamente nos gráficos de 16 bits, devido aos quais o plano de fundo não ocupava muito espaço disponível. As permissões do NES, Genesis e SNES são quase as mesmas, portanto, segmentos 16 × 16 geralmente eram o ponto de partida para esses tipos de design.


Aqui, o artista usou um padrão de bloco 32 × 32 para criar a parte principal do piso, que é o plano de fundo.

Trabalhar com camadas de fundo

O Genesis / Mega Drive permite exibir simultaneamente na tela duas camadas de fundo. Isso significa que os elementos de sobreposição são mais convenientes para a criação de planos de fundo de design. No entanto, existem apenas duas camadas, portanto, para dar maior profundidade à cena, o artista e o desenvolvedor podem usar truques com linhas de digitalização. Felizmente, como tudo isso podia ser transferido para a segunda camada, os designers estavam livres para colocar objetos em primeiro plano na frente do plano de fundo sem destruir as ilusões.

Além disso, graças à presença da segunda camada, os desenvolvedores não precisavam mais aplicar truques com prioridades de sprite. Em vez de mudar constantemente as prioridades dos sprites em tempo real, agora era possível definir uma segunda camada do plano de fundo exibida na frente do jogador. No entanto, para uma sobreposição mais complexa, ela ainda pode exigir manipulação rápida de prioridades de sprites. A segunda camada de plano de fundo também possui uma área que pode ser usada para a interface. Esta área está bloqueada no lugar e nunca será rolada.


Devido à vista de cima para baixo da árvore, era necessário criar ladrilhos especiais para manipular a ordem das camadas de sprite.

Restrições de Sprite

Ao mudar para 16 bits, a liberdade de trabalhar com sprites aumenta bastante. Genesis / Mega Drive permite exibir simultaneamente na tela até 80 sprites e até 20 sprites em uma linha horizontal; todos os sprites subsequentes não são renderizados. Além disso, os sprites não são mais considerados 8x8 tiles separados. O Genesis é capaz de gerar sprites únicos compostos de várias peças. Eles podem ser de uma peça para peças 4x4. Imagens maiores terão que ser compostas por vários sprites.


Os gráficos do chefe final usam um grande número de elementos de fundo animados, camadas e muitos sprites. Tudo isso seria impossível em uma plataforma de 8 bits.

Padrões de pontilhado e contraste

Uma das características dos gráficos da era de 16 bits é o uso do pontilhamento. Naqueles dias, os jogos eram jogados em TVs CRT, onde os pixels da tela geralmente se mesclavam. Os artistas aproveitaram esse recurso aplicando padrões de pontilhado em seus gráficos: quando um pixel se mesclava com outro em um padrão repetitivo, isso criava a ilusão de mais cores do que o console permitia. Para transmitir a estética do original, o pontilhamento ainda é usado ativamente na pixel art, apesar das melhores exibições.


O pontilhamento era frequentemente usado em consoles de 16 bits. Em uma tela CRT, o padrão de pixels foi misturado, criando novas cores ou efeitos de transparência, quando isso não foi possível.

Comparado ao SNES, o Genesis / Mega Drive exibe cores com maior contraste. Isso também precisa ser considerado ao escolher sub-paletas. Se você criar um jogo com cores suaves e sem brilho, durante a renderização no hardware original, as paletas poderão ser diferentes. Em geral, os gráficos devem ser criados em uma paleta de cores de alto contraste para que o resultado final corresponda à visão original do artista.

Crie gráficos autênticos no estilo SNES

Os jogos Super NES ainda funcionavam com grades / blocos de 8 × 8 pixels, por isso é extremamente útil usar blocos repetidos. Em geral, seus tamanhos devem ser múltiplos de oito.

Paleta de cores

A primeira diferença fundamental entre Genesis / Mega Drive e SNES está relacionada à paleta de cores. Como o Mega Drive, o console SNES não possui uma paleta de cores costurada em hardware, para que você possa escolher suas próprias cores.

A complexidade do SNES é que ele usou cores com profundidade de 5 bits por pixel (bits por pixel, BPP), que raramente são vistas hoje. Você pode implementá-los com o Gimp e simplesmente posterizar a imagem em 32 tons de RGB, o que corresponderá às cores com 5 BPP. Isso exibirá com precisão as cores da imagem no console.


Esta opção no Gimp está localizada no item de menu Cores> Posterizar ... Aparecerá uma janela pop-up na qual você pode definir os níveis de Posterização para 32 para criar cores compatíveis com 5 BPP.

Resolução da tela

Outra grande diferença entre os dois sistemas está relacionada à resolução da tela. Como o SNES era descendente do NES, os dois consoles tinham resoluções de tela semelhantes. A resolução interna do SNES é 256 × 224. Permite renderizar imagens em áreas seguras da maioria das TVs CRT sem aparar parte da imagem. Essa resolução nunca muda, portanto, será o tamanho da imagem e o artista deve usá-la.


Esta imagem ocupa a resolução SNES de tela cheia usada na maioria dos modos de tela.

Modos de tela do console

Nesta seção, falaremos brevemente sobre os diferentes modos de tela.


A maior diferença entre os consoles é que o SNES pode renderizar gráficos de fundo em sete modos de tela diferentes. Em alguns modos de tela, o SNES pode renderizar 256 cores simultaneamente de uma sub-paleta na tela. Aqui estão os modos de tela mais populares:

• Modo 1: um dos modos de tela mais comuns para o SNES. Este é o modo mais comum que demonstra os recursos do console. O modo 1 permite que você trabalhe com três camadas de fundo, duas das quais têm suas próprias sub-paletas de 16 cores e a última camada possui uma sub-paleta de quatro cores.
• Modo 3: Esse modo é comumente usado para imagens estáticas grandes, como telas de abertura ou cenas. Possui duas camadas de fundo. O primeiro usa uma sub-paleta completa de 256 cores, o segundo usa uma sub-paleta de 16 cores.
• Modo 7: Este é um dos principais recursos do SNES. Este modo foi mostrado na maioria dos materiais de publicidade do console. Graças ao Modo 7, os consoles domésticos pela primeira vez foram capazes de realizar transformações de imagem em tempo real: redimensionar, girar, esticar e inclinar no plano de fundo. Foi usado para criar efeitos pseudo-3D que podem ser vistos em muitos jogos de corrida e simuladores de vôo do SNES.

Para garantir que essas funções funcionem, o único plano de fundo no Modo 7 é processado de maneira muito diferente dos outros modos de tela. Em primeiro lugar, existe apenas um plano de cores de 256 cores, ou seja, todos os sprites devem ter cores de uma sub-paleta desse plano de fundo. Em segundo lugar, em vez do tamanho normal da tela SNES, o plano de fundo no Modo 7 era 1024 × 1024 pixels. Ele é dimensionado e ajustado conforme o designer precisa.


Este escritório usa o Modo 1 com uma sub-paleta (os outros dois são usados ​​para a interface do usuário). A tela Obrigado por reproduzir usa o Modo 3, que permite ao artista aplicar uma paleta de 256 cores.

Tamanhos de Sprite

Comparado à complexidade dos modos de tela de segundo plano, as regras para trabalhar com sprites são relativamente simples. O SNES tem vários modos de sprite diferentes, quase como o Mega Drive, mas com uma restrição estrita: o console pode usar apenas dois modos de sprite diferentes no jogo

Sprites podem ter tamanhos de 8 × 8, 16 × 16, 32 × 32 ou 64 × 64. Mas isso não é tudo - os designers tiveram que escolher combinações em uma lista pronta de tamanhos de sprites. As seguintes combinações podem ser usadas nos jogos SNES:

• 8 × 8, 16 × 16
• 8 × 8, 32 × 32
• 8 × 8, 64 × 64
• 16 × 16, 32 × 32
• 16 × 16, 64 × 64
• 32 × 32, 64 × 64

Esses tamanhos são escolhidos "de uma vez por todas" e todos os sprites do jogo devem corresponder a eles. O SNES é capaz de renderizar 32 sprites em uma linha de varredura horizontal e não mais que 128 sprites na tela por vez. Todos os outros não serão renderizados.


O Crunch-Out do Fork Parker usa uma combinação de 32 × 32 e 16 × 16 para todos os sprites do jogo.

Sprites podem trabalhar com oito sub-paletas de 16 cores. Como em todos os consoles retrô, a primeira cor de qualquer sub-paleta é a cor geral usada para transparência. Um grande número de sub-paletas em comparação com outros consoles nos dá mais liberdade na escolha de cores para sprites. Você só precisa se lembrar de que existe um limite estrito de 256 cores.

Usando o 2D Pixel Perfect para criar jogos retrô

No tutorial retro anterior, abordamos as opções 2D Pixel Perfect e recriamos gráficos no estilo de 8 bits.

A partir do Unity 2019.2, o pacote 2D Pixel Perfect faz parte do 2D Renderer, que por sua vez faz parte do pacote Lightweight Render Pipeline (LWRP). Se você não usar o LWRP, o 2D Pixel Perfect também poderá ser usado como um pacote separado. Neste tutorial, mostraremos como configurar um projeto no LWRP.

Preparando um novo projeto no Unity 2019.2 e no LWRP

1. Inicie o Unity Hub, clique em Novo, selecione 2D e especifique o nome do seu projeto.
   
   
   
2. Para importar um pacote 2D Pixel Perfect, clique no menu Janela na barra de ferramentas e selecione Gerenciador de Pacotes . Na janela exibida, selecione o pacote Lightweight RP e verifique se a versão é 6.9.0 ou superior.
   
   
   
3. Em seguida, você precisa 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 janela Ativos e selecione Criar> Renderização> Pipeline de renderização leve> Ativo de pipeline .
4. Na janela Ativos da janela Projeto, crie um novo Renderizador 2D clicando com o botão direito do mouse e escolhendo Criar> Renderização> Pipeline de renderização leve> Renderizador 2D .
   
   
   
5. Selecione o ativo de pipeline criado. Selecione Geral e mude o Tipo de renderizador de Forward Renderer para Custom .
6. Atribua o renderizador 2D gerado como o valor do campo de dados.
   
   
   
7. Nas opções de gráficos, altere as configurações de pipeline de renderização gravável para usar o novo ativo de pipeline que você criou.
   
   Isso completa a configuração do 2D Renderer, bem como da 2D Pixel Perfect Camera.

No Unity 2019.2, sprites bidimensionais podem ter material Sprite-Lit que lhes permite responder às condições de iluminação 2D. Se o seu projeto não tiver iluminação 2D, use material que não exija iluminação 2D para que os sprites fiquem visíveis, ou seja, "Sprites-Default".

Tintura Pixel Perfect para estilos de gráficos de 16 bits

Você deve adicionar o componente Pixel Perfect Camera à câmera principal. Recomendamos que você marque a caixa de seleção Executar no modo de edição.

O console Sega Genesis tinha uma resolução de 320 × 224 pixels (ou uma grade de 40 × 28 blocos de tamanho 8 × 8 pixels). Isso se aplica à versão NTSC.

O console Super NES também na versão NTSC tinha uma resolução de 256 × 224 (30 × 28 blocos com um tamanho de 8 × 8 pixels).

Para criar os dois estilos gráficos, recomendamos o uso de uma resolução de altura de 224 pixels e 8 PPU.


Usando o sprite de ajuda (acima mostra uma imagem em tela cheia de 320 × 224 do Sonic the Hedgehog para Sega Genesis), você pode entender como um sprite com 8 pixels por unidade (pixels por unidade, PPU) é colocado na janela Cena com a mesma resolução e PPU.

Se você precisar de um lembrete do que cada uma das opções do componente 2D Pixel Perfect Camera faz, leia o tutorial do jogo retro anterior .

Desenvolvimento adicional

Espero que tenham gostado desta série de posts sobre a criação de jogos retrô de 8 e 16 bits usando o 2D Pixel Perfect na versão mais recente do Unity.

Não concluímos o 2D Pixel Perfect, porque este pacote estará pronto para produção no Unity 2019.3 e também terá mais compatibilidade com o Cinemachine 2D.

Mantenha-nos atualizados sobre seus projetos com o 2D Pixel Perfect e não se esqueça de visitar o fórum 2D para conversar com usuários do Unity e desenvolvedores de funções 2D.