iPhone 5 Compatibility

Solar2D iOS
#1

Alright…

I have been banging my head against this wall for the last few days.  I know I must be missing something very simple here.  

I am trying to get my app to be compatible with the iphone 5 screen resolution.

I am using the “ultimate” config.lua file: http://cl.ly/code/361z3z3E2c2d

I have included the “Default-568h@2x.png” file - which displays correctly.  

I am using display.newImageRect:

background = display.newImageRect( “images/Tree_Night_scene.png”, 320, 480)

Black bars still appear…

Should I be using local  background = display.newImageRect( “images/Tree_Night_scene.png”, 320, 480) ?

What are the EXACT dimensions my background artwork needs to be?

Thanks in advance!

#2

@joxenford, what you need is an image that is bigger than 320x480 – because 320x480 @2x (which is 640 x 960) won’t fill up the iPhone 5 screen, which needs 320x568 @2x (which is 640x1136).

So, if you create background image at 320x568, plus 2@x version of it:

local background = display.newImageRect( “images/Tree_Night_scene.png”, 320, 568)

This should remove your black bars on iPhone 5.

That said, if you are doing universal build, 320x568 will give you black bars on iPad devices.  For my landscape app, I use 570x380, plus @2x and @4x.  This seems to cover iOS devices and Android devices just fine for me.

Naomi

Edit:  I’m assuming you are using letter box, with 320x568 for tall device and 320x480 for other iOS devices.

#3

Thank you Naomi.  You explained it clearly and succinctly and solved my issue.  :-) 

#4

There may be another way around it, but this was my solution…

use Ultimate config…

Main.lua

_G.bwidth = nil

_G.bheight = nil

if string.sub(system.getInfo(“model”),1,4) == “iPad” then

    _G.bwidth = 360

    _G.bheight = 480

elseif string.sub(system.getInfo(“model”),1,2) == “iP” and display.pixelHeight > 960 then

    _G.bwidth = 320

    _G.bheight = 568

elseif string.sub(system.getInfo(“model”),1,2) == “iP” then

    _G.bwidth = 320

    _G.bheight = 480

elseif display.pixelHeight / display.pixelWidth > 1.72 then

    _G.bwidth = 320

    _G.bheight = 570

else

    _G.bwidth = 320

    _G.bheight = 512

end

xxx.lua

    local bg = display.newImageRect(“images/Backgrounds/xxxBG.png”,system.ResourceDirectory,_G.bwidth,_G.bheight )

#5

So Naomi, 

If I’m having the issue of sidebars on the iPhone 5 as well, and am drawing backgrounds at 360 x 570, you would recommend redrawing those at 380 x 570?

This should take care of the issue?

#6

The 360 is the short side of the device.  If you’re using a scale where your content area is 320x480 as a base, then you only need to be 320 wide.  The 360 wide is to cover the wider iPad.  If you’re seeing the black bars at the top and bottom (while portrait/vertical) or on the sides while landscape, then you have some other issue going on.

Either

  1. Your Default-568@2x.png file isn’t correct (not the right size, an error in the name, or missing).

  2. Your config.lua isn’t set up to take advantage of the extra space.

  3. When you load your background you’re not loading it with the size of the background (i.e. display.newImageRect(“background.png”, 360, 570).

Without seeing your config.lua and your background loading code and a list of the filenames in the folder with your main.lua its going to be hard to do more than guess.

#7

I’m sorry to butt in, but I just submitted my App for approval and recieved this back:

iPhone 5 Optimization Requirement -
Your binary is not optimized for iPhone 5.
New iPhone apps and app updates submitted targeting iOS 6 and above must support
the 4-inch display on iPhone 5 and

must include a launch image
with the -568h size modifier immediately following the <basename>
portion of the launch image’s filename.

Launch images must be PNG files
and located at the top-level of your bundle, or provided within each
.lproj folder if you localize your launch images.
Learn more about iPhone 5 support and app launch images by reviewing
the iOS Human Interface Guidelines
and iOS App Programming Guide.

I’m a little confused about what it means…
Does anybody have any ideas?

EDIT: Ok, so after playing around I have figured out what I need. Since I have never included Launch images (We’ve never used them) I wasn’t aware they were now a required thing.

#8

I just attempted to submit my App to the app store and received the same error.

I’ve got the launch images names so:

default-568h.png
default-568h@2x.png
default-ipad.png
default.png
default@2x-ipad.png
default@2x.png

I’m really confused now. They’re all the correct size (I checked)

#9

The file names are case sensitive.  They need to be named exactly:

Default.png

Default@2x.png

Default-568h@2x.png

Default-Portrait.png

Default-Portrait@2x.png

Default-Landscape.png

Default-Landscape@2x.png

The capitalization of the letters matters.  Here are the sizes they need to be:

Default.png                            320x480

Default@2x.png                     640x960

Default-568h@2x.png            640x1136

Default-Portrait.png               768x1004

Default-Portrait@2x.png        1536x2008

Default-Landscape.png         1024x748

Default-Landscape@2x.png   2048x1496

Note the iPad screens are a few pixels short of the actual screen size.

#10

Excellent, cheers Rob! You’re a life saver!

#11

@joxenford, what you need is an image that is bigger than 320x480 – because 320x480 @2x (which is 640 x 960) won’t fill up the iPhone 5 screen, which needs 320x568 @2x (which is 640x1136).

So, if you create background image at 320x568, plus 2@x version of it:

local background = display.newImageRect( “images/Tree_Night_scene.png”, 320, 568)

This should remove your black bars on iPhone 5.

That said, if you are doing universal build, 320x568 will give you black bars on iPad devices.  For my landscape app, I use 570x380, plus @2x and @4x.  This seems to cover iOS devices and Android devices just fine for me.

Naomi

Edit:  I’m assuming you are using letter box, with 320x568 for tall device and 320x480 for other iOS devices.

#12

Thank you Naomi.  You explained it clearly and succinctly and solved my issue.  :-) 

#13

There may be another way around it, but this was my solution…

use Ultimate config…

Main.lua

_G.bwidth = nil

_G.bheight = nil

if string.sub(system.getInfo(“model”),1,4) == “iPad” then

    _G.bwidth = 360

    _G.bheight = 480

elseif string.sub(system.getInfo(“model”),1,2) == “iP” and display.pixelHeight > 960 then

    _G.bwidth = 320

    _G.bheight = 568

elseif string.sub(system.getInfo(“model”),1,2) == “iP” then

    _G.bwidth = 320

    _G.bheight = 480

elseif display.pixelHeight / display.pixelWidth > 1.72 then

    _G.bwidth = 320

    _G.bheight = 570

else

    _G.bwidth = 320

    _G.bheight = 512

end

xxx.lua

    local bg = display.newImageRect(“images/Backgrounds/xxxBG.png”,system.ResourceDirectory,_G.bwidth,_G.bheight )

#14

So Naomi, 

If I’m having the issue of sidebars on the iPhone 5 as well, and am drawing backgrounds at 360 x 570, you would recommend redrawing those at 380 x 570?

This should take care of the issue?

#15

The 360 is the short side of the device.  If you’re using a scale where your content area is 320x480 as a base, then you only need to be 320 wide.  The 360 wide is to cover the wider iPad.  If you’re seeing the black bars at the top and bottom (while portrait/vertical) or on the sides while landscape, then you have some other issue going on.

Either

  1. Your Default-568@2x.png file isn’t correct (not the right size, an error in the name, or missing).

  2. Your config.lua isn’t set up to take advantage of the extra space.

  3. When you load your background you’re not loading it with the size of the background (i.e. display.newImageRect(“background.png”, 360, 570).

Without seeing your config.lua and your background loading code and a list of the filenames in the folder with your main.lua its going to be hard to do more than guess.

#16

I’m sorry to butt in, but I just submitted my App for approval and recieved this back:

iPhone 5 Optimization Requirement -
Your binary is not optimized for iPhone 5.
New iPhone apps and app updates submitted targeting iOS 6 and above must support
the 4-inch display on iPhone 5 and

must include a launch image
with the -568h size modifier immediately following the <basename>
portion of the launch image’s filename.

Launch images must be PNG files
and located at the top-level of your bundle, or provided within each
.lproj folder if you localize your launch images.
Learn more about iPhone 5 support and app launch images by reviewing
the iOS Human Interface Guidelines
and iOS App Programming Guide.

I’m a little confused about what it means…
Does anybody have any ideas?

EDIT: Ok, so after playing around I have figured out what I need. Since I have never included Launch images (We’ve never used them) I wasn’t aware they were now a required thing.

#17

I just attempted to submit my App to the app store and received the same error.

I’ve got the launch images names so:

default-568h.png
default-568h@2x.png
default-ipad.png
default.png
default@2x-ipad.png
default@2x.png

I’m really confused now. They’re all the correct size (I checked)

#18

The file names are case sensitive.  They need to be named exactly:

Default.png

Default@2x.png

Default-568h@2x.png

Default-Portrait.png

Default-Portrait@2x.png

Default-Landscape.png

Default-Landscape@2x.png

The capitalization of the letters matters.  Here are the sizes they need to be:

Default.png                            320x480

Default@2x.png                     640x960

Default-568h@2x.png            640x1136

Default-Portrait.png               768x1004

Default-Portrait@2x.png        1536x2008

Default-Landscape.png         1024x748

Default-Landscape@2x.png   2048x1496

Note the iPad screens are a few pixels short of the actual screen size.

#19

Excellent, cheers Rob! You’re a life saver!