SlideShare une entreprise Scribd logo
palais des
congrès
Paris




7, 8 et 9
février 2012
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
Sommaire


           Introduction
           Game Loop
           Canvas 2D
              Fonctionnalités
              Sprite Sheet
              Particules
           Clavier / Souris
           Mobile
              Tactile
Introduction




    HTML5 pour les jeux?
Sommaire


           Introduction
           Game Loop
           Canvas 2D
              Fonctionnalités
              Sprite Sheet
              Particules
           Clavier / Souris
           Mobile
              Tactile
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
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 / 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.
Game Loop
Sommaire


           Introduction
           Game Loop
           Canvas 2D
              Fonctionnalités
              Sprite Sheet
              Particules
           Clavier / Souris
           Mobile
              Tactile
Canvas 2D
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
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
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 même temps à l’écran.
Canvas 2D




DEMO

Sprite 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’écran.
Canvas 2D




DEMO

Particules
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 particules
       Animate de la game loop
    Rendu des particules
       Render 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.
Sommaire


           Introduction
           Game Loop
           Canvas 2D
              Fonctionnalités
              Sprite Sheet
              Particules
           Clavier / Souris
           Mobile
              Tactile
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
Sommaire


           Introduction
           Game Loop
           Canvas 2D
              Fonctionnalités
              Sprite Sheet
              Particules
           Clavier / Souris
           Mobile
              Tactile
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 2D




DEMO

Questions ?

Contenu connexe

En vedette

Agenda quartier juin 2015_
Agenda quartier juin 2015_Agenda quartier juin 2015_
Agenda quartier juin 2015_
Malakocktail
 
Développez des applications Mobiles iOS, Android, Windows Phone et Windows 8 ...
Développez des applications Mobiles iOS, Android, Windows Phone et Windows 8 ...Développez des applications Mobiles iOS, Android, Windows Phone et Windows 8 ...
Développez des applications Mobiles iOS, Android, Windows Phone et Windows 8 ...
Microsoft
 
La haute disponibilité avec Dynamics CRM 2011 et SQL Server 2012
La haute disponibilité avec Dynamics CRM 2011 et SQL Server 2012La haute disponibilité avec Dynamics CRM 2011 et SQL Server 2012
La haute disponibilité avec Dynamics CRM 2011 et SQL Server 2012
Microsoft
 
Développement d'un jeu de plateforme en html5
Développement d'un jeu de plateforme en html5Développement d'un jeu de plateforme en html5
Développement d'un jeu de plateforme en html5
davrous
 
PHP dans le cloud
PHP dans le cloudPHP dans le cloud
PHP dans le cloud
Microsoft
 
Responsive design and mobile
Responsive design and mobileResponsive design and mobile
Responsive design and mobile
Lee Andron
 
Retour d’expérience GlobeCast : Réduisez votre TCO avec les abonnements...
Retour d’expérience GlobeCast : Réduisez votre TCO avec les abonnements...Retour d’expérience GlobeCast : Réduisez votre TCO avec les abonnements...
Retour d’expérience GlobeCast : Réduisez votre TCO avec les abonnements...
Microsoft
 

En vedette (7)

Agenda quartier juin 2015_
Agenda quartier juin 2015_Agenda quartier juin 2015_
Agenda quartier juin 2015_
 
Développez des applications Mobiles iOS, Android, Windows Phone et Windows 8 ...
Développez des applications Mobiles iOS, Android, Windows Phone et Windows 8 ...Développez des applications Mobiles iOS, Android, Windows Phone et Windows 8 ...
Développez des applications Mobiles iOS, Android, Windows Phone et Windows 8 ...
 
La haute disponibilité avec Dynamics CRM 2011 et SQL Server 2012
La haute disponibilité avec Dynamics CRM 2011 et SQL Server 2012La haute disponibilité avec Dynamics CRM 2011 et SQL Server 2012
La haute disponibilité avec Dynamics CRM 2011 et SQL Server 2012
 
Développement d'un jeu de plateforme en html5
Développement d'un jeu de plateforme en html5Développement d'un jeu de plateforme en html5
Développement d'un jeu de plateforme en html5
 
PHP dans le cloud
PHP dans le cloudPHP dans le cloud
PHP dans le cloud
 
Responsive design and mobile
Responsive design and mobileResponsive design and mobile
Responsive design and mobile
 
Retour d’expérience GlobeCast : Réduisez votre TCO avec les abonnements...
Retour d’expérience GlobeCast : Réduisez votre TCO avec les abonnements...Retour d’expérience GlobeCast : Réduisez votre TCO avec les abonnements...
Retour d’expérience GlobeCast : Réduisez votre TCO avec les abonnements...
 

Similaire à Développement de jeux 2D avec HTML5

Alphorm.com Formation Blender 2.7x - L'essentiel
Alphorm.com Formation Blender 2.7x - L'essentielAlphorm.com Formation Blender 2.7x - L'essentiel
Alphorm.com Formation Blender 2.7x - L'essentiel
Alphorm
 
Metro design
Metro designMetro design
Metro design
HOROUN Mehdi
 
Toonpadessentiel2
Toonpadessentiel2Toonpadessentiel2
Toonpadessentiel2
Lesly Guirand-schoelcher
 
La validation UX du Store : Tout ce que vous avez toujours voulu savoir sans...
La validation UX du Store :  Tout ce que vous avez toujours voulu savoir sans...La validation UX du Store :  Tout ce que vous avez toujours voulu savoir sans...
La validation UX du Store : Tout ce que vous avez toujours voulu savoir sans...
Microsoft
 
Rapport Projet Virtual Robots
Rapport Projet Virtual RobotsRapport Projet Virtual Robots
Rapport Projet Virtual Robots
aliotard
 
Cours SDL2 (partie 1)
Cours SDL2 (partie 1)Cours SDL2 (partie 1)
Cours SDL2 (partie 1)
Mustapha Tachouct
 
Créer des jeux pour Windows Phone et Windows Store avec Unity
Créer des jeux pour Windows Phone et Windows Store avec UnityCréer des jeux pour Windows Phone et Windows Store avec Unity
Créer des jeux pour Windows Phone et Windows Store avec Unity
Microsoft
 
Découverte et prise en main de l'outil Wick Editor
Découverte et prise en main de l'outil Wick EditorDécouverte et prise en main de l'outil Wick Editor
Découverte et prise en main de l'outil Wick Editor
Julien Devriendt
 
[Motion & animation dans un design system] FoF Cotonou event.pptx
[Motion & animation dans un design system] FoF Cotonou event.pptx[Motion & animation dans un design system] FoF Cotonou event.pptx
[Motion & animation dans un design system] FoF Cotonou event.pptx
Friends Of Figma, Cotonou
 
ADT SOFAVR jesnault 01-10-12 final presentation 2
ADT SOFAVR jesnault 01-10-12 final presentation 2ADT SOFAVR jesnault 01-10-12 final presentation 2
ADT SOFAVR jesnault 01-10-12 final presentation 2
Jérôme Esnault
 
Introduction à Android - Mars 2012
Introduction à Android - Mars 2012Introduction à Android - Mars 2012
Introduction à Android - Mars 2012Aurélien Guillard
 
JavaSwing.pdf
JavaSwing.pdfJavaSwing.pdf
JavaSwing.pdf
imanebirjmel
 
Rapport-ilovepdf-compressed
Rapport-ilovepdf-compressedRapport-ilovepdf-compressed
Rapport-ilovepdf-compressedArthur Cousseau
 
Initiation ordinateur
Initiation ordinateurInitiation ordinateur
Initiation ordinateur
camelia55
 
Nouveautes Flash CS4, par Nicolas Gans - Regart.net formations
Nouveautes Flash CS4, par Nicolas Gans - Regart.net formationsNouveautes Flash CS4, par Nicolas Gans - Regart.net formations
Nouveautes Flash CS4, par Nicolas Gans - Regart.net formations
maru.maru
 
Traitement numérique des images - Projet Android "Virtual Pong" - Présentation
Traitement numérique des images - Projet Android "Virtual Pong" - PrésentationTraitement numérique des images - Projet Android "Virtual Pong" - Présentation
Traitement numérique des images - Projet Android "Virtual Pong" - Présentation
Valentin Thirion
 
Les nouveautés d'Android 7.1 (Nougat)
Les nouveautés d'Android 7.1 (Nougat)Les nouveautés d'Android 7.1 (Nougat)
Les nouveautés d'Android 7.1 (Nougat)
Edouard Marquez
 
MECCADRAW - MECADEMAILLY 01
MECCADRAW - MECADEMAILLY 01MECCADRAW - MECADEMAILLY 01
MECCADRAW - MECADEMAILLY 01
Bernard Alexandre
 
Environnement de développement de bases de données
Environnement de développement de bases de donnéesEnvironnement de développement de bases de données
Environnement de développement de bases de donnéesISIG
 
Environnement de développement de bases de données
Environnement de développement de bases de donnéesEnvironnement de développement de bases de données
Environnement de développement de bases de donnéesISIG
 

Similaire à Développement de jeux 2D avec HTML5 (20)

Alphorm.com Formation Blender 2.7x - L'essentiel
Alphorm.com Formation Blender 2.7x - L'essentielAlphorm.com Formation Blender 2.7x - L'essentiel
Alphorm.com Formation Blender 2.7x - L'essentiel
 
Metro design
Metro designMetro design
Metro design
 
Toonpadessentiel2
Toonpadessentiel2Toonpadessentiel2
Toonpadessentiel2
 
La validation UX du Store : Tout ce que vous avez toujours voulu savoir sans...
La validation UX du Store :  Tout ce que vous avez toujours voulu savoir sans...La validation UX du Store :  Tout ce que vous avez toujours voulu savoir sans...
La validation UX du Store : Tout ce que vous avez toujours voulu savoir sans...
 
Rapport Projet Virtual Robots
Rapport Projet Virtual RobotsRapport Projet Virtual Robots
Rapport Projet Virtual Robots
 
Cours SDL2 (partie 1)
Cours SDL2 (partie 1)Cours SDL2 (partie 1)
Cours SDL2 (partie 1)
 
Créer des jeux pour Windows Phone et Windows Store avec Unity
Créer des jeux pour Windows Phone et Windows Store avec UnityCréer des jeux pour Windows Phone et Windows Store avec Unity
Créer des jeux pour Windows Phone et Windows Store avec Unity
 
Découverte et prise en main de l'outil Wick Editor
Découverte et prise en main de l'outil Wick EditorDécouverte et prise en main de l'outil Wick Editor
Découverte et prise en main de l'outil Wick Editor
 
[Motion & animation dans un design system] FoF Cotonou event.pptx
[Motion & animation dans un design system] FoF Cotonou event.pptx[Motion & animation dans un design system] FoF Cotonou event.pptx
[Motion & animation dans un design system] FoF Cotonou event.pptx
 
ADT SOFAVR jesnault 01-10-12 final presentation 2
ADT SOFAVR jesnault 01-10-12 final presentation 2ADT SOFAVR jesnault 01-10-12 final presentation 2
ADT SOFAVR jesnault 01-10-12 final presentation 2
 
Introduction à Android - Mars 2012
Introduction à Android - Mars 2012Introduction à Android - Mars 2012
Introduction à Android - Mars 2012
 
JavaSwing.pdf
JavaSwing.pdfJavaSwing.pdf
JavaSwing.pdf
 
Rapport-ilovepdf-compressed
Rapport-ilovepdf-compressedRapport-ilovepdf-compressed
Rapport-ilovepdf-compressed
 
Initiation ordinateur
Initiation ordinateurInitiation ordinateur
Initiation ordinateur
 
Nouveautes Flash CS4, par Nicolas Gans - Regart.net formations
Nouveautes Flash CS4, par Nicolas Gans - Regart.net formationsNouveautes Flash CS4, par Nicolas Gans - Regart.net formations
Nouveautes Flash CS4, par Nicolas Gans - Regart.net formations
 
Traitement numérique des images - Projet Android "Virtual Pong" - Présentation
Traitement numérique des images - Projet Android "Virtual Pong" - PrésentationTraitement numérique des images - Projet Android "Virtual Pong" - Présentation
Traitement numérique des images - Projet Android "Virtual Pong" - Présentation
 
Les nouveautés d'Android 7.1 (Nougat)
Les nouveautés d'Android 7.1 (Nougat)Les nouveautés d'Android 7.1 (Nougat)
Les nouveautés d'Android 7.1 (Nougat)
 
MECCADRAW - MECADEMAILLY 01
MECCADRAW - MECADEMAILLY 01MECCADRAW - MECADEMAILLY 01
MECCADRAW - MECADEMAILLY 01
 
Environnement de développement de bases de données
Environnement de développement de bases de donnéesEnvironnement de développement de bases de données
Environnement de développement de bases de données
 
Environnement de développement de bases de données
Environnement de développement de bases de donnéesEnvironnement de développement de bases de données
Environnement de développement de bases de données
 

Plus de Microsoft

Uwp + Xamarin : Du nouveau en terre du milieu
Uwp + Xamarin : Du nouveau en terre du milieuUwp + Xamarin : Du nouveau en terre du milieu
Uwp + Xamarin : Du nouveau en terre du milieu
Microsoft
 
La Blockchain pas à PaaS
La Blockchain pas à PaaSLa Blockchain pas à PaaS
La Blockchain pas à PaaS
Microsoft
 
Tester, Monitorer et Déployer son application mobile
Tester, Monitorer et Déployer son application mobileTester, Monitorer et Déployer son application mobile
Tester, Monitorer et Déployer son application mobile
Microsoft
 
Windows 10, un an après – Nouveautés & Démo
Windows 10, un an après – Nouveautés & Démo Windows 10, un an après – Nouveautés & Démo
Windows 10, un an après – Nouveautés & Démo
Microsoft
 
Prenez votre pied avec les bots et cognitive services.
Prenez votre pied avec les bots et cognitive services.Prenez votre pied avec les bots et cognitive services.
Prenez votre pied avec les bots et cognitive services.
Microsoft
 
Office 365 Dev PnP & PowerShell : exploitez enfin le potentiel de votre écosy...
Office 365 Dev PnP & PowerShell : exploitez enfin le potentiel de votre écosy...Office 365 Dev PnP & PowerShell : exploitez enfin le potentiel de votre écosy...
Office 365 Dev PnP & PowerShell : exploitez enfin le potentiel de votre écosy...
Microsoft
 
Créer un bot de A à Z
Créer un bot de A à ZCréer un bot de A à Z
Créer un bot de A à Z
Microsoft
 
Microsoft Composition, pierre angulaire de vos applications ?
Microsoft Composition, pierre angulaire de vos applications ?Microsoft Composition, pierre angulaire de vos applications ?
Microsoft Composition, pierre angulaire de vos applications ?
Microsoft
 
Les nouveautés SQL Server 2016
Les nouveautés SQL Server 2016Les nouveautés SQL Server 2016
Les nouveautés SQL Server 2016
Microsoft
 
Conteneurs Linux ou Windows : quelles approches pour des IT agiles ?
Conteneurs Linux ou Windows : quelles approches pour des IT agiles ?Conteneurs Linux ou Windows : quelles approches pour des IT agiles ?
Conteneurs Linux ou Windows : quelles approches pour des IT agiles ?
Microsoft
 
Administration et supervision depuis le Cloud avec Azure Logs Analytics
Administration et supervision depuis le Cloud avec Azure Logs AnalyticsAdministration et supervision depuis le Cloud avec Azure Logs Analytics
Administration et supervision depuis le Cloud avec Azure Logs Analytics
Microsoft
 
Retour d'expérience de projets Azure IoT "large scale" (MicroServices, portag...
Retour d'expérience de projets Azure IoT "large scale" (MicroServices, portag...Retour d'expérience de projets Azure IoT "large scale" (MicroServices, portag...
Retour d'expérience de projets Azure IoT "large scale" (MicroServices, portag...
Microsoft
 
Plan de Reprise d'Activité avec Azure Site Recovery
Plan de Reprise d'Activité avec Azure Site RecoveryPlan de Reprise d'Activité avec Azure Site Recovery
Plan de Reprise d'Activité avec Azure Site Recovery
Microsoft
 
Modélisation, déploiement et gestion des infrastructures Cloud : outils et bo...
Modélisation, déploiement et gestion des infrastructures Cloud : outils et bo...Modélisation, déploiement et gestion des infrastructures Cloud : outils et bo...
Modélisation, déploiement et gestion des infrastructures Cloud : outils et bo...
Microsoft
 
Transformation de la représentation : De la VR à la RA, aller & retour.
Transformation de la représentation : De la VR à la RA, aller & retour.Transformation de la représentation : De la VR à la RA, aller & retour.
Transformation de la représentation : De la VR à la RA, aller & retour.
Microsoft
 
Quelles architectures pour vos applications Cloud, de la VM au conteneur : ça...
Quelles architectures pour vos applications Cloud, de la VM au conteneur : ça...Quelles architectures pour vos applications Cloud, de la VM au conteneur : ça...
Quelles architectures pour vos applications Cloud, de la VM au conteneur : ça...
Microsoft
 
Introduction à ASP.NET Core
Introduction à ASP.NET CoreIntroduction à ASP.NET Core
Introduction à ASP.NET Core
Microsoft
 
Open Source et Microsoft Azure, rêve ou réalité ?
Open Source et Microsoft Azure, rêve ou réalité ?Open Source et Microsoft Azure, rêve ou réalité ?
Open Source et Microsoft Azure, rêve ou réalité ?
Microsoft
 
Comment développer sur la console Xbox One avec une application Universal Win...
Comment développer sur la console Xbox One avec une application Universal Win...Comment développer sur la console Xbox One avec une application Universal Win...
Comment développer sur la console Xbox One avec une application Universal Win...
Microsoft
 
Azure Service Fabric pour les développeurs
Azure Service Fabric pour les développeursAzure Service Fabric pour les développeurs
Azure Service Fabric pour les développeurs
Microsoft
 

Plus de Microsoft (20)

Uwp + Xamarin : Du nouveau en terre du milieu
Uwp + Xamarin : Du nouveau en terre du milieuUwp + Xamarin : Du nouveau en terre du milieu
Uwp + Xamarin : Du nouveau en terre du milieu
 
La Blockchain pas à PaaS
La Blockchain pas à PaaSLa Blockchain pas à PaaS
La Blockchain pas à PaaS
 
Tester, Monitorer et Déployer son application mobile
Tester, Monitorer et Déployer son application mobileTester, Monitorer et Déployer son application mobile
Tester, Monitorer et Déployer son application mobile
 
Windows 10, un an après – Nouveautés & Démo
Windows 10, un an après – Nouveautés & Démo Windows 10, un an après – Nouveautés & Démo
Windows 10, un an après – Nouveautés & Démo
 
Prenez votre pied avec les bots et cognitive services.
Prenez votre pied avec les bots et cognitive services.Prenez votre pied avec les bots et cognitive services.
Prenez votre pied avec les bots et cognitive services.
 
Office 365 Dev PnP & PowerShell : exploitez enfin le potentiel de votre écosy...
Office 365 Dev PnP & PowerShell : exploitez enfin le potentiel de votre écosy...Office 365 Dev PnP & PowerShell : exploitez enfin le potentiel de votre écosy...
Office 365 Dev PnP & PowerShell : exploitez enfin le potentiel de votre écosy...
 
Créer un bot de A à Z
Créer un bot de A à ZCréer un bot de A à Z
Créer un bot de A à Z
 
Microsoft Composition, pierre angulaire de vos applications ?
Microsoft Composition, pierre angulaire de vos applications ?Microsoft Composition, pierre angulaire de vos applications ?
Microsoft Composition, pierre angulaire de vos applications ?
 
Les nouveautés SQL Server 2016
Les nouveautés SQL Server 2016Les nouveautés SQL Server 2016
Les nouveautés SQL Server 2016
 
Conteneurs Linux ou Windows : quelles approches pour des IT agiles ?
Conteneurs Linux ou Windows : quelles approches pour des IT agiles ?Conteneurs Linux ou Windows : quelles approches pour des IT agiles ?
Conteneurs Linux ou Windows : quelles approches pour des IT agiles ?
 
Administration et supervision depuis le Cloud avec Azure Logs Analytics
Administration et supervision depuis le Cloud avec Azure Logs AnalyticsAdministration et supervision depuis le Cloud avec Azure Logs Analytics
Administration et supervision depuis le Cloud avec Azure Logs Analytics
 
Retour d'expérience de projets Azure IoT "large scale" (MicroServices, portag...
Retour d'expérience de projets Azure IoT "large scale" (MicroServices, portag...Retour d'expérience de projets Azure IoT "large scale" (MicroServices, portag...
Retour d'expérience de projets Azure IoT "large scale" (MicroServices, portag...
 
Plan de Reprise d'Activité avec Azure Site Recovery
Plan de Reprise d'Activité avec Azure Site RecoveryPlan de Reprise d'Activité avec Azure Site Recovery
Plan de Reprise d'Activité avec Azure Site Recovery
 
Modélisation, déploiement et gestion des infrastructures Cloud : outils et bo...
Modélisation, déploiement et gestion des infrastructures Cloud : outils et bo...Modélisation, déploiement et gestion des infrastructures Cloud : outils et bo...
Modélisation, déploiement et gestion des infrastructures Cloud : outils et bo...
 
Transformation de la représentation : De la VR à la RA, aller & retour.
Transformation de la représentation : De la VR à la RA, aller & retour.Transformation de la représentation : De la VR à la RA, aller & retour.
Transformation de la représentation : De la VR à la RA, aller & retour.
 
Quelles architectures pour vos applications Cloud, de la VM au conteneur : ça...
Quelles architectures pour vos applications Cloud, de la VM au conteneur : ça...Quelles architectures pour vos applications Cloud, de la VM au conteneur : ça...
Quelles architectures pour vos applications Cloud, de la VM au conteneur : ça...
 
Introduction à ASP.NET Core
Introduction à ASP.NET CoreIntroduction à ASP.NET Core
Introduction à ASP.NET Core
 
Open Source et Microsoft Azure, rêve ou réalité ?
Open Source et Microsoft Azure, rêve ou réalité ?Open Source et Microsoft Azure, rêve ou réalité ?
Open Source et Microsoft Azure, rêve ou réalité ?
 
Comment développer sur la console Xbox One avec une application Universal Win...
Comment développer sur la console Xbox One avec une application Universal Win...Comment développer sur la console Xbox One avec une application Universal Win...
Comment développer sur la console Xbox One avec une application Universal Win...
 
Azure Service Fabric pour les développeurs
Azure Service Fabric pour les développeursAzure Service Fabric pour les développeurs
Azure Service Fabric pour les développeurs
 

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
  • 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.
  • 11. Sommaire Introduction Game Loop Canvas 2D Fonctionnalités Sprite Sheet Particules Clavier / Souris Mobile Tactile
  • 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
  • 43. Mobile Mobile Events Touch Prevent default !!
  • 44. Mobile Mobile Events motion
  • 45. Mobile Mobile Events orientation

Notes de l'éditeur

  1. date
  2. date
  3. date