[RESOLVED] Fullscreen Image for iPhone 5

Solar2D iOS
#1

Hi you all, I’m using the “ultimate config.lua file” in my application, which is meant to be used to take advantage of the 4-inch screen of the iPhone 5.

In the root folder of my app, I’ve inserted the Default-568h@2x.png and in fact it works fine in the “tall mode”.

Now, my game contains an image for the main menu that is meant to be used in fullscreen mode (as it is 640x960 pixel) and I want it to take advantage of the iPhone 5 screen, but I don’t know how to do that… I’ve already tried to put a third image (using display.newImageRect) called menuBg-568h@2x.png but it won’t work, it still looks like as it would on an previous iPhone.

How can I fix that?

Thanks :slight_smile:

#2

If you plan to support both an iPad and an iPhone 5 (or other 4" devices) and you’re using the config.lua from that post as is and you’re background is called menuBg.png then you need:

menuBg.png = 384 x 568

menuBg@2x.png = 768 x 1136.

On the iPad the top and bottom portion of this will be off screen (it’s going to show the middle 1024px of the @2x image or the middle 512px of the 1x scaled image.  You will get the full width of the image

On the iPhone 3/4 3.5" screens, it’s going to show the middle 480px high and the middle 320px wide.  The rest will be off screen.  And for the iPhone 5/4" devices, you will get the full height of the image and the middle of the width.

These offscreen areas are known as bleed areas and you shouldn’t put anything visually important in those areas.

In your code, you will do:

     local menuBg = display.newImageRect(“menuBg.png”, 384, 568)

     menuBg.x = display.contentCenterX

     menuBg.y = display.contentCenterY

#3

Thanks Rob, sorry if I’ve replied with more than one week of delay.

Before your help, I didn’t know about bleed area, so I will pay more attention about your suggestion in the future!

#4

If you plan to support both an iPad and an iPhone 5 (or other 4" devices) and you’re using the config.lua from that post as is and you’re background is called menuBg.png then you need:

menuBg.png = 384 x 568

menuBg@2x.png = 768 x 1136.

On the iPad the top and bottom portion of this will be off screen (it’s going to show the middle 1024px of the @2x image or the middle 512px of the 1x scaled image.  You will get the full width of the image

On the iPhone 3/4 3.5" screens, it’s going to show the middle 480px high and the middle 320px wide.  The rest will be off screen.  And for the iPhone 5/4" devices, you will get the full height of the image and the middle of the width.

These offscreen areas are known as bleed areas and you shouldn’t put anything visually important in those areas.

In your code, you will do:

     local menuBg = display.newImageRect(“menuBg.png”, 384, 568)

     menuBg.x = display.contentCenterX

     menuBg.y = display.contentCenterY

#5

Thanks Rob, sorry if I’ve replied with more than one week of delay.

Before your help, I didn’t know about bleed area, so I will pay more attention about your suggestion in the future!