2
Développement d'un jeu de plateforme en HTML5
David Rousset / Microsoft France / @davroushttp://blogs.msdn.com/davrous
3
Au menu
Analyse des technologies HTML5 et frameworks JS disponiblesAnimation des spritesConstruction des objets principauxDétails sur le jeu complet
Moteur physique, logique du jeu, chargement des niveaux
Des idées pour aller plus loin
4
DémoObjectif : porter le jeu XNA qui va suivre
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 JavaScriptSVG : affichage de formes vectorielles décrites par XML
Il existe de nombreux frameworks JavaScript pour le jeu:
impactJS, craftyJS, melonJS, EaselJS, etc.
6
Niveau 1: <canvas> préférable
7
DémoAnalyse rapide des performances d’animation entre SVG et canvas
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 TankerBon suivi des bugs sur GithubTesté et approuvé sur les 5 navigateursMes connaissances/assets XNA facilement portables
9
DémoQuelques frameworks de jeu en action
10
Niveau 2: Animation des sprites
Nous allons maintenant voir comment partir de ce genre de sprites :
Et réussir à leur donner vie !
11
DémoAnimation des sprites
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
13
DémoCréation des objets principaux et de leurs collisions
14
Niveau 4: revue des quelques détails du jeu complet
Gestionnaire de téléchargements completCollisions plus précisesChargement du niveauMoteur physique simplisteAstuces pour gérer le sonKudos pour IE9
15
DémoParcourrons ensemble le code du jeu
16
Niveau 5: pour aller plus loin
Meilleure gestion des performanceMonothreading vs WebWorkersrequestAnimationFrameAdaptation FPS / performance
Librairies plus avancéesBox2D
Gestion des devices mobilesTouchScaling résolutionAccéléromètre
Gestion réseaux sociaux
17
Ressources
Série de 3 tutoriaux sur le portage du jeu :Jeux HTML5: animation de sprites dans l’élément Canvas grâce à EaselJSJeux HTML5: construction des objets principaux & gestion des collisions avec EaselJSHTML5 Platformer: portage complet du jeu XNA vers <canvas> grâce à EaselJS
Sur mon blog: http://blogs.msdn.com/davrous
Top Related