In the Creating Your First SpriteKit Project article you created a game project in Xcode and removed Apple’s boilerplate code. Now you’re ready to start adding content to your game.

Xcode’s scene editor is the tool most SpriteKit games use to add game content. Use Xcode’s scene editor to do things like build your game’s levels, design your game’s main menu, and create an end of game screen.

Opening the Scene Editor

Select a file with the extension .sks from the left side of the project or playground window to open the scene in the scene editor. If you create a Game project or playground in Xcode, Xcode includes a scene file, GameScene.sks.

Scene Editor View

When you open an empty scene file, the scene editor looks like the following screenshot:

The scene editor has the following areas:

• Scene graph view
• Canvas
• Bottom bar
• Action editor view

The scene graph view shows a hierarchical list of the items in the scene. The scene graph view is the easiest way to select an item so you can move it, resize it, or edit its attributes.

The canvas is where you lay out the scene.

The bottom bar has the following controls:

• Buttons to show and hide the scene graph view and action editor view.
• An Animate button to play an action.
• A button to control the playback speed.
• Buttons to zoom the canvas in and out.

Unless you have a huge monitor it can be tough to see the whole canvas to see how large the scene is. Zooming out lets you see the bounding rectangle of the scene.

The action editor view lets you edit SpriteKit actions in the scene editor. You’re more likely to create SpriteKit actions in code.

Drag an action from the Library to the action editor. Click the Animate button in the bottom bar to play the action. Select an action from the timeline and press the Delete key to remove an action.

Adding Items to a Scene

The first step to adding an item to a scene is to open the object library, which contains all the items you can add to SpriteKit scenes. Click the Add (+) button in the project window toolbar to open the object library.

If you are running Xcode 10, there is an Object Library button instead of an Add button in the toolbar.

Holding down the Option key when you click the Add button keeps the object library window open.

To add an item to the scene, select the item you want to add from the object library and drag it to the canvas or the scene graph view. Unless you want the item to be in the center of the scene, I recommend dragging to the canvas.

Moving and Resizing Items

Select the item from the scene graph view or the canvas. The following screenshot shows a selected sprite node in the canvas:

To move the item, click the white circle in the center, hold the mouse button down, and drag the item. To resize an item, click one of the eight blue dots, hold the mouse button down, and move the mouse in the direction you want to resize.

Renaming Items

Double-click an item in the scene graph view to rename it.

Making Other Changes to Items

Use the attributes inspector to make other changes to items. In Xcode choose View > Inspectors > Show Attributes Inspector to show the attributes inspector. What the attributes inspector shows depends on the type of item you are inspecting. The following screenshot shows the attributes inspector for a sprite node:

Some attributes you can specify for a sprite node include the following:

• Name
• Parent
• Texture image
• Position
• Size
• Anchor point
• Color
• Scale
• Physics body

If you’re going to access a sprite node from your code, it’s important to remember the name you gave it in the scene. If the names don’t match, your code won’t be able to find the node.

Exercise: Add a Sprite to the Scene

As a learning exercise, add a sprite (the Color Sprite item in the Library) to the scene. Run the project and you should see the sprite on the screen.