Retinafy Your Game

This is the first of two posts on supporting high-res graphics in iOS games. This post will take a general approach to the subject, and the second post goes into into the specifics of implementing high-res graphics in Cocos2D.

Why support high-res graphics?

It wasn’t until I got my iPhone 4 that I really understood why I had to support the Retina display. I had assumed that Trainyard would look just as good on the iPhone 4 as it does on a regular iPhone, but unfortunately that’s not the case. 320×480 games look worse on the iPhone 4 than they do on normal phones. The scaling algorithm Apple uses to upscale low-res iPhone apps makes them look blurry. You’re not giving your game high-res graphics to make it look better, you’re giving it high-res graphics so that it doesn’t look worse.

You don’t have to support the Retina display, but if you want your games to look as good as possible, it’s something you should do. The other advantage to upgrading your graphics is that you can use the high-res images on the iPad as well, which means that even if your iPad app isn’t universal, it will still look great. Say goodbye to blurry 2x scale mode.

Retinafication considerations

You should be able to support high-res graphics without making any changes to the design and layout of your game. This isn’t like the difference between the iPhone and iPad. The iPhone and iPhone 4 have the exact same form factor. You need the graphics that look the same, just with more detail.

Don’t make your game based in 640×960 and then downscale it for older devices. I believe the “points” system Apple uses for UIKit is a good place to draw reference from. Keep all of your coordinates and positions in 320×480, and just scale the root of your display tree by a factor of two. If you’re using texture atlases (you should be), scale the coordinates when you load from the texture. In summary: scale your texture coordinates, not your display coordinates. Please, please don’t load high-res graphics on older devices. That’s just mean. You’ll need one set of low-res textures, and another set of high-res textures.

Supporting the iPad

I don’t believe an app should be marked “universal” unless its iPad mode is designed specifically for the iPad. With Trainyard, I didn’t made an iPad specific graphical layout, but I did want the game to use high-res graphics and look nice and crisp in 2x scale mode. What I wanted was definitely possible, but also a bit tricky.

Apple provides a handy system for loading high-res images with an @2x suffix, but unfortunately this doesn’t work on the iPad. For this reason and a few others, I recommend avoiding using @2x graphics (for now), and rolling your own high-res image loading. I use an “HD” suffix for all of my high-res images, and load them with a simple macro that checks whether the current device is an iPad or an iPhone 4.

You can treat the iPad and iPhone 4 in basically the exact same way, by loading high-res graphics and positioning them accordingly, and your game will look great in both 1x and 2x zoom. An interesting fact: Apple’s docs say that the UIScreen’s scale property is available in iOS 4.0 and up, but it’s actually available on the iPad as well, and it’ll tell you which “zoom level” you’re in.

Wrapping up

High-res graphics really will make your game look better. They can be a lot work, but if you implement them intelligently, the majority of the work will be on the graphical side of things, rather than coding. This post has been a very high-level overview, so if you have more in depth technical questions, please post a comment or message me on twitter(@MattRix). If you’re a Cocos2D developer, stay tuned for my in-depth post coming up later in the week.

PS: Yes, Retinafication actually is an official term, Apple uses it in this technote

This entry was posted in iDevBlogADay, iOS Development. Bookmark the permalink.

One Response to Retinafy Your Game

  1. Pingback: High-res graphics in Cocos2D | Struct.ca

Leave a Reply

Your email address will not be published. Required fields are marked *

*

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>