Game Development Stack Exchange is a question and answer site for professional and independent game developers. Join them; it only takes a minute:

Sign up
Here's how it works:
  1. Anybody can ask a question
  2. Anybody can answer
  3. The best answers are voted up and rise to the top

Currently I use illustrator to create artwork for my Android games. My art size is pretty small, just 32x32. It looks OK in illustrator, but when exporting, my art is blurry and looks messy! Could you give some advice? How can you get vector-like art? And which is better for small images, pixel art or vector?

My large-size export image:

enter image description here

This is my exported result (The pixel is so bad when zooming):

share|improve this question
why not simply draw it bigger and then scale it down? – AbstractChaos Jul 12 '12 at 10:42
Make sure you lay over a pixel grid at that resolution. The problem is that vector art is not pixel perfect unless you make it do. – API-Beast Jul 12 '12 at 10:44
What do you means by "lay over a pixel grid"? Is it "Align to pixel grid" option in illustrator(Transform View)? – wanting252 Jul 12 '12 at 11:13
up vote 2 down vote accepted

First of all, your exported image should match the size of the sprite in android. So if you're creating 32x32 sized images, your sprites should ideally be rendered as 32x32 on your device screen. Don't expect a 32x32 image to look good when your sprite takes 100x100 pixels on the device!

Exporting vector art from Illustrator to an image (eg. PNG) to use in Android should not be accompanied with any quality loss. Sure, you're losing the scalability of the vector artwork, but when bitmap and vector artwork are both shown at 100% scaling, then they should look identical (if they do not, there's probably a flaw in your workflow).

But it's more likely, that you're experiencing a texture-filturing/mip-mapping issue. Depending on your camera distance, you might see a mip-mapped version of your artwork which would explain the blurred images.

To get an output close to what you see in illustrator, you should disable mip-mapping and probably also set texture-filtering to GL_NEAREST. Here's an excellent tutorial about texture-filtering on android.

share|improve this answer
Thank a lot! I heard that mipmapping is only important for 3d games, is it right? How do you get a pixel-perfect brush in illustrator? Uhm, What I mean, when I use brush to draw a line, it's normally blurred a bit and take over 1px. – wanting252 Jul 12 '12 at 11:51
@wanting252 If you render using OpenGL on Android, you're basically rendering a 3D scene, even for 2D graphics.. so mip-mapping could be applied there as well. Illustrator isn't the best tool to do pixel-art. You'll be much more efficient with something like Photoshop or GIMP. In Illustrator you can enable the pixel-preview and also disable anti-aliasing in the preferences to prevent the "blur" caused by anti-aliasing. – bummzack Jul 12 '12 at 12:02

Your Answer


By posting your answer, you agree to the privacy policy and terms of service.

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