Let's take a tour of SpriteBuilder's User Interface before we finally delve into creating our game.
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 scene.
- 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 physics properties.
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 folder hierarchy.
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 and color:
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 game!
If you have feedback on this tutorial or find any mistakes, please open issues on the GitHub Repository or comment below.