Vidéo, slides et ressources de ma session sur le développement d’un jeu de plateforme en HTML5

  • Article

Si vous n’avez pas pu assister à ma session sur le développement d’un jeu de plateforme en HTML5/Canvas pendant notre évènement Microsoft Days 2011 ou si vous souhaitez revoir la session, en voici un enregistrement :

Poster Image

Download Video: MP4, WebM
HTML5 Video Player by VideoJS

Au format HTML5 <video> h264/webm bien sûr. J’utilise d’ailleurs au passage le player VideoJS que je vous conseille et qui propose de jolies CSS et un fallback automatique pour les anciens navigateurs.

Voici les exemples que je vous ai montrés pendant cette heure de session :

- Pour comparer les performances d’animations entre SVG et Canvas sur vos navigateurs : 1000 balles en Canvas et 1000 balles en SVG.
- Les framework de jeux MelonJS (qui marche désormais sous IE9), ImpactJS avec cette démo/benchmark et EaselJS avec ce jeu de Tower Defense : Pirates Love Daisies.

Ensuite, cette session reprenais surtout en très grande partie les 3 tutoriaux que j’ai publiés ici :

- Jeux HTML5: animation de sprites dans l’élément Canvas grâce à EaselJS 
- Jeux HTML5: construction des objets principaux & gestion des collisions avec EaselJS
- HTML5 Platformer: portage complet du jeu XNA vers <canvas> grâce à EaselJS où vous pouvez d’ailleurs télécharger le source code complet du jeu.

Pour finir, voici quelques ressources complémentaires que je vous conseille :

- Pour aller plus loin sur la boucle “d’update”, on pourrait utiliser les Web Workers. Vous trouverez une introduction ici : Introduction aux Web Workers d’HTML5 : le multithreading version JavaScript
- Il existe des moteurs physiques “open source” pour JavaScript dont le plus connu est Box2D que vous pouvez voir ici : Box2DJS - Physics Engine for JavaScript
- Seth Ladd, un évangéliste de chez Google, s’est d’ailleurs amusé à combiner Web Workers et Box2D. Je vous conseille son excellente série de tutoriaux sur Box2D dont celui qui traite des Web Workers : Box2D and Web workers for JavaScript developers

Pour finir, vous trouverez les slides de cette session ici :

Et également sur slideshare ici : Développement d'un jeu de plateforme en html5

J’espère maintenant avoir suscité des vocations pour un jour vous recroiser riche et célèbre grâce à votre jeu vidéo HTML5 ! Clignement d'œil

David