Como a Subcult Joint gerenciou mais de 2.000 sprite sheets e mais de 10.000 luzes 2D no Cookie Cutter

Feb 22, 2024|11:00 Min
Cookie Cutter por Subcult Joint – Arte principal com Cherry

Conheça suas ferramentas 2D, além da atualização da versão final do Unity que desvendou novas possibilidades para esse processo de quebra de moldes.

O desafio:

Otimização de assets de alta resolução e iluminação para desempenho em várias plataformas

Equipe do projeto:

15

Plataformas:

PC, PlayStation®5, Xbox Series X|S

Localização:

Brighton, Reino Unido

Como uma pequena equipe mostra a animação desenhada à mão no melhor de suas luzes em várias plataformas? A Subcult Joint trabalhou seis anos no Cookie Cutter, que inclui milhares de assets de alta resolução feitos usando técnicas de animação tradicionais e otimizados no Unity. O estúdio precisava equilibrar visuais nítidos com jogabilidade inteligente, e eles usaram 2D Lights extensivamente para adicionar profundidade aos seus gráficos e design de jogos focados na exploração.

Continue lendo para saber como eles alcançaram essa Vision – e a mudança surpresa de última hora que liberou recursos mais rápidos de gerenciamento de assets e ajudou a elevar o nível de configuração de iluminação.

Cherry desembrulhando um inimigo robótico

Cookie Cutter por Subcult Joint

Stefano Guglielmana, artista, animador, educador do Unity Learn e fundador da Subcult Joint, começou a trabalhar no Cookie Cutter em 2018. Ele se inspirou em um personagem rejeitado de um projeto anterior do Unity: Cherry, um Android duro. "Eu estava apaixonado por seu design, então comecei a criar animações para ela", explica. Stefano tinha uma Vision clara para a jogabilidade de Metroidvania de Cookie Cutter, mas precisava de suporte de um desenvolvedor para que isso acontecesse. Depois de obter o financiamento, ele contratou o programador Francesco Bizzini e uma lista de artistas e designers para colaborar no projeto.

Os resultados:

• Vendeu 60 mil cópias e gerou US$ 1.200 mil um mês após o lançamento

• Gerenciamento fácil de mais de 2.000 Sprite Sheets e 50 Sprite Atlas

• Iluminar o jogo com mais de 10.000 luzes 2D

• Meio projeto com sucesso atualizado para Unity 2022 LTS

Trailer: Cookie Cutter por Subcult Joint

Pacote do conteúdo

Os visuais desenhados à mão do Cookie Cutter são um grande ponto de venda. Stefano sabia que seria complicado criar, mas esse esforço extra valeria a pena. “O doce no olho é o que nos faz se apaixonar por videogames”, ele diz. “Na Subcult Joint, admiramos os mestres do Studio Ghibli e da Disney. Não estamos nesse nível, mas, com o Cookie Cutter, queríamos melhorar nossas habilidades de animação e criar um jogo muito legal.”

Esse projeto é extremamente ambicioso para uma equipe pequena. A maioria dos assets de arte (mais de 1.000 fundos, Sprites, animações e efeitos de partículas) é visualmente complexa e cuidadosamente criada usando técnicas de animação tradicionais. Entre o personagem do jogador (Cherry) e os NPCs (27 tipos padrão de inimigo e cinco chefes gigantes), cada personagem no Cookie Cutter tem 20–40 animações. Cada uma dessas animações individuais pode levar de oito a 48 horas para ser concluída. Artistas diferentes confiaram em alguns CCDs diferentes, mas Stefano criou a maioria dos assets no Adobe Photoshop.

Depois de concluir uma ilustração, Stefano usou o PSD Importer para convertê-la em uma textura 8K antes de otimizá-la no Editor para evitar problemas de sobrecarga de memória de vídeo. O uso inteligente das configurações de importação de texturas ajudou a reduzir o tamanho de textura por plataforma e a seguir práticas recomendadas como o poder de dois alcançou mais otimizações.

Animações do Cookie Cutter abertas no Unity Editor

Um olhar no Editor sobre os diversos estados de animação de Cherry. A Subcult Joint passou muito tempo trabalhando nas transições de animação para garantir uma jogabilidade tranquila.

“Depois de concluir meu trabalho no Photoshop, eu criei manualmente minhas folhas de sprite colocando as células de animação uma por uma em um novo arquivo, sempre em um múltiplo de 512 x 512, seguindo o poder de duas regras no Unity”, diz Stefano. “Daí, o Sprite Sheet Editor do Unity facilitou a corte da folha ou a execução de outros truques ao mover o pivô ou o pixel da folha por quadro.” Esses fluxos de trabalho garantiram que os visuais do Cookie Cutter fossem otimizados para todas as plataformas com problemas de desempenho mínimos.

Ao final do projeto, a Subcult Joint tinha empacotado mais de 2.000 Sprite Sheets em mais de 50 Sprite Atlas, organizando-os por personagem. "O Sprite Atlas facilitou muito a exportação do jogo para os diferentes consoles de destino, mantendo uma taxa de quadros sólida", explica Stefano. “Estamos bastante concentrados em acertar 60 FPS para manter a jogabilidade e o desempenho geral sem problemas. Isso realmente otimizou o uso de memória de maneira incrível e agilizou ainda mais os tempos de carregamento.”

Cherry bate em um inimigo com seu ataque de moto

Cookie Cutter por Subcult Joint

Personalizar jogabilidade

Stefano queria evitar problemas comuns que outros jogos focados em animação já tinham enfrentado. “Jogos com muitas animações podem ser complicados. Às vezes, o animador quer flexibilizar e acaba punindo a jogabilidade", explica. "Com o Cookie Cutter, estamos igualmente atentos à jogabilidade, por isso o jogo parece tão suave quanto as animações quando você tem o controlador em suas mãos."

Com isso em mente, ele precisava de um jeito de trabalhar no Editor e ajustar a jogabilidade rapidamente, sem risco de quebrar o projeto. Isso levou ao que Francesco chama de um dos maiores obstáculos técnicos no lado de programação: Criar um sistema flexível em Unity que funcione com intervenção de código ruim.

"Meu objetivo foi dar aos designers uma maneira de personalizar qualquer aspecto do jogo diretamente do Editor", explica. Com a capacidade de extensão integrada do Unity, Francesco conseguiu adicionar suas próprias personalizações para preencher a lacuna de conhecimento entre ele e os artistas menos técnicos da equipe.

Capacidades de combate de Cherry

Cookie Cutter por Subcult Joint

Para possibilitar uma jogabilidade de ponta e combinações de ação brutal, Francesco implementou a ferramenta visual de terceiros ActionGraph para criar e estruturar de maneira modular máquinas de estado finito no Unity. Quando os Sprites de uma animação são carregados, o ActionGraph possibilita adicionar lógica de jogabilidade a cada quadro, permitindo que os artistas ajustem configurações, como colliders ou números de danos rapidamente. Por exemplo, Stefano pode usar o ActionGraph para adicionar uma caixa de acertos a um ataque e defini-la para ser ativa em quadros específicos, habilitar e desabilitar contadores de salto, acionar a geração e o gasto de recursos de combate e assim por diante, sem envolver um programador.

Francesco também programou diversas personalizações do Editor para permitir que mais da equipe de artistas da Subcult Joint contribuíssem para o projeto. Com base no sistema de visualização xNode, o UpWire permite que os artistas gerenciem facilmente as entradas humanas e de IA, editem chamadores, adicionem efeitos visuais a nós de animação específicos e muito mais.

Upwire para gerenciar entradas, colliders e VFX

Sistema de combinação de gráficos do Cookie Cutter: daqui, o Subcult Joint pode personalizar caixas de acertos e parâmetros para criar ataques que se unem, adicionar efeitos visuais, como tremores de câmera, e ajustar a reação dos inimigos a ataques.

"Eu desenvolvi para ser um verdadeiro editor de combate", explica. “Ele lida com todas as variáveis do jogo, portanto, movimentos específicos só podem ser executados se o jogador tiver desbloqueado essa habilidade, arma ou atualização e estiver na posição certa — ataques aéreos contra ataques terrestres, por exemplo.” O UpWire também lida com configurações como força física, translação de posição e rotação do corpo, para que os artistas possam experimentar a mecânica de combate com mais facilidade.

Sheet de Sprite Boss do Cookie Cutter

O Graph Combo para uma luta de chefe. Aqui, a Subcult Joint pode ajustar fatores, como a força, a direção e os valores de repulsão das caixas de ataque, ou personalizar a resposta do chefe a ataques de diferentes tipos de armas da Cherry.

Timeline EZ Events, outra das ferramentas personalizadas da Francesco, permite que os designers enviem mensagens e funções de chamada diretamente no Editor sem quase nenhum limite de parâmetros, incluindo SceneObjects, e adicione várias funcionalidades a um GameObject. Por exemplo, a equipe pode criar uma alavanca que desbloqueia uma porta quando puxada enquanto oculta simultaneamente um marcador de “porta fechada” no mapa e no minimapa.

Eventos do Timeline EZ

A Subcult Joint usou o Timeline EZ Events para criar cenas do Cookie Cutter. Essa ferramenta permite que criem momentos cinematográficos sequenciando animações de personagens, movimento de câmera, áudio e efeitos visuais.

Para ajudar os designers a trabalharem no minimapa do Cookie Cutter, algo crucial para se adequar a qualquer jogo voltado à exploração, Francesco desenvolveu o EzMiniMapPro. "Isso é usado para a criação de mapas para áreas de jogo e apresenta algumas personalizações e otimizações úteis para a geração de imagens", diz Francesco. "No tempo de execução, ele oferece suporte a marcadores de sobreposição animados e máscaras de exploração automáticas com base no que a câmera vê. A máscara pode ser escrita e restaurada por meio do SaveGame."

Criar e implementar essas personalizações exigiu trabalho, mas desbloqueou liberdade criativa em toda a equipe, dando a todos na Subcult Joint um lugar na mesa sobre o design, a mecânica e o equilíbrio da jogabilidade do Cookie Cutter.

EzMinimapPro

Com o EzMiniMapPro, a Subcult Joint conseguiu capturar todo o mapa criado no Editor e exportar a imagem para o Photoshop. Nele, Stefano pôde pintar sobre o mapa gerado para corresponder ao estilo visual do jogo antes de importá-lo novamente para o Unity.

Design do mundo

O enorme mundo do Cookie Cutter, a Megastructure, apresenta nove áreas para explorar. Assim que a arte conceitual de uma área foi finalizada, Gabriel Raymond Roy, designer de níveis da Subcult Joint, analisaria cada área em uma caixa de cinza para criar um labirinto para os jogadores descobrirem.

“Um bom designer de nível sabe como criar caminhos primários e secundários que são divertidos de explorar e também de recorrer”, diz Stefano. "Cada dead end deve ter algum tipo de recompensa para o jogador, e cada área aberta deve ter encontros com inimigos para que os jogadores possam cultivar materiais."

Depois que uma área ficou com uma caixa de cinza, Stefano e os designers vestiram a cena com detalhes ambientais, organizando os Sprites desenhados à mão em camadas em quatro pontos no eixo Z. O Cookie Cutter usa uma visualização de perspectiva de câmera sem paralaxe codificada, para que quando o jogador se move, veja elementos “deslocados” em perspectiva. Cherry fica no ponto “default” ao lado de GameObjects interativos, como inimigos, itens e plataformas, enquanto elementos não interativos de primeiro plano, fundo e “distância” adicionam profundidade simulada à visualização de cena.

Visualização de câmera de perspectiva do Cookie Cutter

Iluminação da megastrutura

"Tentamos dar a cada área uma personalidade única, embora com o cenário do cyberpunk e nosso amor por penduradoras e fábricas de metais, não sei o quão bem-sucedidos éramos", brinca Stefano.

Para dar a cada zona seu próprio sabor visual, Subcult Joint utilizou intensamente as luzes 2D de Spot e Freeform no URP. O mundo do Cookie Cutter é iluminado por mais de 10.000 deles. "Cada luz do jogo ilumina nossos Sprites em tempo real, criando uma sensação de densidade e coesão entre os personagens, animações e os ambientes", diz Stefano. "Em lugares escuros, os personagens ficam sombreados e iluminados quando expostos aos faróis saturados e contaminados nas áreas externas. Eu amo muito esses detalhes!”

O mundo expansivo do Cookie Cutter, a Megastructure

Cookie Cutter por Subcult Joint

A Subcult Joint usou as luzes 2D do Unity imediatamente, sem gestão especial, aplicando-as nas mesmas camadas do eixo Z que os Sprites ambientais. "As luzes 2D padrão são incríveis ao iluminar sua área de jogo, e é ótimo poder decidir quais camadas elas podem afetar", explica Stefano. "Queríamos que a camada padrão sempre fosse clara para o jogador, para que eles entendessem onde podem andar e onde não. Depois, adicionamos luzes ao plano de fundo, ao primeiro plano e às camadas distantes.”

A iluminação 2D atraente do Cookie Cutter desempenha um papel importante no design geral do jogo. Como Metroidvania, é um título focado na exploração. A iluminação é usada para fornecer sugestões ambientais ao jogador. “A iluminação conta uma história — ela mostra ao jogador para onde ir, conduzindo-o ao caminho principal ou escondendo caminhos opcionais secundários”, explica Stefano.

Luzes brilhantes são usados para atrair o olho do jogador. Stefano compartilha como criou esse efeito: "O belo dos 2D Lights é que você pode animá-los", explica. “Criar luzes tremolantes é muito simples: Selecione a luz, vá para a Janela de animação, crie outra animação e jogue com a intensidade – 0, 9, 0, 9 – e copie essa animação em outras luzes se quiser criar o mesmo efeito em outro lugar.”

2D Animations, Sprite Sheets, Luzes & SFX no cortador de cookies

Desvendando benefícios bônus com uma atualização de versão de última hora

Ao final do desenvolvimento do Cookie Cutter, problemas de sobrecarga de memória de vídeo se tornaram um obstáculo para a build do PlayStation 5. A Subcult Joint percebeu que precisavam actualizar a versão Unity para corrigir o problema.

Estar tão perto do lançamento não era ideal, mas não alcançar o público gigante do PlayStation não era uma opção – então eles arrumaram as mangas e tiveram que trabalhar para mover o projeto para o Unity 2022 LTS, o lançamento mais atual do momento. Isso proporcionou acesso a novas ferramentas de perfilagem e depuração, como o Profiler de memória atualizado.

“O novo recurso de comparação de snapshot no Profiler de memória nos ajudou a identificar e resolver os problemas persistentes de sobrecarga de memória de vídeo”, diz Francesco. “O 2022 LTS também é mais rápido para importação de texturas, e a atualização tornou nosso jogo muito mais estável no final.”

Cherry regenerando HP usando seus poderes Void

Cookie Cutter por Subcult Joint

Como se mostrou, mudar para a versão mais recente do Unity permitiu que eles adicionassem uma camada final de acabamento visual ao Cookie Cutter que não teria sido possível de outra forma, já que agora eles tinham acesso ao sistema 2D Lights pronto para a produção. Isso significou revisar e corrigir individualmente milhares de luzes 2D experimental do jogo com base nos novos parâmetros – um processo que, felizmente, foi acelerado com os novos recursos.

Com os Sprite Atlas atualizados do 2022 LTS, a Subcult Joint conseguiu enviar centenas de animações desenhadas à mão para diferentes plataformas de destino com mais facilidade e eficiência. E a versão completa das luzes 2D do URP ajudou a adicionar ainda mais profundidade e humor aos ambientes.

“Usamos o novo 2D Light Explorer para selecionar cada luz e fazer ajustes manualmente”, explica Stefano. “Nós estávamos usando principalmente Spot e Freeform Lights, e o 2022 LTS tinha um recurso de queda atualizado para Freeform Lights que era muito melhor do que o antigo. Foi muito trabalho, mas conseguimos corrigir problemas e melhorar ainda mais o jogo.”

O jogo de estreia Cookie Cutter da Subcult Joint é um exemplo da mágica que acontece quando artistas e programadores podem trabalhar de ponta. Essa pequena equipe criou um jogo Metroidvania visualmente ambicioso e bem-sucedido que vendeu mais de 60.000 cópias no primeiro mês, e eles foram capazes de se manterem em sua Vision original sem comprometer os gráficos ou a jogabilidade.

A atualização para a versão mais recente do Unity não só ajudou a Subcult Joint a resolver desafios técnicos pendentes antes do lançamento, mas também permitiu maximizar o alcance de plataforma do Cookie Cutter e elevar todo o potencial do jogo.

Cherry de Cookie Cutter montando sua motocicleta

Cookie Cutter por Subcult Joint

Possibilidades ampliadas com o Unity 6

O Unity 6 visa colocar a criação de jogos rápida e fácil diretamente em suas mãos, não importa onde seus jogadores estejam. Baixe a versão mais recente do Unity no Unity Hub.