CommandFusion Wiki

Documentation Resources

User Tools

Site Tools


software:gui-designer:retina-display

Differences

This shows you the differences between two versions of the page.

Link to this comparison view

software:gui-designer:retina-display [2012/10/02 03:42]
jarrod
software:gui-designer:retina-display [2017/04/06 22:45] (current)
jarrod
Line 1: Line 1:
 ====== Retina Display ====== ====== Retina Display ======
 +
 +<WRAP center round info 60%>
 +Designing for iPhone 5/6/7?\\
 +Choose '​iPhone 5' from the guiDesigner project properties drop down.\\
 +Read on below for details why!
 +</​WRAP>​
 +
 ===== Background ===== ===== Background =====
  
 The new Apple iPad has a native resolution of 2048 x 1536.\\ The new Apple iPad has a native resolution of 2048 x 1536.\\
-The iPhone 5 and later iPod Touch has a native resolution of 1136 x 640.\\+The iPhone 6+/7+ has a native resolution of 2208 x 1242 ([[http://​www.paintcodeapp.com/​news/​iphone-6-screens-demystified|downsampled]] to 1920 x 1080).\\ 
 +The iPhone 6/7 has a native resolution of 1334 x 750.\\ 
 +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. 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.\\ +These are all at least twice or three times 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.+ 
 +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 ===== ===== Relevance to CommandFusion =====
Line 16: Line 26:
 ===== Implementation ===== ===== Implementation =====
  
-For every graphic used in your project, you need to create a matching graphic that is exactly twice the pixel size of the original, and append '​@2x'​ to the filename.\\ +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'​.\\ +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.\\+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.\\ 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 320x480, then once that is all done you must create double resolution graphics.\\+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.\\ 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.
software/gui-designer/retina-display.1349149336.txt.gz · Last modified: 2012/10/02 03:42 by jarrod