Criar um jogo de RA usando a AR Foundation do Unity

1. Visão geral

O ARCore é o framework do Google para a criação de experiências de realidade aumentada em smartphones. Você pode usar a AR Foundation do Unity para criar aplicativos multiplataforma de RA.

O que você vai criar

Neste codelab, você criará um jogo simples usando a AR Foundation. O objetivo do jogo é coletar pacotes usando um carro que você controla com um dispositivo portátil.

No entanto, isso não vai acontecer em um mundo totalmente virtual. Você vai misturar átomos físicos e bits digitais para criar um novo tipo de experiência do jogador, criando um jogo que entenda o ambiente ao redor do usuário.

Ao final deste codelab, seu jogo poderá:

  • Detecte aviões do mundo real e desenhe um campo sobre eles.
  • Lance raios a partir da visão da câmera e detecte interseções com planos.
  • Reaja às condições de iluminação do mundo real para dar mais realismo ao jogo.

O que você vai aprender

  • Como configurar um projeto que usa a AR Foundation do Unity.
  • Como usar o ARPlaneManager para assinar novos aviões.
  • Como usar Raycast para encontrar interseções com geometria virtual.
  • Como usar o ARLightEstimationData para iluminar sua cena.

O que é necessário

2. Configurar o ambiente de desenvolvimento

Nesta etapa, você vai preparar seu ambiente para desenvolvimento com a AR Foundation do Unity.

Verifique se o dispositivo é compatível com RA

As experiências de RA em dispositivos Android são conduzidas pelo ARCore, disponível em dispositivos compatíveis com o ARCore. Confira se o dispositivo de desenvolvimento é compatível com RA. Como alternativa, você pode usar uma instância do Android Emulator compatível com RA configurada corretamente.

Configurar a depuração USB no dispositivo

É necessário ativar as Opções do desenvolvedor no dispositivo para executar apps de depuração. Caso ainda não tenha feito isso, consulte a documentação do Android sobre Ativar as opções do desenvolvedor e a depuração USB.

Instalar o Unity (2020.3 LTS)

Na estação de trabalho, instale o Unity 2020 LTS. Neste codelab, capturas de tela da interface do Unity são mostradas na versão 2020.3 (LTS) (link em inglês). Outras versões do Unity podem funcionar, mas podem exigir etapas adicionais. Ela pode ser diferente das capturas de tela mostradas aqui.

Criar um novo projeto

Crie um novo projeto usando o modelo Pipeline de Renderização Universal. Forneça um nome descritivo e um local apropriado e pressione CRIAR.

Instale os frameworks necessários

A AR Foundation do Unity pode ser encontrada no Unity Package Manager.

  1. Abra-o clicando em Janela > Gerenciador de pacotes.

  1. Nesta janela, instale os pacotes que você usará neste codelab. Confira as versões mais recentes desses frameworks expandindo a entrada usando o ícone . Instale as versões mais recentes para cada uma destas estruturas:
    • Base de RA
    • Plug-in ARCore XR

Quando você terminar, o gerenciador de pacotes ficará assim:

Instalar o pacote inicial

Neste codelab, fornecemos um pacote inicial que contém prefabs e scripts que aceleram algumas partes do codelab para que você possa se concentrar em como usar a AR Foundation.

  1. Instale o pacote inicial abrindo Assets > Importar pacote > Pacote personalizado... e abrindo starter-package.unitypackage.
  2. Na janela que aparece, verifique se tudo está selecionado.
  3. Clique em Importar.

Mudar configurações do build

Como o aplicativo será executado no Android, mude a plataforma de build para Android:

  1. Abra Arquivo > Configurações do build.
  2. No painel Plataforma, selecione Android.
  3. Também é possível ativar o Build de desenvolvimento e a Depuração de script para reter as informações de depuração enquanto o app é executado.
  4. Clique em Switch Platform.

Alterar configurações do projeto

O AR Foundation precisa ser configurado para inicializar sistemas XR na inicialização.

  1. Abra Editar > Project Settings... e clique na seção XR Plug-in Management.
  2. Na guia Android, ative o ARCore.

  1. No painel à esquerda, clique na seção Player.
  2. Na guia Android, em Other Settings, remova o Vulkan das APIs gráficas.

  1. Os apps necessários para RA que usam o ARCore exigem um nível mínimo de API de 24. Role para baixo até encontrar Minimum API Level. Defina o nível mínimo da API como 24.

Adicionar os elementos de cena necessários

O modelo Pipeline de Renderização Universal vem com alguns objetos de jogo que você não usará neste tutorial.

  1. Exclua todos os objetos do jogo na SampleScene.

  1. Adicionar objetos de AR Foundation. Clique com o botão direito do mouse no painel Hierarchy. Use esse menu para adicionar:
  • XR > Sessão de RA: esse objeto controla o ciclo de vida de uma experiência de RA.
  • XR > Origem da sessão de RA: esse objeto transforma coordenadas de RA em coordenadas mundiais do Unity.
  • Claro > Luz direcional: fornece uma fonte de luz para iluminar objetos do jogo.

Sua hierarquia será semelhante a esta:

  1. Expanda a Origem da sessão de RA que você criou na hierarquia e selecione o objeto AR Camera. No inspetor, altere a tag para MainCamera.

Configurar renderização

O pipeline de renderização universal do Unity precisa de uma mudança para ser compatível com o AR Foundation.

  1. No painel Projeto, navegue até Recursos > Settings para encontrar o recurso ForwardRenderer.

  1. Selecione o ForwardRenderer.
  2. No painel "Inspector", use Add Renderer feature para adicionar um recurso AR Background Renderer. Este componente renderiza o feed da câmera na sua cena.

Verifique a configuração

  1. Verifique se o dispositivo está conectado e se a depuração do adb está ativada.
  2. Clique em Arquivo > Criar e executar... Isso fará o upload do aplicativo para seu dispositivo e o iniciará quando for instalado.
  3. Você verá a transmissão da câmera na tela do seu dispositivo.

Na próxima etapa, você vai começar a adicionar funcionalidades ao app.

3. Detectar aviões no mundo real

Agora que uma cena básica foi configurada, você pode começar a desenvolver o jogo. Nesta etapa, você vai detectar aviões e desenhá-los na cena.

Adicionar um componente ARPlaneManager

Um ARPlaneManager detecta ARPlanes e cria, atualiza e remove objetos do jogo quando a compreensão do dispositivo sobre o ambiente muda.

  1. Usando o painel Hierarchy, crie um GameObject vazio.
  2. Renomeie-o como Driving Surface Manager. Esse componente vai mostrar planos até que um deles seja selecionado pelo player.
  3. Selecione o novo objeto do jogo. No painel "Inspect", clique em Add Component para adicionar um AR Plane Manager.

  1. Configure o ARPlaneManager definindo o campo Plane Prefab:
    1. Clique no botão ao lado de None para abrir a janela Select GameObject.
    2. Selecione a guia Recursos e pesquise Avião de superfície.

Este prefab do pacote inicial fornece uma textura de piso que será usada como decoração do avião.

  1. Mude o Detection Mode para Horizontal. Isso configura o ARPlaneManager para fornecer apenas planos horizontais, ideais para direção.

Adicionar um componente ARRaycastManager

Um ARRaycastManager expõe a funcionalidade raycast. Na próxima etapa, usaremos esse objeto para fornecer os controles ao usuário.

  1. Verifique se o objeto chamado Driving Surface Manager está selecionado no painel "Hierarchy".
  2. No Inspector, clique em Add Component para acrescentar um componente ARRaycastManager ao objeto do jogo.

Nenhuma outra configuração é necessária para esse componente.

Adicionar um componente DrivingSurfaceManager

Um DrivingSurfaceManager é um script auxiliar do pacote inicial que permite que um ARPlane seja selecionado. Depois que um ARPlane for selecionado, todos os outros planos ficarão ocultos, e novos planos serão desativados.

  1. Verifique se o objeto chamado Driving Surface Manager está selecionado no painel "Hierarchy".
  2. No Inspector, clique em Add Component para acrescentar um componente DrivingSurfaceManager ao objeto do jogo.

Nenhuma outra configuração é necessária para esse componente.

Executar o app

  1. Clique em Arquivo > criar e executar... para testar as mudanças.
  2. Aponte seu dispositivo para uma superfície horizontal real e mova-o para melhorar a compreensão do ARCore sobre o mundo.

  1. Quando o ARCore detectar um plano, você verá uma textura de sujeira cobrindo superfícies reais. O ARPlaneManager instancia o Plane Prefab fornecido para cada plano detectado. O prefab Driving Surface Plane tem um componente ARPlaneMeshVisualizer que cria uma malha para um determinado ARPlane.

Na próxima etapa, você vai usar um plano detectado como campo de jogo.

4. Realizar um teste de hit nos planos detectados

Na etapa anterior, você programou um aplicativo que detecta planos. Esses aviões aparecem no cenário do jogo. Agora, você vai adicionar interatividade com esses aviões, criando um retículo de mira e um carro que vai passar pela superfície do avião detectado.

Criar um retículo de mira

O esquema de controles desse app envolve o jogador apontando o smartphone para uma superfície. Para oferecer um feedback visual claro para o local designado, você usará um retículo de mira.

Para "manter" para um plano de RA, use um teste de hit. Um teste de hit é uma técnica que calcula interseções ao lançar um raio em uma determinada direção. Você vai usar um teste de hit para detectar um cruzamento na direção da visão da câmera.

Adicionar o retículo

  1. No painel Project, na parte inferior da tela, navegue até Assets > Pacote inicial.
  2. Coloque o Prefab do retículo na cena arrastando-o para o painel Hierarquia do projeto.
  3. Selecione o retículo na hierarquia.
  4. No inspetor, clique em Add Component. Adicione o script ReticleBehaviour do pacote inicial. Esse script contém um código boilerplate para controlar o retículo.
  5. O script ReticleBehaviour depende da Driving Surface Manager criada anteriormente. Portanto, clique no seletor Driving Surface Manager para adicionar a dependência. Selecione a guia Scene e escolha o Driving Surface Manager.

Editar ReticleBehaviour

O script ReticleBehavior vai posicionar o retículo no plano que está no centro da janela de visualização do dispositivo.

  1. Abra o script ReticleBehaviour.cs clicando duas vezes no campo Script.
  2. Determine o centro da tela usando o ViewToScreenPoint da câmera. Edite o método Update() para adicionar o seguinte:
var screenCenter = Camera.main.ViewportToScreenPoint(new Vector3(0.5f, 0.5f));
  1. Use este ponto para conduzir um raycast. Adicione o seguinte:
var hits = new List<ARRaycastHit>();
DrivingSurfaceManager.RaycastManager.Raycast(screenCenter, hits, TrackableType.PlaneWithinBounds);

A variável hits conterá ARRaycastHits, que descrevem pontos nos itens rastreáveis que são interseccionados por ray.

  1. Consulte a lista de hits para determinar o ponto de interseção de interesse. Priorize o plano bloqueado contido em DrivingSurfaceManager e, se ele não existir, use o primeiro hit de plano. Adicione o código abaixo ao final de Update():
CurrentPlane = null;
ARRaycastHit? hit = null;
if (hits.Length > 0)
{
    // If you don't have a locked plane already...
    var lockedPlane = DrivingSurfaceManager.LockedPlane;
    hit = lockedPlane == null
        // ... use the first hit in `hits`.
        ? hits[0]
        // Otherwise use the locked plane, if it's there.
        : hits.SingleOrDefault(x => x.trackableId == lockedPlane.trackableId);
}
  1. Se hit contiver um resultado, mova a transformação deste GameObject para a posição de hit.
if (hit.HasValue)
{
    CurrentPlane = DrivingSurfaceManager.PlaneManager.GetPlane(hit.Value.trackableId);
    // Move this reticle to the location of the hit.
    transform.position = hit.Value.pose.position;
}
Child.SetActive(CurrentPlane != null);

Testar o retículo

  1. Clique em Arquivo > criar e executar... para testar as mudanças.
  2. Quando você aponta o dispositivo para um avião, é possível ver o retículo seguir os movimentos da câmera.

Criar um carro

O jogador controlará um carrinho de brinquedo que dirigirá em direção ao local do retículo. O modelo e o comportamento do carro são fornecidos no pacote inicial.

Adicionar um CarManager à cena

  1. Em Hierarchy, crie um novo GameObject vazio.
  2. Renomeie-o como Car Spawner.
  3. Selecione o objeto criado. No painel Hierarchy, clique em Add Component para adicionar o componente CarManager.
  4. Configure as dependências de CarManager clicando no seletor de cada campo:
    • Prefab para carros: em Recursos, selecione Prefab para carros.
    • Reticle: em Scene, selecione Reticle Prefab.
    • Driving Surface Manager: em Scene, selecione Driving Surface Manager.

Esse comportamento de CarManager gera um carrinho de brinquedo no avião em que o retículo está. Se quiser, confira o script CarBehaviour para aprender como o carro é programado.

Test drive

  1. Clique em Arquivo > criar e executar para testar as mudanças.
  2. Quando você toca em um avião, um carro pequeno aparece no local. Este carro seguirá o retículo.

Adicionar o elemento do jogo

Agora que o jogador pode controlar uma entidade na cena, dê a ele um destino para dirigir.

  1. Crie um novo GameObject vazio na hierarquia.
  2. Renomeie-o como Package Spawner.
  3. Selecione o objeto criado. No painel Hierarchy, clique em Add Component para adicionar o componente PackageSpawner a ele.
  4. Configure as dependências de PackageSpawner clicando no seletor de cada campo:
    • Package Prefab: em Assets, selecione Package Prefab.
    • Driving Surface Manager, em Scene, selecione Driving Surface Manager.

Esse comportamento de PackageSpawner gera um novo pacote em um local aleatório em uma ARPlane bloqueada, se ainda não houver um pacote.

Testar o jogo

  1. Clique em Arquivo > criar e executar para testar as mudanças. 2. Depois de criar um carro, um pacote deve ser gerado.
  2. Dirija o carro até o pacote.
  3. Um novo aparecerá em um local aleatório.

5. Configurar a estimativa de iluminação

Agora que o jogo básico foi concluído, dê um toque de realismo à sua cena de RA. Nesta etapa, você vai usar a API Lighting Estimation do ARCore para detectar a iluminação presente no mundo real com base nos frames da câmera recebidos. Essas informações vão ser usadas para adaptar a iluminação da cena à realidade.

Ativar a estimativa de iluminação

  1. Em Hierarchy, abra AR Session Origin e selecione o objeto AR Camera.
  2. No Inspector, expanda o script AR Camera Manager.
  3. Mude o campo Lighting Estimation para Everything.

Modificar a luz direcional

  1. Em Hierarchy, selecione o objeto Direcional Light.
  2. Adicione o componente LightEstimation a ele. Esse componente do pacote inicial fornece um padrão para se inscrever nas mudanças de iluminação.
  3. Na função FrameReceived(), adicione:
ARLightEstimationData lightEstimation = args.lightEstimation;

if (lightEstimation.averageBrightness.HasValue)
    Light.intensity = lightEstimation.averageBrightness.Value;

if (lightEstimation.averageColorTemperature.HasValue)
    Light.colorTemperature = lightEstimation.averageColorTemperature.Value;

if (lightEstimation.colorCorrection.HasValue)
    Light.color = lightEstimation.colorCorrection.Value;

if (lightEstimation.mainLightDirection.HasValue)
    Light.transform.rotation = Quaternion.LookRotation(lightEstimation.mainLightDirection.Value);

if (lightEstimation.mainLightColor.HasValue)
    Light.color = lightEstimation.mainLightColor.Value;

if (lightEstimation.mainLightIntensityLumens.HasValue)
    Light.intensity = lightEstimation.averageMainLightBrightness.Value;

if (lightEstimation.ambientSphericalHarmonics.HasValue)
{
    RenderSettings.ambientMode = AmbientMode.Skybox;
    RenderSettings.ambientProbe = lightEstimation.ambientSphericalHarmonics.Value;
}

Testar suas alterações

  1. Clique em Arquivo > criar e executar para testar as mudanças.
  2. Ao observar os objetos na cena, você pode perceber que eles são coloridos dependendo da iluminação do ambiente.
  3. Se possível, tente mudar a iluminação. Por exemplo, tente apagar as luzes do ambiente em que você está. A iluminação dos objetos vai se adaptar à mudança na iluminação do mundo real.

6. Resumo

Parabéns! Você chegou ao final deste codelab sobre a Unity AR Foundation.

Conteúdo abordado

  • Como configurar um projeto básico usando a AR Foundation do Unity e o pipeline de renderização universal.
  • Como usar o ARPlaneManager para assinar novos aviões.
  • Como usar Raycast para encontrar interseções com geometria virtual.
  • Como usar o ARLightEstimationData para iluminar sua cena.

Próximas etapas

Atividades bônus

Se você quiser expandir o jogo que criou aqui, aqui estão algumas ideias:

  • Adicione um contador de pontuação ao jogo modificando um TextMeshPro quando um PackageManager gerar um novo pacote.
  • Confira as informações de desempenho quando o jogo estiver em execução ativando a Sobreposição de desempenho.
  • Use Raycasts persistentes para colocar novos objetos na cena primeiro. Quando um plano é detectado nessa área, o objeto é atualizado para se ajustar a esse plano.