I find it tedious to remove all of the Apple-supplied material in their game playground every time I create a playground. I have a SpriteKit playground with the boilerplate removed so you can start using SpriteKit right away.

Download Playground

I left one important thing out of my SpriteKit playground article: how to add files to the playground. I wanted to put that material in the article, but there was so much to mention that it warranted its own article.

Keep in mind that Swift playgrounds aren’t designed to handle tons of files. If you find yourself creating dozens of files, you’re better off creating an Xcode project for your game.

Playgrounds Have Limited Support for Creating New Files

If you look at the navigator for a playground, you will see that a playground page has a Sources folder and a Resources folder.

You can add a new Swift file to the playground by control-clicking the Sources folder and choosing New File. Control-clicking the Resources folder and choosing New File creates an empty file. Those are the only options for creating a new file in a playground.

Adding New Files to the Playground

How do you add things like new scenes and image files to your playground? You must perform the following steps:

1. Put the playground in its own folder.
2. Add the files to the playground folder.
3. Add the files from the playground folder to the playground.

Putting the playground in its own folder isn’t mandatory, but doing so makes organizing the files in the playground easier.

Adding Files to the Playground Folder

In Xcode choose File > New > File to create a new file. The New File Assistant opens.

Click the iOS button at the top of the window. Select the type of file you want to create. For SpriteKit games the most common files to create are the following:

• Asset catalog
• Cocoa Touch class
• SpriteKit action
• SpriteKit particle file
• SpriteKit scene
• SpriteKit tile set

Click the Next button. Name the file, navigate to the playground folder, and click the Create button.

Troubleshooting

If the New File Assistant does not open and a new file appears in the playground, close the playground and reopen it. Swift playgrounds can be flaky.

Add the Created Files to the Playground

Now that you created the file, you can add it to the playground. Select the Resources folder or Sources folder (for source code files), right-click, and choose Add Files to. An Open panel opens. Navigate to the playground folder, select the file you want to add, and click the Add button.

Troubleshooting

If the file you added does not appear in the playground, close the playground and reopen it.

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.

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.

Xcode 11 and Later

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.

Xcode 10 and Earlier

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.

Get the Live View to Show Something

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.

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.

Screenshot for newer Xcode versions:

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.

Select the label in the scene editor.

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.

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.

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.

Download Playground