Semi-transparent PNGs appear garbled

[hogart]

Minimal code: http://codepen.io/hogart/pen/KNVNKB?editors=0010 On the left is image loaded through <img/>, on the right is excalibur's canvas. Image taken from ludum-dare-33 sample repo, where it was used as cursor. I tried several png images with similar problems.

Steps to Reproduce

• Load any png file with semi-transparent pixels as Texture
• Assign this texture to actor and add this actor to scene

Expected Result

Texture renders with semi-transparent areas

Actual Result

Texture looses semi-transparency, resulting in jagged edges and artifacts

Environment

• Excalibur 0.7.1 and 0.7.0
• Chrome 55 beta on Win10, Chrome 54 on Android 4.4, FF 49.0.1 on Win10

[eonarheim]

@hogart Definitely looks like an issue, thanks for the codepen really easy to test :)

I tried setting game.setAntialiasing(true) in the codepen to no success.

I should have some free time this week to look into it more deeply. My first guess is that there is some loss of information between the PNG and the canvas, potentially a bug in our resource processing...

[hogart]

I narrowed it down to Sprite#_applyEffects, specifically to last line: this.internalImage.src = this._spriteCanvas.toDataURL('image/png');. But I've no idea what's the problem here, because .toDataURL support transparency given proper MIME-type.

[hogart]

Turns out it's rather connected with #481 and there's no loss of information. Flag Actor#_framesDirty is set in two cases, when we add new frames and when opacity changes. And if it's set, opacity effect is re-applied to every drawing in Actor#update. This leads to duplicate calls to Sprite#_applyEffects, so texture gets drawn twice. And that effectively kills opacity:)

[hogart]

Sorry for this, I was wrong. PR with fix for this follows.