HD (Retina Display) Games

Starting with the iPhone 4, Apple incorporated the Retina Display into its devices. The Retina Display is a special kind of screen with twice the screen resolution as previous models and quadruple the number of pixels.

The purpose of the Retina Display is to display crisper graphics, in much the same way that an HD television displays a crisper image over the same area.

Since many iOS devices now include the Retina Display, it’s practically required to support it nowadays. Fortunately, it’s easy to support the Retina Display, as long as your graphics are created at 2x resolution from the start.

THE GOLDEN RULE: Design at 1X, Import at 2X

In short, the rule of thumb is that you design your game as if it were always at 1x resolution but import your graphics at 2x resolution.

How to Import Graphics at 2X resolution

In short, no action is required.

For a mobile game, Stencyl assumes that all incoming graphics are 2x! It’ll even generate a standard (1x) resolution copy of them for older devices and the web.

If you find that your graphics are blurred at 1x resolution, flip to the page for the Atlas that contains the graphic and set the resize mode to Nearest Neighbor. (Note: You can find your game's Atlases under Settings> Atlases, and then click on the numbered Atlas with your graphic.)

What if I only have standard definition (1x) graphics?

If you only have standard resolution (1x) graphics, when importing your image, select Standard / iPad (1x) from the Scale dropdown BEFORE you choose the image.

This will flag the graphic as being at 1x resolution and take the appropriate steps.

(Under the hood, it generates a double-resolution copy to maintain compatibility with newer devices)

What about iPad?

The 3rd generation iPad supports a Retina Display with 2048 x 1536 resolution.

We'll begin supporting this, using a scheme where you provide graphics at "4x" starting in Stencyl 2.5, the next major release.

Tilesets follow the same rules

Tilesets follow the same rules as everything else. For whatever reason, there is some confusion over them, so we're reiterating this point.

Set your tile size to the size that you'd use for the "1x" version for your game. If your game would have used 32 x 32 tiles, that's the tile size you enter in.

Import your tile sheet at double the resolution, just like any other graphic. If your 1x tile size is 32 x 32, the tiles in your double-sized sheet will be 64 x 64.

22napier
Hi, I noticed it was said the res down from design file to game file was half.... ie in the iPad above its 1536 x 2048 down to 768x1024; and this is mentioned in the original article. But? ... the iPhone design file is 680 x 960 and the game file is 320x480 (mentioned by Rivet and in the original article at very beginning.
I am about to create so presentations for iPhone (just done all the ones for iPad) but these figures dont match, if it was half then the iPhone measurements would be "340x480".
Can you please confirm if this is a simple mistake, or if its correct?
Thanks
Alec
0 3 months, 5 days ago

BjornPehrsson
The resolution doesn't usually matter when it comes to digital publications. They are just a certain number of pixels. The screen will determine the resolution depending on how many pixels per inch it is. DPI becomes relevant in print only. I doubt this would work any different in Stencyl.
0 3 months, 1 week ago

dvfe
Man, this explain well enough what you should do, but the results are rather disappointing. I tried to design from the start an actor of 64 x 64 for the iPad 3 but when I import it to the game and put it on the scene, it is always blurry. Always. I tried to design it in 32 x 32, 128 x 128 or any other sizes, importing it 1x or 2x, but still nothing. I don't know what to do; I 'm in dead end!
0 8 months, 1 week ago

rivet
As I understand it:

iPhone retina:
- Game Settings: 320x480
- Stage: tile @ 32px — w10 x h15
- Design file (illustrator, photoshop etc.): 680 x 960 with a grid of 64x64
- export as 72dpi png files

iPad 3rd Gen:
- Game Settings: 768x1024
- Stage: tile @ 32px — w24 x h32
- Design file (illustrator, photoshop etc.): 1536 x 2048 with a grid of 64x64
- export as 72dpi png files

0 8 months, 1 week ago

ckriel
This is still no explanation. How about a matrix with dimensions and ppi for each possible deployment? And the relationship to the editor stage? And how it then works in Flash?
0 1 year, 3 weeks ago

Vigilence
I agree with ckriel, resolution isn't mentioned in the article. Programs like Photoshop and Illustrator need a resolution when exporting images. I would assume that if double the size is needed then the resolution should be double. Since 72dpi is standard screen resolution then we would export at double, 72x2=144 dpi. So I would design my art as the size I intended but export at double the resolution?

Anyone able to confirm or clarify?
2 1 year, 2 months ago

maarcvaal
I finally worked it around. It seems there's a bug when you use iAd in landscape mode. Everything turns low res. But, if you modify the code in Xcode (moving a line of code some lines forward) it works fine.

1 1 year, 3 months ago

maarcvaal
It seems I have the problem in landscape mode, while in portrait it displays correctly the images... but mine is a landscape game...any solutions?
1 1 year, 3 months ago

maarcvaal
When I test the game on iPhone 4 or Simulator at HD res, every image looks blurry... I imported everything at 2x. Is because I'm using the free version?
1 1 year, 3 months ago

Vectrex71
I have great troubles with the Landscape mode! That won't work :-(
2 1 year, 3 months ago

Commenting Guidelines