Developing a bamboo block game based on SpriteKit+Swift (Part 2)

one, Introduction

SpriteKit is Apple's iOS and OS X game development framework. This tool not only provides powerful graphics capabilities, but also includes an easy-to-use physics engine. Best of all, you can use the tools you are familiar with - Swift, Xcode, and Interface Builder to complete all the work! You can do a lot of things with SpriteKit; however, the best way to understand how it works is to use it to develop a simple game.

In this series of tutorials (part 2), you will learn how to use SpriteKit to develop a Breakout game. In the previous part, we successfully added a paddle and a ball to the game scene; in this part, we will add bamboo blocks to the game scene and implement all other logic of the game.

two, Add bamboo blocks

Now that you have the ball bouncing and have implemented contact controls, let's add some bamboo blocks for the ball to hit. After all, this is a bamboo block game, right?

OK, switch to GameScene.swift and add the following code to didMoveToView(_:):

 // 1 
 
 let numberOfBlocks = 8   
 
 let blockWidth = SKSpriteNode (imageNamed: "block").size.width 
 
 let totalBlocksWidth = blockWidth * CGFloat(numberOfBlocks) 
 
 // 2 
 
 let xOffset = (CGRectGetWidth(frame) - totalBlocksWidth) / 2 
 
 // 3 
 
 for i in 0.. < numberOfBlocks { 
 
  let block = SKSpriteNode (imageNamed: "block.png") 
 
 block.position = CGPoint (x: xOffset + CGFloat(CGFloat(i) + 0.5) * blockWidth, 
 
    y: CGRectGetHeight(frame) * 0.8) 
 
 block.physicsBody = SKPhysicsBody (rectangleOfSize: block.frame.size) 
 
  block.physicsBody! .allowsRotation = false   
 
  block.physicsBody! .friction = 0 .0 
 
  block.physicsBody! .affectedByGravity = false   
 
  block.physicsBody! .dynamic = false   
 
 block.name = BlockCategoryName   
 
  block.physicsBody! .categoryBitMask = BlockCategory   
 
 block.zPosition = 2   
 
 addChild(block) 
 
 }

This code will create eight bamboo blocks centered on the screen. Specifically, the above code snippet achieves:

(1) Some useful constants are established to store the number and width of bamboo blocks.

(2) Calculate the x offset, which corresponds to the distance between the left border of the screen and the first bamboo block. This is calculated by subtracting the width of all bamboo blocks from the screen width and then dividing by 2.

(3) Create bamboo blocks and configure the appropriate physical properties for each bamboo block, and use the blockWidth and xOffset variables to arrange the position of each one.

Now, build and run your game and take a look! See the image below.

Now the bamboo is in place. However, in order to listen for collisions between the ball and the bamboo, you must update the ball’s contactTestBitMask mask. Still in the GameScene.swift file, edit the existing lines of code in the didMoveToView(_:) method—add an extra category to it:

 ball.physicsBody! .contactTestBitMask = BottomCategory | BlockCategory

The above code performs a bitwise OR operation between the two masks BottomCategory and BlockCategory. As a result, the bits for both specific categories are set to 1, while all other bits remain zero. Now, the collision information between the ball and the floor and the ball and the blocks is sent to the agent for further processing.

three, Beat bamboo blocks

Now that you have collision detection ready between the block and the ball, let’s add a helper method to the GameScene.swift file to remove the bamboo block from the scene:

 func breakBlock(node: SKNode) { 
 
  let particles = SKEmitterNode (fileNamed: "BrokenPlatform")! 
 
 particles.position = node.position​ 
 
 particles.zPosition = 3   
 
 addChild(particles) 
 
  particles.runAction(SKAction.sequence([SKAction.waitForDuration(1.0), SKAction.removeFromParent()])) 
 
 node.removeFromParent() 
 
 }

This method takes an SKNode as a parameter. First, it creates an instance of the SKEmitterNode from the BrokenPlatform.sks file, and then sets its position to the same position as the node. The zPosition of the emitter node is set to 3; this allows the particles to appear above the remaining bamboo. After the particles are added to the scene, the node (bamboo) is deleted.

[Note] The emitter node is a special type of node that is used to display the particle system created in the scene editor. To check how it is configured, you can open the file BrokenPlatform.sks, which is a particle system I created specifically for this tutorial.

The only thing left to do is to handle the delegate notifications accordingly. Add the following to the end of didBeginContact(_:) :

 if firstBody.categoryBitMask == BallCategory && secondBody.categoryBitMask == BlockCategory { 
 
  breakBlock(secondBody.node!) 
 
  //TODO: check if the game has been won 
 
 }

The above lines of code check to see if there is a collision between the ball and the bamboo block. If so, you pass the node to the breakBlock(_:) method and remove the bamboo block from the scene as the particle animation plays!

Now, build and run the project. You will notice that the bamboo should break apart when the ball hits it.

Four, Game control logic

Now that you've created all the elements needed to create a game of bamboo blocks, it's time for your players to experience the thrill of victory or the agony of defeat!

1. Building a state machine

Most of the game logic is controlled by the current state of the game. For example, if the game is in the "Main Menu" state, then the player should not be able to move, but if the game is in the "Playing" state, the player should be able to move.

A lot of simple games manage their game state by using Boolean variables combined with an update loop. By using a state machine, you can better organize your code as your game becomes more complex.

A state machine manages a set of states. There is only one current state, and a set of rules for transitioning between states. As the game state changes, the state machine runs certain methods when exiting the previous state and entering the next state. These methods can be used to control the game from within each state. After a successful state change, the state machine will execute an update loop for the current state.

Apple introduced the GameplayKit framework in iOS 9, which has built-in support for state machines, making it very easy to work with state machines. The details of using GameplayKit are beyond the scope of this tutorial; however, in this tutorial, you will use two of its classes: GKStateMachine and GKState.

(II) Adding status

In our bamboo block game, there are three game states:

• WaitingForTap: means the game has finished loading and is ready to start.
• Playing: Playing game.
• GameOver: The game is over (either lost or won).

To save time, three GKState classes have already been added to the project (you can look in the Game States group if you’re curious). To create the state machine, first add the following import statement to the top of the GameScene.swift file:

 import GameplayKit

Next, insert this class variable below the statement var isFingerOnPaddle = false::

 lazy var gameState: GKStateMachine GKStateMachine = GKStateMachine(states: [ 
 
 WaitingForTap(scene: self), 
 
 Playing(scene: self), 
 
 GameOver(scene: self)])

By defining this variable, you effectively create the state machine for your Breakout game. Note: You are initializing the GKStateMachine with an array of GKState subclasses.

(III) Implementing the WaitingForTap state

The WaitingForTap state means that the game has finished loading and is ready to start. Players will see a "Tap to Play" prompt on the screen, and the game will wait for touch events before entering the play state.

Now, add the following code at the end of the didMoveToView(_:) method:

 let gameMessage = SKSpriteNode (imageNamed: "TapToPlay") 
 
 gameMessage.name = GameMessageName   
 
 gameMessage.position = CGPoint (x: CGRectGetMidX(frame), y: CGRectGetMidY(frame)) 
 
 gameMessage.zPosition = 4   
 
 gameMessage.setScale(0.0) 
 
 addChild(gameMessage) 
 
 gameState.enterState(WaitingForTap)

This will create the prompt message that displays "Tap to Play", which will later be used to display the "Game Over" message. Next, you need to tell the state machine to enter the WaitingForTap state.

In didMoveToView(_:) , you should also delete the following line:

 ball.physicsBody!.applyImpulse(CGVector(dx: 2.0, dy: -2.0)) // REMOVE

Later in this tutorial, you will move this code to the game playing state.

Now, open the WaitingForTap.swift file and replace the DidEnterWithPreviousState(_:) and willExitWithNextState(_:) methods with the following code:

 override func didEnterWithPreviousState(previousState: GKState?) { 
 
  let scale = SKAction .scaleTo(1.0, duration: 0.25) 
 
  scene.childNodeWithName(GameMessageName)!.runAction(scale) 
 
 } 
 
 override func willExitWithNextState(nextState: GKState) { 
 
 if nextState is Playing { 
 
    let scale = SKAction .scaleTo(0, duration: 0.4) 
 
    scene.childNodeWithName(GameMessageName)!.runAction(scale) 
 
 } 
 
 }

When the game enters the WaitingForTap state, the didEnterWithPreviousState(_:) method executes. This function is simply used to amplify the sprite corresponding to the message "Tap to Play" to prompt the player to start the game.

When the game exits the WaitingForTap state and enters the Playing state, the willExitWithNextState(_:) method is called and the message "Tap to Play" is reduced to 0.

Now, build and run the project, then tap the screen to play around!

OK, now nothing happens when you tap the screen. The next step is to introduce game state to solve this problem!

4. Game Playing Status

The Playing state starts the game and manages the speed of the ball.

First, switch back to the GameScene.swift file and implement the following helper method:

 func randomFloat(from from:CGFloat, to:CGFloat) - > CGFloat { 
 
  let rand:CGFloat = CGFloat(Float(arc4random()) / 0xFFFFFFFF) 
 
  return (rand) * (to - from) + from 
 
 }

This utility function returns a random number between the two numbers passed in. You'll use it to add some variability to the initial direction of the ball's movement.

Now, open the Playing.swift file. First, add the following helper method:

 func randomDirection() - > CGFloat { 
 
  let speedFactor: CGFloat = 3.0 
 
  if scene.randomFloat(from: 0.0, to: 100.0) > = 50 { 
 
 return -speedFactor 
 
 } else { 
 
 return speedFactor 
 
 } 
 
 }

This code simply returns a positive or negative number. This adds a little bit of randomness to the direction of the ball's movement.

Next, add this code to didEnterWithPreviousState(_:):

 if previousState is WaitingForTap { 
 
  let ball = scene .childNodeWithName(BallCategoryName) as! SKSpriteNode 
 
  ball.physicsBody!.applyImpulse(CGVector(dx: randomDirection(), dy: randomDirection())) 
 
 }

When the game enters the Playing state, the ball sprite is retrieved and its applyImpulse(_:) method is activated.

Next, add this code to the updateWithDeltaTime(_:) method:

 let ball = scene .childNodeWithName(BallCategoryName) as! SKSpriteNode 
 
 let maxSpeed: CGFloat = 400 .0 
 
 let xSpeed ​​= sqrt (ball.physicsBody!.velocity.dx * ball.physicsBody!.velocity.dx) 
 
 let ySpeed ​​= sqrt (ball.physicsBody!.velocity.dy * ball.physicsBody!.velocity.dy) 
 
 let speed = sqrt (ball.physicsBody!.velocity.dx * ball.physicsBody!.velocity.dx + ball.physicsBody!.velocity.dy * ball.physicsBody!.velocity.dy) 
 
 if xSpeed ​​< = 10.0 { 
 
  ball.physicsBody!.applyImpulse(CGVector(dx: randomDirection(), dy: 0.0)) 
 
 } 
 
 if ySpeed ​​< = 10.0 { 
 
  ball.physicsBody!.applyImpulse(CGVector(dx: 0.0, dy: randomDirection())) 
 
 } 
 
 if speed > maxSpeed ​​{ 
 
  ball.physicsBody! .linearDamping = 0 .4 
 
 } else { 
 
  ball.physicsBody! .linearDamping = 0 .0 
 
 }

The updateWithDeltaTime(_:) method is called every frame of the game when it is in the Playing state. In the code, the ball data is obtained and its velocity is checked, which essentially corresponds to the movement speed. If the velocity in the x or y direction is below a certain threshold, the ball may be stuck and appear to be bouncing around or moving from side to side. If this happens, another pulse needs to be applied to force it into the angular motion state.

Also, the ball's speed may be increasing as it bounces. If it's too high, you'll need to increase the linear damping so that the ball eventually slows down.

Now that the play state is set, it's time to add the code to start the game!

In GameScene.swift, replace touchesBegan(_:withEvent:) with the following new code:

 override func touchesBegan(touches: Set < UITouch > , withEvent event: UIEvent?) { 
 
  switch gameState.currentState { 
 
 case is WaitingForTap: 
 
    gameState.enterState(Playing) 
 
 isFingerOnPaddle = true   
 
 case is Playing: 
 
    let touch = touches .first 
 
    let touch touchLocation = touch!.locationInNode(self) 
 
    if let body = physicsWorld .bodyAtPoint(touchLocation) { 
 
      if body.node! .name == PaddleCategoryName { 
 
 isFingerOnPaddle = true   
 
 }
 } 
 
 default: 
 
 break 
 
 } 
 
 }

The above code enables the game to check the current state of the game and change the state accordingly. Next, you need to override the update(_:) method and modify it to look like this:

 override func update(currentTime: NSTimeInterval) { 
 
  gameState.updateWithDeltaTime(currentTime) 
 
 }

The update(_:) method is called before rendering each frame. It is here that we call the updateWithDeltaTime(_:) method corresponding to the play state to manage the ball's movement speed.

Now, build and run the project, then tap the screen to see the state machine in action in action!

(V) Game End State

The GameOver state occurs when all the bamboo blocks are crushed or the ball falls to the bottom of the screen.

Now, open the GameOver.swift file located in the Game States group and add the following lines of code to the didEnterWithPreviousState(_:) method:

 if previousState is Playing { 
 
  let ball = scene .childNodeWithName(BallCategoryName) as! SKSpriteNode 
 
  ball.physicsBody! .linearDamping = 1 .0 
 
 scene.physicsWorld.gravity = CGVectorMake (0, -9.8) 
 
 }

When the game enters the GameOver state, linear damping is applied to the ball and gravity is restored, causing it to fall to the ground, slowing down.

That's it for the GameOver state. The next thing to implement is the code that determines whether the player has won or lost the game!

(VI) Game Ending

Now that the state machine is set up, we can say that most of the game has been developed. Now, we need to find a way to determine whether the game is won or lost.

Open the file GameScene.swift and add the following helper method:

 func isGameWon()- > Bool { 
 
 var numberOfBricks = 0   
 
  self.enumerateChildNodesWithName(BlockCategoryName) { 
 
 node, stop in 
 
 numberOfBricks numberOfBricks = numberOfBricks + 1 
 
 } 
 
 return numberOfBricks == 0 
 
 }

This method checks how many bamboo blocks are left in the scene by traversing the child nodes in the scene. For each child node, it checks whether the child node name is equal to BlockCategoryName. If there are no bamboo blocks left in the scene, the player wins the current game and the method returns true.

Now, add the following property to the top of the class, just below the gameState property:

 var gameWon : Bool = false { 
 
 didSet { 
 
    let gameOver = childNodeWithName (GameMessageName) as! SKSpriteNode 
 
    let textureName = gameWon ? "YouWon" : "GameOver" 
 
    let texture = SKTexture (imageNamed: textureName) 
 
    let actionSequence = SKAction .sequence([SKAction.setTexture(texture), 
 
      SKAction.scaleTo(1.0, duration: 0.25)]) 
 
    gameOver.runAction(actionSequence) 
 
 } 
 
 }

Here, you create the gameWon variable and attach a didSet property observer to it. This will allow you to observe changes in the property value and react accordingly. In the above implementation, the texture of the game message sprite is changed to reflect whether the game is won or lost, and then the result is displayed on the screen.

[Note] Property Observers have a parameter that allows you to check the new or old value. This allows for comparison of value changes when a property change occurs. They have default names if you don't provide them; in the above code, they are newValue and oldValue.

Next, let’s edit the didBeginContact(_:) method as follows:

First, add the following code to the top of didBeginContact(_:) :

 if gameState.currentState is Playing { 
 
 // Previous code remains here... 
 
 } // Don't forget to close the 'if' statement at the end of the method.

The function of this code is to prevent any contact from happening when the game is not in play state.

Next, use the following code:

 print("Hit bottom. First contact has been made.")

Replace the following code:

 gameState.enterState(GameOver) 
 
 gameWon = false  

Now, the game ends when the ball hits the bottom of the screen.

Please replace the //TODO: part with the following code:

 if isGameWon() { 
 
  gameState.enterState(GameOver) 
 
 gameWon = true   
 
 } 
 
 When all the blocks are broken you win! 
 
 Finally, add this code to touchesBegan(_:withEvent:) just above default: 
 
 case is GameOver: 
 
  let newScene = GameScene (fileNamed:"GameScene") 
 
  newScene! .scaleMode = .AspectFit 
 
  let reveal = SKTransition .flipHorizontalWithDuration(0.5) 
 
  self.view?.presentScene(newScene!, transition: reveal)

At this point, your game is complete! You can build and run it.

five, Game polish

Now that the main functionality of the bamboo breaker game is complete, let's add some polish to the game! Add some sound effects whenever the ball makes contact and when the bamboo breaks. Also add a quick explosion of music when the game ends. Finally, you'll add a particle emitter to the ball so that it leaves a trail as it bounces around the screen.

1. Adding sound effects

To save time, the various sound files have already been imported into the project. Now, open the GameScene.swift file and add the following constant definitions to the top of the class definition, or more precisely, just after the gameWon variable:

 let blipSound = SKAction .playSoundFileNamed("pongblip", waitForCompletion: false) 
 
 let blipPaddleSound = SKAction .playSoundFileNamed("paddleBlip", waitForCompletion: false) 
 
 let bambooBreakSound = SKAction .playSoundFileNamed("BambooBreak", waitForCompletion: false) 
 
 let gameWonSound = SKAction .playSoundFileNamed("game-won", waitForCompletion: false) 
 
 let gameOverSound = SKAction .playSoundFileNamed("game-over", waitForCompletion: false)

This code defines a series of SKAction constants, each of which will load and play a sound file. Because you define these actions before you need them, they will be preloaded into memory, which prevents game lag the first time you play a sound.

Next, update the line in didMoveToView(_:) that sets the ball’s contactTestBitMask to the following:

 ball.physicsBody! .contactTestBitMask = BottomCategory | BlockCategory | BorderCategory | PaddleCategory

Nothing new here, just added BorderCategory and PaddleCategory to the ball's contactTestBitMask mask so you can detect contact with the screen borders and when the ball makes contact with the paddle.

Next, let’s modify didBeginContact(_:) to add the sound effect by adding the following lines after the if/else statements that set firstBody and secondBody:

 // 1 
 
 if firstBody.categoryBitMask == BallCategory && secondBody.categoryBitMask == BorderCategory { 
 
 runAction(blipSound) 
 
 } 
 
 // 2 
 
 if firstBody.categoryBitMask == BallCategory && secondBody.categoryBitMask == PaddleCategory { 
 
 runAction(blipPaddleSound) 
 
 }

This code is responsible for checking for two new collisions:

(1) Play the blipSound sound effect when it bounces off the screen boundary.

(2) Play the blipPaddleSound sound effect when the ball touches the paddle.

Of course, you want to use a satisfying crunching sound effect when the ball breaks the bamboo block. To do this, you can add the following line to the top of the breakBlock(_:) method:

 runAction(bambooBreakSound)

***, insert the following line of code inside the didSet property observer created for the variable gameWon at the top of the class:

 runAction(gameWon ? gameWonSound : gameOverSound)

(II) Adding particle system

Now, let's add a particle system to the ball; this way, it'll leave a trail of flames as it bounces around!

To do this, add the following code to the didMoveToView(_:) method:

 // 1 
 
 let trailNode = SKNode () 
 
 trailNode.zPosition = 1   
 
 addChild(trailNode) 
 
 // 2 
 
 let trail = SKEmitterNode (fileNamed: "BallTrail")! 
 
 // 3 
 
 trail.targetNode = trailNode   
 
 // 4 
 
 ball.addChild(trail)

Let's review what the above code does:

(1) Create an SKNode as the targetNode of the particle system.

(2) Create an SKEmitterNode from the BallTrail.sks file.

(3) Set targetNode to trailNode. This will anchor the particles so that they leave a trail; otherwise, the particles will always follow the ball.

(4) Attach the SKEmitterNode to the ball; this can be done by adding it as one of its children.

OK, that's all! Now you can build and run the project again to see how polished your game is after adding some small additions. See the image below.

six, summary

It is highly recommended that you download the example code for this tutorial for further study (the address is https://cdn4.raywenderlich.com/wp-content/uploads/2016/04/BreakoutFinal_p2.zip).

Of course, this article only shows a simple version of the bamboo-hitting game, and there are many things you can expand. For example, you can add a scoring function, or extend the code to set specific scores when a specific bamboo block is destroyed, create different types of bamboo blocks, and make the ball have to hit some (or all) of them multiple times before the bamboo blocks are destroyed. In addition, you can also add certain types of bamboo blocks to drop certain bonuses or props, let the paddle shoot lasers at the bamboo blocks, and so on. In short, it's up to you!

Developing a bamboo block game based on SpriteKit+Swift (Part 1)