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
- Use one partly transparent test image and compare the same asset over black, white and a saturated background.
- 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.
- Compare nearest and linear filtering, then add or inspect atlas padding. If changing filtering changes the fringe, sampling may also be involved.
- 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.
Top comments (1)
Good checklist. One more cause worth adding to step 3: the RGB stored under fully transparent pixels. A lot of exporters and background-removal tools write (0,0,0,0) there, so with linear filtering or mipmaps the GPU averages that black into the edge texels even when the alpha mode is right. Bleeding the edge colour outward into the alpha=0 area (often called "alpha bleed" or "dilate") fixes it without touching the visible art. Quick way to spot it: make a copy, force alpha to 255 everywhere, and look at what surrounds the silhouette.
Also a web-specific one: canvas 2D keeps pixels premultiplied internally, so a getImageData/putImageData round trip can lose colour precision on low-alpha pixels. If your pipeline processes frames through a canvas before export, that can show up as slightly dirty soft edges too.