We are going to use a tool called SpriteBuilder to make this game. When we are done, the game will look like this:


Go to the Mac App Store and download the latest version of SpriteBuilder. It's free! Drag SpriteBuilder onto your dock from your Applications folder so that you can easily access it.

Open SpriteBuilder.

SpriteBuilder Basics

SpriteBuilder's main goal is to provide a tool similar to Xcode's Storyboard but for Cocos2d games.

SpriteBuilder is a visual editor that allows you to rapidly create Cocos2d games. It enables you to create user interfaces, gameplay scenes, and levels by dragging different components to different interface files and arranging their positions. This can save a lot of time compared to positioning every element on the screen in code.

Next to this core functionality SpriteBuilder includes tools to manage your assets, create animations, audio effects, and particle effects. We will get to these advanced features towards the end of this tutorial.

SpriteBuilder Workflow

When you use SpriteBuilder for your game, you start by creating a new SpriteBuilder project instead of an Xcode project. When creating a SpriteBuilder project, SpriteBuilder will create and maintain an embedded Xcode project for you.

Inside the SpriteBuilder project you will organize all the resources and assets for your game. You will create interface files for the different scenes in your game. The interface files are called .ccb files, named after SpriteBuilder's predecessor CocosBuilder. SpriteBuilder also allows you to create code connections. With code connections you can create links between .ccb files and Objective-C classes. This means you can add behavior to your game's objects in SpriteBuilder and in code - we will discuss this concept in depth later.

In general your workflow with SpriteBuilder will look like this:

  • Create a new project in SpriteBuilder
  • Add images and other resources to your SpriteBuilder project
  • Create multiple .ccb files for the different scenes and objects in your game
  • Add code connections to extend the behavior of these scenes and objects
  • Publish your project in SpriteBuilder. This will update the Xcode project that is linked to your SpriteBuilder project
  • Run your game from Xcode

When you run your game from Xcode, a component called CCBReader will read all the .ccb files from your SpriteBuilder project and create Cocos2d Scenes and Nodes (the basic classes in Cocos2D) out of them. Here's a short visualization of how SpriteBuilder and Xcode projects work together:


Read on to learn how to create your first project!


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