MGD Html5 pres fr

Illustré à travers le projet « Legacy of DoYazan »

Alaa-eddine KADDOURIalaa.eddine@gmail.com

» 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