A transparent character can look correct in an image viewer yet acquire a dark fringe in a game. Before changing the artwork, check whether the image data and renderer agree about alpha representation. A mismatch is one possible cause; filtering, atlas padding and color management can also create edges.

Straight and premultiplied alpha

With straight alpha, a pixel stores its color independently of opacity. With premultiplied alpha, each stored color channel has already been multiplied by opacity. For a source over an opaque background, the equivalent formulas are:

  • Straight: output = source color × source alpha + background × (1 − source alpha).
  • Premultiplied: output = premultiplied source color + background × (1 − source alpha).

Apply each formula per color channel using values between 0 and 1. The W3C compositing specification describes the general case, including a transparent backdrop.

A tiny numerical check

Imagine one red channel with straight source value 1.0, alpha 0.5 and an opaque black background (0.0). The straight formula gives 0.5. The equivalent premultiplied value is already 0.5, so the premultiplied formula also gives 0.5. If that premultiplied value is accidentally multiplied by alpha again, the result becomes 0.25: a darker edge.

This is a simplified arithmetic example, not a color-managed rendering benchmark. Real pipelines can introduce rounding and color-space differences.

Isolate the cause

  1. Use one partly transparent test image and compare the same asset over black, white and a saturated background.
  2. Check the importer, texture upload, shader and blend settings together. Do not assume a filename tells you the GPU representation; data may be converted during import. The PNG specification stores non-premultiplied alpha.
  3. Compare nearest and linear filtering, then add or inspect atlas padding. If changing filtering changes the fringe, sampling may also be involved.
  4. Recheck the actual target engine and export. Different viewers and blend modes need not interpret data identically.

For an animation, inspect the same boundary on several selected frames: a scarf or feather may have soft edges that are easy to miss against a checkerboard. MotifDeck lets artists inspect extracted character frames; this diagnostic applies to transparent artwork generally, regardless of how it was made.

By Allen Zhao for MotifDeck, with AI assistance. The author is affiliated with MotifDeck.