FusePowered

Splash screens for universal iOS app

8 replies [Last post]
tony7
User offline. Last seen 45 weeks 4 days ago. Offline
Joined: 18 Dec 2011

Hi,

I have a universal iOS app that's nearly complete but there's a problem with the splash screen.
The app is compatible with iPhone 4/4S, iPod Touch (in theory, not yet hardware tested), pre-Retina and Retina iPads.

Dynamic scaling is working fine, using the @2x and @4x suffixes for the main interface elements. The interface is identical on all devices, just dynamically scaled and positioned.

However, the different display dimensions of the iPhone and iPad are causing problems with the splash screen. I have a "Default@2x" file which is used as the splash screen on iPhone 4 (that's fine, because it's a grab of the app running on the iPhone 4), but this same screen is used by the app when it's running on a pre-Retina iPad (iPad 1 or 2).

This is a problem because it's scaled to fit the screen, so when the app starts up it's not aligned with the real interface.

Also, the @4x version of the splash screen (a grab of the app running on the iPad 3) is ignored completely when the app runs on an iPad 3, even though all the other @4x interface graphics are used properly.

So the question really is: can I specify two additional splash screens to be used for the pre-Retina and Retina iPad? If so, how?

Replies

Danny
User offline. Last seen 48 weeks 1 day ago. Offline
Staff
Joined: 17 Aug 2011
tony7
User offline. Last seen 45 weeks 4 days ago. Offline
Joined: 18 Dec 2011

Thanks Danny, that's fixed it. For the record, I am now using the following images and filenames in my project:

Default.png (320x480, for pre-Retina iPhone and iPod Touch, as yet untested on hardware)
Default@2x~ipad.png (1536x2048, for Retina iPad [iPad 3])
Default@2x~iphone.png (640x960, for Retina iPhone+iPod Touch)
Default~ipad.png (768x1024, for iPad 1+2)

Note: the simulator in Corona SDK build 2012.813 doesn't pick up the correct image when simulating iPad or iPad Retina.

Also worth noting is some confusion I had over the @2x and @4x naming conventions.
The interface graphics that are used in my app are supplied in three sizes: with no size suffix for pre-Retina iPhone and iPod Touch devices, with the @2x suffix for Retina iPhone, Retina iPod Touch and iPad 1 and 2, and also with the @4x suffix for the Retina iPad.

However, an @4x suffix on the splash screen image was being ignored, so I have used no size suffix for the pre-Retina iPad splash screens, and an @2x suffix for the Retina iPad.

LairdGames
User offline. Last seen 3 weeks 3 days ago. Offline
Joined: 28 Oct 2011

Great question and info Tony! I think I have the same issue. Would you terribly mind sharing your build.settings file to see how you deal with all the different screen size when it relates to the splash screen?

Thank you again.

Mo

don
User offline. Last seen 41 weeks 1 day ago. Offline
Joined: 24 Jan 2011

I also found this to be useful as a quick guide.

http://blog.metaphx.com/2012/03/08/ios-image-guideline-infographic/

Beware of the misspelling in Landscape!

LairdGames
User offline. Last seen 3 weeks 3 days ago. Offline
Joined: 28 Oct 2011

Thanks Don! That's really handy info.

Mo

tony7
User offline. Last seen 45 weeks 4 days ago. Offline
Joined: 18 Dec 2011

Hi Mo, this is what my build.settings file looks like at the moment:

settings =
{
orientation =
{
default = "portrait",
supported =
{
"portrait",
},
},
}

And this is what my config.lua file looks like:

application =
{
content =
{
fps = 60,
width = 320,
height = 480,
scale = "letterbox",
imageSuffix =
{
["@2x"] = 2, -- for iPhone, iPod touch, iPad1, and iPad2
["@4x"] = 4, -- for iPad 3
}
}
}

LairdGames
User offline. Last seen 3 weeks 3 days ago. Offline
Joined: 28 Oct 2011

PERFECT! Thanks Tony7 for sharing. very cool of you.

Mo

duneunit
User offline. Last seen 4 weeks 1 day ago. Offline
Joined: 31 Oct 2010

@Tony: This post about correct iPad splash screen / default.png file stuff saved me a lot of headache. Thanks!

Viewing options

Select your preferred way to display the comments and click "Save settings" to activate your changes.