3
\$\begingroup\$

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?

|improve this question
\$\endgroup\$
  • \$\begingroup\$ It's not too clear what you are really asking, as it is more a style question than anything else. \$\endgroup\$ – Ioachim Jul 29 '12 at 17:14
  • \$\begingroup\$ One simple alternative it's to just define the resolution of your game screen, and upscale everything for devices with higher resolutions. The only problem with this is that you can end with blurry or distorted graphics. The other way is to scale by an integer factor depending on the size of the screen. Tapio's answer gives an alternative to get smoother graphics when doing that, if you don't want a blocky appearance. \$\endgroup\$ – Ioachim Jul 29 '12 at 17:20
5
\$\begingroup\$

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.

|improve this answer
\$\endgroup\$
0
\$\begingroup\$

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.

|improve this answer
\$\endgroup\$

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.