Iniciando o desenvolvimento em realidade mista com o UrhoSharp e Hololens – Parte 02

Olá, pessoal! Tudo tranquilo?

Essa é a segunda parte de uma série de artigos onde vamos aprender sobre como iniciar o desenvolvimento de aplicações holográficas utilizando o UrhoSharp para o Hololens.

Se você perdeu a primeira parte, acesse no link abaixo:

• Iniciando o desenvolvimento em realidade mista com o UrhoSharp e Hololens

Bom, no artigo anterior vimos a estrutura básica de um projeto UrhoSharp para o Hololens, baseado no código que temos de exemplo ao criar um novo projeto utilizando o template, apenas com formas básicas e texturas simples.

Agora vamos trabalhar com um personagem animado, e dar comandos de voz utilizando a Cortana para executar as animações, e tornar essa nossa aplicação simples em um jogo no estilo Temple Run!

O modelo que utilizaremos será esse mutante abaixo, que já está disponível com várias animações pra ser baixado nos exemplos do UrhoSharp:

Modelagem 3D e utilização dos modelos em nossos hologramas

Todo o desenvolvimento de um projeto de realidade virtual/aumentada/mista, passa inevitavelmente pela criação de modelos 3D que vão representar os objetos do mundo virtual.

Para um programador, isso tudo é meio alienígena, mas calma que vamos tentar deixar isso um pouco mais simples, e nos próximos artigos nos preocuparemos com detalhes sobre ferramentas de modelagem, texturas, animações, esqueletos, física, etc. Agora vamos nos concentrar apenas em trazer um modelo pronto e utilizar no projeto.

O UrhoSharp trabalha com modelos em formato .mdl proprietário, que podem ser obtidos convertendo um arquivo .FBX (formato comum para objetos 3D) utilizando o AssetsImporter, disponível no pacote do Urho3D, ou atráves do Blender por meio de um plugin de exportação para o Urho3D.

Esse artigo mostra os detalhes para realizar essa exportação usando o Blender:

• https://blog.xamarin.com/bring-3d-models-life-augmented-reality-urhosharp/

Observação: Em um próximo artigo, vou mostrar como executar esse procedimento passo a passo para que você possa trazer seus próprios modelos e animações para o projeto.

Adicionando os arquivos necessários

Muito bem, então a primeira coisa que precisamos é dos arquivos do modelo (mdl), dos materiais (xml), texturas (jpg/png) e das animações (.ani). Vamos baixar esses arquivos já convertidos no link abaixo:

• Baixar modelo mutante

Nesse link, os arquivos já estão organizados em pastas, conforme a estrutura necessária pra funcionar no projeto:

Caso queira baixar outros modelos, esse repositório no Git possui vários exemplos prontos pra uso:

• https://github.com/Lumak/Urho3D-Assets

Vamos adicionar essa estrutura de pastas no projeto dentro da pasta Data:

E os último detalhes; o Visual Studio não vai entender logo de cara que os arquivos .ani e . mdl devem ser copiados na build, então precisamos ajustar manualmente nas propriedades:

Selecione todos os arquivos .ani e .mdl e altere o Build Action para Content:

Pronto, agora é só começar a programar:

Carregando um modelo animado

Ok. Lembra de todo aquele código que vem pronto no projeto do UrhoSharp pro Hololens que usamos no artigo anterior? Vamos apagar aquilo tudo e começar do zero no nosso Program.cs, no método Start:

Como podemos ver no código acima, é algo bastante simples. Após a inicialização, habilitar gestos e configuração da iluminação da cena, criamos o componente do personagem utilizando o tipo AnimatedModel.

Depois é só carregar nesse componente o arquivo .mdl, e definir o material para o arquivo .xml.

Um detalhe: esse arquivo .xml contém as referências sobre as texturas, e também como elas são aplicadas no modelo. Vou entrar em mais detalhes sobre isso no próximo artigo.

Compilamos, e executamos o projeto no emulador, e esse é o resultado:

Adicionando uma animação

Para adicionar as animações para o modelo, precisamos de um objeto do tipo AnimationController. Esse objeto vai ser responsável por executar uma animação (.ani) em um modelo carregado.

Logo abaixo da declaração do mutantNode, adicione a declaração do AnimationController:

• AnimationController animation

E após carregar o mutante, as seguintes linhas fazem o resto:

• animation = mutantNode.CreateComponent<AnimationController>()
• animation.Play(“Animations/Mutant_Walk.ani”, 0, true, 0.2f)

O código final:

O resultado no emulador será esse:

Adicionando comandos de voz

Carregamos os arquivos do modelo 3D, texturas e animações, depois carregamos o modelo 3D em um componente, e por fim adicionamos uma animação para esse modelo com pouquíssimas linhas de código. Agora vamos fazer algo mais legal. Vamos fazer o nosso personagem reagir a comandos de voz.

O UrhoSharp já trás um único método que faz tudo isso pra gente sem esforço:

• RegisterCortanaCommands

Esse método recebe um dictionary de actions, assim podemos criar qualquer comando que quisermos (no idioma inglês), e qual a ação que queremos executar quando a cortana entender o comando.

Então, o código fica assim:

Em resumo, quando o usuário falar por exemplo “dance”, será enviado um comando “ExecutarAnimação”, esse método ExecutarAnimação para a animação anterior e inicia a animação do arquivo “Mutant_HipHop1.ani”, indefinidamente (parâmetro true significa que é um loop).

Além disso, também temos um comando pra alterar a escala, fazendo o mutante crescer ou diminuir, e outro que executa uma action com uma animação manual que faz o mutante virar.

E o resultado é um personagem animado que reage a comandos de voz:

Mutant Run

Agora vamos utilizar isso tudo já pensando na criação de um jogo com esses recursos básicos. Imagine que queremos criar um jogo de corrida, como o Temple Run: do que precisamos?

Bom, a primeira coisa é iniciar o jogo com o mutante de costas pra nós, então vou posicionar ele dessa maneira, ajustando a rotação no eixo Y e X para que ele fique de costas para a câmera, e também um pouco inclinado de modo a criar um efeito de perspectiva. Também precisamos ajustar um pouco a escala pra que ele fique um pouco menor, e trocar a animação de andar para uma de correr.

Vamos manter apenas os comandos da Cortana que são úteis para nosso jogo, e então nosso método Start ficará da seguinte maneira:

Depois vamos criar dois métodos simples: um para criar uma animação para executar o pulo, e mais duas compostas para virar a esquerda, e outra para virar a direita, que também deslocam o personagem lateralmente:

E por fim, precisamos implementar um método OnUpdate, que irá verificar se o pulo já finalizou para voltar a correr, já que todas as animações são executadas de maneira assíncrona:

Assim, temos nosso mutante recebendo comandos para desviar à direita, à esquerda e pular:

Pronto! Agora, para termos um jogo de verdade e funcional, só falta adicionar obstáculos e detectar a colisão para quando o mutante esbarrar em algo, contar pontos, criar mecanismos diversos para pontuação, etc.

Vamos fazer exatamente isso no próximo artigo!

Até lá.