SpriteKit Playground Introduction

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.

Creating a Playground

The first step in using a Swift playground is to create one. Launch Xcode and choose File > New > Playground. The New Playground Assistant opens.

CreatePlayground

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.

Show the Game View

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.

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.

AssistantEditorHighlighted

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 assistant editor, you’ll notice the live view is 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.

RunPlaygroundHighlighted

Now the playground is running and the live view should have a black background with a Hello, World! label showing.

HelloWorldLabel

Play with the Default Playground

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.

Removing Apple’s Boilerplate Code

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.

Stop the Playground

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.

Show the Navigator

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.

ShowNavigatorHighlighted

Remove the Label from the Scene

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.

Navigator

Select the label in the scene editor.

RemoveLabel

Press the Delete key to remove the label.

Remove the Code

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:

Next, remove the code inside the following functions:

  • didMove
  • touchDown
  • touchMoved
  • touchUp

After removing the code, the functions should look like the following:

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.

Add Your Own Stuff

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.

Add a Sprite Node

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.

ObjectLibraryButtonHighlighted

Select Color Sprite from the object library and drag it to the scene canvas.

ObjectLibrary

Select the sprite in the canvas. Open the attributes inspector by choosing View > Inspectors > Show Attributes Inspector.

AttributesInspector

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.

Add Code

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:

The start of the GameScene class should look like the following code:

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:

So the function looks like the following code:

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:

So the function looks like the following code:

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.