The iPhone 4s and new iPad feature ‘Retina’ displays. These displays have twice the number of pixels in height and width as previous devices, allowing images and text to display in resolution so high the human retina cannot make out the pixels. This gives a sharper look to text and pictures. App Studio 2.5.1 adds support for this.
It does not transform a 320×480 screen into one that you can use at 480×960. The extra pixels are all used behind the scene: the screen will look like the exact same 320×480 size to your app. Fonts are drawn using the extra pixels, and images rendered at high resolution if you supply high res versions of your images.
Here’s how to use it in App Studio:
For each of the images in your project, provide two versions. In this example, we’ll use this adorable picture of two lion cubs in Kruger Park last week.
Picture 1: LionCubs.jpg. This image is normal resolution of 320 x 212.
Picture 2: LionCubs@2x.jpg. This image is normal resolution of 640 x 424. It is twice as wide and twice as tall as Picture 1.
Notice the different file names? That’s how iOS finds the Hi Res version of Picture1.
- Add the picture to your project as usual, using an Image or PictureBox control, displaying Picture 1 (“LionCubs.jpg”).
- Add both file names to your manifest in Project Properties.
- With Project Properties and Global Code selected in the Project Explorer, check ‘Retina Display Support’ in the Toolbox.
Your app will now display the Hi Res version of the image when running on a retina device. The image will use the same proportion of the screen: but the image will show in higher quality. The normal version will display on all other devices.
This is for iOS only at this time. Retina devices have not been released by other manufacturers.
Update: Mike Burgher notes “If you use PhoneGap Build, you can specify retina sizes for iOS icons and splashscreens as well, right in the config.xml file. (and If you DON’T include a higher res splashscreen, it defaults to the PhoneGAP Build splashscreen.)”