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:
- The button seems misplaced. It should be in the top left corner.
- 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:
You now have a fully functional iPad game. The user interaction works as expected and your interface looks great across multiple devices!
If you have feedback on this tutorial or find any mistakes, please open issues on the
GitHub Repository or comment below.