Animations 2D dans le navigateur
##Moteurs de rendu Les moteurs de rendu 2D (ou 3D) permettent de gérer et générer la construction d’interactions et d’animations complexes.
Ces moteurs sont au coeur des jeux vidéos ou des UX avec des besoins en animations lourds.
##Manipulation du DOM et SVG
- Dans le cas des animations simples, l’animation du DOM via le JS peut suffir
- Comme l’animation d’éléments SVG via des librairies JS comme snapsvg.io
- Ces techniques sont limitées par leur faible performance (opérations haut niveau)
##Moteurs JS de rendu 2D dans le navigateur
- Flash possède évidemment son moteur de rendu 2D (vectoriel + AVM pour bitmpas, vidéos et mp3)
- Mais Flash s’est fait assassiné par Apple, ne laissant aux développeurs que de la mainpulation de HTML via JS
- Jusqu’à … l’avènement du canevas (créé par Apple:)) qui permet de générer des rendus en s’affranchissant de la manipulation du DOM
- Des moteurs JS performants permettent maintenant de gérer des animations complexes sur tous les devices munis de navigateurs modernes
- SEO : comme le Flash, sans dispositions particulières, les rendus 2D (ou 3D) dans le canvas ne sont évidemment pas SEO friendly, puisque dynamiquement générés en Javascript
##Canvas VS webGL 2D
- WebGL est plus performant que le canvas, à condition de l’utiliser correctement
- WebGL : IE11+, iOS8+, Chrome Android (pas activé par défaut), Chrome, Firefox
- Canvas : IE9+, iOS 7+, Chrome, Firefox
Idéalement, focus sur la logique du jeu et séparation du rendu : développer en rajoutant une couche d’abstraction sur le rendu (drawCloud), rendre en canvas, et si pas assez performant, passer en webGL
##Moteurs de rendus 2D JS
- Pixi.JS : moteur webGL rapide, fallback canvas, multi touch, filtres, tweening, assets loader, etc.
- Create.JS : moteur canvas, support webGL en béta, tweening, assets loader, etc.
##Exemples de rendus 2D JS
