Embed Size (px)
DESCRIPTION
Durant cette session, sera expliqué le développement de jeux 2D Mobile et Web avec HTML5.
Citation preview
palais des congrès Paris
7, 8 et 9 février 2012
8 Février 2012 Pierre-Loïc DOULCET ([email protected])Head of Game Design & Programming DegreeISART Digital
Développementde jeux 2D avec HTML5
IntroductionGame LoopCanvas 2D
FonctionnalitésSprite SheetParticules
Clavier / SourisMobile
Tactile
Sommaire
HTML5 pour les jeux?
Introduction
IntroductionGame LoopCanvas 2D
FonctionnalitésSprite SheetParticules
Clavier / SourisMobile
Tactile
Sommaire
1. Lire les entrées utilisateur (clavier / souris)2. Calculer les animations et les comportements du jeu3. Dessiner le jeu4. GOTO 1
Game Loop
Game Loop
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 / sourisUpdate => pour mettre à jour le jeuRender => pour afficher l’écran de jeu
La Game Loop appelle directement les fonctions membre de l’objet correspondant à la situation de jeu courante.
Game Loop
Game Loop
IntroductionGame LoopCanvas 2D
FonctionnalitésSprite SheetParticules
Clavier / SourisMobile
Tactile
Sommaire
Canvas 2D
Que peut-on faire sur un canvas 2d?Dessiner des formes simples (rectangles)Dessiner des formes complexes (chemins)Effectuer des transformationsFaire du compositingChanger le style et les couleurs des éléments que l’on dessineEcrire du texteDessiner des imagesManipuler les pixels
Canvas 2D
Quelles sont les opérations utiles pour un jeu 2D?
Dessiner des formes simples (rectangles)Dessiner des formes complexes (chemins)Effectuer des transformationsFaire du compositingChanger le style et les couleurs des éléments que l’on dessineEcrire du texteDessiner des imagesManipuler les pixels
Canvas 2D
• Interlude : Rapide aperçu des principales fonctionnalités d’un contexte 2D
Canvas 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 même temps à l’écran.
DEMO
Sprite animés
Canvas 2D
Canvas 2D
Sprite Sheet
Canvas 2D
Sprite Sheet
Canvas 2D
Particules
Les navigateurs modernes supportent jusqu’à5000 particules en même temps à l’écran.
DEMO
Particules
Canvas 2D
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 particulesDébut de Animate de la game loop
Animation des particulesAnimate de la game loop
Rendu des particulesRender de la game loop
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 blanc avec un alpha inférieur à 1. Cela donnera l’illusion que plus de particules sont affichés à l’écran.
IntroductionGame LoopCanvas 2D
FonctionnalitésSprite SheetParticules
Clavier / SourisMobile
Tactile
Sommaire
Clavier / Souris
Comment gérer les entrées clavier / souris?
Problème :Notre boucle de jeu est synchrone.Les évènements JavaScript sont asynchrone.
Clavier / Souris
Exemple du clavier
Clavier / Souris
Exemple du clavier
Clavier / Souris
Exemple du clavier
IntroductionGame LoopCanvas 2D
FonctionnalitésSprite SheetParticules
Clavier / SourisMobile
Tactile
Sommaire
Mobile
Quelles sont les specificités du HTML5 mobile pour les jeux?ViewportMobile eventsdrawImagetricks
Mobile
Viewport
Mobile
Mobile EventsTouch
Prevent default !!
Mobile
Mobile Eventsmotion
Mobile
Mobile Eventsorientation
DEMO
Questions ?
Canvas 2D
