Tout ce qu’il faut savoir pour réaliser des jeux HTML5 avec Canvas et SVG

Au sommaire : Logo jeux HTML5
- Canvas et SVG : 2 façons de dessiner à l’écran
- Les librairies et les outils utiles
- Les frameworks de jeux
- Les tutoriaux pour démarrer
- Des exemples de réalisations en ligne et des retours d’expérience

Je passe mon temps ces derniers temps à expliquer en boucle comment faire des jeux en HTML5 à des étudiants, des passionnées, des professionnels voire même à des profs. Plutôt que garder cela en petit comité, je me suis donc dit qu’il serait plus intelligent de structurer tout cela et d’en faire un billet sur mon blog. Il est donc basé sur ma propre expérience. J’essaierais de le mettre à jour au fur et à mesure de mes futures découvertes et de vos propres retours bien entendu. Au passage, la quasi-totalité des ressources ci-dessous sont en Français !

Mais au fait pourquoi faire des jeux en HTML5 ?

Tout simplement parce qu’aujourd’hui, on peut vraiment se servir du HTML5 pour faire du multiplateformes : pour les machines de bureau bien sûr (avec IE9/IE10, Firefox, Chrome, Opera & Safari), pour les tablettes ou téléphone iOS & Android et pour finir pour Windows 8 qui vous accueille désormais à bras ouvert ! Ainsi, je vois désormais des jeux portés sur chacune des plateformes avec quasiment aucun effort.

Par ailleurs, la performance des moteurs JavaScript modernes et l’accélération matérielle pour booster l’affichage via le GPU permet désormais d’envisager le scénario de jeu vidéo sereinement.

Note : on ne parlera ici que de jeux utilisant la balise Canvas d’HTML5 ou SVG.

Canvas et SVG : 2 façons de dessiner à l’écran

Canvas contre SVG

Avant toutes choses, vous vous devez de comprendre comment afficher de jolies choses à l’écran (les éléments de votre futur jeu) en HTML5. Pour cela, je vous invite à commencer per lire mes 2 billets de blog sur ce sujet :

- Introduction aux APIs graphiques d’HTML5: SVG & Canvas (1/2)
- Introduction aux APIs graphiques d’HTML5: SVG & Canvas (2/2)

Vous pouvez également voir une vidéo d’une session d’1 heure que nous avions animée avec David Catuhe ici : AMDEV JavaScript: vidéos, slides et exemples de code des 4 sessions dans la section « Canvas & SVG ». Voici la présentation PowerPoint :

Par ailleurs, je vous invite à suivre ce que Jérémie Patonnier a déjà produit autour de SVG si vous ne connaissez pas encore cette merveilleuse technologie comme l’Introduction à SVG qu’il a faite sur son blog ou les nombreuses conférences qu’il a déjà animées. Par exemple, il a récemment animé un atelier SVG à la conférence W3Café.

Une fois tout cela digéré, vous comprendrez alors mieux pourquoi la quasi-totalité des jeux récents en HTML5 s’appuie plutôt sur Canvas que SVG. Canvas s’approche davantage du modèle connu des développeurs de jeux (APIs bas niveau) et est très bien accéléré matériellement par tous les navigateurs récents. Cependant, comme me l’a fait justement remarquer Nicolas Hoizey, SVG et son côté vectoriel a naturellement l’avantage de pouvoir s’adapter par nature à tous les types de résolutions et d’écrans sans perte de définition. Pour cela, il vous suffit d’utiliser le magique ViewBox de SVG qui va tout gérer pour vous. A vous ensuite les écrans de 3 à 80’’ en toute facilité. Clignement d'œil

Malgré tout, il est parfois possible de faire exactement la même chose avec les 2 technologies. Voici par exemple le même jeu codé avec SVG puis Canvas : SVG Racketball et Canvas Racquetball . Ils sont issus de cette documentation MSDN : Programmation de jeux simples avec Canvas ou SVG

Dans ces cas-là, analyser les performances de chacune peut aider à trancher. Pour vous en convaincre, voici 2 démonstrations affichant 1000 petites balles à l’écran en SVG : 1000 balles en SVG puis en Canvas : 1000 balles en Canvas. Testez les 2 exemples dans vos navigateurs préférés. En général, c’est Canvas qui s’en sort globalement mieux pour afficher beaucoup d’éléments à l’écran, ce qui correspond souvent à ce que nous souhaitons faire dans un jeu vidéo. Cela est résumé par ce graphique :

Comparaison de performance Canvas et SVG

Mais rien ne vous empêche de mélanger les 2 technologies. On pourrait en effet imaginer un 1er calque en SVG affichant les menus du jeu et un canvas en arrière-plan affichant le jeu en lui-même. Cela va alors utiliser ce que nous appelons la composition du navigateur. Vous devrez cependant être très attentifs aux résultats finaux en termes de performance car les navigateurs sont pour l’instant inégaux dans ce domaine.

Un exemple de cette composition est un petit jeu de casse-brique réalisé par mon collègue David Catuhe ici : Développer son propre jeu de casse-briques en HTML 5 avec Canvas et SVG . Le 1er plan est en SVG (les briques) et l’arrière-plan peut afficher un effet de tunnel en utilisant la balise canvas. On pourrait reprendre le concept pour afficher un jeu en arrière-plan (plateforme, shoot’em up, etc.) à la place du tunnel et un menu en premier plan en SVG.

Les librairies et les outils utiles

Graphismes

Bon se taper du SVG à la main ou les API JavaScript de Canvas, c’est bien beau mais ce n’est pas très productif. Voici un florilège d’outils et de librairies que j’apprécie et qui pourrait bien vous servir dans un contexte de fabrication d’un jeu vidéo.

Pour générer le SVG, il existe des outils bien pratiques :

- InkScape : un logiciel – client lourd – libre & gratuit
- SVG Editor : un logiciel en ligne qui marche donc directement dans votre navigateur

Adobe Illustrator sait également exporter au format SVG mais il est un peu plus cher. ;-)

Pour des assets de jeux (pour les menus par exemple ou les contrôles), je vous conseille cette librairie d’icônes libre de droits : The Noun Project. Si vous n’avez pas de designer sous la main, cela peut être pratique. Il y a une autre librairie en ligne avec du contenu SVG gratuit ici : Open Clip Art Library

Pour finir sur SVG, LA librairie ultime que vous devez connaitre s’appelle RaphaelJS. Cela vous permet de générer dynamiquement du SVG via du JavaScript. Vous trouverez de nombreuses démos sur le site utilisant par exemple des fonctions d’animations non linéaires sur des éléments SVG, des graphiques animés, etc. Mais si l’affichage de graphiques ou courbes vous intéresse (pour par exemple afficher les statistiques du joueur ou des parties en cours de jeu), LA librairie ultime pour cela s’appelle HighCharts. Ces 2 librairies ont en plus le bon goût de faire un fallback en VML avec IE8-. Mais ce scénario ne devrait pas réellement vous préoccuper si vous souhaitez faire des jeux à base de HTML5.

Exemple de rendu avec RaphaelJS Exemple de rendu HighCharts 

Côté affichage de données en Canvas, j’adore la librairie JavaScript InfoVis Toolkit. Allez jeter un œil aux démos, c’est bluffant et assez simple d’utilisation.

Demo de la librairie InfoVis Toolkit

Toujours côté graphique, il existe une librairie ultra connue pour faire de la 3D nommée ThreeJS. A priori, on la trouve le plus souvent utilisée pour faire de la 3D accélérée avec WebGL. Mais il est possible de faire un rendu dans canvas comme vous pouvez le voir dans la section « CanvasRenderer examples ». On fait des choses moins évoluées qu’avec WebGL mais cela peut déjà permettre de faire des choses sympas et qui fonctionnent dans tous les navigateurs supportant HTML5. Voici par exemple un site incroyable utilisant ThreeJS pour apprendre à faire de la 3D : LiveCodeLab . Ce site marche bien en partie sous IE9/IE10 grâce au rendu dans Canvas (il suffit d’ignorer l’avertissement au démarrage).

A noter que l’on peut également envisager l’usage de CSS3 2D & 3D Transforms couplés à des transitions ou animations pour un jeu. Mais j’ai préféré rester concentré sur canvas et SVG dans cet article.

Moteur Physique

Bien sûr, il n’y a pas que l’affichage dans un jeu. Outre la fameuse IA où il faudra vous débrouiller tout seul, vous aurez peut-être besoin d’un coup de main pour le moteur physique. Pour cela, ne cherchez plus, il vous faut utiliser Box2D JS. Allez jouer avec les exemples, vous serez vite conquis.

Des boites animées grâce à Box2D

Je vous invite d’ailleurs à suivre l’excellente série de tutoriaux autour de ce sujet réalisé par Seth Ladd ici : Box2D orientation for the JavaScript developer . Seth a été jusqu’à utiliser les Web Workers pour faire le traitement des calculs physiques en multi-thread. Si vous ne savez pas ce que sont les Web Workers, je vous invite à lire une introduction que j’ai écrite dessus : Introduction aux Web Workers d’HTML5 : le multithreading version JavaScript . Dans certains cas, ils pourraient être utiles dans un scénario de jeu vidéo.

Gestion du multi touch

Si vous voulez faire un jeu vidéo multi-plateformes, vous allez devoir supporter le touch. Or, il existe 2 spécifications différentes. Celle venant du monde Apple et celle nommée Pointer Events qui semble de plus en plus se profiler comme devenir le futur standard. Si vous voulez en savoir davantage sur l’historique de ces spécifications, je vous invite à lire cet article : Getting Touchy About Patents

Demo multitouch avec IE10

En attendant un standard final, il va falloir écrire du code supportant à la fois IE10/Windows 8 et l’implémentation héritée des plateformes Apple.

Si vous souhaitez découvrir notre approche Pointer Events, que nous avons donc soumis en tant que spécification au W3C, je vous invite à lire cet article: Introduction aux Pointer Events ou comment simplifier l’usage du tactile dans vos sites web pour tous les navigateurs . Vous y découvrirez aussi des méthodologies de développement pour supporter le modèle IE10 tout en ayant un fallback vers la souris dans les autres navigateurs.

Mais la meilleure façon de supporter toutes les implémentations du tactile est surement de viser le modèle des Pointer Events et d’utiliser une librairie dite de « polyfill » pour les faire supporter par les autres plateformes.

Boris Smus a travaillé sur une librairie qui s’occupe de consolider tous les types de “touch” (IE10, iOS like, souris, stylet, etc.). Cette libraire s’appelle Pointer.js et je vous invite à lire l’article de son auteur Generalized input on the cross-device web à ce sujet.

pointer_js-architecture 

De notre côté, en France, David Catuhe a certainement écrit la meilleure librairie actuellement disponible pour résoudre la gestion du tactile multi-plateformes. Sa librairie nommée HandJS est expliquée en détails ici : HandJS a polyfill for supporting pointer events on every browser . Si vous développez un jeu en HTML5, vous devriez alors être intéressé par l’article accompagnant cette librairie : Creating an universal virtual touch joystick working for all Touch models thanks to Hand.JS . Il explique comment utiliser HandJS pour créer un joystick tactile fonctionnement sous IE10 pour Windows 7/8/RT, Windows Phone 8 et bien sûr pour iOS/Android et les périphériques FirefoxOS !

Si vous avez une dalle tactile, vous pouvez tester directement le résultat dans cette iframe :

Placez l’un de vos doigts sur la partie gauche du rectangle noir, un joystick virtuel devrait alors apparaitre sous votre doigt pour vous laisser contrôler le petit vaisseau spatial. Placez d’autres doigts sur la partie droite pour faire tirer le vaisseau. Si vous n’avez pas de dalle tactile, vous pourrez soit contrôler le vaisseau à la souris soit le faire tirer mais vous ne pourrez bien évident ne pas faire les 2 choses à la fois. En effet, HandJS fournit un fallback vers la souris si votre navigateur ou votre matériel ne supporte pas le tactile. Et j’ai gardé le meilleur pour la fin : cette démo fonctionne de la même façon que ce soit sous IE10, sous iOS/Android ou FirefoxOS ! A nouveau, si vous souhaitez en savoir davantage sur ce sujet, lisez l’article associé.

Faire des jeux connectés

Si vous souhaitez faire des jeux multi-joueurs ou tout simplement un jeu connecté avec un serveur pour une raison ou une autre, vous allez être naturellement tentés par l’usage des WebSockets. Cette spécification (et le protocole sous-jacent géré par l’IETF) est en effet enfin suffisamment stable pour commencer à être déployée en production.

HTML5 Powered with Connectivity / Realtime

Mais si vous voulez toucher le plus grand nombre de machines possibles, il faudra alors considérer un fallback pour les navigateurs ou périphériques qui ne supportaient pas encore WebSockets ou qui supportaient une version précédente. Le rêve serait carrément de proposer l’ancienne technique de pooling ou long pooling aux navigateurs type IE9 et la version Web Sockets aux navigateurs type IE10, le tout automatiquement et avec un code unique.

Vous en avez rêvé, la communauté l’a fait. Il existe 2 solutions que je connais pour ma part :

- La librairie Socket.IO pour Node.js
- SignalR fonctionnant au-dessus d’IIS et ASP.NET

Ces 2 solutions gèrent pour vous la multiplicité des plateformes et leur niveau de support.

Les frameworks de jeux

Pour faire un jeu vidéo en HTML5 en 2D, il y a plusieurs choses qu’il va falloir gérer :

1 – La gestion de vos sprites : découpage, animations, effets
2 – La gestion du son (et ce n’est pas une mince affaire en HTML5 !)
3 – Charger les assets depuis le serveur Web et du coup mettre en place un loader
4 – Mettre en place un moteur de collisions, une logique de haut niveau pour vos objets, etc.

Bref, soit vous faites tout cela vous-même en partant de zéro, soit vous regardez ce qu’il existe déjà sur le web. Je vous conseille plutôt la 2ème solution car les framework de jeux JavaScript commencent à être particulièrement matures et éprouvés.

Pour ma part, voici ceux que je vous recommande. Ils fonctionnent dans tous les navigateurs :

- MelonJS : un framework gratuit qui contient pas mal de services. Son gros plus est qu’il s’intègre parfaitement avec Tiled Map Editor
- CraftyJS que je ne connais malheureusement pas très bien.
- ImpactJS : un framework de qualité et reconnu. Il est par contre payant.
- EaselJS : c’est mon préféré. Ecrit par un « ancien Flasheur ». Donc si vous aviez écrit des jeux en Flash, vous devriez vous sentir à la maison avec ce framework. Il fait partie d’une suite nommée CreateJS. Il est très complet, bien documenté et… gratuit. Sourire

Bon, je préfère vous prévenir, comme EaselJS est le framework que je connais le plus, je ne serais pas impartial. A vous donc de vous faire votre propre avis.

Les tutoriaux et les sessions à voir pour démarrer

Comme tout bon mégalo qui se respecte, commençons par vous présenter par mes propres tutoriaux. Il y a 1 an, je me suis amusé à porter un jeu XNA en C# vers HTML5/JS avec EaselJS. J’en ai profité pour partager mon expérience à travers 3 premiers tutoriaux :

- Jeux HTML5: animation de sprites dans l’élément Canvas grâce à EaselJS
- Jeux HTML5: construction des objets principaux & gestion des collisions avec EaselJS
- HTML5 Platformer: portage complet du jeu XNA vers <canvas> grâce à EaselJS

Quelques mois plus tard, je suis ensuite allé plus loin avec le même jeu à travers 3 autres articles :

- Tutorial: créez des applications avec HTML5 sur Windows Phone grâce à PhoneGap où je vous montre comment porter ce même jeu sous PhoneGap pour Windows Phone. Mais vous pourriez très bien faire la même chose pour Android ou iOS.
- Modernisez vos jeux HTML5 canvas partie 1: mise à l’échelle matérielle & CSS3 où j’utilise CSS3 3D Transform, Transition & Grid Layout pour améliorer l’expérience de jeu.
- Modernisez vos jeux HTML5 canvas partie 2: Offline API, Drag’n’drop & File API où je rends le jeu fonctionnel même en mode déconnecté et où vous pouvez glisser/déposer des nouveaux niveaux de jeu directement dans le navigateur.

Après avoir suivi tout cela, vous obtiendrez ce jeu :

Jeu de plateforme HTML5 Platformer

Bref, avec ces 6 articles, vous devriez être capable de faire votre propre jeu HTML5 quelle que soit la plateforme visée.

Vous retrouverez également de nombreuses démos simples à comprendre et des tutoriaux sur le site principal d’EaselJS : https://www.createjs.com/#!/EaselJS ainsi que sur le site de chacun des frameworks que je vous ai cités plus haut.

Je vous conseille également le tutorial de la Ferme du Web très complet : [Tutorial] Créer un jeu web avec du HTML 5 Canvas et Javascript

Ensuite, voici 2 vidéos qui pourraient vous intéresser. La 1ère est issue des Techdays 2012. Cette session nommée « Développement de jeux 2D avec HTML5 » fut animée par Pierre-Loïc Doulcet (que je vous conseille de suivre au passage !) :

Poster Image

Download Video: MP4, WebM, HTML5 Video Player by VideoJS

Visionnez la version Silverlight

Pour ma part, j’avais réalisé cette session autour de mon sempiternel jeu de plateforme :

Poster Image

Download Video: MP4, WebM
HTML5 Video Player by VideoJS

Pour finir, 2 articles un peu plus « complexes » mais particulièrement intéressants à lire. Le 1er est écrit en Français par David Catuhe : Libérez la puissance du canvas de HTML5 pour vos jeux . Il vous présente des techniques d’optimisation qu’il a mises en place lors de l’écriture d’une « démo ». Cela pourrait vous servir également dans le cadre d’un jeu vidéo. Le 2ème est écrit en Anglais par Boris Smus de chez Google et se nomme Improving HTML5 Canvas Performance.

Des exemples de réalisations en ligne et des retours d’expérience

C’est une liste de courses perso. Il est toujours intéressant d’analyser comment certains jeux sont faits. La magie du web est qu’il suffit de faire “view source” et le code est sous vos yeux. Alors bien sûr, il sera surement minifié mais on peut toujours malgré tout apprendre 2 ou 3 trucs en analysant la structure globale du jeu.

Commençons par quelques productions utilisant le framework EaselJS. Il y a tout d’abord Pirates Love Daisies écrit par Grant Skinner :

Le jeu Pirates Love Daisies à l'origine d'EaselJS

C’est suite à ce jeu qu’il a commencé à écrire son framework EaselJS. A noter que vous retrouverez le même jeu dans Windows 8 sur le Store ici : Pirates Loves Daisies pour Windows 8. En effet, si vous avez un jeu HTML5 qui fonctionne dans IE9 ou IE10, le portage sous Windows 8 s’effectue littéralement en faisant copier… coller. Clignement d'œil

Toujours utilisant EaselJS, le jeu BKOM ROBOT GAME utilisant des sprites 3D dont j’adore le design :

Un jeu de Robot avec sprites 3D utilisant EaselJS

Les 2 plus célèbres jeux HTML5 du moment sont bien entendu Angry Bird qui utilise au passage la librairie Box2D dont je vous parlais plus haut :

Le célèbre Angry Birds en version HTML5

Et Cut The Rope :

Cut The Rope en version HTML5

Dont vous trouverez également une version dans le Store de Windows 8 ici : Cut The Rope pour Windows 8 . Celui ci a été extrêmement simple à porter puisqu’il a juste fallu mettre le canvas en plein écran, ajouter le support du touch et de la vue “snapped”. D’ailleurs, l’histoire de Cut The Rope est intéressante. C’est un jeu à l’origine écrit en Objective-C pour les plateformes iOS d’Apple qui a été porté en HTML5/Canvas. Les développeurs en charge du portage ont écrit un témoignage intéressante à lire : Dans les coulisses du développement HTML5 de Cut The Rope

Toujours dans les témoignages, j’ai trouvé celui-ci (en Anglais) instructif au passage : Wooga’s HTML5 Adventure 

Pour finir, voici une liste de 40 jeux HTML5 de qualité variable : 40 Addictive Web Games Powered by HTML5 et d’autres ici : HTML5games.com

J’espère qu’avec toutes ces ressources vous serez en mesure de faire votre propre jeu HTML5. A nouveau, n’hésitez pas à ajouter votre pierre à l’édifice en m’envoyant vos suggestions de frameworks/tutoriaux/concepts que vous connaissez et que j’aurais loupé.

David