Let's take a tour of SpriteBuilder's User Interface before we finally
delve into creating our game. At first sight, SpriteBuilder's UI feels
quite familiar - it uses many concepts from Xcode/Storyboard.
The interface is divided into 4 main sections:
- Resource/Component Browser: Here you can see the different
resources and scenes you have created or added to your project. You
can also select different types of Nodes and drag them into your
- Stage: The stage will preview your current scene. Here you can
arrange all of the Nodes that belong to a scene.
- Timeline: The timeline is used to create animations within
SpriteBuilder. We will look at that in a lot of detail later on.
- Detail View: Once you select a node in your scene, this detail
view will display a lot of editable information about that node. You
can modify positions, content (the text of a label, for example) and
Let's take a closer look at the most important views.
The first tab in the resource/component browser (labelled as section 1
in the image above) represents the File View. It lists all the .ccb
files and resources you have added:
In this view you can add new resources and restructure your project's
The third tab is the Node Library:
This panel shows you all available node types you can use to construct
your gameplay scenes and menus.
The first tab of the Detail View (labelled as section 4 in the above
image) is the Inspector. Once you have selected an object on your stage
you can use this panel to modify many of its properties, like position
The second tab on the right panel let's you manage code connections for
your selected node. One of the things you can do here is set custom
Objective-C classes for your nodes:
Publishing to Xcode
You already have used this button when testing your first project. Using
the button in the top left corner, you publish your changes in your
Spritebuilder project to your Xcode project. Whenever you changed your
SpriteBuilder project and want to run it, you should hit this button
before building the Xcode project:
Now you're ready to add content to your very first SpriteBuilder
If you have feedback on this tutorial or find any mistakes, please open issues on the
GitHub Repository or comment below.