Introduction to the SpriteKit Scene Editor

Adding Zombie Sprites

Now that you know how to add a sprite it’s time to practice by adding some brain-hungry zombies to the mix! In this level, you’ll add five zombie sprites. Every zombie sprite will have a unique position but all will have the following properties:

• Name: zombie
• Texture: zombie
• Size: 50 x 50
• Lighting, Shadow Cast and Shadowed Mask: 1
• Body Type: Alpha mask
• Allows Rotation & Affected By Gravity: Disabled
• Category Mask: 2
• Contact Mask: 1

Now, add five zombie sprites with the following positions using the above properties.

1. (330, 750)
2. (-340, -160)
3. (330, 140)
4. (-390, -810)
5. (410, -410)

Done? Awesome! Your game scene should now have five zombies in these positions:

So, there is a little more coding to do. You didn’t actually think that you could get out of a tutorial with zero coding, did you?

Just like you did with the player, you need to add a few lines of code before these zombies will operate with the rest of the game. Open GameScene.swift, and add the following lines to didMove(to:) right after the line where you set up the player:

// Set up zombies
for child in self.children {
  if child.name == "zombie" {
    if let child = child as? SKSpriteNode {
      zombies.append(child)
    }
  }
}

These lines will find every child node with the name zombie and add them to an array of zombies – that sounds truly terrifying!

Build and run the game and the zombies should now be chasing you. Yikes! Hope you’ve been keeping up on your cardio.

Adding a Goal, Walls and a Background

All this running about is tiresome, and the zombies have you trapped. Your player might as well be the main course at a buffet as far as they are concerned.

Wouldn’t it be great to have a way to complete the level by adding a goal?

Open GameScene.sks. Select a Color Sprite from the Object Library and drop it on the scene. Then add the following properties to the sprite:

• Name: goal
• Texture: goal
• Position: x: 515, y: -825
• Size: 50 x 170
• Light, Shadow Cast, and Shadowed Masks: 1
• Body Type: Bounding rectangle
• Dynamic, Allows Rotation & Affected By Gravity: Disabled
• Category Mask: 3
• Contact Mask: 1

Your game scene should now look like this:

Just like before, you’ll need to set up this sprite in code. Open GameScene.swift, and add the following lines to didMove(to:) right after the lines where you set up the zombies:

// Set up goal
goal = childNode(withName: "goal") as? SKSpriteNode

When running the game, it’s hard to tell where the boundaries of the level are. In order to fix this you’ll need some walls around your level. You’ll add four walls with the following properties:

• Light, Shadow Cast, and Shadowed Masks: 1
• Body Type: Bounding rectangle
• Dynamic, Allows Rotation & Affected By Gravity: disabled

In GameScene.sks, add four color sprites to the scene for the four walls with the above properties and customize the position properties as follows:

Wall 1:

• Texture: wall_50x1920
• Position: (-515, 0)
• Size: 50 x 1920

Wall 2:

• Texture: wall_50x1700
• Position: (515, 110)
• Size: 50 x 1700

Wall 3:

• Texture: wall_1080x50
• Position: (0, 935)
• Size: 1080 x 50

Wall 4:

• Texture: wall_1080x50
• Position: (0, -935)
• Size: 1080 x 50

Good job! Your game scene should now look as follows:

Last, but not least, add a background to the game scene. Select a Color Sprite from the Object Library and drop it on the scene. Add the following properties to the sprite:

• Name: background
• Texture: background
• Position: (0, 0)
• Z-position: -1 (This layers the background behind all other nodes.)
• Size: 1080 x 1920
• Light Mask: 1

Control-click background in the scene hierarchy and choose Locked. This will allow you to still drag the scene around when zoomed in (as long as you don’t click on any other sprites!).

Build and run the game. As you run around the level the walls should keep you in place – see if you can get to the goal before the zombies get to you.

Camera Positioning with SKCameraNode

Being able to view the whole level at once isn’t really the best experience. The player and the zombies look too small, and the game feels a bit too predictable. To fix this, you’ll just need to implement a camera node.

Using a SKCameraNode, you can specify the rendering position of the scene. Because the camera is a node, it can be moved just like any other node in the scene using actions, physics and so on. When a scene renders with a camera node, two things happen:

1. The scene renders so that the origin of the camera node is placed directly in the middle of the scene.
2. The inverse of the camera node’s xScale, yScale and zRotation properties are applied to all nodes in the scene.

What this means is that if, for example, the camera is moved 20 pixels to the right, then the scene is rendered as if everything else moved 20 pixels to the left. If the camera is scaled by (0.5, 0.5) then only a quarter of the screen will show.

Adding a Camera to the Scene

So now you might be wondering – possibly even dreading – whether the camera node is something you’ll have to create programmatically. The answer is, as you might expect, that you can create it using the scene editor. Whew!

In GameScene.sks, go to the Object Library, and locate the Camera node. Next, drag and drop it onto the scene. Open the Attributes Inspector, and change these properties:

• Name: camera
• Position: (0, 0)
• Scale: (0.5, 0.5)

The camera’s position doesn’t have to be exact as it’s updated in code as the player moves, but centering it keeps the scene tidy.

If you were to run the game right now, the camera would not yet be activated because you need to tell the game scene to use the camera node as its camera.

Click Scene in the scene hierarchy to select the scene and set its Camera property to the camera node you just created.

With this done, the camera should work as expected. Good job! Build and run the game and you should now only see a quarter of the level at any given time. The camera should also follow the player as you move it around.