Glitch-free cross-fades in HTML5
- by Alexander Gladysh
In my HTML5 canvas game, I need to cross-fade two sprites which have some glow around them. (Glow is backed into sprites.)
Initially, the first sprite is visible. During the cross-fade the first sprite should vanish, and be replaced with the second one. How exactly the cross-fade is done — does not matter, as long as it is smooth and there are no visual glitches.
I've tried two techniques:
During the cross-fade I simultaneously interpolate alpha of the first sprite from 1.0 to 0.0, and alpha of the second sprite — from 0.0 to 1.0.
With this technique I can see background in the middle of the cross-fade. That's because both sprites are semi-transparent most of the time.
During the cross-fade I first interpolate alpha of the second sprite from 0.0 to 1.0 (first sprite alpha is at 1.0), and then interpolate alpha of the first sprite from 1.0 to 0.0.
With this technique background is not seen, but the glow around sprites flashes during the cross-fide — when both sprites are near the full visibility.
In non-HTML5 game I'd use shaders to do cross-fade separately in RGB and alpha channels. Is there a trick to do the cross-fade I need in HTML5 without visual glitches?
