Les jeux en JavaScript, nouvelle mode ou tendance de fond ?

Depuis quelques temps maintenant, on voit apparaître des jeux entièrement codés en JavaScript alors que la tendance générale est à l’édition de jeux en Flash. Est-ce une tendance de fond qui s’amorce ou bien est-ce simplement un effet de mode ?

Je vous propose de l’existant et des nouveautés qui se préparent pour ce marché encore confidentiel.

Au départ furent les jeux en DHTML.

Je vous parle d’un temps où les sites ne se targuaient pas d’être deux zéro, ni même avec de l’AJAX. A cette époque, on préférait faire suivre le curseur de la souris par un espèce de piaf jaune.

Bref, je m’égare, mais c’est à cette époque qu’on commence à voir apparaître quelques jeux.

Alors ça se résumait à des choses assez désuètes qui n’apportaient pas le quart de ce qu’on pouvait déjà réaliser avec Flash (Voir ce jeu de Hanoï). Cependant, il y a eu des hits, qui valent le détour, notamment  ce clone de jeux de lemmings. Hormis quelques “revival”, on a pas eu le droit à de créations vraiment transcendantes.

Et les développeurs créèrent leur frameworks.

Avec le web 2.0, on a vu tout un tas d’effets “fanzy-smoothy-tendance”, de composants d’interface de plus en plus évolué. En un sens la gestion de l’IHM via Javascript a considérablement évolué. Des frameworks javascript tel que jquery ou sciptaculous, permettent désormais de développer plus rapidement et surtout de manipuler beaucoup plus facilement les éléments présents dans le document en cours. Ils ont réellement participer à la réaffection de Javascript auprès des développeurs.

Récemment un plugin spécifique à la création de jeux pour Jquery a vu le jour : gameQuery. (Ça doit être vrai pour d’autre framework du genre).

Une première fondation est posée avec ces environnements de développement. On commence à disposer de librairies de manipulation graphiques intéressantes, même si elle restent moins fourni que celle d’ActionScript.

Un bon exemple est le revival de Pacman basé sur le framework YUI.

HTML5, Canvas et SVG.

Avec le regain d’intérêt pour le web, de nouvelles technologies arrivent sur le marché. Elles proposent de réelles innovations dans le domaine du jeu embarqué dans le navigateur.

HTML5

Evolution de HTML, on y verra que de nouveaux éléments font leur apparition mais également de nouvelles APIs.

Dans le cadre du développement de jeux, on remarquera surtout :

• pour les APIs :
  • 2D drawing API which can be used with the new canvas element.
  • Persistent storage. Both key / value and a SQL database are supported.
  • An API that enables offline Web applications.
  • Server-sent events in combination with the new event-source element.
  • Network API.
• pour les éléments :
  • canvas is used for rendering dynamic bitmap graphics on the fly, such as graphs, games, et cetera.
  • event-source is used to “catch” server sent events.
  • progress represents a completion of a task, such as downloading or when performing a series of expensive operations.

Avec ces nouveautés, HTML proposent un ensemble standard dans le navigateur d’une bonne base pour le développement d’applications web plus avancées. Tous ces bénéfices sont valables pour le développement de jeu.

CANVAS

La balise CANVAS est une extension non standard à la norme HTML qui permet d’effectuer des rendus dynamiques d’images bitmap via des scripts.

Introduite à l’origine par Apple pour être utilisé dans le composant WebKit pour Mac OS X, pour faire fonctionner des logiciels comme Dashboard et le navigateur Safari. Par la suite, elle a été adoptée par les navigateurs basés sur Gecko (notamment Mozilla Firefox) et Opera puis standardisée par le groupe de travail WHATWG comme une proposition à introduire dans la nouvelle génération des technologies web. Novell a développé une extension activant les XForms dans Internet Explorer^[1] et offrant ainsi un support des fonctionnalités de CANVAS.

CANVAS se résume en une région de dessins dont la hauteur et la largeur sont définies dans du code HTML. Du code Javascript permet d’accéder à l’aire via une série complète de fonctions de dessins, similaires aux autres APIs 2D, bien que permettant de générer dynamiquement des graphismes. Certaines personnes ont anticipé cet emploi de CANVAS en l’utilisant pour des graphiques, des animations et de la création d’images.

Source Wikipedia.

Histoire, que vous puissiez vous rendre compte de l’intérêt de la chose, voici une liste de travaux réalisés grâce à cette technologie :

• Un petit moteur de FPS 3D
• SDK OPERA pour la WII
• Une petite simulation du LHC
• Intégration d’OpenGL pour la 3D
  
• Idem mais sous l’initiative d’Opera

Même si dans Flash10 on nous parle d’API pour gérer la 3D, l’intégration du standard OpenGL à l’élément CANVAS, me laisse rêveur…

SVG

Scalable Vector Graphics (SVG) est un format de données conçu pour décrire des ensembles de graphiques vectoriels et basé sur XML. Ce format est spécifié par le World Wide Web Consortium.

Source Wikipedia

Une autre chasse gardé et dans l’intérêt de Flash est le dessin vectoriel, grâce à ce format de données, on peut aisément manipuler toute la définition d’un élément vectoriel.

Comme pour CANVAS, voici quelques exemples :

• How Did The Moon Get Into Orbit?
• Invaders
• SVG Tetris

Conclusion

Comme on peut le voir, les jeux en JavaScript s’inscrivent dans une démarche de fond et d’évolution technologique de l’environnement du navigateur.

On peut, dès aujourd’hui, s’interroger sur l’avenir du format SWF, du plugin Flash et même de Flash en lui même. Mais ce qui est sûr c’est qu’une alternative sérieuse se constitue.

Il reste encore un peu de maturité à acquérir pour ces technologies, mais cela n’est qu’une petite question de temps.

Bref à suivre comme dirait l’autre.