Développement de jeux 2D avec HTML5
•Télécharger en tant que PPT, PDF•
0 j'aime•1,202 vues
Durant cette session, sera expliqué le développement de jeux 2D Mobile et Web avec HTML5.
Recommandé
Recommandé
Contenu connexe
En vedette
En vedette (7)
Similaire à Développement de jeux 2D avec HTML5
Similaire à Développement de jeux 2D avec HTML5 (20)
Plus de Microsoft
Plus de Microsoft (20)
Développement de jeux 2D avec HTML5
- 1. palais des congrès Paris 7, 8 et 9 février 2012
- 2. Développement de jeux 2D avec HTML5 8 Février 2012 Pierre-Loïc DOULCET (pierre@doulcet.fr) Head of Game Design & Programming Degree ISART Digital
- 3. Sommaire Introduction Game Loop Canvas 2D Fonctionnalités Sprite Sheet Particules Clavier / Souris Mobile Tactile
- 4. Introduction HTML5 pour les jeux?
- 5. Sommaire Introduction Game Loop Canvas 2D Fonctionnalités Sprite Sheet Particules Clavier / Souris Mobile Tactile
- 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. Game Loop
- 8. Game Loop
- 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. Game Loop
- 11. Sommaire Introduction Game Loop Canvas 2D Fonctionnalités Sprite Sheet Particules Clavier / Souris Mobile Tactile
- 12. Canvas 2D
- 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. 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. Canvas 2D • Interlude : Rapide aperçu des principales fonctionnalités d’un contexte 2D
- 16. Canvas 2D Dessiner des formes simples (rectangles) Effacer le contenu du canvas (utile à chaque début de frame)
- 17. Canvas 2D Dessiner des images
- 18. Canvas 2D Dessiner des images
- 19. Canvas 2D Effectuer des transformations
- 20. Canvas 2D Faire du compositing
- 21. Canvas 2D Sprite Sheet Les navigateurs modernes supportent jusqu’à 2000 sprites animés en même temps à l’écran.
- 23. Canvas 2D Sprite Sheet
- 24. Canvas 2D Sprite Sheet
- 25. Canvas 2D Particules Les navigateurs modernes supportent jusqu’à 5000 particules en même temps à l’écran.
- 27. Canvas 2D Particules
- 28. Canvas 2D Moteur de Particules Ajout de nouvelles particules Animation des particules Rendu des particules
- 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. Canvas 2D Ajout de Particules
- 31. Canvas 2D Animation des Particules
- 32. Canvas 2D Animation des Particules – Tips : Détruire
- 33. Canvas 2D Rendu des Particules
- 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. Sommaire Introduction Game Loop Canvas 2D Fonctionnalités Sprite Sheet Particules Clavier / Souris Mobile Tactile
- 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. Clavier / Souris Exemple du clavier
- 38. Clavier / Souris Exemple du clavier
- 39. Clavier / Souris Exemple du clavier
- 40. Sommaire Introduction Game Loop Canvas 2D Fonctionnalités Sprite Sheet Particules Clavier / Souris Mobile Tactile
- 41. Mobile Quelles sont les specificités du HTML5 mobile pour les jeux? Viewport Mobile events drawImage tricks
- 42. Mobile Viewport
- 43. Mobile Mobile Events Touch Prevent default !!
- 44. Mobile Mobile Events motion
- 45. Mobile Mobile Events orientation
Notes de l'éditeur
- date
- date
- date