Set Position, Coordinates, and Anchor Points
When you add nodes to a scene and set their position, knowing how the coordinate system works in SpriteKit is key to avoiding frustration.
In SpriteKit, the bottom-left corner of the unit coordinate system is located at (x: 0, y: 0) and the top-right corner is located at (x: 1, y: 1), as shown in the following illustration:
When you position a sprite node, you need to consider its anchorPoint property, which defaults to (x: 0.5, y: 0.5).
Look at the sprite node in the following image; its position property is set to (x: 0, y: 0). Notice how changing the anchorPoint can affect the node’s position.
The image on the left uses the default anchorPoint value of (x: 0.5, y: 0.5), while the image on the right is using (x: 0, y: 0). Notice the left image looks a lot like the background image in the previous build and run.
When you set a node’s position, it places the node at this position using the anchorPoint. In other words, the anchorPoint is what is positioned at that point specified.
Go back to the GameScene.swift file. In the didMove(to:) method, below this line:
| | let background = SKSpriteNode(imageNamed: "background_1") |
add the following code to set the background node’s anchorPoint property to location (x: 0, y: 0):
| | background.anchorPoint = CGPoint(x: 0, y: 0) |
In the last two code blocks, you set a (x: 0, y: 0) location using CGPoint(x: 0, y: 0). If you prefer, you can instead use .zero or CGPoint.zero as these two values produce the same results. For many developers, using .zero is preferred because it’s more concise and uses type inference.
Build and run the project. The background’s position looks better—well, almost. Notice the blue strip down the right side. Clearly, something is wrong.
Before fixing this problem, switch the active scheme destination back to the iPhone 11 Pro Max. Then, build and run the project again.
This looks even worse. Everything is scaled way up. What’s happening?
The quick answer is that the assets were designed for a scene size of 1336 × 1024. However, the scene size is set using the size of the view’s bounds, like so:
| | let scene = GameScene(size: view.bounds.size) |
This is a problem because the size of the view’s bounds—and therefore, the scene’s size—are not a match to the original design. Here’s a look at the size of the two devices:
- iPhone 11 Pro Max: (896.0, 414.0)
- iPad Pro 12.9-inch: (1366.0, 1024.0)
To get the size of the scene, you can add print("scene.size: (scene.size)") to the viewDidLoad() method after initializing the scene.
To fix the size problem, you can manually set the size of the scene. In the GameViewController.swift file, comment out the line where you set up the scene and add a new line to set the scene size to 1336 × 1024 manually:
| | // let scene = GameScene(size: view.bounds.size) |
| | let scene = GameScene(size: CGSize(width: 1336, height: 1024)) |
With this change, the scene size is set to match the design.
Build and run the project on both the iPad Pro and iPhone 11 Pro Max simulators and notice that everything looks as it should on both devices:
You’ll learn more about designing for multiple resolutions later in Part 2, Use the Scene Editor to Build Games. This was just a quick introduction with very little explanation because you’ve got one more thing to do before you wrap-up this chapter: you need to add the foreground.