Criando um jogo em ARKit

Conheça a novidade da Apple em Realidade Aumentada

Nicholas Babo
Aug 25, 2017 · 6 min read

Na WWDC desse ano tivemos uma série de novidades interessantes anunciadas, mas uma em específico chamou a atenção de muita gente: o AR Kit! A nova biblioteca permite facilmente a criação de aplicações utilizando realidade aumentada, que consiste na mescla e interação entre objetos tridimensionais virtuais e o ambiente real.

Para começar, precisaremos da versão beta do Xcode 9 e também do iOS 11, uma vez que o AR Kit também está em versão Beta e necessita da última versão de ambos para funcionar. O download da versão beta dos dois softwares requer uma conta de desenvolvedor ativa e pode ser encontrado no link abaixo.

https://developer.apple.com/download/

Com o Xcode 9 em mãos podemos então seguir e criar um novo projeto utilizando a template para aplicativos de realidade aumentada:

O AR Kit permite a utilização do SceneKit, SpriteKit ou Metal para renderizar os objetos em cena, cada um tendo um cenário onde é mais recomendado. Nesse tutorial, iremos utilizar o SceneKit.

O template que utilizamos vem com algumas coisas importantes já configuradas:

art.scnassets
Essa pasta é o local onde devem ser colocados todos os arquivos de modelos 3D, cenas e texturas. O template já apresenta uma cena com um modelo texturizado de uma nave.

Main.storyboard
O Storyboard principal apresenta uma ViewController com uma ARSCNView ocupando toda a tela. Esse elemento é uma SceneKit View para Realidade Aumentada, permitindo o uso da imagem obtida pela câmera em conjunto com os objetos virtuais.

Info.plist
Já que utilizaremos a câmera nesse aplicativo, a lista de permissões já possui a propriedade Privacy — Camera Usage Description configurada (importante lembrar que projetos de realidade aumentada que não forem criados via esse template devem ter essa propriedade inserida manualmente)

Agora que compreendemos melhor o que temos em mãos, vamos dar início à criação do nosso jogo que servirá bem para aprender os conceitos básicos do AR Kit.

O primeiro passo no desenvolvimento do nosso jogo de caçar tubarões é achar um modelo 3D que represente um tubarão. Estarei disponibilizando um modelo gratuito e sob licença de uso não-comercial no link abaixo, mas fique à vontade para procurar um modelo que mais te agrade, se quiser.

https://free3d.com/3d-model/great-white-shark-35497.html

Precisaremos fazer uns ajustes para que o modelo do tubarão se adeque à nossa aplicação. Arraste o arquivo .dae para a pasta art.scnassets e selecione o modelo. Uma tela parecida com essa deverá aparecer:

Name: É o campo que irá servir para identificar que um node na cena é ou não um tubarão. Altere o nome do modelo para “Shark”.
Position: São os valores que determinam a posição inicial do objeto no espaço (caso a posição não seja definida programaticamente). O ponto (0;0;0), ou origem, é o local onde o usuário se encontra quando o aplicativo é inicializado. Nesse caso específico, não precisaremos definir a posição do objeto aqui.
Euler: Esse atributo define a orientação do modelo em cada eixo. Para esse modelo de tubarão em específico, precisaremos alterar o valor desse atributo no eixo x para 90 (ou o mais próximo o possível).
Scale: Define a escala em proporção às dimensões originais do modelo em cada eixo separadamente. Para esse modelo, precisaremos reduzir consideravelmente seu tamanho. Eu recomendo um valor em torno de 0,009 em todos os eixos.

Com nosso tubarão pronto para ser utilizado, precisamos então criar a classe que irá representá-lo. Crie um arquivo Swift com o nome Tubarao.swift e adicione o seguinte código:

A biblioteca ARKit serve para podermos fazer com que a classe Tubarão seja do tipo SCNNode, que nada mais é do que um objeto virtual que pode ser adicionado à uma cena. A função carregarModelo() irá tentar criar um objeto utilizando o modelo do tubarão que temos. Caso consiga, a função então cria o nodeContainer, um nó que servirá como “base” para o nó do modelo 3D. No final, a função basicamente adiciona o tubarão à cena.

Voltemos agora para a classe ViewController.swift para criar o método que irá gerar os tubarões na cena. Adicione o seguinte código na classe:

Esse método simplesmente irá carregar e adicionar um tubarão na frente da visão do jogador. Para tornar as coisas mais interessantes, vamos fazer com que o jogador tenha que realmente procurar pelo tubarão. Precisamos de um método que gere posições aleatórias:

A posição no espaço de um nó é definido aqui por um objeto do tipo SCNVector3 que dita o valor em cada eixo do objeto. Primeiro, definimos valores máximos e mínimos para os eixos X e Y, no caso, 5 e -5. Esse método para gerar números aleatórios é especialmente eficiente quando seu alcance vai desde números negativos até positivos. O arc4random_uniform irá gerar números aleatórios em um intervalo de 10 (maximo-minimo) a partir do -5 ( + mínimo) resultando em números de -5 até 5. Já para o eixo Z simplesmente geramos números aleatórios em um intervalo de 4 números, começando do -2. Essa função então retorna a posição gerada aleatoriamente para o objeto na cena. Agora precisamos chamar esse método na classe ViewController.swift, dentro do método que gera os tubarões:

O atributo position de um SCNNode é do tipo SCNVector3 e define a posição daquele nó no espaço.

Agora, vamos fazer com que ao clicar em um tubarão na cena, ele desapareça e outro tubarão seja gerado em outro lugar. Para isso, vamos usar o método touchesBegan e verificar se o toque acertou um tubarão:

Aqui fazemos os seguintes passos: Se houver um toque, será criada a variável touch para armazenar esse toque; A variável local será criada e irá armazenar a localização desse toque; A variável objetosAtingidos irá armazenar todos os objetos que foram atingidos pelo toque. Se algum desses objetos for um nó com o nome “Shark”, retiramos o nó da cena e geramos outro tubarão.

Por último, vamos configurar o inicio do jogo. Dentro do método viewDidLoad(), vamos alterar a criação da primeira cena para um construtor vazio, assim:

Já que no método viewDidAppear() é onde iremos gerar o primeiro tubarão:

Pronto, agora podemos caçar pequenos tubarões pelo mundo! Fique à vontade para adicionar complexidade ao jogo, o limite é a criatividade. Brincar com os números do gerador de posições, adicionar um contador de tubarões atingidos, gerar mais de um tubarão por vez, enfim, são diversas as possibilidades. Espero que com esse pequeno tutorial você possa ter entendido melhor os básicos da mais nova biblioteca da Apple, percebido seu potencial e se divertido um pouco também!

Apple Developer Academy | Mackenzie

Laboratório de Ensino e Pesquisa especializado em iOS / tvOS / watchOS

)

Nicholas Babo

Written by

Apple Developer Academy Ambassador and iOS Developer at Concrete Solutions

Apple Developer Academy | Mackenzie

Laboratório de Ensino e Pesquisa especializado em iOS / tvOS / watchOS

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade