Formation HTML5 & Canvas

Apprenez à construire votre propre moteur d'affichage à l'aide des toutes nouvelles fonctionnalités du HTML5 et de la balise Canvas.

Durée 3 jours soit 21.00 heures de formations de 9h30 à 18h00.

Qualité 8 stagiaires par session maximum. 1 poste Mac ou Windows par stagiaire. Support de cours accessible en ligne.

Public Développeurs Javascript, RIA, jeux vidéos, développeurs AS3 souhaitant opérer un changement vers le HTML5 ou toute autre personne en charge de la création de contenu riche en HTML5.

Objectifs Acquérir les bases de l'affichage avec Canvas. Apprendre les bases de l'architecture d'un moteur. Construire son propre moteur d'affichage. Comprendre les techniques d'optimisation de performances. Réaliser des applications web visibles sur ordinateurs et terminaux mobiles

Pré-requis Les notions de base de la POO et du Javascript

Formation HTML5 & Canvas

1 - Dessiner avec canvas

  • Créer un Canvas
  • Dessiner des primitives (ronds, ellipses, carrés)
  • Alpha, scale, rotation et translation

2 - Dessiner une image

  • Charger une image ou une texture
  • Dessiner une texture
  • Methodes de dessin avancées
  • Dessiner à travers un masque

3 - Structure de base du moteur

  • La POO en Javascript, le prototypage
  • Héritage et ordre d'inclusion
  • Namespace
  • Fusionner tous les fichiers js en un seul

4 - Gestion des médias ou des assets

  • Introduction aux spritesheets
  • Gestion des Assets : AssetLoader et AssetsManager
  • Première classe : la classe Texture
  • Regrouper toutes les textures en une seule : la classe TextureAtlas

5 - Les bases de l'affichage

  • Structure arborescente et DisplayList
  • La classe DisplayObject
  • La classe Image
  • La classe DisplayObjectContainer pour les objets imbriqués
  • Racine de la DisplayList : classe Stage
  • Manipuler le point de vue : la classe Camera

6 - Manipuler les objets : transformations et calculs matriciels

  • Le problème des transformations imbriquées
  • Utilisation des matrices
  • Combiner les transformations d'un enfant avec celles de son parent
  • Implémentation des matrices dans le moteur

7 - Modèle événementiel et design pattern

  • Comment gérer un modèle événementiel, le design pattern observer
  • Implémentation sur les objets d'affichage

8 - Collisions et événements utilisateurs

  • Détecter les événements souris
  • Théorie des collisions, les formules
  • Implémentation d'une méthode collide sur un DisplayObject

9 - Les animations

  • Méthode d'animation
  • Retour sur les spritesheets
  • Définir un modèle de données pour les animations
  • Créer une classe MovieClip permettant de jouer une animation

10 - Les filtres

  • Base des filtres avec la balise canvas
  • Implémentation de la classe ImageFilter
  • Lier un ou plusieurs filtres à un objet d'affichage

11 - Annexes

  • Le tri rapide Qsort
  • Le tri d'entiers super rapide : Radix
  • Le clipping : exemple avec un BinaryTree
  • Optimisation des calculs matriciels
/srv/datadisk01/home/formation/site3