The Basics of SpriteKit in Swift

Learn how to build your very first game for iOS

arteko
arteko
Mar 23 · 7 min read
Photo from Apple Developer.

If you know Swift and are looking to build your first game, there’s a great opportunity waiting for you.

You don’t need to learn any other programming language or learn how to develop with a game engine such as Unity or Unreal Engine. There’s a solution available for you totally in Swift. It’s called SpriteKit and I’m going to show you the basics.

We are going to build a small game where the user controls a spaceship that needs to dodge the comets that are coming toward it.


Setting Up the Project

Create a new Xcode project, and instead of choosing “single view app,” choose “game.” By doing this, Xcode will generate , , and a view controller.

These are the files in which you can create your game.

We don’t need the .sks files, so open them and remove everything from there. We just need the controller for the home screen and the .


The Main Interface

First of all, let’s create the game’s menu. This works exactly like any other view controller.

To keep things simple, I created the interface on the storyboard. Here’s how it looks:

All these elements will disappear when we press the Start Game button above the ship.

This is the content of my view controller:

Nothing new here until line 39.

  • Lines 39-40: I instantiate the , which is the class that contains the core of the gameplay. I then add a player to the game, which is a ship. I will show you these classes later.
  • Lines 41-46: I create the view that will hold our game from the current view. I set to just for the development mode to check performance. I also set to just to check if there are not too many elements on the screen at every stage of the game. Then, I set to so that SpriteKit renders the nodes sorted by . The scale mode is how the scene will be presented in the view that holds it. When it’s set to , it means that the scene is automatically resized so that its dimensions always match those of the view. Finally, I add the Game Scene to the current view.

The Game Scene

Open and remove everything from there.

Now, we are going to do the most enjoyable part, which is coding the game.

First of all, let’s create the method that is run when we move to this scene. In this method, I just position the background. The new thing here is the anchor point. This property is used to say which point of the node is used to position it.

Then I add the background to the current scene with the method.

Then I position the player and set its scale to resize it.

Before adding the player to the scene, I configure its physics body to handle the collisions with the other nodes. I say its physics body is a rectangle of its size and it’s dynamic, so it responds to physics and gravity.

After that, there are these weird bitmask properties. These are the properties that say which contact category the node is from and which category it collides with.

Here are the categories I created:

What are bitmasks and why are they UInt32?

It’s a bit hard to understand, so I’ll try to explain it as best I can.

Bitmasks are flags used to describe an item in a binary format.

Imagine you have eight ways to describe an item. We use the binary format because we can store the eight ways in a single byte.

SpriteKit does not have eight ways to describe an item but 32, which means you can describe 32 categories of collisions using only four bytes. It helps us save memory, and memory is crucial to keep good performance in your game.

Right after that, there’s the game loop with the function. This is what creates the game action.

Here, we repeat forever a sequence that runs the function and then waits.

At the end, we set the physics world of our scene to have no gravity and we say that this class will handle all the collisions in our scene.

Let’s jump to the method now:

First, we create a comet that the player will need to dodge.

We spawn it at a random X position and slightly off-screen at the top. We also configure its physics body category and collisions.

I created a score variable that will count the number of comets dodged by the player.

If it’s 0, I create the label and add it to the screen. Otherwise, I just increment it. I don’t need to create it every time because when the player loses and presses the Restart button, which will be created later, the score label is not destroyed.

Then we create a random speed to the comet and we make it go from the top to the bottom of the screen using and adding this action to the object using the function.

Now that we have our ship and our comets, let’s allow the user to move the ship:

In this method, for each touch on the screen (so when the user drags the ship), I get the X position of the touch and move the ship to this X position.

It’s like with the method: You create a move action and you add it to the object using the function.

The last part of the Game Scene is handling the collisions:

This method checks which one of the physics body’s bitmask is greater so that later we know which body is the comet and which is the player. Then, we call the method:

This is a pretty simple method. I just update the score and remove the player from the screen.

Then I present the Game Over scene using a flip horizontal animation. For the Game Over scene, create a file called in which you create the class (just like the class).

In the initializer, I just create the background like with the class and a button to restart the game using this code:

You can’t create buttons in SpriteKit, so we create a node that contains a label and we add it to the scene.

To handle the tap on our button, I use the method:

In this method, I just check if the user pressed inside the button or outside and I redirect the user to the using once again the function — this time not with a function but with a closure.

At the beginning of this article, I talked about the class. I created this class that inherits from and holds the default values of the ship’s speed.

It also has an initializer where I can change the image name of the ship:

This is not useful right now, but you can see with that code how to change the texture of a node.


Conclusion

In this article, I just covered the basics of SpriteKit. There’s a lot more in this framework. Using this framework, you can build most of the mobile games you see in the App Store.

If you are a freelancer, having a mobile game on your portfolio is a great addition and that could give you a ton of job opportunities.

Better Programming

Advice for programmers.

arteko

Written by

arteko

Freelance iOS developer

Better Programming

Advice for programmers.

More From Medium

More from Better Programming

More from Better Programming

More from Better Programming

Fun Side Projects That You Can Build Today

3K

More from Better Programming

More from Better Programming

The Zero-Dollar Infrastructure Stack

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade