Use Reference Nodes in Your Scene

The SpriteKit framework includes a special kind of node known as a reference node, which is backed by the SKReferenceNode class. You create and use these nodes in your scenes when you want to reference the content saved in a different archived sks file.

With reference nodes, you can share content across multiple scenes without having to worry about unnecessary duplication. Because Val’s Revenge will undoubtedly include more than one level (scene), using reference nodes for certain content makes sense.

In the next section, you’ll use reference nodes to build a simple 8-way D-pad controller and the Attack button. Later, in ​Build Better On-Screen Controls​, you’ll modify these controls to make them more robust, allowing the player to move and fire using 360° of rotation.

Creating the D-pad Controller Reference Node

Create a new file (⌥⌘N) using the iOS SpriteKit Scene template:

Click Next and name the file Controller.sks. When the new file opens in the Scene Editor, you’re ready to get started.

In the Attributes Inspector, set the Size of the empty scene to (w: 350, h: 350) and the Anchor Point to (x: 0, y: 0). Great, you’ve just set the scene’s origin to the lower-left corner, making it easier to place the controller in the lower-left corner of the game scene.

It doesn’t make sense to recreate the wheel, er, the controller, so you’ll copy the objects from the existing game scene into this new controller scene.

Switch to the GameScene.sks file. In the Scene Graph View, right-click the controller node and select Copy. Right-click again, and this time select Delete to remove the node from the scene.

Go back to the Controller.sks file, right-click the Scene object in the Scene Graph View, and select Paste.

At this point, you probably won’t see the pasted node in the editor, but that’s okay—make sure it’s selected in the Scene Graph View. Then, in the Attributes Inspector, set the node’s Position to (x: 175, y: 175), and change the Name from controller to controller_main. When you’re done, your new controller scene will look like this:

Save the Controller.sks file—this is a very important step or you won’t be able to select this file as a reference—and then head back to the GameScene.sks file. Once there, open the Object Library and drag a Reference node onto the scene.

In the Attributes Inspector, set the reference node’s Position to (x: -295, y: -595) and its Name to controller.

You also need to select the archived sks file this node uses as its reference. To set the reference, go to the Reference drop-down list (located just above the Position settings), and select the Controller scene you just created.

At this point, the scene doesn’t look all that different. However, by using a reference node, you just made this game more scalable and easier to manage and maintain—especially when it comes to adding new levels and their corresponding scenes.

Let’s do the same thing with the Attack button.

Creating the Attack Button Reference Node

In the interest of time—and because you just finished creating a reference node for the D-pad controller—the steps in this section are condensed.

Create another new file using the iOS Resource, SpriteKit Scene template, and this time, name it AttackButton.sks.

In the Attributes Inspector, set the Size of the empty scene to (w: 140, h: 140) and the Anchor Point to (x: 1, y: 0), similar to what you did for the controller. This sets the scene’s origin to the lower-right corner, making it easier to place the button in the lower-right corner of the game scene.

Switch to the GameScene.sks file. Once there, copy, then delete the button_attack node since you’ll be using a reference node instead.

Go back to the AttackButton.sks file and paste the button_attack node into the scene.

In the Attributes Inspector, set the button_attack node’s Position to (x: -70, y: 70). Leave its Name set to button_attack. Save the file and then go back to the GameScene.sks file.

Finally, drag another Reference node into the scene. Name the new node attackButton, set its position to (x: 270, y: -490), and choose the AttackButton scene as its reference.

Now that you have the controller and button nodes set up as references, you can focus on getting them to remain visible as the player moves around the scene regardless of device type or orientation.