5 fundamentos para criar jogos na web

Imagine oferecer aos jogadores uma experiência de jogo rápida e acessível, sem barreiras como downloads de mercado móvel ou cadastros de conta. A capacidade de encontrar jogadores em todos os lugares através de navegadores ou incorporados em aplicativos nativos via uma visualização da web está ao seu alcance, e as possibilidades com jogos baseados na web são infinitas.

Recentemente, vimos um aumento no engajamento dos jogadores em plataformas web, especialmente móveis, e a tendência não mostra sinais de desaceleração. Em 2023, o mercado global de jogos de navegador gerou aproximadamente $15,03 bilhões de dólares em receita. Apesar do crescimento dos gêneros de jogos em console e mobile, em 2028, o segmento deve aumentar para $22,33 bilhões de dólares em receita anual.

Este e-book abrangente ajudará tanto criadores aspirantes quanto desenvolvedores experientes a se aprofundarem e entenderem cinco fundamentos para construir jogos web performáticos usando Unity Web. Inclui uma visão dos bastidores de como títulos populares como Pronto, Preparar, Cozinhar!, Kasama: O Despertar, SquadBlast e Projeto Prismatic ganharam vida na web.

Ele abrange os seguintes insights:

1. Priorize o planejamento e a prototipagem

2. Construa uma interface de usuário dinâmica

3. Crie uma experiência audiovisual coesa

4. Otimizar. Otimizar. Otimizar.

5. Abrace várias plataformas web

1. Priorize o planejamento e a prototipagem

Um dos principais benefícios da plataforma web é a velocidade com que você pode compartilhar seu jogo com jogadores ao redor do mundo. No entanto, para garantir uma ótima experiência, seu jogo precisa ser construído sobre uma base de design sólida.

Esboçando uma visão

Definir uma visão clara ajuda a guiar uma equipe durante todo o processo de desenvolvimento. A Stratton Studios queria expandir os limites do que poderia ser alcançado em um jogo baseado em navegador, tanto em termos de desempenho quanto de fidelidade visual. O objetivo deles era oferecer uma experiência de jogador de primeira classe que rivalizasse com plataformas tradicionais em um ambiente web.

“Essa visão foi a âncora que nos manteve alinhados durante a prototipagem e iteração, e nos ajudou a fazer escolhas consistentes e intencionais ao longo do desenvolvimento”, diz Josh Loveridge, o diretor administrativo da Stratton Studios.

O primeiro passo na criação do jogo foi garantir que eles pudessem alcançar o ambiente vibrante que imaginaram, mantendo um desempenho sólido, especialmente dadas as limitações do hardware de nível médio que estavam visando. Isso forneceu uma base técnica sólida para o restante do desenvolvimento do jogo.

"Começamos construindo uma cena de teste com uma grande distância de visualização, permitindo-nos avaliar se poderíamos renderizar a densa folhagem, o terreno variado e os detalhes intrincados que eram cruciais para a estética do jogo", diz Loveridge. Aproveitando a nova API gráfica WebGPU, testamos a cena para garantir que não apenas parecesse tão exuberante quanto desejávamos, mas também tivesse um bom desempenho em diferentes dispositivos.

Testando desde o início

No início, a equipe ULTRAHORSE se concentrou em desenvolver suas principais mecânicas de jogo. Eles queriam definir o aspecto do shooter multiplayer side-scroller run-and-gun para garantir que fosse divertido e envolvente. Eles começaram com telas maiores, consoles e PCs para acertar a sensação básica.

A partir daí, avançamos rapidamente para os testes com jogadores. Mesmo com nossa versão beta inicial, a colocamos diante dos jogadores online por meio de serviços como Antidote e betas iniciais em eventos como o WASD Expo em Londres”, diz o CEO e cofundador Anatolijs Ropotovs. ”Isso nos permitiu validar nossas mecânicas principais e obter feedback imediato sobre o que estava funcionando e o que não estava.”

A equipe PIGIAMA KASAMA ecoa a ideia de prototipagem rápida e teste de ideias precoces. A criação de Kasama: O Despertar começou com a definição do personagem e a escrita de um esboço narrativo. Eles queriam que a história, o protagonista e a jogabilidade se conectassem profundamente. Eles começaram criando um ambiente 3D simples no Gravity Sketch VR, depois o moveram para o Unity para construir e testar sua mecânica principal de quebra-cabeça.

Essa abordagem prática permitiu que eles vissem se o mecânico funcionava bem antes de investir muito tempo nisso. Uma vez que estavam confiantes na mecânica e na história, decidiram transformar o jogo em uma aventura de quebra-cabeça, que parecia ser a combinação perfeita para a experiência que estavam tentando criar.

"Passamos por várias iterações durante os testes até que a equipe se sinta confiante de que as interações funcionam." Uma vez que acertamos a jogabilidade principal, passamos para a arte conceitual, garantindo que estivesse alinhada com a história do jogo e a vibe geral," diz Paride Stella, cofundador da PIGIAMA KASAMA.

Adaptando-se a obstáculos

Como é comum no desenvolvimento de jogos, a Stratton Studios ajustou sua visão inicial à medida que encontrou limitações técnicas e descobriu melhores ideias durante a prototipagem.

Refinar para garantir o melhor resultado possível faz parte de todo o processo criativo. Por exemplo, uma mudança significativa que tivemos que fazer envolveu o design de níveis”, explica Loveridge. ”Inicialmente, imaginamos ambientes mais abertos e livres, mas à medida que avançamos, ficou claro que essa abordagem não funcionaria de forma eficiente com o sistema de ocultação de tiles hexagonais que estávamos implementando.”

Para manter o desempenho, especialmente em um ambiente baseado na web, eles otimizaram o processo de renderização reduzindo drasticamente a topologia na tela. Isso os levou a reestruturar o design de níveis em quadrantes de azulejos hexagonais, o que os ajudou a gerenciar melhor a visibilidade e a eliminação, e então se concentraram em pontos de estrangulamento claros. Esse jogo melhorado garantiu que o jogo funcionasse sem problemas em uma ampla gama de dispositivos. O ajuste foi crucial para equilibrar sua visão criativa com os requisitos de desempenho técnico.

Embora um bom planejamento possa diminuir o impacto dos desafios que surgem durante o desenvolvimento, é importante ter em mente que isso não evitará completamente os obstáculos no caminho.

2. Construa uma interface de usuário dinâmica

Enquanto a web é a plataforma mais acessível para alcançar jogadores em todos os lugares, nem todos os navegadores são criados iguais. Variações no tamanho da tela, orientação paisagem vs retrato e considerações de UI para o aplicativo que hospeda seu jogo são todos aspectos a serem considerados ao projetar a UI do seu jogo.

Manter a experiência do jogador em mente

À medida que a Coatsink equipe começou a desenvolver Ready, Set, Cook!, eles rapidamente perceberam que havia muito que precisavam levar em conta para a interface do usuário. No início, eles estavam preocupados em garantir que tanto os jogadores quanto os usuários de videochamada que não jogavam pudessem participar. Eles precisavam aprimorar a funcionalidade de espectação existente que mantém os jogadores online de forma consistente, enquanto oferece a outros usuários uma experiência de visualização positiva.

"A experiência de espectação sempre foi uma prioridade para nós ao projetar outros aspectos do jogo", explica Kamil Bazydlo, um designer júnior na Coatsink. "Não é um recurso comum em todos os gêneros de jogos em outras plataformas, mas como os jogadores estão em uma videochamada, era importante enfatizar a participação inclusiva dos usuários ao longo do jogo."

Eles também começaram a olhar para a orientação da tela desde o início. Como o jogo foi inicialmente criado para desktop, ele foi construído com uma orientação paisagem. Quando eles mudaram para o mobile, tiveram que suportar tanto as perspectivas paisagem quanto retrato. No Messenger, os jogadores seguram suas telas como um telefone, já que estão em uma videochamada, então se o telefone for girado, a câmera fica de lado, o que não é ideal. “Isso foi uma grande consideração quando projetamos os ambientes para apoiar isso”, diz Ross Furmidge, chefe de programação da Coatsink.

Superando desafios de UI

Um dos maiores desafios que a equipe ULTRAHORSE enfrentou foi criar uma experiência de jogo que fosse igualmente agradável, independentemente de você estar usando um mouse e teclado, um controle ou uma tela sensível ao toque. Isso foi crucial para a visão deles de construir um jogo verdadeiramente multiplataforma.

Inicialmente, experimentamos diferentes estilos de jogo, mas descobrimos que muitos formatos tradicionais de tiro favoreciam um método de entrada em detrimento de outros. Na verdade, foi assim que chegamos ao formato de jogo de tiro em rolagem lateral para SquadBlast," diz Ropotovs. "Percebemos que um plano 2D permitia uma mira precisa com um mouse, movimento intuitivo com um controle e controles de toque simples e autoexplicativos em dispositivos móveis."

Um desafio inesperado surgiu à medida que a equipe fazia a transição do desenvolvimento para PC para o desenvolvimento para a web móvel. Inicialmente, eles desenvolveram uma experiência de PC totalmente polida que estava completa com elementos de mouse hover na UX. Isso permitiu que eles criassem uma interface rica e detalhada que aproveitava telas maiores e controle preciso do mouse. Eles usaram dicas de ferramentas, estados de passar o mouse e estruturas de menu mais complexas para transmitir informações e opções ao jogador.

Isso levou a algumas decisões difíceis sobre quais informações mostrar e como apresentá-las. A equipe teve que tornar a interface mais autoexplicativa, já que não podiam contar com os estados de hover ou dicas de ferramentas complexas que funcionam bem no PC. Cada elemento tinha que ser compreensível à primeira vista, o que os forçou a refinar a linguagem visual e a iconografia.

Ajustando com base no espaço da tela

A equipe ULTRAHORSE também enfrentou obstáculos ao projetar para entradas de toque. No PC, eles podiam assumir um controle preciso do cursor, mas no celular, tinham que levar em conta toques de dedo menos precisos e possíveis cliques errados. Isso os levou a aumentar os alvos de toque e a espaçar os elementos da interface do usuário de forma mais generosa, o que reduziu ainda mais a quantidade de informações que podiam exibir de uma só vez.

Eles também descobriram a importância de componentes de UI escaláveis e flexíveis. Dada a variedade de tamanhos de dispositivos móveis e proporções de tela, eles precisavam que sua interface se adaptasse suavemente a diferentes configurações de tela e DPI. Isso os levou a desenvolver um sistema de interface do usuário mais robusto que pudesse se ajustar automaticamente com base no espaço de tela disponível. Usar esse processo de simplificação para a web móvel ajudou a melhorar SquadBlast’s UI em todas as plataformas.

Repensando os controles do jogo

Pronto, Prepare-se, Cozinhe! pode ser jogado em uma ampla variedade de dispositivos com diferentes tamanhos de tela e proporções, mas a área de visualização do jogo não se estende por toda a tela, pois aloca espaço para elementos como o feed de vídeo da Meta e os controles da plataforma. Estes não fazem parte do aplicativo do jogo em si, então não aparecem no Editor do Unity quando os desenvolvedores estão trabalhando no jogo.

"Tivemos que levar isso em consideração ao colocar qualquer elemento de interface do usuário na tela", diz Bazydlo. "Nós obtivemos a faixa aproximada de quanto espaço na tela é ocupado por esses elementos de plataforma e trabalhamos com nossa equipe de QA para identificar qual seria a proporção de aspecto mais estreita a ser alvo."

No celular, os controles específicos do dispositivo estão na parte inferior da tela. Como o jogo foi construído com a orientação paisagem em mente, a equipe usou a parte inferior da tela para exibir alguns elementos de HUD em vez de para entradas críticas de jogabilidade.

Quando o título foi lançado de forma suave nos EUA, a equipe incorporou análises diretamente no aplicativo, o que foi fundamental para identificar quando os jogadores saíam do jogo. No início, eles perceberam que os usuários estavam desistindo antes mesmo do jogo carregar.

Vimos que quando o menu estava um pouco mais movimentado e seu fluxo para o jogo era muito longo para os usuários no lobby, eles saíam rapidamente. Assim que entraram no jogo, a maioria dos jogadores continuou a jogá-lo na íntegra," diz Furmidge. "Isso foi um dado instrumental para nós, e as análises foram um grande fator em muitas das nossas decisões."

3. Crie uma experiência audiovisual coesa

Ao aproveitar gráficos avançados e áudio dinâmico, os criadores podem elevar a experiência de jogo, independentemente das otimizações necessárias para os navegadores. Embora seja mais fácil falar do que fazer e gargalos comuns devam ser cuidadosamente considerados, à medida que a tecnologia evolui, o potencial para alta fidelidade visual e sonora na web é mais promissor do que nunca.

Alcançando níveis mais altos de complexidade gráfica

A equipe do Stratton Studios estava procurando criar um jogo com alta fidelidade visual e um ambiente detalhado. Isso exigia mais poder gráfico e flexibilidade do que o WebGL poderia fornecer.

"WebGL, embora capaz, tem certos gargalos de desempenho e limitações, como a falta de shaders de computação e skinning de GPU, que nos forçariam a comprometer nossa visão artística", diz Loveridge.

Eles decidiram mudar para WebGPU para alcançar níveis muito mais altos de complexidade gráfica, incluindo sombreamento mais avançado, efeitos de iluminação e texturas intrincadas por meio de shaders de computação. Isso permitiu que eles criassem ambientes densos e exuberantes e mantivessem uma taxa de quadros alta e consistente, mesmo em um navegador.

O desempenho aprimorado do WebGPU, impulsionado pela capacidade de utilizar ainda mais a placa gráfica dos dispositivos, foi essencial para proporcionar a rica e imersiva experiência que eles imaginaram, garantindo que os jogadores pudessem desfrutar do jogo com o nível de detalhe e suavidade normalmente reservados para jogos de desktop e console.

Gerenciando desempenho e WebGPU

Enquanto o WebGPU oferecia as capacidades avançadas que a equipe da Stratton Studios precisava, também apresentava um conjunto único de desafios que eles tinham que enfrentar para manter sua visão artística. Um dos principais desafios foi otimizar o desempenho em uma ampla gama de dispositivos. Como o WebGPU ainda é relativamente novo, garantir um desempenho e compatibilidade consistentes exigiu um ajuste fino significativo, e eles incorporaram algumas medidas de segurança.

Outro desafio foi gerenciar a complexidade dos shaders e das técnicas de renderização que eles usaram. “Embora o WebGPU permita técnicas de renderização mais sofisticadas, como skinning de GPU e shaders de computação, também há mais potencial para gargalos de desempenho se não forem tratados com cuidado”, diz Loveridge. "Tivemos que otimizar meticulosamente nossos shaders e simplificá-los para garantir que pudéssemos entregar visuais de alta qualidade sem causar quedas na taxa de quadros ou outros problemas de desempenho, como picos de coleta de lixo (GC)."

Como o WebGPU é relativamente novo, às vezes levou a comportamentos inesperados para a equipe, como telas pretas aleatórias ou pixels NaN causando inchaço de brilho, particularmente em configurações de hardware menos comuns. Para superar isso, eles investiram tempo extra em testes rigorosos em dispositivos e navegadores, garantindo que o jogo funcionasse de forma consistente e parecesse como pretendido, independentemente da plataforma.

"Para enfrentar esses desafios, implementamos um sistema robusto de monitoramento de desempenho que nos permitiu detectar e resolver problemas em tempo real durante o desenvolvimento", diz Loveridge. O WebGPU nos permitiu alcançar nossa visão artística, mas exigiu uma gestão cuidadosa e um compromisso em superar os obstáculos que vieram com o trabalho na vanguarda da tecnologia web.

Encontrando a luz

"Uma boa iluminação faz toda a diferença e é difícil de alcançar em um jogo na web", diz Stella, e a equipe do PIGIAMA KASAMA queria garantir que a qualidade da iluminação correspondesse ao restante da fidelidade do jogo.

A iluminação também foi fundamental para a mecânica do 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 assada o máximo 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," explica o cofundador Matteo Fanchin.

Um dos desafios mais complexos da equipe foi 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. "Para alcançar isso," diz Stella, "é fundamental fazer o design do jogo e o design do ambiente como um processo integrado em vez de separá-los. Todo elemento precisa servir ao outro.

Eles usaram Shader Graph para desenvolver o shader personalizado, 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.

Devido aos seus recursos limitados, eles também fizeram algumas escolhas artísticas para melhorar o desempenho. Eles escolheram trabalhar com áreas escuras para esconder elementos, o que os ajudou a otimizar o número de polígonos e malhas com pele. "Adicionamos muito mais detalhes às áreas mais claras", diz Fanchin.

Gerenciando o pipeline de produção de áudio

Em Kasama: O Despertar, o áudio influenciou tudo, desde o ritmo da jogabilidade até o design dos ambientes e interações. Ele também orienta 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.

A equipe executou um rigoroso processo técnico de três etapas para a produção de áudio antes de implementá-lo.

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

A primeira etapa exigiu a unificação de múltiplos 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 de uma única vez, 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 de á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 sequências em loop que precisavam transitar de forma suave dentro do 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, tipicamente nos formatos .AIFF e .FLAC, passaram por conversão para o formato .OGG. Esta conversão foi executada com uma taxa de amostragem de 48 kHz e uma 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 de áudio perceptual.

Fase 3: Implementação e ajuste fino da 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. As configurações de compressão Vorbis foram ajustadas para alcançar o equilíbrio ideal entre fidelidade de áudio e 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 rigoroso processo de otimização implementado na fase final resultou em ganhos significativos de armazenamento e desempenho. Ao aproveitar 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 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.

4. Otimizar. Otimizar. Otimizar.

Para evitar a desistência dos jogadores, você quer garantir que eles possam entrar no seu jogo o mais rápido possível e ter uma ótima experiência durante todo o tempo. As expectativas são altas e o tempo é essencial, por isso é fundamental otimizar, testar e otimizar ainda mais para garantir que os usuários permaneçam engajados.

Reduzindo o tamanho do arquivo

Para reduzir o tamanho do arquivo, a equipe da Coatsink usou AssetBundles, um arquivo de arquivo que contém ativos não relacionados ao código específicos da plataforma. Eles os hospedaram em um servidor externo e depois os baixaram quando a construção foi executada para ajudar os usuários a entrarem no lobby do jogo o mais rápido possível.

Eles também usaram o Addressable Asset System para carregar ativos sob demanda. Isso os ajudou a dividir pacotes nos grupos necessários para diferentes partes do jogo e contribuiu muito para a redução de 25% no tempo de carregamento.

"Dessa forma, temos a quantidade mínima de ativos para que os lobbies ajudem os jogadores a entrar cedo, a quantidade mínima para cada nível e alguns pacotes comuns com ativos comuns para diferentes níveis", explica o desenvolvedor Andrei M. "O objetivo é ter o menor número possível de arquivos para baixar, uma vez que o HTTP/2 não está em todos os lugares, e queremos o menor número possível de ativos não necessários dentro."

A equipe criou um fluxo de trabalho que os ajudou a detectar se um usuário estava em um dispositivo móvel ou desktop quando iniciava o jogo. Em um modelo de web, durante um carregamento, eles poderiam determinar se o dispositivo era móvel e, se sim, mudariam os diretórios de dados e ativos para usar ativos otimizados para a plataforma.

"Criamos nosso próprio sistema de construção dupla, que produziu duas versões que não eram completamente diferentes." Ele faz referência a diferentes atlas e altera tanto o tipo de compressão quanto o tamanho. "São duas visões diferentes de ativos com base na mesma base de código", diz Andrei M.

Os Estúdios Stratton conseguiram fazer reduções significativas tanto nos tamanhos dos arquivos quanto nos tempos de carregamento durante o processo de desenvolvimento. Inicialmente, o payload do jogo deles era de aproximadamente 400 MB, o que era muito grande para uma experiência baseada na web.

"Através de uma série de otimizações, incluindo compressão de ativos, divisão de código e aproveitamento do Sistema de Ativos Endereçáveis da Unity, conseguimos reduzir com sucesso o tamanho do payload inicial para 29 MB", explica Loveridge.

Essa drástica redução não apenas encurtou significativamente os tempos de carregamento, mas também tornou Project Prismatic muito mais acessível a um público mais amplo, garantindo carregamentos iniciais mais rápidos e uma experiência geral do jogador mais suave.

A equipe ULTRAHORSE reduziu o tamanho do pacote de download inicial de 200 MB para 133 MB no lançamento. Eles então dividiram entre 21 MB para pacotes obrigatórios e 112 MB para pacotes sob demanda. "O tempo de carga da CPU é mais de três vezes mais rápido do que era no início", diz Ropotovs. "Perfilagem, otimização e desativação de pacotes desnecessários foram uma grande parte disso."

Otimização dos tempos de carregamento

Os Estúdios Stratton se concentraram em reduzir o tamanho do payload, melhorar a entrega de ativos e aumentar a eficiência geral para otimizar os tempos de carregamento. A equipe usou a compressão de ativos embutida do Unity para minimizar o tamanho de texturas, áudio e outros ativos, juntamente com o mapeamento geral de texturas.

Eles implementaram o carregamento preguiçoso para ativos não essenciais, o que permitiu que o jogo carregasse componentes críticos primeiro e, em seguida, carregasse progressivamente conteúdo adicional em segundo plano conforme necessário, por meio da estrutura Addressables.

Eles usaram o Sistema de Ativos Endereçáveis para gerenciar e carregar ativos de forma eficiente sob demanda. Isso permitiu que eles carregassem dinamicamente os ativos à medida que os jogadores avançavam no jogo, garantindo que apenas os dados necessários fossem carregados a qualquer momento.

A estrutura de Entrega de Conteúdo em Nuvem (CCD) da Unity ajudou a equipe a entregar ativos de servidores geograficamente mais próximos. Isso reduziu a latência e acelerou os tempos de download para jogadores em todos os lugares, à medida que os ativos são carregados em segundo plano.

Eles garantiram que os ativos fossem armazenados localmente no dispositivo do jogador após o primeiro carregamento, permitindo tempos de carregamento subsequentes muito mais rápidos. A equipe também dividiu o código em partes menores e mais gerenciáveis para carregar apenas o código essencial para a jogabilidade inicial e ter recursos e módulos adicionais carregados de forma assíncrona.

Testando e depurando ferramentas

Para lidar com as limitações de desempenho que encontraram ao usar o WebGPU, a equipe da Stratton Studios usou o Frame Debugger para identificar os elementos mais intensivos em recursos, como texturas de alta resolução, shaders complexos e distâncias de desenho extensas. A partir daí, eles implementaram uma série de otimizações destinadas a reduzir a carga sem sacrificar significativamente a qualidade visual.

"Utilizamos atlas de texturas para minimizar o número de carregamentos de texturas, reduzimos a contagem de polígonos em áreas menos críticas e empregamos pinturas mate para topologias distantes para economizar nos custos de renderização", diz Loveridge. "Também aplicamos técnicas de nível de detalhe (LOD) para gerenciar a renderização de objetos distantes de forma mais eficiente."

O principal desafio foi encontrar um equilíbrio entre desempenho e qualidade visual. "Ao focar na otimização dos aspectos mais exigentes do jogo e fazer uso inteligente das ferramentas disponíveis no Unity, conseguimos oferecer uma experiência visualmente rica que teve um bom desempenho em uma ampla gama de dispositivos", diz Loveridge. “Essa abordagem nos permitiu alcançar nossos objetivos artísticos enquanto garantíamos que o jogo permanecesse acessível e agradável para todos os jogadores, independentemente de seu hardware.”

Para depurar Projeto Prismático, a equipe também contou com o Profiler do Unity para acompanhar suas métricas de desempenho, incluindo uso de CPU e GPU, alocação de memória e taxas de quadros. Isso os ajudou a identificar gargalos de desempenho e otimizar o desempenho do jogo, particularmente em áreas que consomem muitos recursos.

Por fim, Unity Cloud Diagnostics os ajudou a coletar relatórios de falhas e exceções de usuários no campo. Isso lhes proporcionou insights valiosos sobre questões que podem não ter sido detectadas durante o desenvolvimento.

5. Abrace várias plataformas web

Uma dica que ouvimos de especialistas de estúdio repetidamente é "encontrar os jogadores onde eles estão." Desenvolver para a web oferece a você a oportunidade de proporcionar aos jogadores uma experiência de jogo fácil, rápida e acessível. Com mais opções de hardware, velocidades de conexão mais rápidas e dispositivos poderosos nas mãos de mais jogadores do que nunca, é importante considerar todas as suas opções para implantar em várias plataformas da web.

Ajuste fino entre plataformas

Ao fazer parceria com a Spatial em um lançamento web multiplataforma, a equipe do PIGIAMA KASAMA adotou o Universal Render Pipeline (URP), o pipeline de escolha da plataforma. A flexibilidade e eficiência do pipeline de renderização foram particularmente importantes para a equipe ao implantar em plataformas web, uma vez que a compatibilidade entre plataformas e a personalização 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. Ele é projetado para se sair bem no futuro. Do ponto de vista da plataforma Spatial, à medida que começamos a suportar versões futuras do Unity, esperamos que o URP também seja suportado lá," explica Jake Steinerman, chefe de relações com desenvolvedores da Spatial.

Os servidores da Spatial criaram builds individuais para cada plataforma. Eles tinham diferentes qualidades de alvo para certas plataformas. "A profundidade de campo funciona muito bem no WebGL, mas encontramos um desempenho inferior em alguns dispositivos móveis", diz Fanchin. Por outro lado, o áudio no Android e iOS é muito mais eficiente. 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 teria funcionado no WebGL.

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

Renderizando com facilidade

Os Estúdios Stratton também aproveitaram o URP para encontrar um equilíbrio entre desempenho e extensibilidade. Uma característica chave era a capacidade do URP de criar facilmente passes de pipeline de renderização personalizados. Essa flexibilidade permitiu que a equipe ajustasse o processo de renderização para atender às suas necessidades específicas, otimizasse certos efeitos visuais e implementasse shaders personalizados que melhoraram a aparência e a sensação geral do jogo sem comprometer o desempenho.

Eu particularmente apreciei a modularidade do URP, que nos permitiu ativar ou desativar certos recursos com base nas capacidades da plataforma alvo. Isso facilitou a otimização do jogo para diferentes dispositivos, mantendo uma experiência visual consistente," diz Loveridge.

Beneficiando-se de um lançamento multiplataforma

Existem inúmeros benefícios em lançar um jogo em várias plataformas, embora isso possa adicionar diferenças de fluxo de trabalho a serem consideradas durante o planejamento.

Ao ter SquadBlast disponível na web e em outras plataformas, podemos alcançar um público muito mais amplo. Os jogadores podem facilmente entrar em um jogo sem precisar baixar ou instalar nada, o que reduz significativamente a barreira de entrada," diz Ropotovs.

A distribuição também é um fator importante para a equipe ULTRAHORSE, e ter uma versão web abre um mundo totalmente novo de canais aos quais a equipe não teria acesso de outra forma.

Eles inicialmente lançaram SquadBlast em seu próprio portal na web em SquadBlast.com. Isso lhes deu um ótimo campo de testes para iterar rapidamente, obter feedback imediato dos jogadores e fazer melhorias rápidas. A partir daí, eles se expandiram para portais de jogos online maiores, como CrazyGames, que foi revolucionário para a equipe.

"Esses sites têm um alcance massivo - estamos falando de dezenas de milhões de usuários ativos mensais." Ao colocar SquadBlast nesses portais, conseguimos colocar nosso jogo diante de um enorme público que talvez nunca tivéssemos alcançado por meio de outros canais de distribuição," explica Ropotovs.

A equipe também está vendo oportunidades com outras plataformas que incorporam jogos na web, como aplicativos de mensagens e plataformas de mídia social. Como Ropotovs diz, "o alcance potencial aqui é impressionante, e as otimizações muito melhoradas para a tecnologia web móvel com o Unity 6 desbloquearão uma nova geração inteira de plataformas para incorporar jogos."

Conclusão

Neste e-book, cobrimos cinco fundamentos para construir jogos de web bem-sucedidos. Pedimos aos nossos especialistas a melhor dica deles ao desenvolver para a web.

Se você está considerando desenvolver um jogo para a web, portar seu jogo de outra plataforma para a web, ou está apenas em busca de novas informações, esperamos que as percepções dos especialistas tenham sido valiosas e inspiradoras.

Possibilidades expandidas 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.