Canvas2d: Sprites with transparency: Weird behaviour [solved]

[jpdev]

Edit: The solution to get Sprite2D with transparent areas working is to set "hasAlpha" on the Texture to "true".

---

Hi,

I want to use sprites2d (in canvas2d) made from png files that have transparent areas.

expected behavior: Transparent areas are rendered transparent

actual behavior: transparent areas are rendered not transparent

It gets super weird, if I set opacity on the sprite to 0.999 everything works fine.

Working, with opacity 0.999

http://www.babylonjs-playground.com/#DSJDT#11

no longer working with opacity 1.0 (or opacity removed):

http://www.babylonjs-playground.com/#DSJDT#12

I will use the 0.99 opacity workaround for now., but this seems buggy - I would like my sprite to be rendered according to the alpha channel, and it's weird that this only seems to happen if I set opacity to 0.99.

Maybe I missed another property?

 

 

[Wingnut]

Hi JPdev.  What about...  texture.hasAlpha = true;  ...in the line 24 area?  Any improvement/change?

[GameMonetize]

Ping @Nockawa

[Nockawa]

@jpdev I realise that I didn't write proper documentation about this so you can't know how things are supposed to work.

Bottom line: @Wingnut is right, you have to set texture.hasAlpha = true to notice the Canvas2D engine that you're willing to use the Alpha Channel of the Picture, which will make your Sprite always Transparent.

Otherwise having an actualOpacity < 1.0 will also make it transparent, which is why you have the behavior you describe.

An old discussion with @Deltakosh led me to count on this flag which must be manually set to know if I should consider a texture as transparent or not, this is not something that can be detected.

[Nockawa]

http://www.babylonjs-playground.com/#DSJDT#13

Working by just adding texture.hasAlpha = true;

[jpdev]

Thanks, that's exactly what I was missing, so issue solved.

@Nockawa Just as an idea, maybe (since that's where I was looking for such a flag) you could add "hasAlpha" as an option to the Sprite2D?

 

[Nockawa]

Well, there's no point for such flag in reality, or it would be a proxy of the hasAlpha property of its assigned texture.

A Sprite2D is transparent if its assigned texture use the alpha channel or if its actualOpacity is < 1.0. What it missed is a proper overview doc about all of this, I will write it soon.