0
\$\begingroup\$

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.

\$\endgroup\$

2 Answers 2

Reset to default
1
\$\begingroup\$

  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.

enter image description here

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.

\$\endgroup\$
3
  • \$\begingroup\$ nice answer... :) i have one question though. you mean by empty space on a game, meaning it is not fullscreen? that is not an option for me.. i want my games to be in fullscreen mode. :( \$\endgroup\$
    – dovicz
    Commented Dec 1, 2014 at 15:41
  • \$\begingroup\$ I have edited my post. \$\endgroup\$
    – Eejin
    Commented Dec 1, 2014 at 22:43
  • \$\begingroup\$ thank you very much for enlightening me my friend... :) this is really helpful... maybe ill make the gray/black portion of the screen of iPhone 4/4S show some other graphics.. ill mark your this as the answer as it is the best answer so far. thank you. \$\endgroup\$
    – dovicz
    Commented Dec 2, 2014 at 9:27
0
\$\begingroup\$

Before you do anything with your program, check which phone the app is on and edit the screen size based off that.

Apple Developer site --> UIDevice class. this class lets you get software and hardware information about the specific device your running.

then do a series of if else if statements that 1 by 1 compare, when it matches, it sets the display, then you go into your program loop.

\$\endgroup\$
3
  • \$\begingroup\$ you seem to have not understood my question friend... I am asking about graphics and how to handle them on a specific situation like parallax backgrounds... which would be the best approach, coding is not a problem but the general idea that people uses to solve problems like this is what concerns me. :) but thanks for the response... much appreciated. \$\endgroup\$
    – dovicz
    Commented Dec 1, 2014 at 12:14
  • \$\begingroup\$ Ok i get what part you wanted specifically. Personally id create a picture for each resolution. stretch it in a photo editor like photoshop or gimp where you have better control over scaling. The only other method that is viable is make a picture for the largest resolution and scale down. Scaling up would cause noticeable pixelation. \$\endgroup\$
    – FissionFlame
    Commented Dec 1, 2014 at 12:24
  • \$\begingroup\$ hmm. ok. so scaling down will be the solution. thanks... :) wonderful. but how about my second question? if my base target would be the highest resolution graphics then will the viewing area reduce on the smaller devices? will it be ok if my game, an endless runner. will have larger viewing area on larger devices compared to smaller devices? \$\endgroup\$
    – dovicz
    Commented Dec 1, 2014 at 13:43

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .