While trying to read through my recent Instapaper articles, I was excited to come across Fabien Sanglard’s breakdown of Wolfenstein 3D’s FizzleFade function. It also reminded me to purchase his eBook, Game Engine Black Book: Wolfenstein 3D. Anyway, you should read the article; it’s short and explains the technique well.
A live example of the code below.
Note: Mobile Safari is not liking the
setTimeout, and instead jumps right to the end. Perhaps if I’d used
requestAnimationFrame it would be more fluid.
If the above live example didn’t work, this gif ought to illustrate the effect: