Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. SpriteKit
Code

Criar Space Invaders com Swift e SpriteKit: Introdução ao SpriteKit

by
Difficulty:BeginnerLength:MediumLanguages:
This post is part of a series called Create Space Invaders with Swift and Sprite Kit.
Create Space Invaders with Swift and Sprite Kit: Implementing Classes

Portuguese (Português) translation by David Batista (you can also view the original English article)

Final product image
What You'll Be Creating

Nesta série, eu ensinarei a você como criar um jogo inspirado no Space Invaders usando SpriteKit e a linguagem de programação Swift. Ao longo do caminho, você irá aprender sobre o motor de física integrada do SpriteKit, gerar partículas usando o editor de partícula do SpriteKit, usar o acelerômetro para mover o player e muito mais. Vamos começar.

Introdução ao SpriteKit

SpriteKit é a engine de jogos 2D da Apple que foi introduzida junto com o iOS 7.  Com a introdução da linguagem de programação Swift em 2014, nunca houve um melhor momento para ser um desenvolvedor de jogos para iOS.

O SpriteKit fornece um motor de renderização construida em cima do OpenGL. Com o uso de sprites texturizados, um motor de física embutido e a poderosa classe SKAction, você pode construir rapidamente jogos 2D funcionais.

Laço de renderização

O SpriteKit, como a maioria da motores de jogos, utiliza de um laço de renderização para apresentar e atualizar a tela. O laço de renderização é composto por vários passos antes de renderizar o cenário corrente. Eles são:

  1. Atualização
  2. Avaliação de ações
  3. Simulação da física
  4. Aplicação das restrições
  5. Apresentar o cenário

Cada um deles tem um método correspondente que você pode usar para aplicar qualquer lógica adicional que precisa acontecer naquele momento dentro do frame. Especificamente, você usaria os seguintes métodos dentro do cenário.

  1. update
  2. didEvaluateActions
  3. didSimulatePhysics
  4. didApplyConstraints
  5. didFinishUpdate

Nós estamos interessados em dois desses métodos para este tutorial, update e didSimulatePhysics. Iremos usar o método update para mover os invasores manualmente e o método didSimulatePhysics para atualizar o player, o qual será controlado usando o acelerômetro e o motor de física.

SKNode

Um dos blocos de construção do framework SpriteKit é a classe SKNode. A classe SKNode não desenha nenhum ativo visual. Sua principal função é fornecer o comportamento de base que outras classes implementão. A classe SKScene é a raiz de nós em uma árvore de instâncias SKNode e é usado para manter sprites e outros conteúdos que precisam ser renderizados.

A renderização e animação é feita por uma instância de SKView que é colocada dentro de uma janela e outras views são adicionados a ele. A instância SKScene é adicionada à instância SKView. Você pode usar uma simples instância SKView em sua janela e troca entre diferentes cenários em qualquer momento.

O framework define um certo número de subclasses SKNode. O mais comum para construir um cenário é a classe SKSpriteNode. A classe SKSpriteNode pode ser desenhado tanto como um retângulo com um SKTexture desenhado sobre ele ou como uma cor ou um retângulo sem textura. Você geralmente usará sprites texturizados, porque isto é como você vai trazer seu trabalho artistico à vida em seu jogo. Confira a árvore de herança da classe SKNode para ver o quais outros tipos de nós estão disponíveis.

SKAction

A classe SKAction é o que traz sua classe SKNode à vida. Usando a classe SKAction você pode mover, rodar, dimensionar e fazer desaparecer os nós. Você também pode usar o SKAction para tocar sons e executar códigos customizados. A classe SKAction é muito poderosa e, juntamente com a classe SKnode, é um dos blocos de construção de um jogo SpriteKit.

Motor de física

O SpriteKit tem um motor de física integrado que torna a gestão de situações complexas de física em uma pequena brisa. Se você já tentou implementar um motor de física por conta própria, você apreciará este recurso.

Em SpriteKit, a coordenada (0,0) é localizada no canto inferior esquerdo da tela ao invés do canto superior direito, como você ja deve ter visto se trabalhou com Flash, Corona, HTML5 Canvas e muitos outros frameworks de jogos. Isto é porque o SpriteKit usa OpenGL nos bastidores.

Eu sugiro que você leia o Guia de Programação SpriteKit da Apple para se familiarizar melhor com os conceitos acima. Com está pequena introdução, vamos começar a construir um jogo com o SpriteKit.

1. Instalação do projeto

Abra o Xcode e escolha Create a new Xcode project ou New > Project... no menu File.

Create New Project

Certifique-se de que você está selecionando o iOS, que o tipo é Application, e que você selecionou Game como o tipo de template. Clique em Next para continuar.

Choose Project Template

Em seguida, coloque o que quiser em Product NameOrganization NameOrganization Identifier. Certifique-se que a Language está definida como SwiftGame Technology está como SpriteKitDevices está definido como iPad. Especifique um local para salvar os arquivos do projeto e clique em Create.

Choose Project Options

Se você clicar no botão rodar no topo esquerdo (ou pressionar Command-R), o Xcode irá compilar e executar seu aplicativo, mostrando o texto "Hello, World!". Quando você tocar na tela, uma imagem de uma espaçonave será adicionada e começará a rodar.

Default Game Screen Shot

2. Configuração do projeto

Selecione o projeto no Project Navigator e abra a tabela General no topo. Dentro do Deployment Info, desmarque todas as caixas de seleções, menos Portrait para Device Orientation.

Em seguida, selecione e delete GameScene.sks. O arquivo .sks permite a você configurar a parte visual do cenário. Para este projeto, nós iremos adicionar cada nó programaticamente. Abra o GameViewController.swift, delete seu conteúdo e substitua conforme abaixo.

A classe GameViewController herda da UIViewController e terá uma SKView como sua view. Dentro do método viewDidLoad, fazemos o downcast de sua propriedade view para uma instância SKView e configuramos ela.

Você deve ter percebido o texto no canto inferior direito de sua tela quando você rodou o aplicativo pela primeira vez. Isso é o que as propriedades showsFPS e showsNodeCount fazem, mostram os frames por segundo do jogo em execução e o número de SKNodes visíveis no cenário.

Se alguns do nó se mover para fora da tela, a contagem de nó cairia, mas ele ainda estaria na memória. Isto é importante de se lembrar e não deixe que a contagem dos nós te engane. Se você adicionou 100 nós à sua cena e 90 deles estão foram da tela, você ainda terá 100 nós ocupando memoria.

Para fins de otimização, a ignoresSiblingOrder está definida como true. Você pode ler mais sobre isso no Guia de Programação SpriteKit. A próxima coisa que fazemos é chamar o método presentScene da SKView e passamos o StartGameScene, que iremos criar no próximo passo.

Por último, não queremos mostra a barra de status, então retornamos true no método preferStatusBarHidden.

3. Criando StartGameScene

Passo 1: Adicionando a classe StartGameScene

Escolha New > File... no menu File e escolha Cocoa Touch Class na seção iOS > Source. Clique em Next para continuar.

Create new Class

Em seguida, nomeie a classe StartGameScene e certifique-se de que ele herde de SKScene. Language deverá ser definida como Swift. Clique em Next para continuar.

Informe ao Xcode onde você gostaria de salvar o arquivo para a nova classe e clique em Create. Adicione o seguinte código em StartGameScene.swift.

O método didMoveToView(_:) é chamado imediatamente após a cenário ser apresentado pela view. Em geral, este é o lugar onde você irá configurar sua cenário e criar seus ativos.

Se você testar o jogo agora, você deverá ser apresentado a uma tela preta que mostra a taxa de frame e o número de nós no conto inferior direito da tela.

Passo 2: Adicionando startGameButton

Não é legal olhar para uma tela preta, por isso vamos criar nossa primeira instância SKSpriteNode. Atualize o método didMoveToView(_:) como mostrado abaixo.

Nós declaramos uma constante startGameButton usando o inicializador por conveniência init(imageNamed:), que recebe como argumento o nome da imagem. Vamos centraliza-la na tela horizontalmente e verticalmente, exceto que vamos subtrair 100 pontos para colocá-lo um pouco fora do centro no eixo vertical. Definimos sua propriedade name para startgame, então podemos nos referir a ela mais tarde. Em seguida, nós adicionamos ele no cenário chamando addChild(_:), que recebe como argumento o nó para adiciona-lo ao cenário. Você pode aprender mais sobre a classe SKSpriteNode em Referência do Framework SpriteKit.

Agora seria uma boa hora para adicionar a imagem ao projeto. Baixe os arquivos fonte deste tutorial e procure pela pasta chamada images. Arraste-a para a pasta que tem o nome qualquer que você nomeou seu projeto, por exemplo, MobileTutsInvaderz. Certifique-se que Copy items if needed está marcado, bem como o alvo principal na lista de alvos.

Adding Images Folder

Se você testar seu aplicativo, você irá ver um botão etiquetado "New Game".

New Game Button

Passo 3: Implementando touchesBegan

Em seguida, nós precisamos implementar o método touchesBegan(_:withEvent:). Sua implementação é como mostrada a seguir. O método touchesBegan é chamada quando um ou mais dedo toca a tela.

A propriedade multiTouchEnabled da view do cenário está definida como false por padrão, o que significa que a view recebe apenas o primeiro toque de uma sequência de múltiplos toques. Com essa propriedade desabilitada, você pode recuperar o toque chamando AnyObject no Set touches, uma vez que existe apenas um objeto dentro do Set. 

Nós armazenamos a localização do toque no cenário em uma constante chamada touchLocation. Nós fazemos isso chamando locationInNode(_:) no objeto touch, passando o cenário. Então descobriremos qual nó foi tocado, chamando nodeAtPoint, passando a localização do toque. Com este nó touchNode encontrado, podemos verificar a propriedade name e se for igual ao startgame, sabemos que o botão foi tocado.

Se o usuário tocar o botão, instanciamos a classe GameScene e definimos seu scaleMode para ter a mesma escala da cena corrente. Nós então, criamos um SKTransition chamada transitionType e mostramos a cena chamanda presentScene(_:transition:) passando o gameOverScene e o transitionType.

Existem muitos tipos de SKTransistion para escolher. Você pode ler mais sobre eles em Referência do Framework SpriteKit. Sugiro que você experimente alguns e veja quais você mais gosta.

Se você testar seu aplicativo, você pode tocar no botão, que incluímos em sua GameScene. Esta é a mesma cena que o projeto inicialmente começou.

Conclusão

Isto leva a primeira parte desta série ao fim. Você teve uma introdução ao SpriteKit e aprendeu como criar cenários personalizados, usar a classe SKSpriteNode e detectar toques. Isto é apenas o começo, ainda temos muito a aprender. Obrigado pela leitura e vejo vocês na próxima parte desta serie.

Seja o primeiro a saber sobre novas traduções–siga @tutsplus_pt no Twitter!

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.