Contenu
Le concepteur Web Filidor Wiese a attiré notre attention avec son site personnel. Il s’est associé à Arthur van ’t Hoog pour développer un univers virtuel avec un personnage de jeu rétro pixélisé à l’écran se représentant.
Une fois les sprites conçus, Wiese a commencé le processus complexe de les animer avec JavaScript plutôt qu'avec des techniques d'animation conventionnelles telles que les GIF.
"Le problème est qu'ils sont très difficiles à contrôler du point de vue JavaScript", explique Wiese. «J'avais besoin d'un moyen de chronométrer exactement, de boucler, d'enchaîner et de scénariser plusieurs animations d'affilée. De plus, le sprite devrait être capable de se repositionner image par image. Cette dernière fonctionnalité permet une animation plus avancée; par exemple, un personnage qui marche.
«Inspiré par Spritely, j'ai commencé à travailler sur un plug-in personnalisé», ajoute-t-il. "Au cœur, vous trouverez la logique de repositionnement de l'image d'arrière-plan effectivement retardée par la mise en œuvre de l'API window.requestAnimationFrame. Cette API JavaScript demande le minuteur basé sur l'intervalle, qui est moins efficace."
Ce travail a permis à Wiese de réaliser une interaction complexe entre les animations. "L'une des difficultés qui est apparue était la nécessité d'une interaction entre différents sprites. Par exemple, la tour ne devrait émettre des signaux que si le personnage tape sur son ordinateur. Pour que cela fonctionne, j'ai utilisé des événements JavaScript personnalisés pour permettre à un sprite de se déclencher. un interrupteur dans un autre. "
Cette vitrine a été initialement publiée dans le numéro 235 du magazine .net.
Maintenant, lisez-les!
- Meilleurs exemples de JavaScript
- Grands exemples de HTML5
- Formation en conception Web: les meilleurs outils en ligne
