SpriteKit Playground Introduction
Table of Contents
One of the easiest ways to get started making iOS games is to use Swift playgrounds in Xcode. With playgrounds you can create game prototypes, experiment with gameplay mechanics, and learn SpriteKit without worrying about annoying details like code signing, certificates, and provisioning profiles. This article introduces you to using playgrounds in iOS game development.
The first step in using a Swift playground is to create one. Launch Xcode and choose File > New > Playground. The New Playground Assistant opens.
Click iOS at the top of the window and select the Game template. Click the Next button. Name your playground and choose a location to save it. Click the Create button to finish making the playground.
When you create the playground, all you see is an editor with the source code for the playground. The next step is to open the live view so you can see the game running in the playground.
To open the live view look at the tab bar above the editor. On the right side of the tab bar are two buttons. Click the left button and choose Live View.
Use the Layout submenu to decide whether to show the live view on the right or the bottom.
The first step to opening the live view is to open the assistant editor so you can have both the source code editor and the live view visible in the playground. On the top right side of the playground window are two sets of three buttons. The first set of buttons controls the editor. Click the center button to open the assistant editor.
When you click the button, a menu opens to let you decide how the assistant editor appears. If you choose Assistant Editors on Right, the editor and game view appear side by side. If you choose Assistant Editors on Bottom, the game view appears below the editor. Where you want the assistant editor is a matter of personal preference.
When you open the live view, you’ll notice it’s blank and not showing a game. That’s because the playground is not running so there’s nothing to show. The bottom left area of the window has two buttons. Click the right button to run the playground.
Now the playground is running and the live view should have a black background with a Hello, World! label showing.
Clicking in the game view shows a spinning shape. Clicking and dragging creates a series of shapes. If you drag slowly, it looks like you’re dragging a Slinky around the game view.
Apple included code in the playground to show the label and the spinning shapes. But you’re not going to need that code in your own game projects.
Now it’s time to remove what Apple supplied in the playground so you can start prototyping your game. You’re going to remove the Hello, World! label from the scene, remove the code that uses the label, and remove the code that creates the spinning shapes.
Removing Apple’s code is going to cause errors temporarily so it makes sense to stop the playground until everything is removed. Click the Stop button at the bottom of the window to stop running the playground.
To remove the label from the scene, you must open the scene file. To open the scene file you must show the navigator in the playground window. On the top right side of the playground window are two sets of three buttons. Click the first button in the second group of buttons to open a navigator on the left side of the window.
Screenshot for newer Xcode versions:
Once you open the navigator, you can remove the label from the scene. Select the file GameScene.sks from the navigator to open the scene editor.
Select the label in the scene editor.
Press the Delete key to remove the label.
Now it’s time to remove Apple’s code. Let’s start by removing the following two lines of code that declare properties (variables) for the label and spinning nodes:
private var label : SKLabelNode!
private var spinnyNode : SKShapeNode!
Next, remove the code inside the following functions:
didMovetouchDowntouchMovedtouchUp
After removing the code, the functions should look like the following:
override func didMove(to view: SKView) {
}
func touchDown(atPoint pos : CGPoint) {
}
func touchMoved(toPoint pos : CGPoint) {
}
func touchUp(atPoint pos : CGPoint) {
}
Now when you run the playground, there will be an empty black view. It takes a surprising amount of work to get the playground in a state where you can start making a game in the playground.
Now you can start making a game prototype. To finish this tutorial I’m going to add a sprite to the scene and add code to move the sprite to where the player taps on the screen.
Select the file GameScene.sks from the navigator to open the scene editor.
Open the object library by option-clicking the Library button at the top of the window. Option-clicking will keep the object library open so you can add items to the scene. If you don’t want the object library open the whole time, then click the Library button instead of option-clicking.
Screenshot for newer Xcode versions:
Select Color Sprite from the object library and drag it to the scene canvas.
Select the sprite in the canvas. Open the attributes inspector by choosing View > Inspectors > Show Attributes Inspector.
Enter a name for the sprite in the Name text field. Remember the name because you’re going to use it in your code. If you want a different color for your sprite, choose a color from the Color menu.
The last step is to add some code to show the sprite and move it to where the player taps on the screen. There are three pieces of code to add:
- Declare a property (variable) for the player sprite.
- Write code to read the player sprite from the scene (.sks) file.
- Write code to set the player sprite to the location of the tap.
To declare a property for the player sprite, add the following line of code before the didMove function:
var playerSprite: SKSpriteNode? = nil
The start of the GameScene class should look like the following code:
class GameScene: SKScene {
var playerSprite: SKSpriteNode? = nil
override func didMove(to view: SKView) {
}
The code declares the playerSprite variable to be an optional of type SKSpriteNode, which is SpriteKit’s class for sprites. Making the variable an optional means that playerSprite is either an object of type SKSpriteNode or nil. The playerSprite property is initially nil. You will set it in the didMove function.
To set the playerSprite property, add the following line of code in the didMove function:
playerSprite = self.childNode(withName: "playerSprite") as? SKSpriteNode
So the function looks like the following code:
override func didMove(to view: SKView) {
playerSprite = self.childNode(withName: "playerSprite") as? SKSpriteNode
}
The code checks for an item in the GameScene.sks file with the name playerSprite and sets the playerSprite variable to that item. The name of the sprite in the call to childNode has to match the name you gave it in the GameScene.sks file. If the names don’t match, the code won’t be able to find the sprite you added to the scene file. The playerSprite variable will still be nil, and nothing will happen when the player taps on the screen. The as? SKSpriteNode part of the code says to treat the item as a sprite node instead of a generic SpriteKit node.
The last thing to do is set the sprite’s position to where you tap in the scene. Add the following line of code in the touchDown function:
playerSprite?.position = pos
So the function looks like the following code:
func touchDown(atPoint pos : CGPoint) {
playerSprite?.position = pos
}
The code sets the position of the sprite to the position of the touch on the screen.
Run the playground, and the sprite should appear where you click in the game view.