16,816

Views

Beginner

Level

7

Comments

Adapting a Game to iPhone 5/6/6+

by Jon (Updated on 2015-10-22)


Contents

  • Introduction
  • Use the Full Screen
  • How To: Specifying a Splash Screen
  • How To: Adapting to Different Displays

Introduction

In recent years, Apple has upgraded its phones with larger, widescreen displays, starting with the iPhone 5. Developers are expected to support these screen sizes in accordance with Apple's guidelines.

Before reading this article, read our App Scaling article. It covers most of the concepts we'll be talking about here.

How to Use the Full Screen

At the heart of the problem is this: Games are typically developed using a 3:2 aspect ratio such as 480 x 320 pixels. This matches the resolution of the original iPhone and earlier Android devices. When devices started getting larger screens, many moved over to widescreen displays with aspect ratios of 16:10 and 16:9.

The problem is this. Suppose that you developed a game at 480 x 320 (3:2). On the iPhone 5, your game would look like this because its screen is much wider than 3:2. Those extra pixels on the side would be unused. This effect is called letterboxing.

You can't letterbox your game

Apple dictates that you may not letterbox your game. Given this restriction, you have a few options for filling out the screen using our Scale Modes.

Using Scale to Fit (Full Screen) <-- [Recommended]

This will fill out the game's screen, but instead of chopping off the screen at the edges, more of the game will show instead. You'll need to re-position your interface elements to adjust between different screen sizes.

Using Stretch to Fit

This will fill out the game's screen, but the game's image will be distorted on elongated screens.

Using Scale to Fit (Fill)

This will fill the game's screen but crop out the left/right edges (Landscape) or top/right edges (Portrait). The wider the screen is, the more that will be cropped out.

Reminder: You can find the Scale Mode dropdown inside Settings > Mobile > General.

How To: Specifying a Splash Screen

Apple requires separate splash screens for each size of device that they make. Your game will not publish unless all of these splash screens are provided.

You can specify the splash screen right on the same screen as the other splash screens. (under Settings > Mobile > Logos & Splash)

How To: Adapting to Different Displays

If you want your app to look great all displays, you’ll need to adapt your game to each screen's format, so that the game's interface elements appear in the same place regardless of what device you’re on.

You can tackle this problem in at least two ways.

Method 1: Use the Screen Width block

if you're using Scale to Fit (Full Screen) as we recommend above and you want your HUD elements to fit each screen (Android, iPhone or otherwise), position the HUD elements to adapt to the screen's width.

In this example, we're re-positioning this element to be 10 pixels from the screen's right edge.

Method 2: Handle iPhone 5/6/6+ (and beyond) as a special case

Using a special block (under Flow > Advanced), you can detect what model your game is running on, so you can do something different on these devices to use that extra space. This isn't as versatile as Method 1 but is useful if you want to tweak things specifically for these iPhone models.

Additional Resources

Prefer a video? This video series was done for Stencyl 3.0, but it explains this concept really well.

Print Article Edit Article How to Edit an Article
Disclaimer: Use comments to provide feedback and point out issues with the article (typo, wrong info, etc.). If you're seeking help for your game, please ask a question on the forums. Thanks!

7 Comments

Jon
Updated the article to clarify why you have to use the full screen.
0 2 years, 1 month ago
Jon
The Wiki was a private, unadvertised experiment that somehow got discovered and trashed by bots, even though we blocked all access t o it. We're sticking to Stencylpedia for the future.
0 3 years, 10 months ago
id8games
For some reason there is more info on the following page "http://wiki.stencyl.com/4-inc h-ios-devices/" but I cannot login to place any comments.

Could someone read the wiki link shown above, in particular to the heading "Do not "draw for the iPhone 5" resolution" and provide a small demo that behaves like Angry Birds. Basically in how it treats the background between different phone resolutions.

0 4 years, 3 months ago
id8games
The above info describes how to setup scale mode to "Full Screen" but does not answer the question why?
1 4 years, 3 months ago
liteking
This is for Stencyl 3.x guys
0 4 years, 4 months ago
KingMilano
This Article don't help us, theres no way on stencyl 2.X to enlarge a screen on iPhone5, theres no present Scale Mode in the settings pannel -.-"
0 4 years, 6 months ago
rosswaycaster
Is this for Stencyl 3.0? I do not currently see "Scale Mode" in 2.2.0.
0 4 years, 7 months ago

Sign In to Comment