46,688

Views

Beginner

Level

17

Comments

App Scaling

by Jon (Updated on 2015-10-15)


Contents

  • Introduction
  • The Approach
  • Two Key Principles
  • Scale Modes
  • Scaling on iOS
  • Scaling on Android
  • FAQ

Introduction

Every year, many new mobile devices get introduced with flagship devices from Apple, Google and Samsung getting refreshed annually. With each new generation comes different screen sizes to support. How do you make your app look good on each device in a consistent and satisfactory way?

The Approach

To make a game fit each device's screen, we need to do two things:

  1. Resize the game to fill/fit each device's screen. This is what our Scale Modes do.

  2. Use higher resolution graphics on higher resolution screens. The original iPhone sported a 480 x 320 resolution. Today's flagships are up to 1920 x 1080 or even higher. Higher-resolution graphics are necessary to keep a game looking crisp.

Two Key Principles

Design the game at 1x (Standard) resolution.

Regardless of what the game is targeted towards, you'll be designing your game at a standard (1x) resolution. This means that, if your game was designed to be a 480 x 320 game (to fit the original iPhone), the game size is 480 x 320. The scaling happens automatically at runtime depending on the device used to play the game, so for example, it would run at 1x scale on the original iPhone, at 2x scale on an iPhone 4 and at 4x scale on an iPad Air.

Draw and import your graphics at 4x resolution.

In contrast, you'll want to draw your graphics as large as you can. If your base resolution is 480 x 320, then quadruple that is 1920 x 1280, which will accomodate recent iPads and Android flagships.

Note: When you import your graphics (at 4x - the default), Stencyl will automatically generate a set of 1x, 1.5, 2x, 3x graphics to use on lower-resolution devices.

Scale Modes - What to do with the extra space?

In a perfect world, every device would be an exact multiple of the base resolution (480 x 320). Unfortunately, this isn't the case because each device's aspect ratio is different. This means that after using high-res graphics to scale a game up to 2x or 4x, some extra space can remain.

Under Settings > Mobile > Display is a Scale Mode dropdown for both iOS and Android. This dropdown controls how the extra space is handled.

Demo

No Scaling (Letterboxing)

After selecting the multiple to draw at, this mode will will not perform any resizing. The unused space is left blank.

Full Screen

After selecting the multiple to draw at, this mode will display the game "as is" without any further scaling. Anchors to the top-left. This will cause more of the game to be shown on certain device and less on others.

Stretch to Fit

Stretches the game to fill the entire screen. If the aspect ratio of the screen and game differ, this will slightly distort the image.

Scale to Fit (Letterbox)

Stretches the game until the larger game dimension fits the screen, while preserving the game's aspect ratio. Because of this, a small portion of the screen will remain blank.

Scale to Fit (Fill)

Stretches the game until the smaller game dimension fits the screen, while preserving the game's aspect ratio. Because of this, a small portion of the game will be chopped off.

Scale to Fit (Full Screen) <-- RECOMMENDED FOR MOST GAMES

Acts just like Letterbox, except that the extra portions of the screen are displayed. This will cause more of the game to be shown on certain device and less on others. (Added in Stencyl 3.1. Isn't part of the demo above.)

Scaling on iOS

The following table lists what scales each iOS device will run at.

iPhone

Device Screen Resolution Scale
iPhone Original/3G/3GS 480 x 320 1x
iPhone 4/4S 960 x 640 2x
iPhone 5/5S/5C 1136 x 640 2x
iPhone 6/6S 1334 x 750 2x
iPhone 6/6S Plus 1920 x 1080 3x

iPod

Device Screen Resolution Scale
iPod Touch 2/3 480 x 320 1x
iPod Touch 4 960 x 640 2x
iPod Touch 5/6 1136 x 640 2x

iPad

Device Screen Resolution Scale
iPad 1/2 1024 x 768 2x
iPad Mini 1024 x 768 2x
iPad 3/4
iPad Air 1/2
2048 x 1536 4x
iPad Mini 2/3/4 2048 x 1536 4x
iPad Pro 2732 x 2048 4x

Scaling on Android

The following table lists what scales common Android devices will run at. Instead of covering everything, we've picked out devices that are representative of that class and tried to hit all the major screen resolutions.

Device Screen Resolution Scale
First-Gen Devices 480 x 320 1x
Nexus S 800 x 480 1.5x
Moto E 960 x 540 1.5x
Nexus 7 (2012) 1280 x 800 2x
Moto G 1280 x 720 2x
Moto X (2014) 1920 x 1080 3x
Nexus 6 2560 x 1440 4x

FAQ

Do I absolutely have to design my graphics at 4x?

You can import at a lower scale such as 1x or 2x (you can tell Stencyl what scale you are importing at, at the time that you import), and Stencyl will generate the hi-res variants. This is useful for retro games.

What does the Phone-Only mode do?

It forces the game to max out at 2x resolution, even on tablets and smartphones where a higher resolution could be used. With most device resolutions trending well past the 2x point now, we think this isn't all that useful and may remove it in the future.

What does Tablet-Only mode do?

Tablet-only mode is useful for tablet-only games. You still must import your graphics at 4x, but we’ll omit the inapplicable (1x) sets from the app at publication time to save you a little bit of space.

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!

17 Comments

Perrymoon
Hi Jon,
Thank you for the updates on this article.

I have a question: Are the images of Ghost Song representative of scale to fit "letterbox" and "fullscreen"? if I understand the explanation of "letterbox", then the character indicators up left of the game screen shouldn't be chopped.

0 1 month, 1 week ago
Jon
Updated the article for clarity and added in a much more comprehensive list of devices.
1 1 year, 6 months ago
noxtudios
Can App scaling be changed at runtime?
0 1 year, 7 months ago
bubbadubc
Just to make sure I'm understanding this correctly:
1. I need to import all of my graphics and backgrounds at 4x, or at their high resolution, for HD display
and
2. AFTER the import, I need to design at 1x?

Does this mean, I still make a room size 480x320?

What if I'm not making a game for a mobile device, but only for PC and TV?

3 1 year, 9 months ago
damageinc86
I'm curious how to export a SWF flash file for uploading to sites like newgrounds in a smaller scale. When you play it in a browser the default output is my ipad size, and i have to right click on the flash player and select "show all" to shrink it down to the embeded player size.
0 1 year, 11 months ago
Senoy
Could you guys update this thread please ?
A lot of people are interested that now the new iphone sizes are out !

Thanks

0 2 years, 2 weeks ago
derekfc
I have a similar question to Jezus101.

We've used a StencylForge Tile set which is 32x32, and we've imported graphics at 4x.
Each of our scenes is set to 15X10 tiles, or 480x320 landscape.

Informed by your notes above:
1) "Design at 1x (Standard) resolution. Regardless of what the game is targeted towards, you'll be designing your game at a standard resolution, most commonly at 480 x 320"
2) "Draw and import your graphics at 4x resolution"

We're trying to design a game that can scale to either iPhone or iPad (and maybe in future to Android mobile devices, but for now we're just trying iOS).

We're able to get a build onto an iPad, but regardless of what Mobile screen scaling we apply, it always sizes to about the size of an iPhone.

Do we need to build the game at 4x instead ?? - meaning either:
a) 1,920 x 1,280, with 15tiles * 10 tiles of 128 x 128 ?? Which would mean we'd need either an entirely different Tile set, or to resize them to 128 x 128? or...
b) 1,920 x 1,280 with 60 tiles * 40 tiles of 32 x32, and basically, like a "retina" display, make 4 of our 32X32 tiles for what we would have designed as 1 tile in 480x320?

Or try something else?? Building it at 4x seems inconsistent with your recommendation to design for 480x320...

Please help clarify... Thanks so much. I've got a 3rd, 4th, and 5th grader who've built a game as a summer project, and they can't wait to get it scaled and show their friends... Thanks again.




2 2 years, 7 months ago
anthonyeaguilar
Or if you import graphics at 4x but change setting to 2x will this improve frame rate or once there in the at 4x thats it? I'm trying to get the frame rate up with out having to reimport hundreds of graphics.
0 2 years, 9 months ago
anthonyeaguilar
Will importing graphics at 4x instead of say 2x effect the frame rate?
0 2 years, 9 months ago
PeterKh
Just to clarify. To take advantage of scaling, I would need to create a 4x sceen, and have every component at the 4x resolution? Does the scaling work at the testing on devices stage?

Thanks!

0 2 years, 9 months ago

Sign In to Comment