MGD Html5 pres fr
Upcoming SlideShare
Loading in...5
×

Like this? Share it with your network

Share

MGD Html5 pres fr

  • 602 views
Uploaded on

Présentation sur HTML 5 par Alaa dine Kadouri

Présentation sur HTML 5 par Alaa dine Kadouri

More in: Technology
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
    Be the first to like this
No Downloads

Views

Total Views
602
On Slideshare
602
From Embeds
0
Number of Embeds
0

Actions

Shares
Downloads
12
Comments
0
Likes
0

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 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
  • 4. http://ezelia.com
  • 5. » Nouveau standard HTML5» Extension de JavaScript (ECMA standards v5 ~ v6)» Nouveau standard pour les feuilles de styles : CSS3
  • 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. » Rendu ˃ DOM / CSS3 ˃ Canvas ˃ WebGL» Réseau ˃ Ajax ˃ Websockets» Multithreading ˃ Webworkers» Son / Vidéo
  • 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. » 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. » Initialisation» Boucle avec timer ˃ Simulation : mise à jour de l’état du jeu ˃ Rendu de la scène(exemple de code)
  • 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. » 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. » 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. » 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. » 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. » Utilisation d’un pool d’objets pour limiter les passages du “garbage collector”
  • 17. » Chargement dynamique des objets.» Exemple concret : chargement dynamique des maps pour un effet de scrolling continu
  • 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. » 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. »  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. » 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. » caniuse.com» html5demo.braincracking.org» html5rocks.com» html5gamedevs.com» github.com