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

906 vues

Publié le

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

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

  • Soyez le premier à aimer ceci

Aucun téléchargement
Vues
Nombre de vues
906
Sur SlideShare
0
Issues des intégrations
0
Intégrations
56
Actions
Partages
0
Téléchargements
15
Commentaires
0
J’aime
0
Intégrations 0
Aucune incorporation

Aucune remarque pour cette diapositive
  • date
  • date
  • date
  • 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 ?

    ×