Introduction to SpriteKit

To follow this tutorial, you will need Xcode 9

What You’re Building

This is the iPhone platformer game that you will be building.

What is SpriteKit?

SpriteKit is a powerful 2D sprite-based framework for games development from Apple. SpriteKit uses SKView which is a scene, it is the visual that you see on your screen. For those who are familiar with making iOS App, it is similar to Storyboard. Less code, more images!

Why use SpriteKit?

SpriteKit is easy to learn because it is a well-designed framework and it is even easier if you have experience with Swift. Even for a beginner, if you want to create your first game, 2D games is without a doubt the best way to transit in this new world. If you want to learn more about SpriteKit, here’s the link to Apple’s SpriteKit page.

Set Up

Let’s open Xcode, a small window will pop up with three different options, choose Create a new Xcode project. Xcode will give us some different templates to start our project. Make sure you select iOS as the platform, then choose the Game template and hit Next. On the following window, you will need to add a Product Name, let’s type ElonGame, and you can put the name of your company on the Organization Identifier box, finally hit Next.

Next, we need to choose where we will like to save our project, in our case we will save it on our Desktop, click on Create. Congratulations! You created your first game.

Running the Simulator

Let’s run the simulator to make sure that our project is working. Click on the play button in the top left corner of your screen or press Command + R.

You will see that an iPhone frame will prompt with a greeting message on the screen: Hello, World!. Now that we are sure that our project is working properly, let’s import the game assets.

Importing Assets

Let’s click on the Assets.xcassets folder from our Project Navigator panel, the panel on the left side of Xcode’s UI. Then, drag and drop all your assets from your assets folder to Assets.xcassets.

Providing Namespacing

If you check the folders: jewel, jump and player, inside Assets.xcassets.

You will notice that the some of the assets on those folders have the same name, which can lead to a confusion later on. An easy way to organize them is to provide a namespacing. To do so, let’s select those folders and on the Attributes Inspector panel, the right panel of the UI, check the box Provides Namespace.

The SpriteKit Scene

Click on GameScene.sks from the Project Navigator panel. To have a cleaner UI without too many panels in our Xcode, project let’s close the Navigator panel clicking on the third button, counting from right to left, of the top right corner of Xcode’s UI. Then, select the helloLabel asset from the Scene panel and delete it. Now, let’s name our scene. To do so, let’s go to the right panel of our Xcode’s UI and choose the third icon of the panel Attributes Inspector. On the Name box, let’s type Level 1. Finally, let’s give the width and height of the iPhone X to our scene, 812 for the width and 375 for the height and change the device on the simulator to iPhone X.

Adding the Assets to the Scene

Click on the Media Library panel, the bottom right panel on Xcode’s UI, drag and drop the ground and player/0 assets to the canvas. Place the ground to the bottom of the scene and you can put player/0 to the middle of the scene. Let’s run the simulator to see how our scene looks like. If your iPhone in your simulator is in portrait mode, you may not be able to see the full scene. You will need to change the iPhone’s orientation to landscape mode by pressing Command + right arrow.

Physic Properties (character)

We need to add some physics properties to both assets, so we can create a more realistic interaction between our hero and the ground. First, let’s select player/0 and let’s change its Body Type which is in the Physics Definition attribute from None to Alpha Mask and uncheck Allows Rotation. We will enable different physic properties, like gravity, collision, friction and many more, to our character.

Physic Properties (ground)

Let’s add some physics properties to the ground as well. We will change its Body Type from None to Bouncing rectangle and uncheck Dynamic, Allows Rotation and Affected By Gravity. Finally, let’s press Command + R to run the simulator and you will notice that our hero will be touching the ground.

Body Definition

Depending on the shape of the physics body, you will choose between a better collisions accuracy or a better performance. If you use the circular shape, the performance will be better but, you will sacrifice the collision accuracy. On the other hand, choosing alpha mask prioritize collision accuracy over performance.

The Dynamic property determines if the node will be affected by physics: gravity, friction, collisions, forces or impulses.

The AllowsRotation property determines if your node can rotate depending on the force or the gravity.

The Pinned property will force the node to stay at its initial position while the gravity will pull the heavy parts of the node towards the ground.

The AffectedByGravity determines if the node can be affected by the physics world’s gravity.

Node Organization

Let’s build the scenario of our game adding some other assets to the canvas like: background, arrow, knob, moon, mountain 1, both mountain 2 assets and stars. You can organize them at your leisure. You need to consider that the position of the assets in the Scene panel will affect how you will see them on the canvas. So if you put an asset on the top of the asset’s list of the Scene panel, this same asset will go to the back of the canvas. Therefore, top means bottom layer.

Naming the nodes

Let’s change the names of the nodes on the Scene panel because right now all the nodes have the same name. The following image shows how we are naming the nodes.

Creating a Joystick

Let’s open the Object Library, the bottom right panel, drag an Empty node and drop it on top of the knob asset. Let’s name the Empty node joystick. Next, we will change the position of the joystick node, -300 to its X axis and -100 to its Y axis. Then, let’s select the knob and arrow nodes on the document outline and drop them into the joystick node. This will nest them.

Z Position

Let’s open our project navigator, then select GameViewController.swift. Over there on line 28 of our code, let’s change view.ignoresSiblingOrder = true  for view.ignoresSiblingOrder = false . We are changing from true to false because we have many nodes that share the same Z position and we want Xcode to render all our nodes as they are in our scene. The Z position is a number which determines the order of each node that will appear on our screen, that’s why it’s important to change it for our case.

Conclusion

We are thrilled that you arrived at the end of the section. As you may have noticed, you have already learned many things, like how to create your first project in Xcode, to import assets, to set up a scene, to apply some physic properties to the nodes and get to know about the Z position.