So, you are building a 3D game. Everything looks somehow fine while things are moving, but then you take a screenshot to upload it to iTunes and: the horror! You realize the awful truth. Some texture borders seems crappy and pixelated.
Oh, you forgot to turn on the anti-aliasing. That’s easy to solve. Except that… wait, there is no anti-aliasing in OpenGL ES 1.1! Damn!
Well, we’ve been there too. While we were porting Cube X Words to the iPad, the 3D dice that looked awesome in Mac OS, looked just like a BMP drawn in MS Paint in the iPad. So we did what every self-respecting developer does first: we googled for an answer, but alas!, we found none…
How to solve that? The hard way: mess with everything you’ve done in order to draw a 4X image and then scale it down. But, but… stretching a texture to 4X and then down looks bad, I have to re-do all my textures! It sometimes works, it sometimes doesn’t, it surely hurts the performance and may end up looking like crap again…
By accident, we found an easier way. It involves a bit of modification to the textures and another bit to the code.
We found out that if you leave a couple of transparent pixels outside of your texture, when the projection is blended, it kind of anti-aliases the texture borders (since whenever OpenGL calculates the pixel’s color value, it mixes the color with the transparent part). So, voila! We just had to give our textures a bigger canvas, and make the sprites bigger accordingly. Just like this:
It worked like a charm. You can check it out in this screenshot. See that the rotated E’s border looks just fine.
Well, I hope this helps you too.