Illustré à travers le projet « Legacy of DoYazan »
Alaa-eddine [email protected]
» 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
» NodeJS : un serveur pensé pour HTML5
» MongoDB : une base de données NoSQL
» Architecture Type d’un serveur multi-joueurs
» Resources et liens
http://ezelia.com
» Nouveau standard HTML5
» Extension de JavaScript (ECMA standards v5 ~ v6)
» Nouveau standard pour les feuilles de styles : CSS3
» 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 …
» Rendu˃ DOM / CSS3
˃ Canvas
˃ WebGL
» Réseau˃ Ajax
˃ Websockets
» Multithreading˃ Webworkers
» Son / Vidéo
» 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
» 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)
» Initialisation
» Boucle avec timer˃ Simulation : mise à jour de l’état du jeu
˃ Rendu de la scène
(exemple de code)
» 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
» 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 …)
» 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é
» 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.
» 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.
» Utilisation d’un pool d’objets pour limiter les passages du “garbage collector”
» Chargement dynamique des objets.
» Exemple concret : chargement dynamique des maps pour un effet de scrolling continu
» 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 …
» 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.
» 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
» 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)
» caniuse.com
» html5demo.braincracking.org
» html5rocks.com
» html5gamedevs.com
» github.com