SpriteKit From Scratch: Fundamentos

Introdução

O SpriteKit, disponível no iOS, tvOS e OS X, é um framework que permite aos desenvolvedores criar jogos 2D de alta qualidade sem se preocupar com as complexidades das APIs gráficas, tais como OpenGL e Metal. Além de lidar com todos os gráficos para os desenvolvedores, o SpriteKit também oferece uma grande quantidade de funcionalidades extras, incluindo simulação de física, tocador de audio/video e salvar/carregar jogos.

Ao longo desta série, você aprenderá tudo sobre o SpriteKit e ganhará habilidades, que você pode aplicar a qualquer tipo de jogo 2D construído com este excelente framework. Nesta série, criaremos um jogo totalmente funcional em que o jogador controla um carro que deve evitar obstaculos que aparecem em seu caminho. 

Pré-requisitos

Para esta série você precisa estar executando o Xcode 7.3 ou maior, que inclui suporte ao Swift 2.2 assim como aos SDKs para iOS 9.3, tvOs 9.2 e OS X 10.11.5. Você também precisa baixar o projeto inicial no GitHub, que contém os recursos visuais que serão usados no jogo e algumas linhas de código para nos ajudar a começar.

As imagens usados para o jogo nesta série podem ser encontradas no GraphicRiver. O GraphicRiver é uma ótima fonte para procurar trabalhos artísticos e imagens para seus jogos.

1. Cenas, nós e views

Cenas

A primeira classe que você precisa estar atento quando trabalhar com o SpriteKit é a classe SKScene. Para qualquer jogo 2D criado com SpriteKit, você divide o conteúdo do jogo em múltiplas cenas, cada uma com sua própria classe SKScene.

Apesar de que iremos olhar a funcionalidade e o funcionamento interno da classe SKScene mais tarde nesta série, o que você precisa saber agora é que uma cena é o que você adiciona o conteúdo do jogo e ela age como o nó raiz. Isso nos leva aos nós.

Nós (Sprites)

A classe SKNode, que é uma subclasse da SKScene, é usada para representar qualquer item em sua cena. Apesar de haver vários tipos diferentes de nós disponíveis no SpriteKit, normalmente chamados de sprites, eles compartilham as mesmas propriedades principais, sendo as mais importantes:

• position (CGPoint)
• xScale (CGFloat): representa a escala horizontal de um nó
• yScale (CGFloat): similar ao xScale, mas ela representa a escala vertical
• alpha (CGFloat): representa a transparência do nó
• hidden (Bool): valor que determina se o nó é ou não visível
• zRotation (CGFloat): representa o angulo, em radianos, que o nó deve ser rodado
• zPosition (CGFloat): usado para determinar qual nó tem prioridade de exibição sobre os outros nós na cena

Como você pode ver, as propriedades acima permitem que você posicione, rotacione e edite com precisão a aparência básica de cada nó na cena.

Como você pode adicionar subviews a qualquer objeto UIView no UIKit, no SpriteKit você pode adicionar vários nós filhos a um nó existente. Isso é feito usando o método addChild(_:) em qualquer objeto SKNode.

Também similar aos objetos UIView, as propriedades position e scale de todo nó filho é baseada em seu nó pai. Isto é como um objeto SKScene, sendo uma subclasse da SKNode, pode atuar como nó raiz de sua cena. Para todos os nós que você quiser em sua cena, você precisa adiciona-los como filhos da sua cena usando o método addChield(_:).

A classe SKNode em si, não é capaz de criar todo conteúdo visual. Para isso, você deve usar alguma das muitas subclasses disponíveis no SpriteKit. Alguns subclasses SKNode importantes a ter em mãos são:

• SKSpriteNode: recebe uma imagem e cria um sprite texturizado em sua cena
• SKCameraNode: controla de onde sua cena é exibida
• SKLabelNode: renderiza uma string de texto
• SKEmitterNode: usada em conjunto com o sistema de partícula para renderizar partículas de efeitos 
• SKLightNode: cria efeitos de luz e sombra em sua cena

Ao longo desta série, usaremos esses tipos de nós, bem como alguns outros menos comuns.

Views

Para exibir seu conteúdo no SpriteKit dentro de um aplicativo, você precisa usar a classe SKView. Ela é uma subclasse da UIView (ou NSView no OS X), que pode ser adicionada facilmente em qualquer parte do seu aplicativo. Para apresentar uma cena no SpriteKit, você precisa chamar o método presentScene(_:) ou o presentScene(_:transition:) em uma instância SKView. O segundo método é usado quando você quiser personalizar uma animação ou transição entre seu novo cenário.

Além de apenas renderizar o seu conteúdo no SpriteKit, a classe SKView também oferece algumas funcionalidades extras e muito úteis. Isso inclui a propriedade Bool chamada paused, que pode facilmente ser usada para pausar ou retomar uma cena.

Há também várias propriedades que são úteis quando você debuga seu jogo e pode exibir informações, tais como o FPS atual (quadros por segundo), quantidade de nós e campos de física dentro do seu cenário. Se você quer dar uma olhada em todas as propriedades disponíveis, de uma olhada no SKView class reference.

2. Editor de cena

Agora que demos uma olhada nas classes básicas usadas nos jogos SpriteKit, é hora de criar nossa primeira cena. Apesar das cenas poderem ser criadas inteiramente via programação, o Xcode fornece uma excelente ferramenta de edição de cena, que lhe permite arrastar e soltar facilmente nós em sua cena enquanto edita posição, aparência e outras propriedades.

Abra o projeto inicial e crie um novo arquivo pressionando Command+N ou selecionando New > File... no menu File do Xcode. Escolha o tipo do arquivo, iOS > Resource > SpriteKit Scene e clique em Next.

Nomeie o arquivo de MainScene e o salve. Você deve ver agora seu novo arquivo de cena no Project Navigator.

Selecione o MainScene.sks para abrir o editor de cena no Xcode. Até o momento, sua cena está em branco e tem um fundo cinza. Ainda não há nós. Antes de adicionar alguns sprites a sua cena, precisamos primeiro alterar seu tamanho.

No Attibutes Inspector à direita, altere o tamanho da cena para uma largura (W) de 320 pontos e uma altura (H) de 480 pontos.

Este tamanho de cena se correlaciona ao menor tamanho de tela que estamos focando (3.5" do iPhone 4s) para que possamos utilizar os nossos nós corretamente. Iremos alterar o tamanho da cena para se adaptar ao tamanho da tela do dispositivo em uso em um tutorial futuro.

Para adicionar nós à sua cena, abra a Object Library na direita. Você pode precisar clicar no ícone destacado em azul, se a Object Library não estiver visível. 

Da Object Library, arraste um Color Sprite para o meio da sua cena.

Abra o Attributes Inspector na direita e altere os atributos Texture, Position e Size para os valores a seguir:

Agora você deve ter um carro no meio da sua cena, como mostrado abaixo.

Perceba que, diferente do sistema de coordenadas do UIKit, a position de um nó sempre referência o seu centro a partir do canto inferior esquerdo da cena (0,0). Por isso que a configuração da posição (160,120) do carro coloca o centro do mesmo a 160 pontos da esquerda e 120 pontos a partir do fundo da tela.

3. Exibindo uma Cena

Com sua cena completa, abra o ViewController.swift e adicione uma instrução de importação para o framework SpritKit na parte de cima. Isso nos permite usar as classes e APIs do SpriteKit no ViewController.swift.

1

import UIKit

2

import SpriteKit

Em seguida, atualiza a implementação do método viewDidLoad() da classe ViewController conforme abaixo:

1

override func viewDidLoad() {

2

    super.viewDidLoad()

3

4

    let skView = SKView(frame: self.view.frame)

5

    let scene = SKScene(fileNamed: "MainScene")

6

    skView.presentScene(scene)

7

    view.addSubview(skView)

8

}

Com este código, criamos primeiro uma instância SKView com o mesmo tamanho que a view da view controller. Em seguida, carregamos a cena do arquivo que criamos usando o inicializador SKScene(fileNamed:). Fazemos a instância SKView apresentar esta cena e então adicionamos ela como uma subview da view principal.

Selecione o simulador iPhone 4s (para que nossa cena se ajuste corretamente ao tamanho da tela) e compile e execute seu aplicativo. Você deve ver uma tela parecida com a seguinte:

Conclusão

Neste primeiro tutorial do SpriteKit From Scratch, você aprendeu o básico de views, cenas e nós no SpriteKit. Você criou uma cena básica com um sprite usando o editor de cena do Xcode, que torna a criação de cenas muito simples se comparado em fazer tudo via programação.

No próximo tutorial, vamos adicionar mais funcionalidades ao nosso jogo usando as ações do SpriteKit para mover o carro pela cena. Você também será apresentado ao simulador de física do SpriteKit, detectando quando o carro colide com outro nó.

Como sempre, deixe seus comentários e feedback nos comentários na seção abaixo.

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