Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Développement de jeux 2D avec HTML5

1,019 views

Published on

Durant cette session, sera expliqué le développement de jeux 2D Mobile et Web avec HTML5.

Published in: Technology
  • Be the first to comment

  • Be the first to like this

Développement de jeux 2D avec HTML5

  1. 1. palais descongrèsParis7, 8 et 9février 2012
  2. 2. Développementde jeux 2D avec HTML58 Février 2012Pierre-Loïc DOULCET (pierre@doulcet.fr)Head of Game Design & Programming DegreeISART Digital
  3. 3. Sommaire Introduction Game Loop Canvas 2D Fonctionnalités Sprite Sheet Particules Clavier / Souris Mobile Tactile
  4. 4. Introduction HTML5 pour les jeux?
  5. 5. Sommaire Introduction Game Loop Canvas 2D Fonctionnalités Sprite Sheet Particules Clavier / Souris Mobile Tactile
  6. 6. Game Loop 1. Lire les entrées utilisateur (clavier / souris) 2. Calculer les animations et les comportements du jeu 3. Dessiner le jeu 4. GOTO 1
  7. 7. Game Loop
  8. 8. Game Loop
  9. 9. Game Loop Afin de diviser le jeu en modules ‘fonctionnels’ (Menu, Inventaire, …), nous allons les implémenter dans des classes différentes, possédant toutes les méthodes : Input => pour gérer les entrées clavier / souris Update => pour mettre à jour le jeu Render => pour afficher l’écran de jeu La Game Loop appelle directement les fonctions membre de l’objet correspondant à la situation de jeu courante.
  10. 10. Game Loop
  11. 11. Sommaire Introduction Game Loop Canvas 2D Fonctionnalités Sprite Sheet Particules Clavier / Souris Mobile Tactile
  12. 12. Canvas 2D
  13. 13. Canvas 2D Que peut-on faire sur un canvas 2d? Dessiner des formes simples (rectangles) Dessiner des formes complexes (chemins) Effectuer des transformations Faire du compositing Changer le style et les couleurs des éléments que l’on dessine Ecrire du texte Dessiner des images Manipuler les pixels
  14. 14. Canvas 2D Quelles sont les opérations utiles pour un jeu 2D? Dessiner des formes simples (rectangles) Dessiner des formes complexes (chemins) Effectuer des transformations Faire du compositing Changer le style et les couleurs des éléments que l’on dessine Ecrire du texte Dessiner des images Manipuler les pixels
  15. 15. Canvas 2D• Interlude : Rapide aperçu des principales fonctionnalités d’un contexte 2D
  16. 16. Canvas 2D Dessiner des formes simples (rectangles) Effacer le contenu du canvas (utile à chaque début de frame)
  17. 17. Canvas 2D Dessiner des images
  18. 18. Canvas 2D Dessiner des images
  19. 19. Canvas 2D Effectuer des transformations
  20. 20. Canvas 2D Faire du compositing
  21. 21. Canvas 2D Sprite Sheet Les navigateurs modernes supportent jusqu’à 2000 sprites animés en même temps à l’écran.
  22. 22. Canvas 2DDEMOSprite animés
  23. 23. Canvas 2D Sprite Sheet
  24. 24. Canvas 2D Sprite Sheet
  25. 25. Canvas 2D Particules Les navigateurs modernes supportent jusqu’à 5000 particules en même temps à l’écran.
  26. 26. Canvas 2DDEMOParticules
  27. 27. Canvas 2D Particules
  28. 28. Canvas 2D Moteur de Particules Ajout de nouvelles particules Animation des particules Rendu des particules
  29. 29. Canvas 2D Moteur de Particules Ajout de nouvelles particules Début de Animate de la game loop Animation des particules Animate de la game loop Rendu des particules Render de la game loop
  30. 30. Canvas 2D Ajout de Particules
  31. 31. Canvas 2D Animation des Particules
  32. 32. Canvas 2D Animation des Particules – Tips : Détruire
  33. 33. Canvas 2D Rendu des Particules
  34. 34. Canvas 2D Rendu des Particules – Tips Au lieu de vider le canvas à chaque frame, vous pouvez redessiner un rectangle blanc avec un alpha inférieur à 1. Cela donnera l’illusion que plus de particules sont affichés à l’écran.
  35. 35. Sommaire Introduction Game Loop Canvas 2D Fonctionnalités Sprite Sheet Particules Clavier / Souris Mobile Tactile
  36. 36. Clavier / Souris Comment gérer les entrées clavier / souris? Problème : Notre boucle de jeu est synchrone. Les évènements JavaScript sont asynchrone.
  37. 37. Clavier / Souris Exemple du clavier
  38. 38. Clavier / Souris Exemple du clavier
  39. 39. Clavier / Souris Exemple du clavier
  40. 40. Sommaire Introduction Game Loop Canvas 2D Fonctionnalités Sprite Sheet Particules Clavier / Souris Mobile Tactile
  41. 41. Mobile Quelles sont les specificités du HTML5 mobile pour les jeux? Viewport Mobile events drawImage tricks
  42. 42. Mobile Viewport
  43. 43. Mobile Mobile Events Touch Prevent default !!
  44. 44. Mobile Mobile Events motion
  45. 45. Mobile Mobile Events orientation
  46. 46. Canvas 2DDEMOQuestions ?

×