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