Add Nodes Using the Object Library

In ​Add the Background​, you added a background image to the game scene by creating a new background sprite node. You then added that node as a child node of the game scene; you did all of that in code.

However, this time around, you’ll create and add a background node to the node tree using the Object Library, and you’ll set its options using the Attributes Inspector. But first, it’s time for a quick tour.

Touring the Scene Editor

From within the Project Navigator, select the GameScene.sks file. Files with the sks file extension are known as SpriteKit scene files. This particular scene file is what gets loaded from the GameViewController.swift file. You’ll learn more about how that works in ​Configure the View and Load the Scene​.

When you select the GameScene.sks file, it opens in the Scene Editor and looks something like the image.

To see the entire scene, you may need to zoom out depending on the size of your monitor. You can control the zoom level in a few ways: from Xcode’s App menu, select Editor ▶ Zoom In or Editor ▶ Zoom Out; you can also use the hotkeys, ⌘+ and ⌘-. Alternatively, you can use the + and - buttons, located near the bottom-right corner of the main editor window.

The Scene Editor includes the Scene Graph View where you can see all of the objects within the scene—essentially, this is where you’ll find the node tree. The Action Editor View is where you can set up actions and animations, and of course, the various inspectors are off to the right, including the Attributes Inspector, which is where you’ll spend most of your time building your scenes and setting up your nodes’ properties.

As you work with different nodes, the Attributes Inspector will change accordingly. For example, see the image for three types of nodes and their corresponding attributes.

Take a few minutes to look around.

Now that you know the lay of the land, so to speak, it’s time to get building.

Adjusting the Scene Size

The first thing you can do is remove the helloLabel node since you won’t be using it in Val’s Revenge. From the Scene Graph View, select the helloLabel node and either right-click on the node and select Delete, or press the delete key on your keyboard.

Next, you’ll change the size of the scene. For Gloop Drop, you set the scene size through code; however, you can set the size right here because you’re using the Scene Editor to build this scene.

With the Scene selected, look at the Attributes Inspector. Notice the scene’s size is set to 750 × 1334 (width × height); this is the default scene size and represents the iPhone 8’s native display size.

Unlike Gloop Drop, which is designed to support landscape orientation only, Val’s Revenge is designed to support both landscape and portrait orientations, with a focus on portrait mode. You’ll learn more about that in ​Add Support for All Devices and Orientations​, but for now, change the scene size to 1024 × 1336.

You’re ready to add your first sprite node.

Adding Your First Sprite Node

Click the + button to open the Object Library; you’ll find that button in the top-right corner of the editor:

When you click the + button, the following window appears:

This is the library. More specifically, the Object Library, which is the interface you’ll use to add new nodes and other scene-related content to the scene. You can also access the Media Library and the Color Library using the same + button.

The Case of the Disappearing Window
	Have you noticed that the library window isn’t docked or persistent? To keep the library open in a persistent window, hold down the ⌥ key as you click the + button.

For the background sprite node, you’ll add a new Color Sprite object. Drag the Color Sprite object from the library onto the scene (don’t worry about placement, just drag it anywhere onto the scene), like so:

When you let go, you’ll end up with a red square somewhere within your scene, like this:

You’ll also see the new SKSpriteNode in the Scene Graph View. You can either select the sprite node from the Scene Graph View or single-click the red square to select it. Now, shift your eyes to the Attributes Inspector; it’s here where you can set nearly all of the same options for your nodes that you set in code. For example, you can set its texture, position, size, and more.

Let’s give it a try.

In the Attributes Inspector, you’ll see a Name field. In this field, enter background and press return. While you’re here, also set the Texture to grass_background and the Position to X: 0, Y: 0; leave the other settings as they are.

If everything works as expected, your editor will show you something like this:

Shift your eyes over to the Scene Graph View on the left. Notice how the SKSpriteNode now reads background and shows a small image representing the node’s grass texture.

If you were to do this same thing in code, you might have done something like this:

Although using the Scene Editor gives you roughly the same results, it’s important to understand that using the Scene Editor doesn’t actually create any code for you; it’s just another way to build scenes and interact with the SpriteKit framework.

It’s time to test your scene. Switch the active scheme destination to the iPhone 11 Pro Max. Then, build and run the project as shown in the image.

Fantastic, you now have the greenest grass in the neighborhood, but it’s looking a little bare. Let’s add some lawn ornaments. No, not really, but you can add a few more nodes to the scene.

Adding Other Nodes

Before you start adding more nodes to the scene, lock the background node. To lock a node, select it in the Scene Graph View and either right-click and select Locked from the context menu, or click the little lock icon to the right of the text, like so:

Locking nodes is a great way to prevent unintentional changes to a node; this is especially useful when dealing with the background node, which tends to get in the way when you’re clicking around the scene.

With the background node locked, you’re ready to add another Color Sprite. This time, set the new node’s Name, Texture, and Position to player, player-val-head_0, and X: 0, Y: 0, respectively. This new sprite represents Val, the main character in Val’s Revenge.

Next, you’ll build the on-screen directional pad (D-pad) controller. This controller is what the player will use to move Val around the scene. Add another object, but this time instead of adding a Color Sprite, add an Empty object. When you drop it on the scene, you’ll see it listed as an SKNode in the node tree.

Select the SKNode in the Scene Graph View and set its Name to controller and its Position to X: -120, Y: -420. You’ll use this new, empty node as a container to hold the sprite nodes that make up the D-pad.

Return to the Object Library and drag five Color Sprite objects into the controller node, like so:

Set the properties of the five SKSpriteNode objects as shown in the image, from top to bottom.

Now, set the Texture for the controller_stop node to controller_stop; set the textures of the remaining nodes inside the controller node to controller_arrow_lg. You can multi-select the remaining nodes to make it easier.

If you think something looks a little off, you’re right. All the arrows are pointing in the same direction:

This shouldn’t be a surprise because you’re using the same image asset for all four arrow nodes. While this helps you save on system resources, you need to rotate some of these nodes to make them look right.

Starting with the controller_right node, set the Rotation to 180°; you’ll find this setting in the Attributes Inspector. Move down to the controller_up node and set its Rotation to 270°. Finally, select the controller_down node and set its Rotation to 90°. The nice thing about using the Scene Editor for this is that you don’t need to worry about converting degrees to radians like you do when setting the zRotation property directly in code.

All right, you’re almost done setting up the scene. Add another Color Sprite, but do not place it inside the controller node. Instead, drag it anywhere onto the scene. Alternatively, you can drag it directly to the Scene Graph View, placing it either above or below (but not inside) the controller node. Once you have the new Color Sprite added to the scene, set the following options in the Attributes Inspector:

• Name: button_attack
• Texture: button_attack
• Position: X: 200, Y: -420

Build and run the project.

Does your scene look like the one pictured on the left or on the right? Are you missing some sprite nodes? Maybe you don’t see the player or part of the controller? Perhaps the Attack button is missing?

(If your scene matches the image on the left, consider yourself lucky—but understand that you can’t rely on luck when it comes to scene rendering.)

The problem here is that all of the nodes share the same zPosition value, in this case, 0. Remember, you first learned about the zPosition property in ​Control Render Order with Z-Position​.

When multiple nodes share the same zPosition, the render order is arbitrary and can change with each launch, which means you have two choices: set all of the z-positions for all of the nodes or change the setting on the view that tells SpriteKit to ignore the sibling order.

While it’s possible to set a node’s z-position using the Scene Editor, for now, you’ll change the view’s configuration instead, and you’ll do it right before loading the scene.