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.
©2011 iPhone, iOS 4, iPad SDK Development Tutorial and Programming Tips. All Rights Reserved.
.
