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

SpriteKit From Scratch: Restrições e actions

by
Difficulty:IntermediateLength:MediumLanguages:
This post is part of a series called SpriteKit From Scratch.
SpriteKit From Scratch: Fundamentals
SpriteKit From Scratch: Physics and Collisions

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

Introdução

Neste tutorial, a segunda edição do SpriteKit from Scratch, você aprenderá sobre restrições e actions. Estes recursos são usados para facilitar a adição de movimento e animações em seu jogo no SpriteKit enquanto limita a posição e orientação dos nós no jogo.

Para me seguir durante o tutorial, você pode usar o projeto que criou no primeiro tutorial desta série ou baixar uma nova cópia no GitHub.

1. Nó personalizado e Classes Scene

Antes de podermos adicionar restrições e actions a uma cena, primeiro precisamos criar algumas classes para que possamos trabalhar com nossos nós no código. Crie uma nova classe, PlayerNode, baseada no template iOS > Source > Cocoa Touch Class e certifique-se que ela seja uma subclasse da SKSpriteNode.

PlayerNode Class

Se o Xcode lançar um erro após criar a classe, adicione uma instrução de importação do framework SpriteKit abaixo da instrução import UIKit.

Em seguida, declare as três propriedades abaixo na classe PlayerNode. Estas propriedades manterão as restrições usadas para limitar o movimento horizontal do carro.

Crie outra Classe Cocoa Touch e a chame de MainScene, tornando ela uma subclasse da SKScene.

MainScene Class

Na parte superior, adicione uma instrução de importação para o framework SpriteKit.

Com essas classes criadas, abra a MainScene.sks, clique no fundo cinza e selecione a cena, abra o Custom Class Inspector na direita e atribua MainScene para o Custom Class.

MainScene Custom Class

Selecione o carro e defina a ele a classe PlayerNode da mesma forma que você fez para a cena. Por fim, com o carro ainda selecionado, abra o Attributes Inspector e altere o Name para Player.

Player Sprite Name

Agora que temos as classes básicas configuradas, podemos começar criando algumas restrições no código.

2. Restrições

As restrições no SpriteKit são representadas pela classe SKConstraint e são usadas para limitar a posição e a orientação de nós específicos. A uma grande variedade de coisas que pode ser conseguida com restrições já que elas podem ser relacionadas a cena ou a outros nós. Restrições também funcionam com intervalos de valores, além de valores constantes para que os sprites dentro de sua cena possam ser fixados em um local específico ou permitir que se movam dentro de uma determinada área.

Vamos estar adicionando três restrições na classe PlayerNode. Estas restrições serão usadas para travar o carro nas três pistas no jogo.

Abra o MainScene.swift e crie uma propriedade para o jogador do tipo PlayerNode!. Esta propriedade armazenará uma referência do nó do jogador.

Em seguida, sobrepomos o método didMoveToView(_:) da classe MainScene:

Vamos percorrer o código passo a passo. O método didMoveToView(_:) é chamado sempre que a cena for apresentada por uma view. Após chamar o método didMoveToView(_:) da superclasse, redimensionamos a cena para o mesmo tamanho da view atual. Isso garante que a cena sempre se estenda devidamente ao tamanho e dimensão da tela do dispositivo atual.

Acessamos o sprite do jogador que adicionamos no editor de cena do Xcode, procurando por ele pelo nome que demos anteriormente. Então atribuímos este valor para a propriedade player.

Após calcular o centro da cena e especificar uma restrição diferente de 70.0, criamos as restrições do sprite. Usando o método de classe positionX(_:) da classe SKConstraint, criamos as restrições da esquerda, meio e direita para o sprite do jogador. Este método requer uma instância SKRange como parâmetro que, no nosso caso, é um range com um valor constante. Se você quer dar uma olhada nas restrições e intervalos possíveis em SpriteKit, eu recomento dar uma olhada na referência das classes SKRange e SKConstraint.

Desabilitamos as restrições da esquerda e da direita, pois não queremos que elas atuem quando o jogo começar. Por último, atribuímos estas restrições á propriedade constraints do nó do jogador. Esta propriedade é definida na classe SKNode.

Compile e rode seu jogo em qualquer simulador ou dispositivo fisico. Você poderá ver agora que a sua cena está dimensionada corretamente com o carro centralizado na parte inferior.

Centered Car in Scene

Você pode ver que o carro está restringido ao centro horizontal da cena e é capaz de ser restringido nas pistas da direita e da esquerda uma vez que adicionarmos algum movimento ao jogo.

2. Actions

Actions em SpriteKit são representadas pela poderosa classe SKAction. As actions nos permitem animar e mover facilmente os sprites em uma cena. Elas são executadas por nós e calculadas pelas APIs do SpriteKit e funcionam ao lado das restrições e simulações de física.

Além de especificar o que uma action faz, você também pode configurar e programar como a action funciona. Você pode, por exemplo, pausar e retomar uma action ou configurar um comportamento ateanuado da action. Isto dá um maior grau de controle para que você possa facilmente acelerar ou desacelerar determinadas actions para produzir alguns elementos de jogabilidade interessantes.

Da mesma forma que os nós podem ter nós filhos, existem três tipos de actions que podem ter actions filhas:

  • sequence actions, que executa um array de actions, uma após a outra
  • group actions, que executa um array de actions, todas de uma vez
  • repeating actions, que repete uma única action por uma quantidade de vezes ou indefinitivamente

Você pode criar actions via programação ou no editor de cena do Xcode, que foi usado no tutorial anterior. Vamos usar ambas as técnicas neste tutorial.

Abra o MainScene.sks e clique no ícone próximo ao botão Animate na parte inferior esquerdo da cena para abrir o Action Editor View.

Open Action Editor View
Action Editor View

Em seguida, navegue para o final do Object Library na direita e ache o item Move Action. Clique e arraste ele para a timeline do Action Editor View e o coloque no canto esquerdo como mostrado abaixo.

Add Action to Timeline

Isso faz com que a action comece a execução no 0:00, isso é, quando a cena for apresentada. Se coloca-la em outro lugar, a action começará a execução após o intervalo de tempo mostrado na parte superior da timeline.

Passe o mouse sobre a action e clique no ícone pequeno de seta no canto inferior esquerdo. Um popup irá aparecer, clique no botão infinity na esquerda. Isso faz com que a action se repita para sempre.

Repeating Move Action Forever

Com a action ainda selecionada, abra o Attributes Inspector na direita e altere o valor do Y Offset para 100.

Set Y Offset Value

Os outros valores especificam que o carro começará a animação imediatamente (Start Time) e a cada 1 segundo (Duration) moverá 0 pontos na direção X e 100 na direção Y (Offset). A propriedade Timing Function pode ser usada para iniciar e/ou parar gradativamente uma action. Neste caso, estamos usando Linear, o que significa que o carro sempre se move na mesma velocidade.

Finalmente, teste a action, clique no botão Animate na parte inferior esquerda do editor de cena. A toolbar na parte inferior ficará azul e o carro começará a se mover para cima.

Action in Xcode Scene Editor

Com a action de movimento implementada, é hora de criar as actions horizontais via programação. Antes de fazer isso, precisamos adicionar alguma lógica para que os botões do jogo possam controlar o carro.

Crie um novo arquivo escolhendo o template iOS > Source > Swift File e nomeie de LaneStateMachine.

Swift File Template

Adicione o seguinte código no novo arquivo:

O que todo esse código faz, é utilizar o novo framework GameplayKit para criar uma máquina de estado que represente as três pistas e o movimento entre elas no jogo. Se você quer entender melhor sobe o que este código está fazendo, verifique meu tutorial sobre o GameplayKit.

Em seguida, abra o PlayerNode.swift e adicione os dois métodos a seguir na classe PalyerNode.

O método disableAllConstraints() é um método conveniente para desabilitar as restrições do nó do jogador.

No moveInDirection(_:toLane:), determinamos qual direção o carro irá se mover na horizontal, -70.0 quando se mover para a esquerda e +70.0 quando mover para a direita. Então calculamos o angulo correto (em radianos) para rodar o carro, quando em movimento. Note que o número positivo representa uma rotação no sentido anti-horário.

Após especificar uma duração constante, criamos as actions de movimento e rotação usando os métodos de classes moveByX(_:duration:) e rotateByAngle(_:duration). Criamos uma sequência de rotação para rodar o carro de volta a como estava antes do movimento. O método reversedAction() cria automaticamente o inverso de uma action para você.

Em seguida, criamos um grupo de actions de movimento para executar o movimento horizontal e rodar ao mesmo tempo. Finalmente, criamos uma action complementar para executar uma closure quando executada. Nesta closure, identificamos em qual pista o carro esta e ativamos a restrição correta para esta pista.

Abra o ViewController.swift e adicione uma propriedade, stateMachine, do tipo LaneStateMachine! à classe ViewController.

Substitua as implementações dos métodos viewDidLoad() e didPressButton(_:) na classe ViewController conforme abaixo:

No viewDidLoad(), adicionamos o objeto SKView no índice 0, de modo que os botões de controles se tornam visíveis e também inicializamos a máquina de estado.

No didPressButton(_:), identificamos qual botão o usuário pressiona, baseado na tag do botão, e entramos na pista correta a partir de onde o carro esta.

Compile e rode o jogo. Pressione ambos os botões, esquerdo e direito, no fundo da tela para fazer o carro se mover. Você pode ver o carro se virar e se mover na direção do botão que você pressionou.

Turning and Moving Car

Note que os ícones de botão podem ser incompatíveis, como mostrado abaixo.

Mismatched Buttons

Para corrigir isso, abra o catalogo de ativos (Image.xcassets) e para ambas as imagens (Left Arrow e Right Arrow) mude o Rendering Mode para Original Image.

Original Image Rendering Mode

Conclusão

Agora você deve estar confiante usando restrições e actions no SpriteKit. Como você pode ver, estes recursos do framework torna muito fácil adicionar animações e movimentos em um jogo no SpriteKit.

No próximo tutorial desta série, iremos dar uma olhada nos nós de câmera do SpriteKit, assim nosso carro não saíra pelo topo da tela. Após isso, iremos nos aprofundar no sistema de simulação de física do SpriteKit com foco nos corpos de física e na detecção de colisão.

Como sempre, deixe seus comentários e feedback nos comentários abaixo.

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.