Using pixel art on small high resolution screens

Question

I'm making a game and I would like to utilize pixel art as my style. But I faced a problem, modern displays on my target platform (iOS) have extremely high resolution. So if my artist makes me some sprites in 1 to 1 pixel resolution, each character sprite will look like 2x3 millimeters, and that's not what I want.

How do I fix this problem? Do i just use 4 pixel blocks as 1 pixel in my art, or there is some other way?

Another question, is how do I utilize high-crisp display of those devices with pixel art?

How do I go with using images on older devices? Do I have to make double assets or downscale/upscale some images?

Answer 1

There are various scaling algorithms that are specifically crafted for enlarging pixel art for modern displays. They usually work with factors 2x or 3x and produce nice non-blurred and non-blocky results.

Take a look at this Wikipedia article, which has many examples.

Answer 2

You could always upscale your graphics with a nearest neighbor interpolation to keep the pixel-style. When you do this, only scale by integer amounts, eg. 2x, 3x etc.

The problem with this is that you'll have to create upscaled versions for regular- and retina-displays. Personally I would rather keep the original artwork and scale it on the device (eg. via OpenGL).

The advantage of this approach is that it uses less texture memory (you can pack a lot of sprites into a 1024x1024 or 2048x2048 atlas) and will also produce a smaller app size. To achieve the desired scaling, you could either scale your CCLayer by the desired factor or use the camera property of the layer and set the eye position to a closer value.

To achieve a pixel-look even with scaled textures you should set the texture scale-mode to GL_NEAREST. There's a shortcut function for that, called setAliasTexParameters. Eg.

[[mySprite texture] setAliasTexParameters];

Please note that this affects the texture, not only the sprite at hand. So if you're using a texture-atlas, the whole atlas will be affected by that. But I think this is really useful behavior in your case.