Creating and Importing artwork with transparency

Hectate

  • *
  • Posts: 4643
I've noticed that there are frequent questions about importing images, or people complaining that their artwork has the "white border". This post is a quick lesson on what and why this happens.

Here's an image that I created in Inkscape. Notice that the edges are nice and clean. The reason for this is that Inkscape exports with a transparent image to begin with. As a result, I can save it as a PNG and import the image directly into Stencyl with it's existing transparency. You can do this in GIMP by creating a new image and selecting "transparent background". Creating a new layer would give you this option as well, but you'd have to be sure to not export other layers that might not also be transparent.

By comparison, here is a version of it that did NOT have the white background removed (technically, I had to add it afterward). Now visually it's perfectly fine here in the forums, but the anti-aliasing (where edges between colors are blended together so that they appear smooth even at an angle) is going to be a problem. Using this image, however, we can select the color white to mask it out and make the background transparent.

Let's load these images into Stencyl and see the results. The first is loaded as-is while the second had white selected as the masking color.


So here we see the issue. By selecting the white color to be transparent, there are many pixels of anti-aliasing where they appear to be white but technically they are slightly off-white instead. The result is that only exactly white pixels get turned transparent and meanwhile you get a terrible looking sprite.
And yes, there's the one other issue: the eyes were white also and as a result they got turned transparent. The same thing could happen to parts of your images if you select a masking color that you also happen to be using elsewhere in your sprite. That's why many sprite-sheets use a hot pink or bright green for the background color - it can be removed easily (for pixel art anyway) and it's unlikely to be used in the actual sprite.

So, the rule of thumb is to draw your art with transparency from the beginning. I hope these examples help!
:
:
Patience is a Virtue,
But Haste is my Life.
Proud member of the League of Idiotic Stencylers; doing things in Stencyl that probably shouldn't be done.