The Swift Playgrounds app lets you create iOS apps on an iPad. You can also make 2D games using the SpriteKit framework in Swift Playgrounds. This article shows you how to use SpriteKit in Swift Playgrounds.

If you are new to Swift Playgrounds, read the following article:

Intro to Making SwiftUI Apps with Swift Playgrounds

You have to do the following to use SpriteKit in Swift Playgrounds:

• Create a SpriteKit scene
• Add a sprite view to the content view
• Show the scene in the sprite view

Create a SpriteKit Scene

Swift Playgrounds currently does not include a SpriteKit scene editor so you must create your scenes in code.

If you haven’t already done so, create or open an app playground. Add a new Swift file to the playground by tapping the Add Document button at the top of the sidebar and choosing Swift File.

Open the file you created and add the following code:

import SpriteKit

class GameScene: SKScene {
		
	override func didMove(to view: SKView) {
		backgroundColor = .yellow
		// Build the scene
	}
}

The first line of code imports the SpriteKit framework so you can use SpriteKit’s data types and functions in your game.

A SpriteKit scene must inherit from the SKScene class so you must create a Swift class for your SpriteKit scenes. I named the class GameScene. You can use any name you want for the scene class.

The didMove function sets up the scene. I set the background color of the scene to yellow in this example to keep things simple. In your game you will write functions to build the scene and call those functions in didMove.

Add a Sprite View

The Swift Playgrounds app playground creates SwiftUI apps. To use SpriteKit with SwiftUI, you must add a sprite view to the app’s content view. A sprite view lets a SwiftUI app show a SpriteKit scene.

Open the file ContentView.swift. Import the SpriteKit framework.

import SpriteKit

You should see the following code in the ContentView.swift file:

struct ContentView: View {
	var body: some View {
		VStack {
			Image(systemName: "globe")
				.imageScale(.large)
				.foregroundColor(.accentColor)
			Text("Hello, world!")
		}
	}
}

For a SpriteKit game, replace the VStack code with a sprite view.

var body: some View {
	SpriteView()
}

Show the Scene

At this point you have a compiler error because you haven’t specified a scene to display in the sprite view.

First you must declare a property in the content view for the scene to display.

@State var currentScene: SKScene = GameScene(size: 
		CGSize(width: 1024, height: 768))

The code declares a variable called currentScene. It uses the SKScene subclass you created earlier. Supply the size for the scene. In the code listing the scene is 1024 pixels wide and 768 pixels high.

The @State at the start of the property declaration says that SwiftUI is responsible for the storage of the SpriteKit scene. If you didn’t have the @State at the start, the app would create a new scene every time there was a change in the content view.

Now pass the scene to the sprite view.

SpriteView(scene: currentScene)

Here’s the full code.

import SwiftUI
import SpriteKit

struct ContentView: View {
	@State var currentScene: SKScene = GameScene(size: 
		CGSize(width: 1024, height: 768))
		
	var body: some View {
		SpriteView(scene: currentScene)
	}
}

Now the preview in Swift Playgrounds should be yellow. If you run the playground, you should see a yellow background. Now you can start making your game.