Web designer Filidor Wiese (opens in new tab) caught our eye with his personal site (opens in new tab). He teamed up with Arthur van 't Hoog (opens in new tab) to develop a virtual universe with a pixelated retro gaming character on screen representing himself.
Once sprites had been designed, Wiese began the complex process of animating them with JavaScript rather than conventional animation techniques such as GIFs.
"The problem is, they're very hard to control from a JavaScript perspective," Wiese explains. "I needed a way to exactly time, loop, chain and script several animations in a row. Also the sprite should be able to reposition itself frame by frame. This last feature enables more advanced animating; for instance, a walking character."
"Inspired by Spritely (opens in new tab), I started working on a custom plug-in," he adds. "At the core you'll find background-image repositioning logic effectively delayed by implementing the window.requestAnimationFrame API. This JavaScript API asks the interval-based timer, which is less efficient."
This work enabled Wiese to achieve some complex interaction between animations. "One of the difficulties that emerged was the necessity for interaction between different sprites. For example, the tower should only emit signals if the character is typing on his computer. For this to work I've used custom JavaScript events to let one sprite trigger a switch in another."
This showcase was originally published in .net magazine (opens in new tab) issue 235.
Now read these!
- Top examples of JavaScript (opens in new tab)
- Great examples of HTML5 (opens in new tab)
- Web design training: the top online tools (opens in new tab)
