graphics - Mobile Game Development: Supporting Multiple Screen Resolution for iOS

Questions

1. 
   

   When designing the graphics of the game (e.g. for iPhone): What is the resolution I should base it upon? Is it the smaller resolution (iPhone4 screen resolution) so that I could scale it bigger to bigger resolution devices later on or the bigger resolution (iPhone6+) so that I could scale it smaller for smaller resolution devices later on? Which solution would be the best to implement that will not distort the graphics?

   
   


2. 
   

   I am creating a game now (endless runner type game) and I am using parallax backgrounds. What will be the best option in supporting multiple resolutions? Scale it so that it will look the same on every device but it might distort the image or reduces the viewing area of the game when scaled. Alternatively let the other parts of the background be seen on larger resolution devices making the graphics stay as it is but let users using larger resolution devices see objects that might not be seen on smaller devices. I am talking about the next part of the parallax background.

   
   

My question pertains to iPhone devices (iPhone 4/4s, iPhone 5, iPhone 5s, iPhone 5c, iPhone 6, iPhone 6 Plus) for now.

Answer

1. 
   

   The easiest solution would be to create the graphics at the size of the highest resolution, but older iPhones have little memory so this solution would only work (smoothly) on the newer models. Instead you should target 2 resolutions. 1920 x 1080 for the iPhone 6(+) and 1136 x 640 for the 5(S). In this way you will only have to downscale for the iPhone 6. This downscaling should not have a huge effect on performance since the hardware in the iPhone 6 is more than capable.

   
   


2. 
   

   Generally you would want the experience to be the same across all devices. The iPhone 5 and up all have a 16:9 aspect ratio. Unfortunately the iPhone 4(S) doesn't. For these you will either have to downscale the content a little further and have an empty space on the top/side or have some content falling off. The latter probably isn't the best idea so downscaling and having a little extra space on top seems like the best solution.

   
   

The whole image is the screen of the iPhone 5(S), cut off area 2 and you get the screen of the iPhone 4(S). Now, if you want to have the same content visible on the iPhone 5 and 4 then you will need to keep the same aspect ratio. The 5 its aspect ratio is 16:9. When we apply this to the iPhone 4 then you will get area 1. The grey areas will not have any content. You can fill this up with a nice background or display an UI.