To get started, download our art pack. Add the art pack you just downloaded to your SpriteBuilder project by first unpacking the archive, then drag the folder onto the File View in SpriteBuilder (lower left area where you can see files & folders):

Create the character

Now that we have art, create a new CCB file (File > New > File) named Character.ccb of type Sprite:

Set its sprite frame property to assets/character1.png.

Now set the anchor point to (1, 0) so that it is positioned relative to its bottom-right corner. We'll see how this makes things easier when we set up the MainScene. When you're done, it should look like this:

We also want to set its custom class property to Character so that it looks for Character.swift when we create it later.

Now it's time to create the obstacles!

Create an obstacle piece

Create a CCB-File named Piece.ccb of type CCNode. We want to create a CCNode so that we can have more control over its animations later on in the tutorial.

Set the root node's content size to (105, 60) and its anchor point to (0.5, 0). These properties will make it easy for us to build a stack of sushi from code. You should also set its custom class to Piece, just like you did for Character.ccb above.

Drag in roll.png from your assets as a child of the root. Also drag in two chopstick.png from the resources as a child of roll. Name one right and the other left.

Your timeline should look like this:

It's time to position our sprites correctly!

Set the roll's anchor point to (0, 0). This should position it correctly within the root node's bounding box.

Now select the left chopstick. Set its position to (0, 50) and its anchor point to (1, 0.5).

Also create a doc root var code connection to left so that we can access it in code later.

Finally let's set up the right chopstick. Set its reference corner to the bottom-right. This changes which corner its position is based upon. Set its position to (0, 50). Also set its anchor point to (0, 0.5) and check Flip X.

Simply flipping the chopstick sprite allows us to use the same asset for both chopsticks and save a little bit of memory. Now create a doc root var code connection to right.

The obstacle should now look like this:

The last thing we need to do is uncheck the Visible box of both chopsticks. We'll programmatically turn branches on/off while generating the level.

Let's move on to setting up the MainScene in the next step!


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