Partager via

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

Comments

  • Anonymous
    December 10, 2011
    Article très intéressant, surtout pour moi qui développe aussi un jeu en HTML5. A un moment vous dites avoir cherché en dur la valeur en ms pour le ticker (vous trouvez 17). Il y a une façon très simple de procéder pour atteindre un nombre X de FPS : 1000/FPS, soit 1000/60 = 16,666.... pour être exact :)

  • Anonymous
    December 10, 2011
    Oui je connais la manière de calculer un FPS ;-) En fait, il y a débat sur la valeur entière pour viser 60 fps. C'est donc soit 16 soit 17ms. Et il semblerait que 17ms soit plus efficace car avec 16, on tente de dessiner parfois pour rien. La fenêtre de tir étant légèrement trop rapide. Merci pour le retour! David

  • Anonymous
    December 11, 2011
    Merci pour l'explication, il y a toujours un petit truc pour optimiser son jeu :) En ce qui concerne le son, pour savoir si le fichier est téléchargé côté client, je me suis tourné vers cet event : audio.addEventListener('canplaythrough', isloaded, false); Avec des résultats encore peu probants pour le moment de mon côté. Bonne continuation !

  • Anonymous
    January 27, 2012
    Non moi je ne sors pas d'une école d'ingénieur mais ça m'intéresse quand même.