Develop a bamboo block game based on SpriteKit+Swift

1. Introduction

SpriteKit is Apple's game development framework for iOS and OS X. 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 do 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 two-part tutorial series, you will learn how to use SpriteKit to develop a Breakout game, including full collision detection technology, physical effects to control ball bouncing, touch to drag the paddle, game state control, and more.

2. Getting Started

As an initial preparation, it is recommended that you first download the starter project corresponding to this tutorial. This project is created using the standard Xcode game template. All resources and state classes have been imported into the project, which can save you a little time. As you read further, you will learn more about game states.

You may wish to take a moment to familiarize yourself with the entire project. To do this, run the commands "Build" and "Run", and you will see a gray screen in landscape mode. Please refer to the picture below.

3. Introduction to Sprite Kit Visual Editor

Let's start by configuring the scene file. To do this, open the GameScene.sks file. This is a visual editor that is linked to your Sprite Kit scene, and you can access every element that is already in it from the game's GameScene.swift file.

First, you'll resize the scene so that it fits the target screen you're covering in this tutorial: an iPhone 6 screen. You can do this in the Scene section of the Attributes inspector, located in the upper-right corner of the Xcode window. If you can't see the Attributes inspector, you can access it via View\Utilities\Show Attributes inspector. Set the size of the scene to 568 × 320, as shown in the screenshot below.

[Note] If your resource library contains images and other resources prepared for multiple screen scaling factors (i.e. 1x, 2x, 3x, etc.), Sprite Kit will automatically use the correct resource file for the current running device.

Now, let's consider the background of the game. As shown in the screenshot below, drag a Color Sprite from the Object Library panel in the lower right corner of the Xcode window. If you can't see the Object Library panel, select View\Utilities\Show Object Library from the menu bar.

Use the Properties Inspector to change the Position to 284,160 and set its Texture to bg.

Now, you can build and run the game project to enjoy the background display of your game.

Once you have a horizontal scene with a background, it's time to add the ball to it! Still in the GameScene.sks file, drag a new Color Sprite into the scene. Then, change its name to ball, set its texture to ball, and change its position to 284,220. Then, set its Z position property value to 2 as well to ensure that the ball appears on the background.

Now, build and run your project, and you will see the ball appear on the screen as shown.

However, so far our game has no animation, and that's because we haven't added the physics part yet.

4. Physics Engine

In Sprite Kit, you work in two environments: the graphical world you see on the screen and the physics world, which determines how objects move and interact.

The first thing you need to do when using the Sprite Kit physics engine is to modify the world according to the needs of your game. The world object is the main object that manages all objects and physics simulations when using Sprite Kit. It also sets the gravity properties required for physics mechanisms to be added to the world objects. The default gravity value is -9.81, so it is similar to the actual gravity of the earth. So, whenever you add an object to the world, it will fall down.

Once you have a world object configured, you can add things to it that interact with it based on physical principles. The most common way to do this is to create a sprite (graphic) and set its physics body. The body properties of the object and the world determine how the object moves.

A Body can be a dynamic object that is affected by physical forces (like a ball, a star, a bird...), or a static object that is not affected by physical forces (a platform, a wall...). When creating a Body, you can set various properties, such as shape, density, friction, etc. These properties will heavily affect the behavior of the Body in the world.

When defining a Body, you might worry about the units of its size and density. Internally, Sprite Kit uses the metric system (SI units). However, you usually don't need to worry about the actual strength and mass in your game, as long as you use consistent values.

Once you have added all the Bodies to the world, Sprite Kit takes over control and performs the simulation.

To set up the first physics body, you need to select the ball node you just added and from the Physics Definition section of the Property Inspector, select Bounding Circle under Body Type and set the following property values:

• Uncheck "Allows Rotation"
• Set Friction to 0
• Set Restitution to 1
• Set linear Damping to 0
• Set Angular Damping to 0

Adding physics properties to the ball

Here, you create a volume-based physics body in the form of a circle with the exact same dimensions as the ball sprite. This physics body is affected by external forces or impulses and is able to collide with other objects.

The following is a detailed introduction to its properties.

• Allows Rotation: Specifies whether rotation is allowed. In this case, you don't want the ball to rotate.
• Friction: This property is also simple, in our case we want to remove all friction.
• Restitution: refers to the elasticity of the object. Setting its value to 1 means that when the ball collides with the object, it will maintain its original elasticity. In short, this means: the ball will bounce back with the same force as the initial one.
• Linear Damping: This simulates fluid or air friction by reducing the linear velocity of an object. In this game, the ball should not slow down when moving. So, you need to set the damping to 0 above.
• Angular Damping: This is the same as Linear Damping, except with angular velocity. Setting this value is optional if you don't want to allow the ball to rotate.

[Note] In general, it is best to make the physics body very similar to what the player sees. For the ball, we have made it a perfect match. However, when you need to use more complex shapes, be extra careful, because very complex bodies mean high performance system resource consumption. Since iOS 8 and Xcode 6, Sprite Kit supports alpha mask body types, which will automatically use the shape of the sprite as the shape of its physics body, but still use it with caution, because it can also reduce system performance.

Now, let's build and run the project again. If you react quickly enough, you should see the ball fall from the scene and disappear at the bottom of the screen, as shown in the figure.

This happens for two reasons: First, the default gravity of your scene simulates Earth's gravity - 0 along the x-axis and -9.8 along the y-axis. Second, your scene's physics world is unbounded and cannot yet be used as a cage to enclose the ball. Let's fix that now!

5. Lock up the ball

The effect of locking up the ball

Now, open GameScene.swift and add the following line of code to the end of didMoveToView(_:) to create an invisible barrier around the screen:

 // 1 
 
 let borderBody = SKPhysicsBody (edgeLoopFromRect: self.frame) 
 
 // 2 
 
 borderBody.friction = 0   
 
 // 3 
 
 self.physicsBody = borderBody  

Let's analyze this line of code:

(1) Create an edge-based Body. Compared to the volume-based Body you added to the ball, an edge-based Body has no mass or volume and is not affected by external forces or impulses.

(2) We set friction to 0 so that the ball does not slow down when it collides with a boundary barrier. Instead, you want a perfect effect where the ball leaves the barrier at the same angle as it hits.

(3) You can set a physical body for each node. Then, add it to the scene. Note: The coordinates of SKPhysicsBody are relative to the node position.

Run your project again and you should see the ball falling just like before, but now it will bounce back when it hits the bottom edge of the cage. Because you removed friction from the contact with the cage and the environment, and set the ball's deformation to fully elastic, the ball will continue to bounce like that forever.

To round out the ball's motion, let's remove gravity and apply a single pulse so it bounces along the screen forever.

6. Permanent Elastic Movement

Now, let’s make the ball roll (actually bounce). Add the following code to the GameScene.swift file just after the line of code added above:

 physicsWorld.gravity = CGVector (dx: 0.0, dy: 0.0) 
 
 let ball = childNodeWithName (BallCategoryName) as! SKSpriteNode 
 
 ball.physicsBody!.applyImpulse(CGVector(dx: 2.0, dy: -2.0))

This new code first removes all gravity from the scene, then retrieves the ball from the scene's child nodes and applies an impulse effect. An impulse applies an immediate force to the physics body, causing it to move in a specific direction (in this case, diagonally to the right). Once the ball is set in motion, it simply bounces off the screen because of the barrier you just added!

Now, it's time to give it another try! When you compile and run the project, you should see a little ball bouncing around the screen - pretty cool!

7. Add baffles

It wouldn't be a bamboo-block game without a paddle, would it?

Now, open the GameScene.sks file and use the Visual Editor to create the paddle (and its companion physics body) in much the same way as you placed a Color Sprite in the bottom center of the scene, and set the following property values:

• Name = paddle
• Texture = paddle.png
• Position = 284,30
• Z Position = 3
• Body Type > Bounding rectangle
• Uncheck Dynamic
• Friction: 0
• Restitution: 1

Obviously, most of the options here are similar to the ones you used when creating the ball earlier. However, this time you used a Bounding rectangle to form the physics body so it will better match the rectangular paddle.

Here we have set the paddle to be static by turning off the Dynamic option. This will ensure that the paddle is not affected by external forces and impulses. You will see why this is important shortly.

If you build and run the project now, you will see the paddle appear in the scene and the ball will bounce when it hits the paddle (if you wait long enough). See the image below.

So far, so good! Next, we need to enable the player to move the paddle.

8. Mobile baffle

Moving the paddle requires detecting contact-related information. To do this, we implement the following touch handling method in the GameScene class:

 override func touchesBegan(touches: Set < UITouch > , withEvent event: UIEvent?) 
 
 override func touchesMoved(touches: Set < UITouch > , withEvent event: UIEvent?) 
 
 override func touchesEnded(touches: Set < UITouch > , withEvent event: UIEvent?)

However, before you do that, you need to add one more property. Go to the GameScene.swift file and add the following property to the class:

 var isFingerOnPaddle = false  

This property is responsible for storing information about whether the player has clicked on the paddle. You will need it to perform operations related to dragging the paddle.

Now, add the following code to touchesBegan(_:withEvent:) in GameScene.swift:

 override func touchesBegan(touches: Set < UITouch > , withEvent event: UIEvent?) { 
 
 let touch = touches .first 
 
  let touch touchLocation = touch!.locationInNode(self) 
 
  if let body = physicsWorld .bodyAtPoint(touchLocation) { 
 
    if body.node! .name == PaddleCategoryName { 
 
      print("Began touch on paddle") 
 
 isFingerOnPaddle = true   
 
 } 
 
 } 
 
 }

The code above takes the touch information and uses it to find the touch location in the scene. Next, it uses the bodyAtPoint(_:) method to find the physics body associated with the node (if any) at that location.

Finally, we check if there is a node at the touch location; if so, we determine if it is a paddle. This is where creating the object names earlier comes into play—you can check for a specific object by checking the name. If the object at the touch location is a paddle, a log message is sent to the console and isFingerOnPaddle is set to true.

Now you can build and re-run the project. When you click on the bezel you should see the log messages in the console.

Next, add the following code:

 override func touchesMoved(touches: Set < UITouch > , withEvent event: UIEvent?) { 
 
 // 1 
 
 if isFingerOnPaddle { 
 
 // 2 
 
    let touch = touches .first 
 
    let touch touchLocation = touch!.locationInNode(self) 
 
    let previousLocation = touch !.previousLocationInNode(self) 
 
 // 3 
 
    let paddle = childNodeWithName (PaddleCategoryName) as! SKSpriteNode 
 
 // 4 
 
    var paddle paddleX = paddle.position.x + (touchLocation.x - previousLocation.x) 
 
 // 5 
 
 paddleX = max (paddleX, paddle.size.width/2) 
 
 paddleX = min (paddleX, size.width - paddle.size.width/2) 
 
 // 6 
 
 paddle.position = CGPoint (x: paddleX, y: paddle.position.y) 
 
 } 
 
 }

This is the main logic of the baffle movement.

(1) Check if any player is touching the paddle.

(2) If so, then you need to update the position of the paddle, depending on how the player moves their finger. To do this, you need to get the current touch position and the last touch position.

(3) Get the SKSpriteNode of the baffle.

(4) Calculate the paddle x-coordinate value using the current position plus the difference between the new position and the last touch position.

(5) Before repositioning the baffle, limit its x-coordinate position so that the baffle does not go out of the left or right side of the screen.

(6) Set the baffle position to the position you just calculated.

The only thing left to do about the touch handling is to do some cleanup, which is done in the touchesEnded(_:withEvent:) method, as shown here:

 override func touchesEnded(touches: Set < UITouch > , withEvent event: UIEvent?) { 
 
 isFingerOnPaddle = false   
 
 }

Here, you set the isFingerOnPaddle property to false. This ensures that when the player lifts their finger off the screen and then taps the paddle again, the paddle doesn't jump to the previous touch location.

Perfect! Now when you build and run the project again, you’ll notice that the ball bounces around the screen, and you can use the paddle to affect its movement.

Now, it feels good!

IX. Contact

So far, you've implemented basic ball bouncing and paddle movement to control the ball. While this is fun, to really make it a game, you need a way to control when the player wins and loses a game. The player should lose when the ball hits the bottom of the screen instead of the paddle. But how do you detect this using Sprite Kit?

Sprite Kit can detect contact between two physics objects. However, in order for it to work properly, you need to follow several steps to set it up in a certain way. Here I will only give a brief description. More details of each step will be explained later. The description is as follows:

• Setting the Physics Body bitmask: In your game, you may have several different types of physics bodies - for example, you may have players, enemies, bullets, bonus items, etc. In order to uniquely identify these different types of physics bodies, you need to configure each physics body using a few bit masks. These masks include:
• categoryBitMask: This bit mask identifies the category a Body belongs to. You can use categories to define how a Body interacts with other Bodies. CategoryBitMask is a 32-bit integer, where each bit represents a category. So, you can use up to 32 custom categories in your game. This should be enough to handle the requirement of having a separate category for each object type in most games. For more complex games, keep in mind that each Body can belong to multiple categories. So, with careful design of categories, you can even overcome the limitation of 32 categories.
• contactTestBitMask: Setting bits in this mask enables Sprite Kit to notify the delegate when a Body touches another Body assigned to that particular category. By default, all bits are cleared—you will not be notified of any contact between objects. For best performance, you should only set the contact mask for interactions that you are actually interested in.
• collisionBitMask: With this mask you can define which Bodies can collide with the current physics Body. For example, you can use this technique to avoid collision calculations when a very heavy Body encounters an object that is much lighter than it, as this will only bring a negligible change to the heavy Body's velocity. However, you can also use it to let two Bodies penetrate each other.
• Set and implement the contact delegate (also translated as "agent"): The contact delegate is actually a property of SKPhysicsWorld. This delegate is notified when two bodies using contactTestBitMasks start and end collision.

10. 3,2,1 contact algorithm

First, let's create constants that describe the different categories. To do this, simply add the following constant definitions to the GameScene.swift file:

 let BallCategory : UInt32 = 0x1   < <   0   
 
 let BottomCategory : UInt32 = 0x1   < <   1   
 
 let BlockCategory : UInt32 = 0x1   < <   2   
 
 let PaddleCategory : UInt32 = 0x1   < <   3   
 
 let BorderCategory : UInt32 = 0x1   < <   4  

There are five categories defined above. The approach used here is to set the last bit to 1 and all other bits to zero. Then use the << operator to shift the bits left. Therefore, each category constant has only one bit set to 1 and the position of this 1 in the binary number is unique for the four categories above.

For now, you only need these classes to describe the screen and the ball; however, you should also use some other methods to explain the logic of how the game runs.

Once these constants are established, we can now create the physics body that spans the bottom of the screen.

[Suggestion] Readers can try to use their own methods to solve the problems related to creating obstacles around the edges of the screen based on the principles introduced earlier in this article.

Now, let's discuss the core aspects of creating contact programming. First, set the categoryBitMasks mask for the game object by adding the following code to the didMoveToView(_:) method:

 let paddle = childNodeWithName (PaddleCategoryName) as! SKSpriteNode 
 
 bottom.physicsBody! .categoryBitMask = BottomCategory   
 
 ball.physicsBody! .categoryBitMask = BallCategory   
 
 paddle.physicsBody! .categoryBitMask = PaddleCategory   
 
 borderBody.categoryBitMask = BorderCategory  

This code simply assigns the constants created earlier to the corresponding physicsBody's categoryBitMask masks.

Now, set the contactTestBitMask mask by adding the following line of code to didMoveToView(_:) :

ball.physicsBody!.contactTestBitMask = BottomCategory

Now, you only want to be notified when the ball touches the bottom of the screen.

Next, let's create a delegate in the GameScene class for all physics interactions.

To do this, just replace the following line:

 class GameScene: SKScene {

Modify it to the following form:

 class GameScene: SKScene, SKPhysicsContactDelegate {

That’s it: GameScene is now the SKPhysicsContactDelegate (because it conforms to the SKPhysicsContactDelegate protocol), and it will receive collision notifications for all configured physics bodies.

Now, you need to set GameScene as the delegate in physicsWorld. So, add the following line of code to the method didMoveToView(_:) , just below the statement physicsWorld.gravity = CGVector(dx: 0.0, dy: 0.0) :

 physicsWorld.contactDelegate = self  

Finally, you need to implement didBeginContact(_:) to handle collisions. To do so, simply add the following method to GameScene.swift:

 func didBeginContact(contact: SKPhysicsContact) { 
 
 // 1 
 
  var firstBody: SKPhysicsBody 
 
  var secondBody: SKPhysicsBody 
 
 // 2 
 
  if contact.bodyA.categoryBitMask <   contact.bodyB.categoryBitMask { 
 
 firstBody = contact.bodyA​ 
 
 secondBody = contact.bodyB​ 
 
 } else { 
 
 firstBody = contact.bodyB​ 
 
 secondBody = contact.bodyA​ 
 
 } 
 
 // 3 
 
  if firstBody.categoryBitMask == BallCategory && secondBody.categoryBitMask == BottomCategory { 
 
    print("Hit bottom. First contact has been made.") 
 
 } 
 
 }

Let's analyze the above method:

(1) Create two local variables to store the two physical bodies involved in the collision.

(2) Check the two colliding physics bodies to see which one uses the lower categoryBitmask mask. Then, store them in local variables; this way, the body corresponding to the lower category is always stored in the firstBody variable. This will save you a lot of effort when analyzing contacts between specific categories.

(3) Thanks to the sorting operation implemented previously, now you only need to check whether firstBody belongs to the BallCategory category and whether secondBody belongs to the BottomCategory category to figure out that the ball has hit the bottom of the screen - as you already know, if firstBody belongs to the BottomCategory category, then secondBody cannot belong to the BallCategory category (because BottomCategory has a higher bit mask than BallCategory). In this example, we just output a simple log message.

Now, build and run your game again. If everything went well, you should see log messages in the console every time the ball misses the paddle and hits the bottom of the screen. It should look like this:

That's all! Now the hardest part is done. Finally, all that's left is to add the bamboo blocks and the game logic, which you'll learn about in the next part of this series.

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