Comme on le sait, HTML5 n’est pas seulement l’acronyme de la cinquième version du langage de balisage d’hypertexte, mais aussi un ensemble de technologies introduites ces dernières années pour le développement d’applications Web. C’est des technologies si puissantes qu’elles permettent également de créer des applications complexes telles que jeux vidéos.

Dans ce guide, nous allons examiner de nombreux aspects de la programmation d’un jeu vidéo avec HTML5 et commencer par définir les éléments de base que nous utilisons pour en composer un :

• markup HTML (partie statique), qui fournit le conteneur du jeu et dans laquelle nous définissons l’API à utiliser et les bibliothèques à lier.
  
• du code JavaScript (partie dynamique) est le code que nous utilisons pour exploiter l’API mise à disposition par le conteneur et pour créer notre moteur de jeu.

Au niveau du conteneur, nous introduisons l’utilisation de l’élément canvas, qui apporte avec lui les API pour gérer le rendu des images et des primitives, pour produire des applications animées, des effets et des jeux vidéo.

Grâce à la librairie graphique WebGL, intégrée aux navigateurs récents, vous pouvez enfin profiter des API OpenGL, pour créer des applications et des jeux 3D directement en ligne, mais dans ce guide, nous traiterons tout simplement la réalisation complète d’un jeu 2D, dans tous les cas, il y aura une section dédiée à WebGL, qui montrera les principales fonctionnalités, l’importation d’un modèle, les mouvements dans l’espace 3D.

Pourquoi HTML5 ?

Si nous regardons le Web, la plate-forme Flash est de moins en moins utilisée et c’est pour cela que l’HTML5 n’aura pas de rivaux. Même sur mobile, les perspectives sont certainement encourageantes, voici une très courte liste d’avantages qui profiteront de plus en plus à ceux qui travaillent en HTML5 :

• HTML5 n’a pas besoin de plugins pour fonctionner : toutes les fonctionnalités sont déjà incluses dans les navigateurs ;
  
• les applications créées, seront exécutables sur n’importe quel navigateur compatible HTML5, quel que soit le système d’exploitation (Windows, Mac, Linux, Android, etc.)
  
• Il existe des frameworks comme Apache Cordova (PhoneGap) ou Titanium pour convertir nos jeux en applications natives pour les appareils mobiles iOS et Android et Windows Phone de manière simple et rapide.
  
• Les logiciels de création de jeux vidéo n’exportent plus vers la plateforme Flash, alors que beaucoup supportent ou soutiennent l’exportation de projets en HTML5.

 

Navigateurs pris en charge

Le W3C a annoncé que la première version standard HTML5 était prête en 2014 et que, depuis quelques années, HTML5 est supporté par la plupart des navigateurs qui, dans les dernières versions, ont ajouté toutes les fonctionnalités que nous utiliserons dans le guide.

Les applications que nous allons examiner dans ce guide ont été testées et fonctionnent sur Chrome, Firefox, Internet Explorer 10), Safari et Opera.

Prérequis et connaissances

Pour bien comprendre les concepts expliqués dans cette série d’articles, il est nécessaire d’avoir les bases de la programmation, de préférence la connaissance du langage JavaScript et de savoir comment est structuré une page HTML (concept de balises, styles et scripts).

 

Le contenu du guide

Le guide se compose de quatre parties :

• Mise en place d’un moteur de jeu de base : nous allons créer un framework de base, qui va nous permettre de charger des ressources graphiques et sonores, de gérer le rendu et les évènements liés aux objets du jeu.
  
• Input et interface utilisateur : nous allons comprendre comment gérer l’entrée depuis la souris, le clavier et l’écran tactile, comment créer des interfaces graphiques (GUI), dessiner du texte avec une police de votre choix.
  
• Créer un jeu : en utilisant le framework créé dans les chapitres précédents, nous allons enfin créer un simple jeu de plateforme style megaman.
  
• Optimisation et expansion du jeu : nous verrons comment optimiser les performances et améliorer notre jeu en y ajoutant une partie sociale, comment tirer parti des technologies plus avancées: Box2D pour la physique, WebGL pour la 3D et Node.js pour le réseautage.

 

Logiciels et outils à utiliser

Pour suivre les exemples proposés dans le guide, nous aurons besoin de peu de logiciels de base:

• Un navigateur équipé d’une console pour déboguer notre code (on recommande Firefox)
  
• Un éditeur de texte pour écrire le code (parmi les meilleurs Notepad++, un éditeur gratuit et opensource, également téléchargeable en version portable (sans installation), ou SublimeText : éditeur très valide, mais payant, vous pouvez toujours télécharger une version d’essai)
  
• Pour certaines parties du guide, comme celle sur WebGL, un serveur HTTP sera requis. Vous pouvez télécharger des fichiers sur votre site Web ou utiliser un programme exécutable sans installation comme Mongoose, qui démarrera un serveur Web local temporaire sur votre ordinateur.