Session sur le développement d'un jeu de plateforme en HTML5 / Canvas jouée pendant les Microsoft Days 2011.
On y voit :
- les différents frameworks de jeux JS du marché ainsi qu'une comparaison de performance entre SVG et Canvas
- La manière d'animer des sprites
- La manière d'ajouter de la logique pour les tests de collisions
- Le jeu HTML5 Platformer complet
- Des idées pour aller plus loin: webworkers, requestAnimationFrame, Box2D, etc.
HTML5 pour l’écriture d’applications cross-devices
Développement d'un jeu de plateforme en html5
1.
2. Développement d'un jeu
de plateforme en HTML5
David Rousset / Microsoft France / @davrous
http://blogs.msdn.com/davrous
2
3. Au menu
Analyse des technologies HTML5 et
frameworks JS disponibles
Animation des sprites
Construction des objets principaux
Détails sur le jeu complet
Moteur physique, logique du jeu, chargement
des niveaux
Des idées pour aller plus loin
3
5. Niveau 1: analyse de l’existant
Il existe 2 manières de dessiner en HTML5:
<canvas> : à voir comme une zone bitmap
dynamique dans laquelle on dessine à l’aide
de primitives en JavaScript
SVG : affichage de formes vectorielles décrites
par XML
Il existe de nombreux frameworks
JavaScript pour le jeu:
impactJS, craftyJS, melonJS, EaselJS, etc.
5
8. Niveau 1: EaselJS pour le framework
Questions à se poser :
Qualité / retour d’expériences ?
Fréquence de mise à jour, suivi des bugs ouverts ?
Compatibilité multi-navigateurs ?
Connaissances actuelles ?
Mes réponses pour EaselJS:
Déjà utilisé pour PiratesLoveDaisies et Tanker
Bon suivi des bugs sur Github
Testé et approuvé sur les 5 navigateurs
Mes connaissances/assets XNA facilement portables
8
12. Niveau 3: Objets principaux & collisions
Créations des objets associés aux personnages
dont le héro :
Gestionnaire de téléchargement de ressources
Collisions simples
12
14. Niveau 4: revue des quelques détails
du jeu complet
Gestionnaire de téléchargements complet
Collisions plus précises
Chargement du niveau
Moteur physique simpliste
Astuces pour gérer le son
Kudos pour IE9
14
16. Niveau 5: pour aller plus loin
Meilleure gestion des performance
Monothreading vs WebWorkers
requestAnimationFrame
Adaptation FPS / performance
Librairies plus avancées
Box2D
Gestion des devices mobiles
Touch
Scaling résolution
Accéléromètre
Gestion réseaux sociaux
16
17. Ressources
Série de 3 tutoriaux sur le portage du jeu :
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
Sur mon blog: http://blogs.msdn.com/davrous
17