1. Code
  2. iOS SDK

Build an Airplane Game With SpriteKit: Explosions & Clouds

Read Time:7 minsLanguages:

This tutorial will teach you how to use the SpriteKit framework to create a simple Airplanes game. Along the way, you'll learn all the core concepts of SpriteKit: animations, emitters, collision detection, and more!

Series Format

The Airplanes tutorial will be divided into three parts in order to completely cover each section. After reading the three part tutorial, the readers will be able to create an interesting 2D game using the new SpriteKit framework provided with iOS 7.

Each part will produce a practical result, and the sum of all parts will produce the final game. While each part of the series can be read independently, we recommend following along step-by-step for a complete understanding of the topic presented. The source code for the game is provided incrementally with each post.

Final Preview

Figure 1 Final ResultFigure 1 Final ResultFigure 1 Final Result
Illustration of Final Result: SpriteKit.

Where We Left Off...

Welcome back to the third part of our airplanes game with SpriteKit. In our last post, we focused on adding enemies and emitters to the game. In today's tutorial, you will program the collision detection, work with a texture atlas, and create some explosions in order to finish the game. Let's get started!

1. Adding Collision Detection

Intersection tests are frequently used in environments where more than one object exists. In SpriteKit, you will use Collisions and Contacts to detect if a given object hit another object.

In this game, you will use collision detection. When a bullet makes contact with one enemy, both the bullet and the enemy will be removed from the screen.

To do this, you need to define the category mask values. There should be one category for each physics object. In MyScene.h, add the following code:

Now, while still within MyScene.h, add SKPhysicsContactDelegate as we did before with the UIAccelerometerDelegate.

Before you can use physics, you need to initiate the physics settings. At the if (self = [super initWithSize:size]) conditional, instantiate the gravity with a 0 value (i.e. no gravity) and then the contact delegate:

The two bodies that need physics are the bullet and the enemies. Let's set several properties for each one. Let's add the code below within the -(void)EnemiesAndClouds method:

The code above states that the contact area of the airplane will be a rectangle that has the size of the enemy sprite. The dynamic property indicates whether the physics body is moved by the physics simulation. Next, the categoryBitMask is where you set the category to the object, and the contactTestBitMask refers to which bodies the enemies will interact with (in this case with bullets).

Now let's define the physics for the bullet object. Within the -(void)touchesBegan:(NSSet *)touches withEvent:(UIEvent *)event method, the bullet code should be modified to add:

So far, you have defined the properties for collisions. However, we must detect if a contact is made.

You need to use the method didBeginContact to know what objects have contact with other objects. So, the following code calculates the two bodies that have contacted and simultaneously removes them from the scene:

Pretty simple, right? Now, build and run. If everything went right, then the enemy and bullet will disappear when they collide.

2. Incorporating a Texture Atlas

Our game is nearly complete, but needs some action and animation. The next two steps will add explosions and some background animations made from clouds.

So far, we haven't used Texture Atlas. SpriteKit includes a texture atlas generator that has several interesting features. In Xcode 5, you can create a texture atlas with the following steps:

  1. Place all the sprites into a single folder. For our project, you can find all the images in the attached download within the "EXPLOSION" folder.
  2. Change the extension of the folder to *.atlas. In our case, rename EXPLOSION to EXPLOSION.atlas.
  3. Drag-and-drop the folder into the project. I added it to the Supporting Files folder within the Xcode navigator.
  4. Make sure that the Option "Enable Texture Altas Generation" is on. To check this, go to the Build Settings of your project.

That's it. Once again, the images for this part are available within the Resources folder of the attached download.

Now, you need to load the texture atlas into the project.

Within MyScene.h add:

At the end of the if (self = [super initWithSize:size]) conditional, add the following code snippet:

3. Adding Explosions

Once you have the explosions loaded, another step is needed to see them in action. You will now create an explosion that occurs when a bullet hits an enemy. At the end of the if conditional if ((firstBody.categoryBitMask & bulletCategory) != 0), add the following snippet:

Build and run the project to test the collision and explosion animation. You should see something like the next figure:

Figure 1 ExplosionFigure 1 ExplosionFigure 1 Explosion
Illustration of the Explosion (Xcode).

4. Adding Clouds

We've almost completed the game! This is just the last touch. Now you need to create the clouds atlas, and then load the texture atlas to memory.

Before we write the code for this step, be sure to add the .atlas extension to the "Clouds" folder in the attached download and to drag it into your project.

Within the MyScene.h file add the following:

Within the MyScene.m file, beneath the "load explosions" code, add the following:

The last step is to randomly generate clouds and present them on screen with some movement. You need to add the following snippet at the end of the EnemiesAndClouds method:

Build and run the project yet again. If everything goes well, you should see something like the next figure:

Figure 2 FinalFigure 2 FinalFigure 2 Final
Illustration of the Final Game (Xcode).


This concludes the third and final tutorial demonstrating how to create an airplanes game using the new SpriteKit framework available with the iOS 7 SDK. If you've followed this series from start-to-finish, you should now have enough knowledge to create a simple SpriteKit game using this dynamic new game engine. If you have any questions or comments, please feel free to leave them below!

Acknowledgements & Recommendations

We would like to thank Daniel Ferenčak for providing us with the game art used to produce this tutorial series.

In order to fully appreciate the tutorial series, we advise that you test our code by deploying it to a real device running iOS 7. You will need Xcode 5 and the latest iOS 7 SDK. If you don't already have these tools, you can download them from the Apple Developer Center. Once downloaded, install the software and you'll be ready to begin.

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