Illustré à travers le projet « Legacy of                              DoYazan »             Alaa-eddine KADDOURI          ...
» Présentation rapide du projet « Legacy of  DoYazan »» Qu’est ce que HTML5 ?» HTML5 pour le développeur de jeux» Moteurs ...
»   NodeJS : un serveur pensé pour HTML5»   MongoDB : une base de données NoSQL»   Architecture Type d’un serveur multi-jo...
http://ezelia.com
» Nouveau standard HTML5» Extension de JavaScript (ECMA standards v5 ~  v6)» Nouveau standard pour les feuilles de styles ...
»   Nouvelles fonctionnalités DOM, CSS, and JS»   Reduction de dépendance aux plugins»   Plus d’effets CSS sans scripting»...
» 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, M...
» HTML5 enrichie javascript   ˃   Timer amélioré   ˃   Acceleration materielle pour la 2D et la 3D   ˃   Support natif de ...
» 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 ,   ...
» Ne doit pas nécessiter d’adaptation dans le  code.» Gère la physique et les collisions» Intègre des éditeurs de personna...
»   Qu’est ce que je sais faire ?»   Qu’est ce que je veux faire ?»   ---»   Décider du type de jeu que je souhaite dévelo...
» Oui si :   ˃ Aucun moteur de jeu exitant ne répond à mon besoin   ˃ J’invente un gameplay bien spécifique, très difficil...
» Fréquence idéale pour un jeu fluide = 60fps.» 60fps = ~33ms par frame. (http://  boallen.com/fps-compare.html )» Mettre ...
» 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, ...
» Convertir HTML5 en application mobile native   ˃ Cocoonjs   ˃ AppMobi   ˃ PhoneGap (mauvaises perfs pour les jeux bon po...
»  Nodejs : un Framework évènementiel basé  sur le moteur Javascript V8 de Google.  ˃   Installation simple  ˃   Communau...
» MongoDB : une base de donnée noSQL  ˃ Stockage de données au format JSON  ˃ Supporte de grandes charges / grand nombre d...
»   caniuse.com»   html5demo.braincracking.org»   html5rocks.com»   html5gamedevs.com»   github.com
MGD Html5 pres fr
MGD Html5 pres fr
MGD Html5 pres fr
MGD Html5 pres fr
MGD Html5 pres fr
MGD Html5 pres fr
MGD Html5 pres fr
MGD Html5 pres fr
MGD Html5 pres fr
MGD Html5 pres fr
MGD Html5 pres fr
MGD Html5 pres fr
MGD Html5 pres fr
MGD Html5 pres fr
MGD Html5 pres fr
MGD Html5 pres fr
MGD Html5 pres fr
MGD Html5 pres fr
MGD Html5 pres fr
MGD Html5 pres fr
MGD Html5 pres fr
MGD Html5 pres fr
MGD Html5 pres fr
MGD Html5 pres fr
MGD Html5 pres fr
MGD Html5 pres fr
MGD Html5 pres fr
MGD Html5 pres fr
MGD Html5 pres fr
Prochain SlideShare
Chargement dans…5
×

MGD Html5 pres fr

668 vues

Publié le

Présentation sur HTML 5 par Alaa dine Kadouri

Publié dans : Technologie
0 commentaire
2 j’aime
Statistiques
Remarques
  • Soyez le premier à commenter

Aucun téléchargement
Vues
Nombre de vues
668
Sur SlideShare
0
Issues des intégrations
0
Intégrations
4
Actions
Partages
0
Téléchargements
31
Commentaires
0
J’aime
2
Intégrations 0
Aucune incorporation

Aucune remarque pour cette diapositive

MGD Html5 pres fr

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

×