Queres saber como integrar um projeto Unity numa app mobile Android em React Native? Se a tua resposta for “ESTAVA À ESPERA QUE PERGUNTASSES. CLARO QUE SIM! 🤯”, então este artigo é para ti.

No mundo do desenvolvimento mobile, encontrar as ferramentas certas para dar vida às tuas ideias é fundamental. O React Native, com as suas capacidades multiplataforma, tornou-se uma das frameworks de eleição para construir aplicações móveis. Mas e se a tua app precisar de gráficos 3D, simulações interativas ou experiências imersivas? É aqui que o Unity, um motor de desenvolvimento de jogos poderoso e versátil, entra em cena. Neste artigo, vamos explorar, passo a passo, a integração do Unity em projetos React Native para Android, abrindo um leque enorme de possibilidades. A parte iOS ficará para um segundo artigo.
Para começar esta integração, parto do princípio que já tens algum conhecimento básico de Unity. Mas mesmo que não tenhas, este guia deverá ser suficiente para chegares lá! 💪🏼

Configurações do Unity

Para conseguirmos integrar um jogo ou cena Unity, precisamos de configurar as definições de exportação do projeto. Vamos começar por aí.

Com o projeto aberto, vai a File > Build Settings. Seleciona Android, clica em Switch Platform, aguarda o processamento e marca a opção Export Project. Deverá ficar assim:

Depois de carregar no botão Player Settings, abre-se uma nova janela. Clica em Other Settings, desmarca Auto Graphics API e adiciona OpenGL ES2 (mesmo estando descontinuado) e OpenGL ES3, clicando no (+) à direita. Logo abaixo de Color Gamut, alterei algumas definições. Podes copiar as minhas ou explorar por ti. 🙂

Se continuares a fazer scroll, encontras a secção Configuration. Aqui precisamos de ativar algumas opções. Começa por alterar o Scripting Backend de Mono para IL2CPP — isso vai permitir-te ativar mais Target Architectures. Segue a imagem abaixo. 😉

Apesar de hoje em dia existirem poucos smartphones com arquitetura x86, para minimizar qualquer risco de incompatibilidade, convém marcar todas as Target Architectures.
E assim ficam prontas as configurações de exportação.

Projeto Unity

Saindo das configurações de exportação, podes ver abaixo a hierarquia do meu projeto.

O Canvas é composto por um TextMeshPro chamado MessageFromReact (onde vamos mostrar uma mensagem recebida do lado do React Native) e um Button, que vai enviar uma mensagem a partir do Unity. Outro elemento importante é o GameManager, que associa cada elemento do canvas a um script, como verás a seguir. 😉
Com os elementos criados, é hora de trabalhar nos scripts. O primeiro vai tratar das mensagens recebidas do React Native. Fica mais ou menos assim:

Vou guardar como DataFromReact.cs, mas podes dar-lhe o nome que quiseres. Agora precisamos de um script para gerir a comunicação do lado do Unity. Para isso, crio outro script chamado ButtonBehavior.cs:

Antes de passarmos ao React Native, precisamos de associar estes scripts aos objetos do jogo. O primeiro deve ser ligado ao TextMeshPro, e o segundo ao Button. Para isso, como referi, vamos usar o GameManager.

Seleciona o GameManager no painel Hierarchy e verás um botão Add Component. Clica nele. Começa pelo script ButtonBehavior — podes usar a barra de pesquisa para o encontrar mais facilmente. Seleciona-o e está feito:

Para adicionar o script DataFromReact, repete os mesmos passos e, no campo Display Text, seleciona o elemento MessageFromReact TextMeshPro:

No final, deverá ter este aspeto:

Adicionámos os scripts ao GameManager, mas ainda precisamos de configurar a ação OnClick do botão. Para isso, seleciona o Button no painel Hierarchy e associa o script via GameManager desta forma:

Ótimo. Agora só falta exportar o projeto. Abre o Build Settings uma última vez e clica em Export!

React Native

Esta parte é relativamente direta. Algumas adições em certos ficheiros e um ecrã bastante simples. Por uma questão de simplicidade, vou colocar os estilos inline (por favor não contes aos revisores de código da LOAD 🤫).

Partindo do pressuposto de que já tens um projeto criado e a funcionar, o primeiro passo é instalar a biblioteca que torna tudo isto possível:

De seguida, precisamos de criar uma estrutura de pastas para colocar a exportação do Unity. Na diretória raiz, cria uma pasta chamada unity. Dentro dela, cria outra chamada builds e, dentro desta, cria uma pasta chamada android. Para iOS o processo é diferente, mas o projeto exportado do Unity também deve ficar dentro da pasta builds, numa pasta chamada iOS. Depois de colar o resultado da exportação do Unity na pasta android, a estrutura deve ficar assim:

De seguida, é necessário adicionar as seguintes linhas ao android/settings.gradle — o do React Native, não o da exportação do Unity:

Vai depois ao android/build.gradle e, sob os repositórios, adiciona estas linhas:

Adiciona esta linha ao android/gradle.properties:

Adiciona esta linha ao android/app/src/main/res/values/string.xml, logo abaixo do nome da app:

Na diretória unity\builds\android, cria um novo ficheiro chamado local.properties. Este ficheiro permite-nos indicar a localização do Android SDK para o projeto Unity. Coloca lá dentro o caminho para o teu SDK, algo do género:

Por último, antes de passarmos ao código, vai a /unity/builds/android/unityLibrary/src/main/AndroidManifest.xml e elimina a tag <intent-filter>.

Ao remover isto, evitamos que sejam geradas duas apps após o build — uma do React Native e outra do projeto Unity. Assim, só é gerada a app React Native, que é o que queremos.

Passando ao código React Native, começamos por criar um componente UnityAndRn e por importar os pacotes necessários. De seguida, guardamos a ref do UnityView e declaramos algum estado para o texto, a mensagem e a cor do botão:

Depois disso, preparamos um objeto para enviar ao Unity e declaramos uma função que envia essa mensagem:

A seguir a este bloco de envio, mostro um bloco para receber mensagens do Unity. A primeira função converte o objeto de cor recebido para um formato utilizável nos estilos dos componentes, e a segunda processa as mensagens recebidas do projeto Unity:

Por fim, o bloco JSX divide-se em duas metades: a superior contém uma tag de texto para mostrar a mensagem recebida do Unity, seguida de um input de texto para escrever a mensagem e um botão para enviá-la. A metade inferior contém o componente da biblioteca que importámos, onde associamos a propriedade onUnityMessage à função receiveDataFromUnity que criámos anteriormente:

E este é o resultado final do código:

E este é o resultado final!

Ao chegarmos ao fim desta integração do Unity em apps Android com React Native, fica claro que a combinação destas duas tecnologias abre portas a possibilidades muito interessantes no desenvolvimento mobile. Seja para criar um jogo, uma simulação, uma app de realidade aumentada, ou qualquer projeto que exija elementos 3D interativos, esta integração permite tirar o melhor partido dos dois mundos. A flexibilidade e a rapidez do React Native, aliadas às capacidades imersivas do Unity, criam uma sinergia poderosa que permite aos developers entregar experiências mobile cativantes e de alto desempenho.

Espero que este guia tenha sido fácil de perceber e que te tenha ajudado a alcançar o teu objetivo!

Até ao próximo, com a versão iOS 😉