Présentation sur HTML 5 par Alaa dine Kadouri

1. Illustré à travers le projet « Legacy of
DoYazan »
Alaa-eddine KADDOURI
alaa.eddine@gmail.com

2. » Présentation rapide du projet « Legacy of
DoYazan »
» Qu’est ce que HTML5 ?
» HTML5 pour le développeur de jeux
» Moteurs de jeux en HTML5
» Techniques d’optimisation HTML5
» HTML5 et la sécurité
» Cibler différentes plateformes

3. » NodeJS : un serveur pensé pour HTML5
» MongoDB : une base de données NoSQL
» Architecture Type d’un serveur multi-joueurs
» Resources et liens

5. http://ezelia.com

9. » Nouveau standard HTML5
» Extension de JavaScript (ECMA standards v5 ~
v6)
» Nouveau standard pour les feuilles de styles :
CSS3

10. » Nouvelles fonctionnalités DOM, CSS, and JS
» Reduction de dépendance aux plugins
» Plus d’effets CSS sans scripting
» Indépendant de la plateforme(à terme)
» Frameworks et libraries : Jquery/jquery-
ui, mootools, prototype, YUI …

12. » Rendu
˃ DOM / CSS3
˃ Canvas
˃ WebGL
» Réseau
˃ Ajax
˃ Websockets
» Multithreading
˃ Webworkers
» Son / Vidéo

13. » En général
˃ Nouvelle technologie
˃ Nouveau marché avec beaucoup de niches
˃ Supporté par des poids lourds (Google, Mozilla, Microsoft, Adobe,
Apple, …)
˃ Les consoles de jeux se mettent à HTML5
» D’un point de vue technique
˃ Aide à la séparation entre : game logic / Data / UI / Network
˃ Multi-platformes

14. » HTML5 enrichie javascript
˃ Timer amélioré
˃ Acceleration materielle pour la 2D et la 3D
˃ Support natif de la 3D avec webGL
˃ Multi-threading avec les webworkers (IE10, Chrome, FFx)

15. » Initialisation
» Boucle avec timer
˃ Simulation : mise à jour de l’état du jeu
˃ Rendu de la scène
(exemple de code)

17. » Gratuits
˃ CreateJS (supporté par Adobe) => createjs.com
˃ MelonJs (compatible avec TiledEditor) => melonjs.org ,
melonjs.org/tutorial
˃ Raphael => http://raphaeljs.com/
˃ PlayCraft (bonne gestion des physics) => http://playcraftlabs.com/
» Commerciaux
˃ ImpactJS (appLab)
˃ Construct
» Liste de moteurs de jeux HTML5
˃ https://github.com/bebraw/jswiki/wiki/Game-Engines

18. » Ne doit pas nécessiter d’adaptation dans le
code.
» Gère la physique et les collisions
» Intègre des éditeurs de personnages, de cartes,
de mondes, d’IA …
» Ne dépend pas d’un langage de scripting
particulier.
» Propose plusieurs moteurs de rendu (DOM,
Canvas, WebGL …)

19. » Qu’est ce que je sais faire ?
» Qu’est ce que je veux faire ?
» ---
» Décider du type de jeu que je souhaite développer
» Prendre en considération la courbe d’apprentissage
» Vérifier que le moteur est maintenu à jour et qu’il a une
communauté

20. » Oui si :
˃ Aucun moteur de jeu exitant ne répond à mon besoin
˃ J’invente un gameplay bien spécifique, très difficile à implémenter
avec un moteur du marché
˃ Je souhaite être indépendant d’une source externe/d’une licence
» Ou si :
˃ On aime le challenge
˃ On veut avant tout apprendre et comprendre le fonctionnement d’un
moteur de jeu.

23. » Fréquence idéale pour un jeu fluide = 60fps.
» 60fps = ~33ms par frame. (http://
boallen.com/fps-compare.html )
» Mettre en cache les objets.
» Limiter les passages du garbage collector avec un pool
d’objets.
» Utilisation de la programmation événementielle.
» Solliciter le CPU le moins possible.

24. » Utilisation d’un pool d’objets pour limiter les passages du “garbage
collector”

25. » Chargement dynamique des objets.
» Exemple concret : chargement dynamique des
maps pour un effet de scrolling continu

29. » Content security policy pour éradiquer les
attaques XSS.
» Granularité de filtrage : connect-src, font-src,
frame-src, img-src, media-src, object-src, style-
src …

31. » Convertir HTML5 en application mobile native
˃ Cocoonjs
˃ AppMobi
˃ PhoneGap (mauvaises perfs pour les jeux bon pour les apps)
» Ecrire du code HTML5 compatible avec les
navigateurs mobiles.
˃ Utilisation d’un rendu DOM au lieu de Canvas peut aider.
˃ Respecter les bonnes pratiques d’optimisation de code et de rendu.

34. »  Nodejs : un Framework évènementiel basé
sur le moteur Javascript V8 de Google.
˃ Installation simple
˃ Communauté très active (des modules pour tout faire)
˃ Supporte des modules en JS ou natifs (C/C++)
˃ Installation facile des modules/addons (npm)
˃ Flexible et scalable
˃ Supporte les websockets
˃ Facile à déployer
˃ Multi plateformes

36. » MongoDB : une base de donnée noSQL
˃ Stockage de données au format JSON
˃ Supporte de grandes charges / grand nombre de requêtes
simultanées
˃ Facilement scalable (cluster)

51. » caniuse.com
» html5demo.braincracking.org
» html5rocks.com
» html5gamedevs.com
» github.com