Animações Cíclicas em SpriteKit usando Texture Atlas

Produzir um jogo para iOS usando SpriteKit requer trabalhar muito bem com os assets (recursos audiovisuais) do projeto. Este artigo tem como objetivo apresentar brevemente o processo de criação de animações cíclicas em SpriteKit.

Recursos para o projeto: http://pedrocacique.com/medium/cycle_images_monster.zip

Para este exemplo, criei um projeto no XCode, usando o template para Games, com Spritekit. Como daremos foco apenas na animação, limpei um pouco o projeto da seguinte forma:

• No arquivo GameScene.sks apaguei a label padrão (“Hello World”) e alterei a cor do fundo da cena.
• No arquivo GameScene.swift, deixei apenas os métodos relacionados ao touch, para criarmos um novo objeto com o toque na tela. O arquivo ficou assim:

Por fim, adicionei a imagem inicial do personagem nos assets do projeto, como mostra a Figura 1:

Figura 1 — Asstes.xcassets

O próximo passo então é criar um novo objeto usando o toque na tela para determinar sua posição.

Para adicionarmos um elemento em cena, usamos um objeto do tipo SKSpriteNode. Com ele nós podemos trabalhar a visualização de um asset e suas propriedades físicas no jogo.

Você pode criar um objeto passando o nome da sua imagem, assim:

Observe que nós apenas criamos um objeto estático na cena da forma mais simples possível. Devemos começar a definir as suas propriedades.

Para o nosso projeto, adicionaremos a criação do SKSpriteNode, no método touchDown, recuperando a posição do toque e atribuindo o seu valor à posição do objeto antes de o adicionarmos na cena, desta forma:

Rode o projeto e você terá algo como na Figura 2, em que um objeto é adicionado na posição do toque.

Figura 2 — Adicionando Objetos em cena

Perceba que o objeto foi criado quando existe algum toque na cena. Assim, se você tocar várias vezes, ou com vários toques simultâneos, vários elementos serão criados.

Criando Animações Cíclicas

A animação, em sua origem, é a troca constante de imagens para dar a ilusão do movimento. Assim, se você quer animar um olho piscando, por exemplo, você pode criar uma série de imagens, com os olhos abertos, depois semicerrados e por fim fechados, como mostra a Figura 3.

Figura 3— Olhos piscando

Se atribuirmos a primeira imagem ao objeto e trocarmos para as outras rapidamente, teremos a ilusão do movimento. Este processo pode ser feito de diversas formas, como trocando as texturas do objeto ou criando um spritesheet (imagem única com todas as poses da animação), por exemplo. Entretanto, o framework possui uma forma simplificada que é o Texture Atlas.

Texture Atlas é uma coleção de imagens que representa as poses de um objeto, que podem ser alteradas via código. o processo começa com a criação de uma pasta que contenha todas as imagens numeradas sequencialmente.

Depois de ter desenhado as poses da sua animação, navegue até a pasta Assets.xcassets do seu projeto e adicione um novo Sprite Atlas (pasta com as imagens necessárias para a criação do Texture Atlas), como mostra a Figura 4.

Figura 4 — Adicionando um Sprite Atlas

Em seguida, renomeie a pasta criada e importe as imagens para ela. Simplesmente arraste-a do finder para o projeto como mostra a Figura 5.

Figura 5 — Sprite Atlas

Lembre-se de renomear a pasta e conferir se os sprites foram adicionados corretamente.

Pronto! O seu projeto já reconhece as imagens como um atlas de animação. Precisamos criar então a rotina para disparar a animação:

Neste código, criamos um método chamado createTexture, que recebe o nome do atlas e retorna um array de texturas. O primeiro passo é criar um objeto do tipo SKTextureAtlas, com o nome desejado. Na sequência, criamos um array chamado frames, que receberá a lista de texturas contidas no atlas. em seguida, criamos um loop que percorre a propriedade textureNames (uma lista com os nomes das imagens na pasta), adicionando ao array cada uma das texturas.

Este é o primeiro passo para a animação: reconhecer as imagens e criar uma lista de texturas. Por fim, precisamos criar uma ação que repetirá por tempo indeterminado a troca da textura do objeto.

O código acima foi inserido no método touchDown, criado anteriormente, logo após adicionarmos o personagem na cena.

Observe que criamos a lista de texturas com o nome do grupo criado para o Texture Atlas. Na sequência, criamos uma ação que se repete “para sempre”, trocando os frames a uma certa taxa de quadros por segundo. Experimente os valores de tempo por quadro para obter o efeito desejado.

Você deve ter percebido que o personagem ficou piscando rapidamente, sem intervalo. Podemos melhorar a animação, adicionando intervalos entre uma piscada e outra. Para isso, em vez de rodarmos uma única ação, rodaremos uma sequência, composta pela ação principal e outra ação que mantém apenas a textura do olho aberto por um tempo maior. Teremos então algo assim:

Veja que criamos a animação 1 com o array inteiro, com taxa de 0.1s por quadro, enquanto que a animação 2 contém apenas a primeira imagem, por 2s. Criamos então uma sequência de animações e mandamos repetir em um loop infinito.

Pronto! Temos a nossa animação completa. Seja criativo ao criar os mapas de texturas para suas animações. No nosso projeto movemos apenas o olho do personagem, mas uma animação deve sempre considerar todo o movimento do personagem.

Você deve ainda levar em consideração criar este código na classe de seu personagem, e não na cena principal, obedecendo assim uma arquitetura melhor para o projeto, separando as funcionalidades de cada classe!