iPhone 5 & 6

Getting Started Newbie Questions
#1

Hi,

Sorry for the senselessly newbie question, but I am completely new to CoronaSDK and have no idea what to do at the start. Ultimately, I want to make a portrait game for the iPhone and iPad (universal so I do not need to release 2 versions), and had some questions regarding the sizing/what I am supposed to select.

When I enter the Corona Simulator I see the screen size section, with both a phone pre-set and tablet pre-set. Upon clicking them it auto-places widths/heights, however upon investigation it does not seem that the two auto-filled dimensions will properly fit the iPhone 5/iPhone 6/iPhone 6 Plus/iPad (non retina)/iPad (retina)/iPad Mini.

With this being said, I was wondering what dimensions I will need to add in/any code needed to make the game work for iPhone 5 and up, and iPad retina and up (as I do not want to support older devices) in one app (universal).

I am regarding to this screen:

809p9jk.png

If anybody here can help me out with this that would be great. I was unable to find stuff like this for some reason (which is probably why this is such a stupid question).

Thanks!

#2

This is a kinda hard to understand problem for someone new to mobile development. The first thing you need to understand is something called “aspect ratio” and how it applies to mobile development.  Early on, live was easy, screens were 320 x 480.  This is a 1.5:1 screen.  That is for every horizontal pixel, there is 1.5 vertical. If you deal with photos, this is basically the same shape as a 4x6 photo. This represents all iPhones prior to the iPhone 5.  The iPhone 4/4s was double the pixels than the 3/3Gs, but the aspect ratio was the same.  Then came the iPad.  At 1024x768, you have a 1.25:1 aspect ratio, or in TV terms, its a Standard Def 4:3.  The iPhone 5 and later are a 1.77778:1 screen (i.e. 16:9, High Def TV).  This means the iPad is more square, the newer phones are taller and narrower.  Android device’s screen’s have several other aspect ratios too, but 16:9 and 1.6:1 are pretty common.

So how do you handle it. In our official recommendation you would make your content are 320x480 and choose “letterbox” for the scaling method.   Now if you make your background 320x480, you will end up with black “letterbox” bars on two sides of the screen that is longer than the background.  The solution to this is to use a 360 x 570 pixel background.  Depending on the real aspect ratio of the screen, some of the background will be off screen.  We call these area’s the bleed areas. You can’t put important information in your background in these areas.

Now inside your app, using this method, 0, 0 will not necessarily be the top left corner, nor will display.contentWidth, display.contentHeight necessarily represent the bottom right corner.  Instead the 320x480 area represents the center of the screen.  If you need to position something at the screens edge, you can use display.actualContentWidth and display.actualContentHeight to get to the bottom, right corner.  The Top left corner is display.screenOriginX, display.screenOriginY.

Since new devices have higher resolution screens, you have to next learn about how Corona can dynamically pick up  different resolution images for larger screens.

We have a guide that explains all of this:  https://docs.coronalabs.com/guide/basics/configSettings/index.html

Rob

#3

This is a kinda hard to understand problem for someone new to mobile development. The first thing you need to understand is something called “aspect ratio” and how it applies to mobile development.  Early on, live was easy, screens were 320 x 480.  This is a 1.5:1 screen.  That is for every horizontal pixel, there is 1.5 vertical. If you deal with photos, this is basically the same shape as a 4x6 photo. This represents all iPhones prior to the iPhone 5.  The iPhone 4/4s was double the pixels than the 3/3Gs, but the aspect ratio was the same.  Then came the iPad.  At 1024x768, you have a 1.25:1 aspect ratio, or in TV terms, its a Standard Def 4:3.  The iPhone 5 and later are a 1.77778:1 screen (i.e. 16:9, High Def TV).  This means the iPad is more square, the newer phones are taller and narrower.  Android device’s screen’s have several other aspect ratios too, but 16:9 and 1.6:1 are pretty common.

So how do you handle it. In our official recommendation you would make your content are 320x480 and choose “letterbox” for the scaling method.   Now if you make your background 320x480, you will end up with black “letterbox” bars on two sides of the screen that is longer than the background.  The solution to this is to use a 360 x 570 pixel background.  Depending on the real aspect ratio of the screen, some of the background will be off screen.  We call these area’s the bleed areas. You can’t put important information in your background in these areas.

Now inside your app, using this method, 0, 0 will not necessarily be the top left corner, nor will display.contentWidth, display.contentHeight necessarily represent the bottom right corner.  Instead the 320x480 area represents the center of the screen.  If you need to position something at the screens edge, you can use display.actualContentWidth and display.actualContentHeight to get to the bottom, right corner.  The Top left corner is display.screenOriginX, display.screenOriginY.

Since new devices have higher resolution screens, you have to next learn about how Corona can dynamically pick up  different resolution images for larger screens.

We have a guide that explains all of this:  https://docs.coronalabs.com/guide/basics/configSettings/index.html

Rob