Create Your First SpriteKit Scene
Before building your first scene, let’s go over the key components that make up a SpriteKit scene:
-
SKView: This is the primary view for a SpriteKit scene. The SKView class inherits from the UIView class (or NSView on macOS).
-
SKScene: This is the root node of the scene. The SKScene class includes properties and methods that define how to render content and process animation.
Typically, the view is responsible for presenting the scene.
You can create a scene in two ways: visually using the Scene Editor or programmatically in code using the Source Editor. For this first game, you’ll use code and the Source Editor to get better acquainted with what’s going on under the hood of SpriteKit.
Open the GameViewController.swift file and in the viewDidLoad() method, add the following code below the line that reads super.viewDidLoad():
| | // Create the view |
| | if let view = self.view as! SKView? { |
| | |
| | // Create the scene |
| | let scene = GameScene(size: view.bounds.size) |
| | |
| | // Set the scale mode to scale to fill the view window |
| | scene.scaleMode = .aspectFill |
| | |
| | // Set the background color |
| | scene.backgroundColor = UIColor(red: 105/255, |
| | green: 157/255, |
| | blue: 181/255, |
| | alpha: 1.0) |
| | |
| | // Present the scene |
| | view.presentScene(scene) |
| | |
| | // Set the view options |
| | view.ignoresSiblingOrder = false |
| | view.showsPhysics = false |
| | view.showsFPS = true |
| | view.showsNodeCount = true |
| | } |
First, you downcast the view as an SKView using the forced form of the type cast operator (as!). Xcode uses this type of casting in its default iOS Game template, so it makes sense to use it here, too.
After that, you create the scene and set its size and scaleMode properties. The size of your scene depends largely on the game’s design and the devices it supports. With this code, you set the scene size to match the view size (view.bounds.size), and you scale the content to fill the view while also keeping the aspect ratio intact (.aspectFill). You also set the background color using the UIColor class, giving it a nice shade of blue.
You then call the presentScene(_:) method on the view, which presents the scene.
Finally, you set a few standard view properties. The SKView class has a lot of properties, so let’s keep the focus on the ones you’re setting up here:
-
ignoresSiblingOrder: A true or false value used in part to control the rendering order of the nodes. You’ll learn more about this property in Chapter 2, Adding Animation and Movement with Actions.
-
showsPhysics: A true or false value used to show or hide the physics bodies attached to your nodes.
-
showsFPS: A true or false value used to show or hide the frames per second (FPS) indicator.
-
showsNodeCount: A true or false value used to show or hide the number of nodes.
The last three properties are known as performance stats and are generally used for testing and debugging your SpriteKit scenes. There are other performance stats—like showsDrawCount, showsQuadCount, and showsFields—but you won’t be using them, so there’s no need to add them.
Build and run the project, and you’ll see the background is now a lovely shade of blue. You’ll also see the performance stats in the lower-right corner as shown in the following image:
With the view controller set up and the view presenting the scene, you’re ready to start adding content.