Reducing artifacts on rotated sprites

Andreas Löw
Reducing artifacts on rotated sprites
Last update: More than 3 months ago

Get rid of those ugly edge artifacts!

I prefer smooth edges instead over jagged outlines.

TexturePacker 4's upcoming feature trim margin gives you full control over sprite's transparency when using trim & crop. It also replaces inner padding .

Learn how to take advantage of this new feature to improve your game's quality.

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