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:


  1. 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.
  2. Stage: The stage will preview your current scene. Here you can arrange all of the Nodes that belong to a scene.
  3. Timeline: The timeline is used to create animations within SpriteBuilder. We will look at that in a lot of detail later on.
  4. 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.

File View

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.

Node Library

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:


Code Connections

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.

Summer academy

An iOS Development Summer Course

Design, code and launch your own app. Locations in San Francisco and Asia

Find your location

Product College

A computer science college

Graduate into a successful career as a founder or software engineer.

Learn more

Cookies on Make School's website

We have placed cookies on your device to ensure that we give you the best experience on our website.

This site uses cookies to deliver our services. By using our site, you acknowledge that you have read and understand our Cookie Policy, Privacy Policy, and our Terms of Service. Your use of Make School’s Products and Services is subject to these policies and terms.

Please note that Make School no longer supports Internet Explorer

We recommend upgrading to a modern web browser. Learn more