Movimentação top down de personagens utilizando SpriteKit para tvOS
Introdução
Recentemente, enquanto desenvolvia um jogo para tvOS com alguns amigos, precisei implementar o movimento do personagem, a partir de uma visão top down. Durante a implementação dessa movimentação, encontrei algumas dificuldades, por isso resolvi escrever esse breve artigo, espero que ele possa te ajudar.
O projeto
A ideia para esse projeto é implementar a movimentação de um bote, em relação a uma vista de cima para baixo (2D).
No final do artigo, você vai conseguir implementar esse bote, abaixo:
Criando o projeto base no Xcode
Antes começar, esse artigo não tem o objetivo de explicar todo passo a passo para criar um novo projeto no Xcode. Então, a partir de agora, vou supor que você já está familiarizado com a interface do Xcode.
Para facilitar o desenvolvimento, vou criar um novo projeto com um template de tvOS e Game, a linguagem com Swift, e a tecnologia do jogo como SpriteKit.
Então, se você rodar o projeto agora, vai notar que ele já tem uma label “Hello, World!” e também algumas interações com o touch do controle (para utilizar o touch do controle você precisa está pressionando a tecla option).
Preparando o projeto base
Contudo, para o projeto do bote não vamos precisar desses elementos, que já vêm inclusos dentro do template. Então, vamos fazer uma "faxina" no nosso projeto, removendo todos os elementos e linhas de códigos que não vamos utilizar.
Inicialmente, vá até o arquivo GameScene.sks e delete a label helloLabel:
Depois, vá para o arquivo GameScene.swift, e remova todas as linhas de código desnecessárias, até que seu código fiquei idêntico ao código abaixo:
Adicionando o bote
Agora que já temos um projeto base bem organizado, podemos começar de fato. Então, vamos começar adicionando o bote, aqui eu tenho uma dica importante, para que posteriormente a rotação do bote fique de forma adequada, é necessário ter uma imagem onde a direção do bote está apontando para a direita, pois o ângulo 0º fica à direita do circo trigonométrico.
Para o bote do projeto, eu peguei uma imagem gratuita no site flaticon (clique aqui para baixar a mesma imagem), depois rotacionei ela (coma ajuda do Figma) para que ficasse atendendo a condição em relação a direção do bote, ficando desse jeito:
Depois de baixar a imagem e rotaciona-la, é só adiciona-la na pasta Assets.xcassets:
Então, agora temos que adicionar o bote na cena em si, para isso vá até o arquivo GameScene.swift e adicione uma variável global opcional com o nome de boat do tipo SKSpriteNode. Depois, vou configurar e adicionar o bote a cena, dessa forma:
Adicionando movimento ao bote
Agora que já temos o bote na scene, podemos movimenta-lo. Para isso, vamos usar a funcão touchesMoved, essa função já vem pré-configurada para ser chamada toda vez que usuário mexe no touch do controle, além disso ela vem com um informação muito útil para gente, que é um array de toques (touches: Set<UITouch>), esse por sua vez, descreve o movimento que o usuário fez no touch do controle.
Como isso, se você observar vai ver que a função touchesMoved já tem um laço de repetição for, ele serve para a gente conseguir tratar todos os toques separadamente, é dentro desse for que vamos atualizar constantemente a posição do bote, pegando a localização de cada ponto e adicionando a posição atual do bote, da seguinte forma:
Se você prestou atenção no escopo do laço de repetição, deve ter ficado um pouco intrigado com a presença da variável self.lastPosition.
Pois bem, tenho uma observação importante para essa parte do projeto. Os movimentos que fazemos no touch do controle, sempre são mapeados começando da posição central da tela, então precisamos garantir que as coordenadas para os movimentos estão utilizando a posição do personagem como base. Para isso, estou utilizando uma variável global (lastPosition) que sempre salva a última posição do personagem, toda vez que o movimento é finalizado, dessa forma:
Além disso, a váriavel lastPosition ainda vai ser útil na hora de rotacionar o bote, como você verá a seguir.
Adicionando rotação ao bote
Para finalizar, precisamos adicionar a rotação ao bote, para isso vamos ter que adicionar mais algumas linhas de código na função touchesMoved.
Então, para realizar a rotação temos que pegar o ângulo, em radianos, que queremos rotacionar o bote, da seguinte maneira:
Depois disso, temos o ângulo da rotação em radianos, então só precisamos configurar uma ação de rotação, assim:
Após adicionar essas linhas de código sua função touchesMoved.swift deve ficar assim:
Conclusão
Por fim, você pode baixar o projeto pronto direto do meu GitHub, é só clicar aqui. Espero ter ajudado, até a próxima.
