CommandFusion Wiki

This page is read only. You can view the source, but not change it. Ask your administrator if you think this is wrong.
====== Retina Display ======
===== Background =====

The new Apple iPad has a native resolution of 2048 x 1536.\\
The iPhone 5/5C/5S and latest iPod Touch has a native resolution of 1136 x 640.\\
The iPhone 4 and previous iPod Touch both have screens with a native resolution of 960 x 640.

These are all at least twice the resolution of the older models.

However, **all apps are still designed in non-retina resolutions** (1024x768, 568x320 and 480x320) and then iOS automatically scales the applications to the higher resolution of the "Retina Displays". In the scaling process, Apple implemented a method of using higher resolution graphics on these devices, whilst using the original graphics for the low resolution devices.

===== Relevance to CommandFusion =====

Because all apps are still developed in the lower resolution, you also still need to use that resolution for your project size in guiDesigner. By default, any images you use in your design will be automatically scaled up to suit the Retina Display resolution.\\
But if you want to take advantage of the higher resolution and create a crisper interface with no scaling, you need to take one extra step for every graphic in your project.\\

===== Implementation =====

For every graphic used in your project, you create a matching graphic that is exactly twice the pixel size of the original, and append ''@2x'' to the filename.\\
For example, if you had a button graphic that was 50x50 pixels, named ''btn_off.png'' you would need to create an additional graphic that is 100x100 pixels, named ''btn_off@2x.png''.\\
The ''@2x'' must be appended to the end of the filename, but before the file extension.\\
\\
This additional graphic does not need to be added anywhere in guiDesigner, rather just placed alongside the original file, in the same directory.\\
So you just create your GUI as per normal, at 1024x768 or 568x320 or 480x320, then once that is all done you must create double resolution graphics.\\
\\
iViewer will automatically use the higher resolution graphics when loading the GUI file if it is run on a device with Retina Display support.\\
\\
You can also create all your graphics in @2x filename convention, and guiDesigner will automatically render the images at half size. This way, if you are only targeting retina devices, you do not have to create the original lower resolution graphic at all.
CommandFusion Wiki

User Tools

Site Tools

Page Tools
