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.
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:
Your applicationDidFinishLaunching: method should now look similar to this:
// Enable retina display support
Game *game = [[Game alloc] initWithWidth:320 height:480];
sparrowView.stage = game;
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.
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.
With the different iOS screen sizes now available adjusting your UIImage’s for all the different display sizes can be a major hassle.
Fortunately Matt Gemmell has created some super-handy categories to do this for us.
These categories extend UIImage and allow you to easily resize your images by scaling or cropping, and even use the image’s metadata to make sure the image is shown with the proper orientation.
Also included is a UIImage tint category which allows you tint any UIImage by filling in the transparent pixels with a specific color. This is extremely useful if you are creating something like a menu so you can easily tint an image to show that it is selected.
This can all be download in the MGImageUtilities on Github:
A full demo app is included so you can see all the goodies in action.
You can read Matt’s full writeup on MGImageUtilities here:
MGImageUtilities Writeup By Matt Gemmell
Btw, if you’ve created an open source library and would like some exposure (along with a backlink) submit information about it here and I’ll be glad to check it out, and put it in front of the 2,000+ daily visitors to this site.
Apple has given devs a pretty nice present, if you haven’t seen this I suggest checking it out.
Just taking a look at these now, and wanted to share with anyone who hasn’t seen this page yet.
You can find the videos through here: WWDC 2010 Videos
There’s also a ton of sample code that has been added which you’ll find a link to on that page in iTunes.