Développement de jeux 2D avec HTML5

palais des congrès Paris

7, 8 et 9 février 2012

8 Février 2012 Pierre-Loïc DOULCET (pierre@doulcet.fr)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