SKCameraNode- Uma abordagem Sólida, Parte — 2
Retornando💫
No tópico anterior vimos: conceitos básicos, boas práticas e como criar uma SKCameraNode. Se você já o leu, pode se aventurar em criar novas perspectivas para a sua câmera. Agora, se você é navegante de primeira viagem e veio parar nessa postagem. É de extrema importância que você leia a postagem anterior para entender os aspectos abordados nessa. O link para todos os posts dessa série se encontram no final.
Tópicos abordados
Nessa postagem vamos abordar uma formas diferentes de trabalhar com a SKCameraNode:
- Implementando um Zoom in/out.
O que é a preciso saber antes da implementação?
Primeiramente, a sua câmera vai ficar responsável pela seus própria manipulação, ou seja, ela será sólida. A lógica do Zoom in/out e os Swipes( parte — 3) serão implementas dentro da classe e as demais só chamarão métodos públicos.
Vale ressaltar também que , a estrutura da sua GameScene deve estar bem organizada. Eventualmente, se esquecermos de organiza-la, quando começarmos a manipulação com o cenário os itens que não forem filho do cenário não serão manipulados.
Portanto, para realizar a manipulação da forma correta, é necessário adicionar todos os elementos como filhos do cenário e apenas o cenário e a câmera serem filhos da sua GameScene. Por fim, a estrutura descrita anteriormente pode ser vista no seguinte diagrama:
Implementações
Implementação padrão
De inicio, para um funcionamento padrão da sua câmera, precisamos de 2 elementos principais: a View da GameScene e o Cenário. Então, precisamos saber a View da GameScene para adicionar os Gestures para o zoom e o Cenário para aplicar as manipulações.
Fora esse elementos, precisamos de mais alguns outros:
- Uma variável para guardar os Limites da tela do iPhone.
- Uma variável de controle para guardar o os Limites do Cenário.
- Uma Variável de controle para saber se a câmera está habilitada.
- Uma variável de controle para habilitar até onde o usuário pode ir (travamento).
A estrutura da classe deve ficar da seguinte forma:
A variável enableClamping é necessária para habilitar e desabilitar a lógica de travar a câmera do usuário quando ele tentar passar dos limites da tela.
Implementando um Zoom in/out
Ademais, depois da configuração padrão, para o funcionamento do Zoom in/out precisamos de variáveis para:
- O valor atual da escala do zoom.
- O mínimo e o máximo possível para o zoom.
- A posição inicial do toque do usuário.
- Uma variável de controle para saber se o zoom está habilitado.
- O pinch gesture recogniser para o zoom da câmera.
Após a edição, a estrutura da classe deve ficar da seguinte forma:
Aproveitando a deixa da variável computada cameraHabilitada, quando a mesma for chamada e dependendo do seu valor o pinch gesture recogniser será habilitado ou não.
Portanto, a sua classe já está configurada para a implementação da lógica do Zoom in/out. Agora, vamos precisar implementar algumas funções para o funcionamento da câmera, essas são:
1 — Função applyZoomScale: Responsável por aplicar a escala ao Cenário.
2 — Função clampWorldNode: Responsável por mandar manter o Cenário preso entre bordas específicas, ou seja, determina a área que o usuário pode interagir.
3 — Função centerOnPosition: Responsável por atribuir uma nova posição a câmera e verificar e chamar a função que verifica se essa posição é válida.
4 — Função updateScale : Responsável por escalar o cenário utilizando input do pinch gesture recogniser
ApplyZoomScale
Essa é uma da funções mais simples. Ela recebe como parâmetro uma valor de escala e verifica se esse valor está dentro do intervalo determinado na variável zoomRange. Após isso, um valor é atribuído a escala da câmera. A implementação dessa função fica de seguinte forma:
ClampWorldNode
Já essa função é responsável por manter o cenário preso a uma determinada borda, para evitar que a câmera saia da área de iteração do usuário. Nessa função precisamos verificar:
- Se a função está habilitada.
- Realizar cálculos para saber o max e min da tela.
- Verificar se o cenário é menor que o tamanho da View.
- Verificar a posição do usuário e se ela está respeitando os limites.
A implementação dessa função ficará da seguinte forma:
CenterOnPosition
Agora, essa função é responsável por atualizar a posição da câmera e chamar ClampWorldNode para verificar se essa nova posição é válida. Portanto, essa função é curta mas necessária. Sua implementação é da seguinte forma:
UpdateScale
Por fim, essa função é responsável por coletar os dados do pinch gesture recogniser e utiliza-los para:
Após a implementação dessas funções, é preciso habilitar o target do pinch gesture recogniser. Portanto, volte ao init da classe câmera e adicione o seguinte techo de código:
Pronto, o seu zoom já está funcionando 🥰, vamos ver o resultado :
Teste seus limites e mude o código, não posso garantir que ele se adequará a todas as situações que você pretende enfentar. Porém, já é uma boa ajuda. O código da sua câmera deve estar assim:
O código completo desse post pode ser encontrado no repositório:
O próximo passo é a navegação com Swipes. O link para é :
O link para da Conceitos sobre SKCameraNode é:
Referências
“Nothing is impossible,” the word itself says 'I'm possible'.
— Audrey Hepburn
