Glitch-free cross-fades in HTML5
Posted
by
Alexander Gladysh
on Game Development
See other posts from Game Development
or by Alexander Gladysh
Published on 2013-10-31T00:39:32Z
Indexed on
2013/10/31
4:22 UTC
Read the original article
Hit count: 294
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?
© Game Development or respective owner
