palais descongrèsParis7, 8 et 9février 2012
Développementde jeux 2D avec HTML58 Février 2012Pierre-Loïc DOULCET (pierre@doulcet.fr)Head of Game Design & Programming D...
Sommaire           Introduction           Game Loop           Canvas 2D              Fonctionnalités              Sprite S...
Introduction    HTML5 pour les jeux?
Sommaire           Introduction           Game Loop           Canvas 2D              Fonctionnalités              Sprite S...
Game Loop 1. Lire les entrées utilisateur (clavier / souris) 2. Calculer les animations et les comportements du jeu 3. Des...
Game Loop
Game Loop
Game Loop Afin de diviser le jeu en modules ‘fonctionnels’ (Menu, Inventaire, …), nous allons les implémenter dans des cla...
Game Loop
Sommaire           Introduction           Game Loop           Canvas 2D              Fonctionnalités              Sprite S...
Canvas 2D
Canvas 2D  Que peut-on faire sur un canvas 2d?    Dessiner des formes simples (rectangles)    Dessiner des formes complexe...
Canvas 2D  Quelles sont les opérations utiles pour un jeu 2D?     Dessiner des formes simples (rectangles)     Dessiner de...
Canvas 2D• Interlude : Rapide aperçu des principales  fonctionnalités d’un contexte 2D
Canvas 2D  Dessiner des formes simples (rectangles)  Effacer le contenu du canvas (utile à chaque début de frame)
Canvas 2D  Dessiner des images
Canvas 2D  Dessiner des images
Canvas 2D  Effectuer des transformations
Canvas 2D  Faire du compositing
Canvas 2D  Sprite Sheet                 Les navigateurs modernes supportent jusqu’à                 2000 sprites animés en...
Canvas 2DDEMOSprite animés
Canvas 2D  Sprite Sheet
Canvas 2D  Sprite Sheet
Canvas 2D  Particules           Les navigateurs modernes supportent jusqu’à           5000 particules en même temps à l’éc...
Canvas 2DDEMOParticules
Canvas 2D  Particules
Canvas 2D  Moteur de Particules    Ajout de nouvelles particules    Animation des particules    Rendu des particules
Canvas 2D  Moteur de Particules    Ajout de nouvelles particules       Début de Animate de la game loop    Animation des p...
Canvas 2D  Ajout de Particules
Canvas 2D  Animation des Particules
Canvas 2D  Animation des Particules – Tips : Détruire
Canvas 2D  Rendu des Particules
Canvas 2D  Rendu des Particules – Tips   Au lieu de vider le canvas à chaque frame, vous pouvez redessiner un rectangle  b...
Sommaire           Introduction           Game Loop           Canvas 2D              Fonctionnalités              Sprite S...
Clavier / Souris  Comment gérer les entrées clavier / souris?  Problème :    Notre boucle de jeu est synchrone.    Les évè...
Clavier / Souris   Exemple du clavier
Clavier / Souris   Exemple du clavier
Clavier / Souris   Exemple du clavier
Sommaire           Introduction           Game Loop           Canvas 2D              Fonctionnalités              Sprite S...
Mobile  Quelles sont les specificités du HTML5 mobile pour les jeux?    Viewport    Mobile events    drawImage    tricks
Mobile  Viewport
Mobile  Mobile Events    Touch    Prevent default !!
Mobile  Mobile Events    motion
Mobile  Mobile Events    orientation
Canvas 2DDEMOQuestions ?
Prochain SlideShare
Chargement dans…5
×

Développement de jeux 2D avec HTML5

996 vues

Publié le

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

Publié dans : Technologie
  • Soyez le premier à commenter

  • Soyez le premier à aimer ceci

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 ?

×