Reducing artifacts on rotated sprites

Andreas Löw
Demo App screenshot later on

Transforming sprites — e.g. by rotation or scaling — in your game leads to ugly artifacts on the sprite's borders. The reason for this is that OpenGL has to keep pixels on the border of a sprite crisp.

To get smooth edges you simply have to add 1 pixel of transparency around the sprite.

You can see the difference between a tightly cropped sprite and a sprite with added transparency in the example on the left side.

Adding some transparency gives you a smoother sprite edge.

TexturePacker 3 introduced inner padding — that extends a sprite with additional space. But it also came with some disadvantages:

  • It increases a sprite's size
  • Transparency was added to all sides of the sprite
  • Unexpected results when combined with trim & extrude

With TexturePacker 4 we are now introducing trim margin that replaces inner padding. The new option can be found under Sprite / advanced.

The margin does not extend a sprite but keeps a sprite's transparency when trim or crop is enabled. E.g. if you specify a trim margin of 5 TexturePacker ensures that it keeps 5 pixels of transparency around the sprite when available on the source image.

The result is that you have more control over your sprites: Using your graphics software you can

  • add transparency where needed
  • keep tiled sprites cropped tight

Btw. trim margin also works with the upcoming polygon mesh sprites in TexturePacker 4.

Demo App screenshot later on

Did you like the tutorial? Please share!