0
\$\begingroup\$

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):

\$\endgroup\$
3
  • \$\begingroup\$ why not simply draw it bigger and then scale it down? \$\endgroup\$ Jul 12, 2012 at 10:42
  • \$\begingroup\$ 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. \$\endgroup\$
    – API-Beast
    Jul 12, 2012 at 10:44
  • \$\begingroup\$ What do you means by "lay over a pixel grid"? Is it "Align to pixel grid" option in illustrator(Transform View)? \$\endgroup\$
    – wanting252
    Jul 12, 2012 at 11:13

1 Answer 1

2
\$\begingroup\$

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.

\$\endgroup\$
2
  • \$\begingroup\$ 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. \$\endgroup\$
    – wanting252
    Jul 12, 2012 at 11:51
  • \$\begingroup\$ @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. \$\endgroup\$
    – bummzack
    Jul 12, 2012 at 12:02

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .