The Basics of SpriteKit in Swift
Learn how to build your very first game for iOS
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
GameScene.swift 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
GameScene, 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
truejust for the development mode to check performance. I also set
truejust to check if there are not too many elements on the screen at every stage of the game. Then, I set
trueso that SpriteKit renders the nodes sorted by
zPosition. The scale mode is how the scene will be presented in the view that holds it. When it’s set to
resizeFill, 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
GameScene.swift 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
didMove 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
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
run function. This is what creates the game action.
Here, we repeat forever a sequence that runs the
addComet 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
addComet 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
SKAction.move and adding this action to the object using the
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
addComet method: You create a move action and you add it to the object using the
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
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
GameOverScene.swift in which you create the
GameOverScene class (just like the
In the initializer, I just create the background like with the
GameScene 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
In this method, I just check if the user pressed inside the button or outside and I redirect the user to the
GameScene using once again the
run function — this time not with a function but with a closure.
At the beginning of this article, I talked about the
Ship class. I created this class that inherits from
SKSpriteNode 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.
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.