SKCameraNode- Uma abordagem Sólida, Parte — 1
Introdução 🕹
Um dos elementos mais importantes nos jogos digitais é a câmera. Em jogos 2D ter uma câmera boa pode tornar a UX do seu jogo incrível. Nesse post, será abordado uma forma mais sólida de criar esse elemento para o seu jogo e utilizaremos a SKCameraNode.
Como esse assunto requer uma boa explicação, esse post será dividido em três partes. Essa primeiro será mais introdutória e teórica, a segunda e a terceira mais prática. É de extrema importância que você leia a primeira parte para entender as seguintes. O link para a segunda e a terceira parte encontra-se no final dessa postagem.
Tópicos abordados
O intuito dessa série de postagens é que no final da sua leitura você saiba:
- O que é a SKCameraNode. Parte — 1
- Como implementar uma SKCameraNode e boas práticas durante a criação. Parte — 1
- Implementando um Zoom in/out. Parte — 2
- Implementando navegação por Swipes pelo cenário. Parte — 3
O que é a SKCameraNode?
A SKCameraNode é o nó que determina qual parte da tela vai estar visível dentro em uma view, ou seja, ela é uma câmera na qual você vai determinar a perspectiva na tela, do que ela exibe e como será exibido.
Como quase tudo no Swift você pode implementar a sua câmera de várias formas diferentes, mas qual seria a melhor forma? 🤔
Bem, isso depende muito do que você está fazendo. Depois de algum tempo pesquisando e realizando alguns testes, desenvolvi uma boa forma de criar minha própria câmera e queria compartilhar com vocês esse conhecimento.
Como implementar uma SKCameraNode e boas práticas durante a criação
Como implementar uma SKCameraNode
Nesse post não utilizaremos a GameScene.sks e a Actions.sks, ou seja, faremos tudo programaticamente. Porém, você que utiliza essas ferramentas poderá aplicar os conhecimentos desse post com elas.
Para começar, baixe aqui o projeto inicial do post ou acompanhe de forma livre. No final dessa sessão será disponibilizado código completo da câmera desenvolvida, a mesma contem a licença do MIT para open soucer.
Primeiramente, criaremos uma classe do tipo SKCameraNode. Vá para a raiz do projeto e faça o seguinte caminho New File…> Cocoa Touch Class e crie a classe da forma que você desejar ou siga dessa forma:
Agora, cheque se a estrutura da sua classe está igual a abaixo, geralmente o Xcode não adiciona o import do SpriteKit, portanto acorre um erro que é corrigido adicionando o import como no exemplo:
Voltando para a classe GameScene, criaremos um objeto da classe recém criada Camera :
Se você rodar o seu projeto no simulador vai ficar algo parecido com isso:
Agora, a sua câmera já está funcionando! Ademais, vamos precisar fazer mais algumas configurações para ter um bom uso da câmera. Essa parte dessa sessão vai ser destinada para boas práticas durante a configuração da sua câmera. Essas configurações irão te ajudar durante as manipulações que iremos realizar futuramente nesse post.
Boas práticas durante a criação
Para iniciar, criei um check-list de detalhes que você deve prestar atenção durante a criação da sua câmera para que ela tenha um bom funcionamento, esses detalhes são:
- O anchorPoint da sua GameScene deve estar na mesma posição do anchorPoint do cenário( background).
- A posição inicial do seu cenário deve ser x: 0 e y: 0.
- O size da sua GameScene deve ser do mesmo tamanho do size do cenário.
- A posição inicial da câmera é arbitraria, porém se você deseja que ela esteja no início do seu Sprite a mesma deve conter o valor de x igual a metade da largura de sua tela e de y igual a metade da altura da tela.
Após a introdução dessas boas práticas você pode se perguntar o motivo de usá-las. Então, irei explicar cada uma delas:
AnchorPoint
Primeiramente, o que é o anchorPoint. Essa propriedade é responsável por determinar qual ponto dentro de seu Frame corresponde à suaposição, ou seja, onde o nó vai ficar na tela em relação ao seu sistemas de coordenadas. O mesmo pode receber valores entre 0 e 1 tanto para x quanto para y, e isso implica que o x: 0.5 e y: 0.5 é no centro do nó. Pode-se ver isso na imagem a seguir:
Alguns elementos como o SKSpriteNode e a SKScene podem ter seu anchorPoint mudado. Agora a SKCameraNode não pode ter essa propriedade mudada e sua posição é x: 0.5 e y: 0.5. Então, será necessário uma padronização de todos os anchorPoint de todos os seus nós ou apenas adicionaremos um pequeno cálculo para compensar a diferença. Nesse post iremos adotar a abordagem da compensação do anchorPoint por cálculo matemático, devido a sua facilidade e fácil compreenção.
Tendo em mente a explicação anterior, é possível entender a explicação das boas práticas:
1 — O anchorPoint da sua GameScene deve estar na mesma posição do anchorPoint do cenário( background) : Isso deve ocorrer porque como ambos são elementos diferentes e o cenário é o nó que possivelmente irá encapsular todos os outros, faz-se necessário que existam pontos em comum entre esses elementos para uma manipulação mais fácil.
2 — A posição inicial do seu cenário deve ser x: 0 e y: 0: Esse valor já é default, porém não custa nada garantir que o seu cenário vai estar na posição inicial da sua cena para facilitar os seus cálculos durante a manipulação da câmera.
3 — O size da sua GameScene deve ser do mesmo tamanho do size do cenário: Mais uma vez, assim garantimos que seus cálculos serão precisos e o sistema de coordenada da tela se adequará ao tamanho do seu cenário.
4— A posição inicial da câmera: Como explicado anteriormente, o anchorPoint da câmera é no centro do seu node, então é necessário fazer essa pequena compensação matemática durante o setter da sua posição. No caso, como queremos que sua posição seja igual ao inicio do sprite, a mesma deve conter o valor de x igual a metade da largura de sua tela e de y igual a metade da altura da tela.
Tá na hora de colocar esses conceitos em prática. Let's code!
Após todas a aplicação do check-list a sua classe GameScene deve estar da seguinte maneira:
All done! 🚀 A sua câmera já está configurada e padronizada para poder ser manipulada da forma que você quiser. A posição dela está no inicio do Sprite do cenário e se você rodar o simulador verá algo parecido com isso:
Tudo pronto para a parte 2. Você já sabe a teoria e sua câmera está configurada, agora vamos brincar um pouco com a possibilidades dessa ferramenta tão boa.
O próximo passo é a implementação do Zoom in/out (parte 2):
O terceiro passo é a navegação com Swipes, porém é necessário ler a parte 2 para entender essa:
Referências
“I am not in competition with anyone but myself. My goal is to improve myself continuously.”
— Bill Gates
