Straight alpha export for images, png etc.?

[AutumnPioneer]

When I export images with transparency from Designer or Photo, the alpha is always pre-multiplied which is not desired for a lot of assets in game development.

The lack of this feature means I have to add an extra step to the creation of my 2D assets.

Left is the exported file, right is the desired result.
As you can see, all of the area with alpha is filled to pure black, which creates ugly edges on aliased images (as well as other issues with channel packing etc.)

[cgidesign]

Check this thread that started 14th Jan. 2019. I don't know if it covers your specific issue, but it tells you someting about the Affinity Apps and alpha channel work for cgi. Hint: the user feedback is not so good.

As far as I know it is still all the same in Version2.

 

[tudor]

12 hours ago, AutumnPioneer said:

When I export images with transparency from Designer or Photo, the alpha is always pre-multiplied

I don't see that here. Do you use any effects or blending modes on the strokes/edges?

[myclay]

  

12 minutes ago, tudor said:

I don't see that here. Do you use any effects or blending modes on the strokes/edges?

This Clip explains the difference between Premultiplied and Straight alpha (Pre-divide or un-premultiply).

 

[NotMyFault]

12 hours ago, AutumnPioneer said:

When I export images with transparency from Designer or Photo, the alpha is always pre-multiplied which is not desired for a lot of assets in game development.

The lack of this feature means I have to add an extra step to the creation of my 2D assets.

Left is the exported file, right is the desired result.
As you can see, all of the area with alpha is filled to pure black, which creates ugly edges on aliased images (as well as other issues with channel packing etc.)

We would need to get an actual Affinity native format example file.

The effect you are observing can be caused by using specific combinations of clipping / masking / blend modes for groups / other features which can create anti-aliasing artifacts. But this always can be avoided and replaced by other means, to get the intended result without such artifacts. 

Affinity does not premultiply alpha for PNG export, as far as i know. This feature is only relevant for other data formats.

 

 

 

 

 

 

 

 

[Terry44]

I have seen that in other software I have used and it had something to do with how the layers were setup and the FX on the layers. It was a combination of things that compounded and created the problem.   I have never seen it in my own work in version 1 or 2 apps to date.   

Look at the effects, stroke etc.. on the individual elements and the layers and groupings.

Look at your layers and how they are setup.. Normal, Passthrough etc..  and how the layers themselves are nested grouped together.  the FX on each one. nested layers can have effects that can cause this too.  Accidentally applying or forgetting you applied something nested 3 deep in a group or A group.

Look at the export options and see what they are set too.  Resample, Bleed, Palettized.  File format and option.

Those are the main areas to look at that I can suggest.  I have seen this in other apps like I said but personally not in Affinity myself.

 

[tudor]

I get it now, this is an issue that is only relevant for those working with graphics for the video and gaming industry. The rest of us are probably not affected by it.

[Terry44]

13 minutes ago, tudor said:

I get it now, this is an issue that is only relevant for those working with graphics for the video and gaming industry. The rest of us are probably not affected by it.

You are only effected if you want pure transparency in exported files from Affinity apps.

If it is NOT anything the OP did in their source file AND Affinity IS premultiplying transparency then it will impact you at some point, especially in 4k+ monitors or print.

[NotMyFault]

18 hours ago, AutumnPioneer said:

When I export images with transparency from Designer or Photo, the alpha is always pre-multiplied which is not desired for a lot of assets in game development.

The lack of this feature means I have to add an extra step to the creation of my 2D assets.

Left is the exported file, right is the desired result.
As you can see, all of the area with alpha is filled to pure black, which creates ugly edges on aliased images (as well as other issues with channel packing etc.)

Can you try to place a white colored fill object behind the actual object before export?
if you export without, the partial transparent edge pixels will use black as fill color.

it is probably unrelated to pre-multiplied or not. 

[AutumnPioneer]

6 hours ago, tudor said:

I don't see that here. Do you use any effects or blending modes on the strokes/edges?

To be clear, the image I posted in the 1st post is a view of the image inside Substance Designer, not the export preview. But you can check if the alpha area is filled black in pretty much any image editor. Even Affinity Photo by just hiding the alpha channel:

The edge outlines are done using a layer effect outline, but I have tested this with the regular stroke outlines too and the result is still the same. The ideal result is to have the diffusion of the RGB channels and the alpha NOT effecting the colours.

 

1 hour ago, NotMyFault said:

Can you try to place a white colored fill object behind the actual object before export?
if you export without, the partial transparent edge pixels will use black as fill color.

it is probably unrelated to pre-multiplied or not. 

This has the expected result of a pure white background and no issues.
I also tested setting that pure white background to 0% opacity but it still produced the same issue of the black colur.

[NotMyFault]

This and similar issues of thin lines in black/white or any other color are plaguing users since ages.

Affinity is doing kind of correct „as defined“ exports in some cases, but fractional pixels, unexpected anti-aliasing, clipping and masking issues are very annoying and sometimes difficult to analyze.

Affinity should change their position and provide more help for users to get rid of all these unwanted effects, e.g. by optional preflight checks & corrective measures.

[tudor]

@AutumnPioneer which file format do you use when exporting graphics out of Affinity apps?

[AutumnPioneer]

1 hour ago, tudor said:

@AutumnPioneer which file format do you use when exporting graphics out of Affinity apps?

.PNG. But because of this message you left me, i just tried with TGA file and it works?! Thank you. edit: does not work exactly but see further comments below.

Obviously the file sizes are now like 10x larger but, i might be able to convert them in another program? Still annoying when i wanted to stick to a .png workflow

Edited November 18, 2022 by AutumnPioneer

[tudor]

I did a test exporting graphics from Affinity Designer and importing them into Motion, where the alpha type makes a difference. PNGs were always straight alpha. For comparison, TIFFs with transparency are always pre-multiplied black, so they do have that black outline when I set them to straight alpha. But I'm wondering why your PNGs looked like they were pre-multiplied?

[NotMyFault]

11 minutes ago, tudor said:

But I'm wondering why your PNGs looked like they were pre-multiplied?

Even at the risk of repeating this for the 3rd time:

the effect is not caused by premultiplied alpha. To identify the actual cause, we need the file uploaded. There are many possible causes, mainly layer fx.

[AutumnPioneer]

3 minutes ago, NotMyFault said:

Even at the risk of repeating this for the 3rd time:

the effect is not caused by premultiplied alpha. To identify the actual cause, we need the file uploaded. There are many possible causes, mainly layer fx.

Here's a file, its very easy to reproduce. Simply make something and export is as .png

BlackOpacity.afdesign

[AutumnPioneer]

1 hour ago, AutumnPioneer said:

.PNG. But because of this message you left me, i just tried with TGA file and it works?! Thank you. edit: does not work exactly but see further comments below.

Obviously the file sizes are now like 10x larger but, i might be able to convert them in another program? Still annoying when i wanted to stick to a .png workflow

UPDATE: I was deceived by my own setup because i was testing an image with a white outline. Exporting as .PNG, the background alpha colour is forced to black. But in .tga and .tiff, they are forced to white. So i had not noticed the issue until i tested it with an object with a green outline.

I have however noticed that there is more bleed for the colours alpha in the .tiff and .tga files. So why is .png exporting with a forced black background and not allowing the colours to stay for the aliasing.

Edited November 18, 2022 by AutumnPioneer
forgot to attach image

[tudor]

@AutumnPioneer I exported that question mark graphic as PNG from your afdesign file and Motion detected it as straight alpha. No black background or any black artifacts. 

Do you export as PNG-8 by any chance?

[AutumnPioneer]

1 hour ago, tudor said:

@AutumnPioneer I exported that question mark graphic as PNG from your afdesign file and Motion detected it as straight alpha. No black background or any black artifacts. 

Do you export as PNG-8 by any chance?

Yes i export as PNG-8 because i dont need the extra info and file size increase. I just tested and youre right about it being white and no artefacts in png 16 though. hmm...

[ashf]

-

[ashf]

This is a layer structure that can export the straight alpha without the matte to TGA.

[ashf]

-

[NotMyFault]

4 hours ago, AutumnPioneer said:

Here's a file, its very easy to reproduce. Simply make something and export is as .png

BlackOpacity.afdesign 76.33 kB · 5 downloads

Thanks for uploading. It exports without any trace of black. What export settings do you use? (Screenshot would do)
I use „Selected Area“ instead of „Document“, and used iPad.