Get Updates By E-mail 

Subscriber Counter
Article Written By:
Johann Dowa

iPhone Balloon Game Programming Tutorial: Adding Retina Display Support

I have had several requests for updates to the iPhone action game programming tutorial, and among them was an update for retina display support.  So here is the process step-by-step for those looking to add retina display support to a game made with the Sparrow Framework.

This update goes through the process of creating the new images for the game, and updating the source code so that the images display at high resolution on the retina display.

Fortunately the Sparrow Framework makes it very easy for us to do this, and handles most of the required programming automatically.

Project Files

You can download the project files leading up to this tutorial here.

You can download the project including the HD images and retina display support here.

For those who prefer Github you can find the project here, the completed project is in the 7-BalloonGameTutorial folder.

Step 1 – Making The Images

Since my initial images were created for the smaller iPhone display size I needed to scale them up to twice their original size.

I decided to use a tool called SmillaEnlarger to do this, a free open source tool that uses a fractal algorithm to scale up images. In my testing it has actually done better on the types of images (non-photos) that I need to scale up, and the end result looks considerably better than using any of the filters built into Photoshop. I have even seen it stated that SmillaEnlarger provides better results than expensive Photoshop plugins.

You can find SmillaEnlarger here.

You simply drag and drop the images with enlargement selected and a scale of 200%. In order to use the larger display support of the Sparrow Framework you will need to add @2x to the name of your images.

In my settings with SmillaEnlarger for non-photographis I simply turned all the extra adjustments down to zero.

Do that for each image in the project.  After doing that I suggest re-saving the images after opening them in preview, not essential, but SmillaEnlarger tends to make oversized files.

Step 2 – Add Images Into The Xcode Project

For this step you can simply drag all the created images into the Xcode project under resources where all the original files are.

You can also add the images by ctrl-clicking and then selecting add resources, select the images, and import them into the project.

Step 3 – Turn On High Resolution Support In Game

The Sparrow Framework simply requires you to add one line of code at this point into the applicationDidFinishLaunch: method of your app delegate.

So open up BalloonGameTutorialAppDelegate.m, and in the first line within the applicationDidFinishLaunching: method add:

[SPStage setSupportHighResolutions:YES;

Your applicationDidFinishLaunching: method should now look similar to this:

- (void)applicationDidFinishLaunching:(UIApplication *)application {

// Enable retina display support
[SPStage setSupportHighResolutions:YES];

SP_CREATE_POOL(pool);

Game *game = [[Game alloc] initWithWidth:320 height:480];
sparrowView.stage = game;
[sparrowView start];
[window makeKeyAndVisible];
[game release];

[SPAudioEngine start];

SP_RELEASE_POOL(pool);
}

Now Build and Run the project, and you should be able to see the game running in retina display mode, I added the words High Definition to the images included with the project to illustrate that the new higher definition images are indeed displaying.  You can also select Window->Scale->100% to make your simulator display 1:1 for the iPhone’s resolution which makes it excessively large, but allows you to easily see HD is indeed working.

Conclusion

If you cannot see the words high definition you may have the retina screen turned off in the simulator, which means that in the Mac OS X menu you need to make sure Hardware->Device->Phone (Retina) is selected.

That is all there is to it, it is a very painless process with the Sparrow Framework.

The first tutorial in this series can be found here:
iPhone Balloon Game Programming Tutorial

You might be wondering why I didn’t pack the images using texture packer like in the Sparrow Framework’s tutorial on hd support.  My reason for that is simply because we’re still adding images to the project, and rather than pack the images over and over again we will do that when we add the finishing touches to the project.

In the next tutorial we will add menus to the game.

Submit A Resource

Have you created a useful tutorial, library or tool for iOS development that you would like to get in front of our 300,000+ monthly page views from iOS developers?

You can submit the url here.

The resources we feel will appeal to our readers the most will be posted on the front page.

Comments