Set Position, Coordinates, and Anchor Points

Apple Game Frameworks and Technologies — by Tammy Coron (26 / 193)

👈 Create Your First Sprite Node | TOC | Add the Foreground 👉

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.