Para implantar na plataforma Web do Unity, primeiro você precisa adicionar o módulo Web ao Unity Editor para criar uma compilação Web. Localize a instalação no Unity Hub, clique no ícone Configurações e escolha Adicionar módulos.

Na nova caixa de diálogo, role para baixo até encontrar o Web Build Support, selecione-o e clique em Done (Concluído).

Reabra o projeto e alterne a plataforma de destino em File > Build Settings. Use a opção Development Build ao desenvolver seu jogo. Ele fornece informações adicionais de depuração, como rastreamentos de pilha, mensagens de erro detalhadas e informações de registro que podem ajudá-lo a solucionar problemas e fazer alterações no jogo. Você pode fazer pequenas alterações no código, nos recursos ou nas configurações do jogo e, em seguida, reconstruir e testar rapidamente essas alterações no navegador, sem a necessidade de um processo de compilação completo.

Apenas certifique-se de desmarcar a opção Development Build em Build Settings para sua compilação final publicada.

Selecione Build And Run para criar uma versão do seu jogo que seja executada em um navegador para teste de jogo. O Google Chrome é uma boa opção para testes de jogo porque oferece várias ferramentas de desenvolvedor.

Você será solicitado a escolher um local para a compilação. Os arquivos da compilação incluem um arquivo index.html que adiciona um elemento HTML5 Canvas ao DOM (Document Object Model), que é a representação de dados dos objetos que compõem a estrutura e o conteúdo de um documento na Web. O jogo é renderizado nessa tela. Os arquivos de compilação também incluem uma pasta TemplateData e uma pasta Build. A pasta TemplateData contém ativos HTML usados na página, como o favicon usado na barra de endereços do navegador e as imagens usadas na marcação HTML da página.

Você também pode configurar compilações automatizadas, sendo o Unity Build Automation uma opção para isso.

Você pode usar o Pipeline de Renderização Integrado ou o Pipeline de Renderização Universal (URP) para um jogo da Web. No entanto, recomendamos o URP porque ele oferece personalização e dimensionamento eficientes do conteúdo para vários dispositivos de hardware.

Obtenha instruções detalhadas sobre como mover seus projetos do Pipeline de Renderização Integrado para o URP com o e-book Introdução ao Pipeline de Renderização Universal para criadores avançados do Unity.

Ao visar um console, você tem especificações exatas de memória e uso de CPU e GPU. A Web é um fenômeno completamente diferente. Para disponibilizar seu jogo para o público mais amplo, é preciso garantir que ele funcione bem em um ambiente de memória restrita.

Aqui estão algumas dicas sobre como fazer com que seu jogo funcione sem problemas em hardware de baixo custo, retiradas do e-book Otimize o desempenho do seu jogo para celular.

1. Otimize seus recursos de jogo

Otimize ativos como texturas e modelos para a Web, por exemplo, use texturas compactadas e reduza o número de polígonos em seus modelos, quando aplicável. Embora não existam regras definidas, concorde com algumas diretrizes gerais em sua equipe para garantir a consistência no desempenho.

2. Usar pooling de objetos

O pooling de objetos é uma técnica que pode ajudá-lo a melhorar o desempenho reutilizando objetos em vez de criar e destruir novos. Isso pode ser útil para jogos com muitos desovas e desovas. Outros padrões de design de programação, como o flywheel, também podem ser úteis. Veja o livro eletrônico Eleve o nível de seu código com padrões de programação de jogospara obter dicas avançadas sobre como implementar padrões de design em projetos Unity.

3. Usar o Pipeline de Renderização Universal e o SRP Batcher

Melhore o desempenho com o sistema de lotes SRP Batcher do Unity, que acelera a renderização da CPU, dependendo da cena. Ele funciona agrupando chamadas de desenho com base em propriedades de material compartilhadas, como shaders e texturas, reduzindo assim o número de alterações de estado necessárias durante a renderização.

4. Usar oclusion culling

O sistema de occlusion culling do Unity pode ajudar a melhorar o desempenho renderizando apenas os objetos que estão visíveis para o jogador. A eliminação de oclusão funciona melhor em cenas em que áreas pequenas e bem definidas são separadas umas das outras por GameObjects sólidos, como salas conectadas por corredores.

5. Use o sistema LOD (Nível de detalhe) integrado

O sistema LOD integrado do Unity melhora o desempenho reduzindo a complexidade dos objetos que estão mais distantes do jogador. À medida que a distância entre a câmera e um objeto aumenta, o sistema LOD troca automaticamente a versão com muitos detalhes do objeto por versões com menos detalhes, reduzindo a carga de trabalho de renderização e mantendo uma aparência coerente.

6. Cozinhe sua iluminação sempre que possível

Melhore o desempenho pré-computando informações de iluminação para suas cenas com Lightmaps e Light Probes.

7. Reduzir a criação ou manipulação desnecessária de strings

No C#, as cadeias de caracteres são tipos de referência, não tipos de valor. Evite analisar arquivos de dados baseados em strings, como JSON e XML; em vez disso, armazene os dados em ScriptableObjects ou em formatos como MessagePack ou Protobuf. Você também pode considerar os formatos binários para casos como salvar dados de jogos persistentes (salvar jogos). Use a classe StringBuilder se precisar criar cadeias de caracteres em tempo de execução.

8. Experimente o Addressable Asset System

O Addressable Asset System oferece uma maneira simplificada de gerenciar seu conteúdo, carregando AssetBundles por "endereço" ou alias. Esse sistema unificado carrega de forma assíncrona a partir de um caminho local ou de uma rede de distribuição de conteúdo (CDN) remota.

9. Limitar os efeitos do pós-processamento

Os efeitos de pós-processamento em tela cheia podem reduzir o desempenho, portanto, use-os com moderação no seu jogo.

Quando você cria uma compilação do Unity Web, o Unity usa um modelo para gerar a página da Web para exibir seu jogo.

Os modelos padrão são:

• Padrão: Uma página branca com uma barra de carregamento em uma tela cinza
• Mínimo: O boilerplate mínimo necessário para executar seu jogo
• Progressive Web App (PWA): Isso inclui um arquivo de manifesto da Web e um service worker. Em um navegador de desktop adequado, isso exibirá um botão de instalação na barra de endereços para adicionar o jogo aos aplicativos que podem ser iniciados pelo jogador.

A maneira mais fácil de criar sua própria página HTML personalizada é começar com um dos três modelos, que você pode encontrar em <UnityInstallation>/PlaybackEngines/ WebGLSupport/ BuildTools/ WebGLTemplates/. No Mac, você pode localizar a pasta de instalação do Unity na pasta Aplicativos.

Copie um modelo, coloque-o em sua própria pasta Project/Assets/WebGLTemplates e renomeie-o para poder identificá-lo posteriormente. Agora você pode personalizá-lo para se adequar ao conteúdo do jogo, ao local de implantação e à plataforma de destino.

Os modelos na pasta WebGLTemplates do seu projeto aparecem no painel Editar > Configurações do projeto... > Player > Resolução e apresentação. O nome do modelo é o mesmo de sua pasta. Para dar a essa opção uma imagem em miniatura para facilitar a referência, adicione uma imagem de 128 x 128 pixels à pasta de modelos e nomeie-a thumbnail.png.

Durante o processo de compilação, o Unity pré-processa os arquivos de modelo e avalia todas as macros e diretivas condicionais incluídas nesses arquivos. Ele localiza e substitui todas as declarações de macro pelos valores fornecidos pelo Editor e pré-processa automaticamente todos os arquivos .html, .php, .css, .js e .json na pasta de modelos.

Por exemplo, dê uma olhada nesta linha de código:

<canvas id="unity-canvas" width={{{ WIDTH }}} height={{{ HEIGHT }}} tabindex="-1"></canvas>

Se a Largura padrãoda tela for definida como 960 e a Altura padrão da tela como 600 no painel Resolução e apresentação, o código terá a seguinte aparência após o pré-processamento:

<canvas id="unity-canvas" width="960" height="600" tabindex="-1"></canvas>.

As chaves triplas indicam ao compilador que deve encontrar o valor da variável indicada.

Você também encontrará exemplos nos modelos padrão de diretivas condicionais usando #if, #else e #endif:

#se EXPRESSION

//Se EXPRESSION for avaliada como um valor verdadeiro

#se

//Se a EXPRESSION não for avaliada como um valor verdadeiro

#endif

Se você quiser usar um modelo personalizado, a Unity Asset Store oferece várias opções.

Se você compartilhar seu jogo em uma plataforma para jogos baseados em navegador, precisará adaptar a página index.html para corresponder a uma especificação. Consulte a documentação de algumas das plataformas mais populares de jogos da Web para saber como fazer isso:

• CrazyGames
• Poki
• Kongregate
• Itch.io
• Construir Arcade
• Simmer.io

Muitas vezes, você deseja que seu jogo redimensione uma janela do navegador para acomodar um design responsivo, o que exige a adaptação do código de carregamento. Para isso, você pode usar uma "Promessa" em JavaScript, que representa uma operação que ainda não foi concluída, mas que se espera que seja concluída no futuro.

Na página index.html de cada modelo (consulte o exemplo de código abaixo), localize script.onload. O script.onload é um evento que é acionado quando o script do mecanismo do Unity termina de carregar. Pouco antes disso, você tem duas variáveis globais: myGameInstance, que contém a referência à instância do Unity, e myGameLoaded, que indica se o jogo terminou de ser carregado ou não e tem como padrão false. Eles são declarados como var para que tenham um escopo global e possam ser acessados em qualquer lugar do script.

A função createUnityInstance() é chamada para criar uma nova instância do jogo Unity. Essa função retorna uma Promise que é resolvida quando o jogo é completamente carregado e está pronto para ser renderizado (o bloco de então da Promise createUnityInstance).

Dentro de then(), myGameInstance é atribuída à instância do Unity e myGameLoaded é definido como true, indicando que o jogo está pronto. A função resizePage() é então chamada para definir inicialmente o tamanho do jogo, e um ouvinte de eventos é adicionado ao evento de redimensionamento da janela para que o tamanho do jogo possa ser atualizado sempre que a janela for redimensionada. Veja o trecho de código abaixo.

Em seguida, temos a função resizePage na parte inferior do script, conforme mostrado no trecho de código a seguir, que é usada para redimensionar o jogo para corresponder ao tamanho da janela. Se o jogo for carregado, ele definirá os valores de estilo da tela que exibe o jogo para corresponder ao tamanho da janela, fazendo com que ela preencha a janela:

função resizePage(){

Se (myGameInstance !== undefined && myGameLoaded === true)

{

canvas.style.width = window.innerWidth + 'px';

canvas.style.height = window.innerHeight + 'px';

}

}

Muitos jogos direcionados a um navegador precisarão interagir com o código JavaScript para permitir que você chame serviços da Web para dar suporte a logins de usuários, tabelas de pontuação, etc., ou para interagir com o DOM do navegador. Qualquer JavaScript que você adicionar diretamente, para que possa ser chamado de um script C#, precisa ter uma extensão .jslib e ser colocado na pasta Assets/Plugins . Ele deve ser incluído no método mergeInto. Isso requer dois parâmetros: LibraryManager.library e, em seguida, um objeto JavaScript que contém uma ou mais funções. As funções são JavaScript padrão. GetExchangeRates mostra como usar um serviço da Web simples de fornecimento de JSON abaixo.

Quando você criar uma compilação, essas funções serão adicionadas ao arquivo Build/<your game name>.framework.js . Você pode chamar essas funções de um script C# declarando a função como um DllImport, conforme mostrado neste exemplo de código:

classe pública SphereController : MonoBehaviour
{
[DllImport("__Internal")]
private static extern void GetExchangeRates();

private void Start()
{
GetExchangeRates();
}
}

Mais informações

Interação com scripts do navegador

Interagindo com o código: Emscripten

Além de o C# chamar uma função JavaScript, o JavaScript pode chamar um método C#. O mecanismo envolvido usa um protocolo de mensagens:

myGameInstance.SendMessage(‘MyGameObject’, ‘MyFunction’)

myGameInstance.SendMessage(‘MyGameObject’, ‘MyFunction’, 5)

myGameInstance.SendMessage(‘MyGameObject’, ‘MyFunction’, ‘A string’)

Para usar SendMessage, você precisa de uma referência à instância do jogo no escopo. A técnica usual é editar o index.html adicionando uma variável global e atribuindo-a no bloco then do script.onload Promise, conforme visto anteriormente. Essa função simples é adicionada como parte de um componente MonoBehaviour anexado a um GameObject chamado Sphere.

public void SetHeight( float height )

{

Vector3 pos = transform.position;

pos.y = height;

transform.position = pos;

}

Você pode abrir o Console do Chrome usando a tecla F12 e digitar diretamente:

myGameInstance.SendMessage('Sphere', 'SetHeight', 3)

Pressione Enter para chamar a função Moving the Sphere. O movimento só será refletido na renderização se você tiver definido Run In Background ou se tiver definido Application.runInBackground como true. Isso ocorre porque, por padrão, a renderização só ocorre quando a janela da tela tem foco.

Use Debug.Log ao depurar para plataformas de navegador. Todas as mensagens são enviadas para o console do navegador. No Chrome, você encontra isso pressionando F12 e alternando para a guia Console. Mas a classe Debug oferece mais opções. Usando Debug.LogError, o console fornecerá um rastreamento de pilha que pode ser útil.

Mais informações

Depurar e solucionar problemas de compilações WebGL

A classe Debug

Recomendamos que você use a opção Development Build durante o desenvolvimento, mas desmarque essa opção ao implantar o jogo em um site ativo. Para uma compilação de versão, você tem a opção de compactação. Talvez seja necessário ajustar as configurações em seu servidor ao usar a compactação; consulte o Manual para obter dicas sobre como fazer isso.

É importante traçar o perfil do seu projeto durante todo o ciclo de desenvolvimento para que você possa detectar os problemas de desempenho a tempo. O Unity Profiler é uma boa ferramenta para identificar e corrigir gargalos de desempenho em seu jogo. Ele rastreia o uso da CPU e da memória, ajudando a identificar as áreas do jogo que precisam de otimização. Você também pode usar o Profile Analyzer, o Memory Profiler e a Web Diagnostics Overlay junto com ele.

Baixe o livro eletrônico Guia definitivo para criação de perfil em jogos Unity para saber mais sobre a criação de perfis no Unity.

Vamos dar uma olhada em algumas dicas para começar a criar perfis em uma compilação do Unity Web.

Ativar o Profiler do Unity

Vá para File > Build Settings (Arquivo > Configurações de compilação ) no Editor e selecione Development Build and Autoconnect Profiler (Compilação de desenvolvimento e Profiler de conexão automática ) para usar o Profiler com uma compilação da Web.

Selecione o módulo CPU Usage (Uso da CPU)

Use este módulo para analisar o desempenho do seu código e identificar as áreas que estão causando problemas de desempenho. Analisar elementos como chamadas de função, execução de script e coleta de lixo.

Selecione o módulo Memory Profiler

As compilações do Unity Web têm recursos de memória limitados em comparação com outras plataformas. Use esse módulo para analisar o uso de memória do seu aplicativo e identificar áreas para otimização.

Use o painel Desempenho do Chrome DevTools

O Chrome DevTools inclui um painel de desempenho que o ajudará a analisar os gargalos do seu jogo. Entre outros recursos, ele oferece um painel Sources para adicionar pontos de interrupção em arquivos JavaScript e um painel Console para exibir mensagens de depuração e inserir código JavaScript.

Medir o desempenho em diferentes dispositivos

Isso o ajudará a identificar problemas de desempenho que podem ser específicos de um determinado dispositivo ou navegador e poderá ajudá-lo a otimizar o jogo adequadamente.

Reduzir o número de chamadas de sorteio

As chamadas de desenho são um dos principais gargalos de desempenho das builds do Unity Web. Use o Unity Profiler para identificar áreas com um alto número de draw calls e tente reduzi-las.

Analisar o desempenho em dispositivos de baixo custo

Teste em dispositivos de baixo custo para garantir que seu aplicativo seja otimizado para uma ampla gama de hardware.

Ativar "Executar em segundo plano" durante a criação de perfil

Se a opção Executar em segundo plano estiver ativada nas configurações do WebGL Player ou se você ativar Application.runInBackground, seu conteúdo continuará a ser executado quando a tela ou a janela do navegador perder o foco, o que pode ser útil para a criação de perfis.

As compilações Unity Web são uma ótima maneira de distribuir seu jogo para um público amplo. Durante o desenvolvimento, você deve procurar manter a geometria e as texturas em um tamanho modesto, reduzir as chamadas de desenho, criar perfis e testar em uma ampla variedade de dispositivos. Por fim, use o URP para garantir um desempenho sólido na mais ampla variedade de hardware.

Mais informações

Dicas e truques para usar o módulo WebGL do Unity

Manual do Unity Web

Acesso antecipado ao novo back-end WebGPU no Unity 2023.3

As atualizações oficiais do tempo de execução da Web estão aqui: Leve seu navegador para o próximo nível

Encontre todos os e-books e artigos avançados da Unity no hub de práticas recomendadas da Unity.