MGD Html5 pres fr
Télécharger en tant que PPT, PDF•2 j'aime•768 vues
Le projet 'legacy of doyazan' présente HTML5 comme un nouveau standard pour le développement de jeux, intégrant des fonctionnalités comme WebGL et des optimisations pour la performance. Il souligne l'importance des moteurs de jeu compatibles, de l'architecture serveur, et propose des ressources pour le développement. L'utilisation de Node.js et MongoDB est également abordée pour le stockage et la gestion des données dans un environnement de jeu multi-joueur.
MGD Html5 pres fr
- 1. Illustré à travers le projet « Legacy of DoYazan » Alaa-eddine KADDOURI [email protected]
- 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
- 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