getting iphone 5 to display retina images without borders in landscape

Solar2D General Questions/Discussion
#1

Hi,

does anyone know how to get the iphone 5 to display retina 960x640 in the entire screen without borders. i’ve been using zoom even in my config file.

[import]uid: 17701 topic_id: 31807 reply_id: 331807[/import]

#2

See:
http://www.coronalabs.com/blog/2012/09/19/faq-wednesday-iphone-5-and-ios-6/

and

http://www.coronalabs.com/blog/2012/09/14/corona-guidelines-iphone-5-and-ios6-preliminary/

You can detect if it’s a tall device in your config.lua and then set a width and height to support the extra pixels.

here is a config.lua that I’m using:

local isTall = ( "iPhone" == system.getInfo( "model" ) ) and ( display.pixelHeight \> 960 )  
  
if isTall then  
  
 application =   
 {  
 content =  
 {  
 width = 320,  
 height = 568,  
 scale = "letterbox",  
 xAlign = "center",  
 yAlign = "center",  
 imageSuffix =   
 {  
 ["@2x"] = 1.5,  
 ["@4x"] = 3.0,  
 },  
 },  
 notification =   
 {  
 iphone = {  
 types = {  
 "badge", "sound", "alert"  
 }  
 }  
 }  
 }  
  
else  
  
 application =   
 {  
 content =  
 {  
 width = 320,  
 height = 480,  
 scale = "letterbox",  
 xAlign = "center",  
 yAlign = "center",  
 imageSuffix =   
 {  
 ["@2x"] = 1.5,  
 ["@4x"] = 3.0,  
 },  
 },  
 notification =   
 {  
 iphone = {  
 types = {  
 "badge", "sound", "alert"  
 }  
 }  
 }  
 }  
  
end

Now I’m scaling based on a 320 pix wide device since I plan to have @1x graphics for older iPhone 3Gs’s. But you can change the numbers to 960x640 and 1136x640 if you want to work with that scale.
[import]uid: 19626 topic_id: 31807 reply_id: 126957[/import]

#3

Rob,

thanks for the response. so basically this will work for landscape mode ?

so if i use this

["@2x"] = 1.5 that should make all my @2x be only 1.5 times the size. i thought i needed them to fill the screen ?

my current file is like this:

application =  
{  
 content =  
 {  
 width = 320,  
 height = 480,  
 scale = "zoomStretch",  
 -- use "zoomStretch" for use with full IPAD screen use  
 -- use "letterbox" for use with full IPAD screen use with Stretching  
 imageSuffix =  
 {  
 ["@2x"] = 2, -- for iPhone, iPod touch, iPad1, and iPad2  
 ["@4x"] = 4, -- for iPad 3  
 }  
 }  
}

i tried using it but in the ios simulator it still had black borders on the left and right side [import]uid: 17701 topic_id: 31807 reply_id: 126960[/import]

#4

First, config.lua doesn’t imply any orientation. It’s just the device values.

As for the @2x = 1.5

The 1.5 isn’t the scale of the graphics. It says if the device’s dimensions are greater than 1.5 the values you defined, then use this suffix.

So in my case, 480 x 320, if the device is larger than 720 x 480, then use the @2x graphics. Since a 960x640 iPhone Retina display is greater than 480 wide, then it will use @2x graphics. If the device is larger than 3X (1440 px wide) then it will use the @4x graphics. Since the retina iPad is 1536 px wide, and that’s greater than 1440px, then it picks up the @4x.

[import]uid: 19626 topic_id: 31807 reply_id: 126962[/import]

#5

opps thats my mistake. i had it the wrong way.

i still can’t find out how to get the iphone 5 to run in landscape in full screen not bordered. that method above is only for portrait view ?? [import]uid: 17701 topic_id: 31807 reply_id: 126964[/import]

#6

See:
http://www.coronalabs.com/blog/2012/09/19/faq-wednesday-iphone-5-and-ios-6/

and

http://www.coronalabs.com/blog/2012/09/14/corona-guidelines-iphone-5-and-ios6-preliminary/

You can detect if it’s a tall device in your config.lua and then set a width and height to support the extra pixels.

here is a config.lua that I’m using:

local isTall = ( "iPhone" == system.getInfo( "model" ) ) and ( display.pixelHeight \> 960 )  
  
if isTall then  
  
 application =   
 {  
 content =  
 {  
 width = 320,  
 height = 568,  
 scale = "letterbox",  
 xAlign = "center",  
 yAlign = "center",  
 imageSuffix =   
 {  
 ["@2x"] = 1.5,  
 ["@4x"] = 3.0,  
 },  
 },  
 notification =   
 {  
 iphone = {  
 types = {  
 "badge", "sound", "alert"  
 }  
 }  
 }  
 }  
  
else  
  
 application =   
 {  
 content =  
 {  
 width = 320,  
 height = 480,  
 scale = "letterbox",  
 xAlign = "center",  
 yAlign = "center",  
 imageSuffix =   
 {  
 ["@2x"] = 1.5,  
 ["@4x"] = 3.0,  
 },  
 },  
 notification =   
 {  
 iphone = {  
 types = {  
 "badge", "sound", "alert"  
 }  
 }  
 }  
 }  
  
end

Now I’m scaling based on a 320 pix wide device since I plan to have @1x graphics for older iPhone 3Gs’s. But you can change the numbers to 960x640 and 1136x640 if you want to work with that scale.
[import]uid: 19626 topic_id: 31807 reply_id: 126957[/import]

#7

Rob,

thanks for the response. so basically this will work for landscape mode ?

so if i use this

["@2x"] = 1.5 that should make all my @2x be only 1.5 times the size. i thought i needed them to fill the screen ?

my current file is like this:

application =  
{  
 content =  
 {  
 width = 320,  
 height = 480,  
 scale = "zoomStretch",  
 -- use "zoomStretch" for use with full IPAD screen use  
 -- use "letterbox" for use with full IPAD screen use with Stretching  
 imageSuffix =  
 {  
 ["@2x"] = 2, -- for iPhone, iPod touch, iPad1, and iPad2  
 ["@4x"] = 4, -- for iPad 3  
 }  
 }  
}

i tried using it but in the ios simulator it still had black borders on the left and right side [import]uid: 17701 topic_id: 31807 reply_id: 126960[/import]

#8

First, config.lua doesn’t imply any orientation. It’s just the device values.

As for the @2x = 1.5

The 1.5 isn’t the scale of the graphics. It says if the device’s dimensions are greater than 1.5 the values you defined, then use this suffix.

So in my case, 480 x 320, if the device is larger than 720 x 480, then use the @2x graphics. Since a 960x640 iPhone Retina display is greater than 480 wide, then it will use @2x graphics. If the device is larger than 3X (1440 px wide) then it will use the @4x graphics. Since the retina iPad is 1536 px wide, and that’s greater than 1440px, then it picks up the @4x.

[import]uid: 19626 topic_id: 31807 reply_id: 126962[/import]

#9

opps thats my mistake. i had it the wrong way.

i still can’t find out how to get the iphone 5 to run in landscape in full screen not bordered. that method above is only for portrait view ?? [import]uid: 17701 topic_id: 31807 reply_id: 126964[/import]

#10

Rob,

im a assuming that you are using images with these specs
width = 320,height = 568, instead of 320x480 ?

is that correct ?

if there an option to just stretch out the left and right side of the images and not bother with the top and bottom ???

[import]uid: 17701 topic_id: 31807 reply_id: 127243[/import]

#11

I think I’m using 360x570 [import]uid: 19626 topic_id: 31807 reply_id: 127262[/import]

#12

so since im using 480x320 images scaled to 960x640. would i need to create different resolution versions of all the backgrounds in the game? how about the x and y co-ordinates, i would have to re program them for the iPhone resolution ??

do you know of any templates with iphone 5 landscape support ?? [import]uid: 17701 topic_id: 31807 reply_id: 127284[/import]

#13

Rob,

im a assuming that you are using images with these specs
width = 320,height = 568, instead of 320x480 ?

is that correct ?

if there an option to just stretch out the left and right side of the images and not bother with the top and bottom ???

[import]uid: 17701 topic_id: 31807 reply_id: 127243[/import]

#14

I think I’m using 360x570 [import]uid: 19626 topic_id: 31807 reply_id: 127262[/import]

#15

so since im using 480x320 images scaled to 960x640. would i need to create different resolution versions of all the backgrounds in the game? how about the x and y co-ordinates, i would have to re program them for the iPhone resolution ??

do you know of any templates with iphone 5 landscape support ?? [import]uid: 17701 topic_id: 31807 reply_id: 127284[/import]