PNGs lose layer transparency information


#1

We all know PNGs don’t support layers – Asesprite nags me every time I try to export to PNG when using layers. But what I didn’t expect was Asesprite ignores layer transparency when “squashing” layers during PNG export. This makes PNG export kinda useless if you ever use non-opaque layers.

Example:

  1. Create a new layer, put a lovely red balloon on it.
  2. Create a new layer above that.
  3. Draw solid-white highlights on the balloon, then decrease the opacity of the highlights layer to, say, 50%.
  4. Export to PNG and to GIF.
  5. Expected: PNG and GIF look the same, and both have light red highlights on the balloon.
  6. Actual: The highlights on the PNG are 100% solid white, instead of light red. The highlights on the GIF match what I expect and what the editor shows.

Asesprite 1.2.9-x64.


#2

Hi @nanodeath, are you using an Indexed sprite? Try Sprite > Color Mode > RGB Color and then try to export to PNG again.

I think the issue here is that the GIF exporter does a lot of work to convert RGB images into indexed, and the PNG exporter does absolutely nothing to convert Indexed to RGB :thinking: Something to be fixed.


#3

Good guess! Yes, the image is indexed, and if I convert to RGB, it outputs as expected.

Doing some quick Google research, it looks like PNGs do support an indexed mode, so it’d be nice if Asesprite could leverage that, but…the only reason I personally used indexed mode is to restrict my own color palette (and to make changing color X to color Y super easy). I don’t actually care whether the output is indexed, but I imagine some people might.


#4

Aseprite supports saving indexed png files, but here the issue is that you have used 50% opacity for a specific layer, so that creates new colors that doesn’t exist in the palette (generally layer opacity/blend modes are not compatible with restrictive color palettes, because you need more colors to do the blending between layers).

I guess Aseprite could be improved in several things:

  1. Add warning sign that you are using layer opacity (or blending modes) on indexed mode (which generates more colors/non-existent colors in the palette)
  2. An option to convert the image to RGB automatically on save for png files (or other formats)
  3. An option to automatically add new colors in the palette when layer opacity requires it (so we can keep the indexed mode, but automatically add more colors if needed for the transparent opacity/blending mods)

#5

Up to you which to implement, of course, but #3 would naturally be most convenient…but could also lead to a rather large palette, I’d imagine. #2 would also work fine for me.