This chapter will show you another powerful feature of SpriteBuilder - you can easily build games that run on smartphones and tablets. Within the next minutes you will have an iPad version of Peeved Penguins.

Time for some new Assets

As of now we are still using 2x assets in our game. These are used for the iPhone retina version. If we want to support the iPad retina without upscaling and blurring our assets we need to provide them in 4x resolution.

Download the new assets. Once you unpacked the new zip file you should see two folders containing the high-res art.

Open your SpriteBuilder project and remove the two old asset folders you added throughout this tutorial:


Next, add the new assets you just downloaded. Drag the animation and the PeevedPenguinsAssets folder to the SpriteBuilder project - one at a time. When you added both folders make the PeevedPenguinsAssets a smart sprite sheet again:


Note that you might have to save / re-open your CCB files for the "missing texture" errors to disappear.

To avoid that images get scaled up on the iPad we need to let SpriteBuilder know that we are providing 4x assets now. Let's update our project settings:


Great, we're already half way through the process of making our game iPad compatible. Publish your changes and run the game on an iPad simulator. The game should look like this:


This is already really neat. However, two things are off:

  1. The button seems misplaced. It should be in the top left corner.
  2. The user interaction does not behave as expected. You can only touch the catapult in the bottom half of the screen.

Let's go ahead and fix these issues.

Fixing the user interaction

The problem with the user interaction is caused by the root node of our scene. The root node is not resizing correctly on the iPad. The size of the root node is currently still defined in UI Points. UI Points do not scale up on larger devices. Let's change the size of the Gameplay.ccb root node in SpriteBuilder:


We always want to use the full height of the screen, so we choose a 100 % height. The width of the Gameplay scene should not exceed the background image - we choose 960 Points.

Now the root node will resize correctly when running on larger devices and the user interaction will work just as expected.

Fixing the button position

This is an easy one. We need to change the reference corner for the button to be the top left corner and set the anchor point to the top left, too (0.0, 1.0). Then we use the position to define the distance to the top left corner. We choose (10,10):


Now the button's position will always be defined from the top left corner of the screen. That will improve the layout on the iPad a lot. Publish the changes & run the game:


Well done!

You now have a fully functional iPad game. The user interaction works as expected and your interface looks great across multiple devices!

This section concludes this tutorial for now. Well done! Stay tuned for further tutorials and additions to this tutorial in future. If you enjoyed building this game with SpriteBuilder we would like to ask you to provide a positive review on the App Store. Thank you very much for following through!


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