Como PIGIAMA KASAMA reduziu 218 MB do jogo online Kasama: O Despertar

Kasama: The Awakening é um jogo de aventura episódico, baseado em história, criado por PIGIAMA KASAMA. Para criar este jogo para a web, a equipe precisou otimizar o desempenho em todos os dispositivos, mantendo alta fidelidade visual. Aqui está como eles trouxeram sua Vision à vida.

Como um estúdio entrega uma experiência visualmente deslumbrante e emocionalmente envolvente na web?

Depois de passar dois anos fazendo jogos para outras marcas, a equipe da PIGIAMA KASAMA sentiu-se confiante de que um jogo original, orientado por narrativa, encontraria um público na web. Enquanto Kasama: O Despertar começou como um jogo de luta para VR e desktop, eles decidiram adaptar o jogo para uma aventura de quebra-cabeça episódica.

Para experimentar Kastania, incorporamos o jogo abaixo para você aproveitar em navegadores de desktop. Para dispositivos móveis, por favor, confira o aplicativo da Spatial.

Como desenvolvedores de Unity de longa data, os fundadores do estúdio Matteo Fanchin e Paride Stella queriam encontrar um parceiro de desenvolvimento e lançamento de plataforma que compartilhasse prioridades semelhantes, como liberdade de criação, alta fidelidade visual, ótimas experiências para os jogadores e suporte multiplataforma.

Encontramos o Spatial como a plataforma definitiva para conteúdo gerado pelo usuário (UGC). "Ao combinar suas capacidades de simplificação de processos e a acessibilidade que oferece aos jogadores com a flexibilidade que temos ao construir com Unity, conseguimos expandir os limites de áudio, visual e experiência para um jogo na web", diz Fanchin.

A equipe Spatial ecoa o valor que a equipe PIGIAMA KASAMA trouxe para a colaboração. Jake Steinerman, chefe de relações com desenvolvedores, diz: "Construímos a plataforma de forma que os criadores possam ter experiências de altíssima qualidade na web, no celular e em VR." Quando vimos as primeiras versões do Kasama: O Despertar e outro trabalho que a equipe fez, sabíamos que tínhamos que apoiá-lo.”

Desafiando o status quo

Embora a equipe PIGIAMA KASAMA tenha criatividade, expertise e apoio da Unity e da Spatial, sua Vision trouxe muitos desafios. Um dos principais obstáculos foi otimizar o jogo para desempenho em diferentes dispositivos, mantendo alta fidelidade visual. “As limitações do WebGL nos obrigaram a ser inovadores na forma como implementamos gráficos, mecânicas de jogo e experiência geral do usuário”, explica Stella.

Para atender às suas expectativas visuais e de desempenho, eles precisavam compactar o tamanho da construção sem sacrificar a qualidade. Eles selecionaram o Universal Render Pipeline (URP), Shader Graph, o Sistema de Animação da Unity e a compressão de animação embutida para alcançar isso.

Os resultados

• Reduziu a memória de textura do jogo de 264 MB para 140 MB
• Reduza o número de vértices da malha de 550.000 para 351.000
• Diminuiu a memória de áudio de 86 MB para 9 MB
• Reduzido o tamanho do sprite para a interface de usuário de 45 MB para 28 MB
• Reduziu o número de materiais únicos usados de 75 para 57
• Desempenho melhorado de 4 FPS no início para um mínimo de 30 FPS em dispositivos de baixo custo
• Acumulou mais de 80.000 reproduções nas primeiras sete semanas após o lançamento

Maximizando recursos limitados

A abordagem de design deles foi ser muito consciente das restrições de recursos desde o início, mas também ter a flexibilidade e a capacidade de aumentar ou diminuir a fidelidade visual a seu critério. O poder de computação e as limitações de memória provaram ser seus maiores desafios, e para manter o desempenho, eles tiveram que reduzir a resolução de algumas das texturas. “Colocamos a textura da mais alta qualidade onde era mais visível”, diz Stella.

A equipe usou a menor quantidade de recursos possível e essa abordagem afetou tudo. Eles mantiveram os polígonos baixos e o tamanho da textura pequeno para limitar o número de materiais tanto quanto possível. Eles também otimizaram as UVs, coordenadas de textura bidimensionais que correspondem às informações de vértice de uma geometria.

“Como os movimentos da câmera são conhecidos e muito restritos, conseguimos proceder com uma eliminação agressiva de oclusão em todas as geometrias antes do processo de texturização, de modo que cada polígono e pixel fosse usado ao máximo”, diz Fanchin. “Este processo impede que a Unity realize cálculos de renderização para GameObjects que estão completamente ocultos da visão.”

A animação foi outra área onde a equipe reduziu o tamanho. Eles usaram o Tipo de Animação Humanoide do Sistema de Animação do Unity, junto com o sistema de redirecionamento de animação Mecanim. Além disso, o processo de compressão de animação embutido do Unity ajudou a otimizar o desempenho ao diminuir o peso geral das animações no projeto. Isso foi especialmente útil para reduzir as animações de captura de movimento para a performance facial do personagem, que tendem a ser excessivamente detalhadas e pesadas.

Encontrando sua luz

Uma boa iluminação faz toda a diferença e é difícil de conseguir em um jogo web", diz Stella, e a equipe queria garantir que a qualidade da iluminação correspondesse ao restante da fidelidade do jogo. A iluminação também foi fundamental para as mecânicas de jogo. A equipe usou isso para criar tensão, guiar o movimento dos jogadores e destacar áreas ou objetos importantes dentro do jogo. Efeitos dinâmicos enfatizaram momentos e transições chave na história.

Queríamos usar iluminação pré-renderizada tanto quanto possível. Esta é uma maneira de dar a percepção de iluminação de alta qualidade em plataformas que geralmente não oferecem esse grau de fidelidade”, diz Fanchin.

Um dos desafios mais complexos da equipe foi fazer a transição da iluminação no ambiente sem carregar a cena e criar mudanças dinâmicas de iluminação quando as luzes são acesas. Eles usaram um shader personalizado que manipulava os lightmaps em tempo real para deixar tudo plano e dar a ilusão de luz dinâmica. Stella explica que, "para alcançar isso, é fundamental fazer o design do jogo e o design do ambiente como um processo único, em vez de separá-los." Todo elemento precisa servir ao outro."

Eles usaram Shader Graph para desenvolver o shader personalizado, o que foi particularmente útil durante o que a equipe chama de "a sequência do Pesadelo." Cobre o mapa com lodo preto enquanto neutraliza simultaneamente a iluminação, tornando o ambiente em preto e branco.

“Quando o jogador acende a luz, o shader reverte esse efeito, criando a ilusão de que a luz está sendo ativada e limpando a gosma preta da área iluminada”, diz Fanchin.

Este shader personalizado também foi extremamente útil durante outro capítulo, no qual um grande número de castanhas explode. Manipular as castanhas como entidades individuais era impraticável, então eles as agruparam como uma única malha e usaram o shader para gerenciar a agitação e as explosões.

Cada castanha é mapeada na grade UV da esquerda para a direita, correspondendo à sequência de explosão, com as castanhas no topo das pilhas explodindo primeiro. O shader seleciona grupos predefinidos de castanhas por índice, enquanto outro script coloca explosões do sistema de partículas nos locais precisos onde as castanhas estão prestes a detonar.

“Esta abordagem nos permitiu gerenciar eficientemente uma grande quantidade de geometria e dinâmicas complexas sem sobrecargas de desempenho, garantindo conformidade com os requisitos de desempenho da web”, explica Stella.

Devido às limitações de tamanho da construção, eles também fizeram algumas escolhas artísticas para melhorar o desempenho. Eles escolheram trabalhar com áreas escuras para esconder elementos. Isso os ajudou a otimizar o número de polígonos e a malha com pele. “Adicionamos muito mais detalhes às áreas mais claras”, diz Fanchin.

Gerenciando o pipeline de produção de áudio

O design de som influenciou tudo, desde o ritmo do jogo até o design dos ambientes e interações, e guia os jogadores enquanto aprofunda sua conexão emocional com a história. A equipe PIGIAMA KASAMA criou e produziu trilhas sonoras para combinar com o clima e o ritmo de cada episódio. Eles também trabalharam com artistas de dublagem e contrataram um linguista para inventar uma língua. O objetivo deles era criar uma experiência auditiva que aprimorasse a qualidade imersiva do jogo.

Sempre que uma experiência ou um produto tem um áudio ruim, você ouve. Se o áudio é bom, é invisível”, diz Stella.

Eles executaram um rigoroso processo técnico de três etapas para a produção de áudio antes de implementá-lo no jogo.

Etapa 1: Unificação de clipes de áudio e mixagem/masterização

A primeira etapa exigia unificar vários clipes de áudio, especialmente para sons em loop, como paisagens sonoras ambientes e a trilha sonora do jogo. Este processo se estendeu a certos efeitos sonoros únicos, que foram sobrepostos e consolidados em faixas singulares. Essas modificações foram integradas durante a fase de mixagem e masterização, garantindo que os clipes unificados mantivessem consistência na dinâmica do áudio e equilíbrio geral em diferentes ambientes de reprodução. Esta etapa foi crucial para minimizar inconsistências e garantir experiências auditivas coesas, particularmente para sequences em loop que precisavam transitar perfeitamente no jogo.

Etapa 2: Conversão de formato para padrões de compressão otimizados

Na segunda etapa, os arquivos de áudio originais de alta fidelidade, normalmente nos formatos AIFF e FLAC, passaram por conversão para o formato OGG. Taxa de amostragem de 48 kHz e profundidade de bits de 16 bits, aderindo aos padrões da indústria para manter um equilíbrio entre qualidade de áudio e eficiência de desempenho. O codec de compressão Vorbis foi utilizado, o que permitiu uma redução significativa no tamanho do arquivo sem comprometer a qualidade perceptual do áudio.

Etapa 3: Implementação e ajuste fino de Unity

A etapa final envolveu a integração dos arquivos de áudio processados no Unity. Isso incluiu a seleção meticulosa de métodos de carregamento apropriados (por exemplo, streaming para faixas mais longas ou pré-carregamento para efeitos sonoros críticos) para otimizar o desempenho durante o jogo. A equipe ajustou as configurações de compressão Vorbis para encontrar um equilíbrio entre a fidelidade do áudio e a utilização de recursos.

Além disso, decisões cuidadosas foram tomadas sobre se arquivos de áudio específicos deveriam ser tratados em Mono ou estéreo, com base em seu papel no design de som e nos efeitos de espacialização desejados no jogo.

O processo rigoroso de otimização implementado na etapa final resultou em ganhos significativos de armazenamento e desempenho. Ao utilizar o formato OGG e ajustar as configurações de compressão, os ativos de áudio foram comprimidos para cerca de 10 MB no total. Isso marca uma redução substancial em comparação com os estimados 500 MB se arquivos AIFF descompactados tivessem sido usados, ou a pegada de 100 MB para equivalentes em MP3. Esses resultados não apenas minimizaram o tamanho geral do jogo, mas também garantiram o uso eficiente da memória e um desempenho de áudio suave durante o jogo.

Implantando em várias plataformas

Ao fazer parceria com a Spatial para um lançamento web multiplataforma, a equipe PIGIAMA KASAMA adotou o URP, o pipeline de escolha da plataforma. Como designer com 15 anos de experiência em CGI, Stella usou muitas ferramentas para diversos fins e ficou impressionada com as capacidades do URP.

URP funciona muito bem. Aprendi rapidamente como usá-lo para alcançar nosso objetivo com Kasama: O Despertar. Acho que conseguiu praticamente tudo o que eu tinha pensado, então estou muito feliz", ele diz.

A flexibilidade e eficiência do pipeline de renderização foram particularmente importantes para a equipe ao implantar em plataformas web, já que a compatibilidade e personalização entre plataformas os ajudaram a escalar com facilidade.

O desempenho pode ser otimizado para cada plataforma, mesmo em dispositivos de menor capacidade, e os desenvolvedores podem usar seus próprios shaders. "É construído para se sair bem no futuro", explica Steinerman. "De uma perspectiva de plataforma Espacial, à medida que começamos a suportar versões futuras do Unity, esperamos que o URP também seja suportado lá."

Os servidores da Spatial criaram compilações individuais e otimizaram cada plataforma. Eles ajudaram a equipe PIGIAMA KASAMA com sua construção WebGL, e suas construções separadas para Android e iOS nativo. Eles tinham qualidades-alvo diferentes para certas plataformas.

A profundidade de campo funciona bem no WebGL, mas descobrimos que tem um desempenho inferior em alguns dispositivos móveis. Por outro lado, o áudio no Android e iOS é muito mais eficiente”, diz Fanchin. “Poderíamos ter usado filtros e EQ, uma ferramenta de áudio que permite aos desenvolvedores ajustar o nível de volume de frequências específicas dentro de uma fonte de áudio, melhor no Android, mas isso não funcionaria no WebGL.”

Eles ajustaram certos elementos para estarem em conformidade com todas as plataformas, enquanto outros foram adaptados especificamente para a plataforma. Para o WebGL, usamos uma textura de maior resolução, já que a tela é tipicamente maior, e incorporamos texturas de menor resolução em telas móveis menores. No geral, o lançamento multiplataforma foi bastante tranquilo”, conclui Stella.

Incluindo jogadores na jornada

Depois de decidir criar um jogo na web, a equipe PIGIAMA KASAMA precisava encontrar uma maneira de desenvolver conteúdo de alta qualidade em porções gerenciáveis. Eles escolheram um sistema de lançamento episódico que lhes permitiu coletar feedback dos jogadores após cada episódio, o qual poderiam incorporar em futuras parcelas. Isso também os ajudou a testar e iterar muito rapidamente.

“Estabelecemos um roteiro flexível que nos permite ajustar o processo de desenvolvimento com base no feedback dos jogadores e nas novas tecnologias”, explica Stella. Cada episódio é planejado com o futuro em mente, garantindo que a narrativa e as mecânicas de jogo possam evoluir naturalmente ao longo do tempo.

Escolher este cronograma de lançamento também trouxe vários desafios. A equipe precisa garantir consistência entre os episódios, tanto em termos de qualidade quanto de narrativa. Gerenciar as expectativas dos jogadores também é um obstáculo potencial, pois os lançamentos episódicos exigem um equilíbrio delicado entre entregar conteúdo suficiente para satisfazer os jogadores e mantê-los engajados para a próxima edição.

No geral, a equipe aprendeu muito e está animada para trazer esse conhecimento para o segundo episódio. “Estamos orgulhosos de continuar mostrando a qualidade da experiência que um desenvolvedor pode criar para o WebGL”, diz Fanchin. "Como um pequeno estúdio, estamos empolgados para ver o que podemos realizar com avanços tecnológicos como o Unity 6 e o WebGPU."

Possibilidades ampliadas com 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 o Unity 6 no Unity Hub.