Créer un jeu vidéo en JavaScript – partie 1

wow-warlords-of-draenor-screenshot_1920
Depuis l’avènement du JavaScript grâce au HTML 5 et à l’ES6, le JavaScript s’utilise maintenant pour concevoir des serveurs, gérer des web applications entières. Créer un jeu vidéo en JavaScript est même dorénavant possible mais est-il réellement envisageable d’en concevoir un avec ce langage ?

Dans cette série d’articles consacrés à la conception de jeu-vidéo en JavaScript, nous allons voir ensemble tout ce qu’il est possible de faire et tous les outils qui sont à notre disposition pour concevoir des jeux complets. Pour l’heure, nous allons faire le point sur les frameworks JavaScript permettant d’en créer et nous aborderons ensuite leurs avantages et inconvénients.

SOMMAIRE

 

Comment ça fonctionne ?

Comment se fait-il qu’aujourd’hui il est possible de créer un jeu vidéo en JavaScript alors qu’il y a encore quelques années, les jeux-vidéos sur navigateur web étaient réservés à Flash uniquement ?
Tout commença à l’arrivé de l’HTML5 et d’une et une seule balise : <canvas />. Cette balise, à première vue classique, embarque en fait toute une API JavaScript native permettant de se servir de cette balise pour dessiner des formes. En effet, en récupérant le contexte du canevas depuis le DOM comme ceci :

const ctx = document.getElementById("canvas").getContext("2d");

Cet objet “context” permet ensuite de dessiner des lignes, des carrés, des cercles, d’afficher des images, et même d’afficher le contenu d’un autre canevas sous forme d’image. Voici quelques exemples de ce qu’il est possible de faire nativement

// Dessiner une simple ligne
ctx.lineWidth = 20; // Epaisseur des formes
ctx.strokeStyle = "red"; // Couleur du contour
ctx.fillStyle = "rgba(50, 230, 100, 0.5)"; // Couleur du contenu
// On démarre un nouveau chemin
ctx.beginPath();
 ctx.moveTo(0, 0); // On déplace le curseur à la position x à 0 et y à 0
 ctx.lineTo(150, 0); // On dessine une ligne qui part du curseur jusqu'à la position x à 10 et y à 0
 ctx.stroke(); // On dessine le contour du chemin que nous avons créé (ici, une ligne)
ctx.closePath();
// Dessiner un rectangle
ctx.strokeRect(50, 50, 100, 100) // on dessine un rectangle partant de la position x à 50 et y à 50, d'une largeur de 100px et une hauteur de 100px
ctx.lineWidth = 2;
ctx.beginPath();
 ctx.rect(20, 20, 150, 150);
 ctx.fill();
 ctx.stroke();
ctx.closePath();

Vous pouvez voir le rendu en Cliquant sur ce lien (jsfiddle).
Ok, c’est bien beau tout ça, mais comment peut-on créer des jeux-vidéo à partir de carrés et de rectangles ?
La magie opère grâce à notamment deux concepts :

  • La gestion des images. En effet, dans un jeu 2D, quasiment tout ce que vous verrez à l’écran ne sera ni plus ni moins que des superpositions d’images partielles ou complètes.
  • Le loop global. Le loop global représente le taux de rafraichissement du jeu car pour que le jeu soit fluide, la boucle va faire appel à des fonctions de mise-à-jour et d’affichage d’image pour simuler, par exemple, un déplacement. C’est d’ailleurs grâce à la vitesse que met la boucle à se terminer que l’on détermine les FPS (Frame Per Seconds / Images Par Secondes) : pour atteindre les 60 FPS, la boucle ne doit pas mettre plus de 16ms.

Bien évidemment, ces deux concepts ne sont pas les seuls et ne sont pas simples à mettre en place. Heureusement, il existe déjà de nombreux Frameworks JavaScript qui s’occupent de tous ces concepts, nous permettant de nous concentrer sur le gameplay.
 

Les frameworks pour les jeux en 2D

crosscode_shizuka___a_new_perspective_by_bostl-d8tfvmw
Ce qui va suivre est une liste des frameworks JavaScript les plus connus. Les avantages et inconvénients que nous allons aborder sont issus de mes retours d’expériences sur ceux-ci. Je vous invite donc à vous faire votre propre avis sur ces frameworks 🙂
 

Phaser.io

TL;DR: Le framework le plus connu en JavaScript. Gratuit, performant, un multitude de fonctionnalités et autant en plug-ins, une énorme communauté. Celui-ci possède tout ce qu’il faut pour concevoir n’importe quel type de jeu. Mais à mon goût, il laisse une étrange sensation de framework “fourre-tout”.

Description: Phaser.io a su s’imposer comme le plus grand et le plus célèbre framework de jeu en JavaScript. Avec sa communauté énorme et sa liste de plug-ins à n’en plus finir, il possède tout ce dont un développeur a besoin pour concevoir son jeu dans de bonnes conditions. En revanche, s’il y a bien une chose que je peux reprocher à ce framework, est son côté “fourre-tout” : pour la gestion globale du canevas, Phaser possède son propre algorithme, mais il possède également une version allégée de PIXI; pour la physique, Phaser possède 3 types de physique provenant de trois librairies différentes. Bien évidemment, il vaut mieux faire son choix et éviter d’intégrer toutes les physiques ou algorithme de loop fourni par l’API.
Les +

  • Sa communauté et ses plug-ins
  • Les performances

Les –

  • Son côté “fourre-tout”
  • Le jeu, une fois minifié, reste assez lourd

Le site: http://phaser.io/

Impact JS

TL;DR: Impact JS est pour moi le meilleur framework des jeux JavaScript. En effet, tout est extrêmement simple et efficace. Malheureusement, celui-ci n’étant plus mis à jour depuis quasiment deux ans, il ne fait maintenant plus le poids face aux ténors du marché.

Description: Ah là là, que dire de ce framework ? Qu’il a été réalisé par une seule personne à l’occasion de sa thèse en Informatique ou qu’il est extrêmement simple à prendre en main et permets de découvrir les joies des mécaniques du jeu-vidéo ? Avec son propre éditeur de niveaux en WYSIWYG (What You See Is What You Get) et sa très grosse communauté active avec des plugins très intéressants, cette libraire était parfaite pour les développeurs débutants comme pour les experts. Bien-sûr, tout n’est pas si rose. Quand on voit qu’il coûte 100$ alors qu’il n’est plus à jour depuis maintenant quelques années, que la communauté n’existe quasiment plus et que les plug-ins ne sont plus disponibles sur Internet, on ne peut être que triste. Malgré tout, de très très bons jeux sont sortis grâce à ce framework, ce que nous verrons à la fin de cet article.
Les +

  • Le framework le plus facile à prendre en main
  • Un éditeur de niveaux très efficaces
  • Des plug-ins très intéressants et des bons tutos

Les –

  • Son prix (100$)
  • Plus à jour depuis 2 ans
  • Communauté disparue et plug-ins quasiment introuvables (le site qui les hébergeaient a fermé)
  • Au niveau des performances, ce framework est adapté pour les mini-jeux

Le site: http://impactjs.com/
 

Panda JS

TL;DR: Panda JS est un framework grandement inspiré, dans un premier temps, d’Impact JS, puis des divers fonctionnalités proposées par Phaser.io. On pourrait quasiment qualifier PandaJS de la suite d’ImpactJS en version gratuite mais, comme ce dernier, il n’est plus à jour depuis 2015.

Description: Il aurait pu être le digne successeur d’ImpactJS. En effet, grandement inspiré d’ImpactJS, PandaJS s’est vu attribuer de très intéressantes features qui manquaient à ImpactJS telles que la gestion du WebGL et la gestion des particules et surtout, il est gratuit ! Malheureusement, par son manque de visibilité, la communauté a eu du mal à se construire et aujourd’hui le projet semble mort.
Les +

  • Plus performant qu’ImpactJS
  • Une gestion avancée des particules

Les –

  • Projet mort
  • Peu de communauté, pas de plug-ins

Le site: http://www.pandajs.net/
 

Pixi

TL;DR: PIXI, contrairement aux autres frameworks cités précédemment n’est pas réellement un framework de jeu. Cette librairie est en réalité un moteur de canvas HTML5. Il est le framework le plus optimisé et le plus rapide de gestion du canvas HTML5 et permet aussi bien de faire des jeux que des graphiques, des animations, etc. Tous les frameworks de jeu en JavaScript l’utilisent.

Description: PIXI est LE moteur de canvas par excellence. Ultra rapide, simple à prendre en main, il se veut également neutre au niveau de l’architecture laissant la possibilité aux développeurs de concevoir des jeux mais aussi des graphiques, des animations et bien d’autres. PandaJS et Phaser.io utilisent PIXI pour gérer la gestion des objets affichés sur le canvas. Sa réelle plus-value est que nous avons plus du tout à nous soucier des performances et du taux de rafraichissement car cette librairie est la plus avancée en matière de performances.
Les +

  • Architecture neutre, permettant ainsi de faire autre chose que des jeux-vidéos
  • Ultra rapide et simple d’utilisation
  • Il possède une fonction permettant de gérer toute la loop principale d’un jeu, ce qui est un très bon point

Les –

  • Son architecture se voulant neutre, il n’y a pas de fonctionnalités propres aux jeux-vidéos (telles que la gestion des niveaux, des menus, etc.)

Le site: http://www.pixijs.com/
 

Rpg Maker MV

TL;DR: Il ne s’agit pas réellement d’un framework de jeux-vidéo en JavaScript mais plus d’un logiciel clé en main. Il permet de créer des jeux de rôles uniquement. Son interface graphique permet de faciliter la plupart des développements (tels que la création d’animations, des niveaux, de la base de données du jeu, etc.). En outre, si ce logiciel se retrouve dans cet article, c’est parce qu’il est possible d’éditer et de rajouter de nouvelles fonctionnalités en JavaScript.

DescriptionRpg Maker est un logiciel clé en main permettant de développer des RPG vus du dessus. Pendant longtemps, les logiciels Rpg Maker utilisaient le ruby comme langage de conception mais la dernière version en date, Rpg Maker MV, est passé au JavaScript et c’est une bonne chose ! Le logiciel possède une interface graphique complète et optimisée pour diminuer le temps de développement : la création des niveaux, des animations, des évènements présents dans les niveaux. En outre, il est extrêmement facile de convertir le jeu sous plusieurs formats (mobile Android/iOs, web et windows desktop).
Les +

  • L’éditeur de niveau, d’animation et la banque de données (personnages, objets, monstres, combats, etc)
  • La possibilité de changer toutes les fonctionnalités par défaut du jeu avec le JavaScript
  • Export sous plusieurs formats rapidement

Les –

  • Payant (80$)
  • Utilisable uniquement pour faire des jeux de rôles
  • Documentation très faible
  • Communauté restreinte sur la dernière version

Le site: http://www.rpgmakerweb.com/
 

Quid des jeux en 3D ?

Il existe encore plein d’autres framework JavaScript pour créer des jeux en 2D que je n’ai pas cités, mais qu’en est-il des jeux en 3D ? Est-ce même possible ? Et bien pour vous répondre : oui. Cela est possible grâce à l’API WebGL qui permet de puiser dans les ressources de la carte graphique de votre ordinateur. Cette technologie étant récente, il est préférable d’avoir votre navigateur à jour.
Actuellement, deux grands frameworks existent pour la création 3D dont Babylon JS qui se positionne comme la référence en matière de développement de jeu 3D. Three JS, quant-à lui, est l’équivalent de PIXI pour la 3D, c’est-à-dire qu’il est neutre et permet de faire autre chose que des jeux-vidéos.
 

Exporter son jeu sur mobile

wall-pigeons
Nous avons vu les différents frameworks permettant de développer des jeux en JavaScript mais aujourd’hui la plupart des jeux ne se jouent pas sur navigateur… Est-il possible de les exporter sur les terminaux mobiles par exemple ?
 

Ejecta

Ejecta, développé par le créateur d’Impact JS est une petite pépite. Uniquement réservée pour les applications iOs, elle permet d’afficher le canvas dans en Full-screen sur le terminal mobile. On peut évidemment utiliser quelques balises HTML permettant, par exemple, d’afficher des menus et des pop-up à l’écran. Ejecta embarque également une API supplémentaire permettant de gérer le storage local du téléphone, l’accéléromètre, etc. Les performances sont à la hauteur de celles d’Impact JS.
Les +

  • Performant
  • Assez léger
  • Gratuit, contrairement à Impact JS
  • Permet d’utiliser de façon simple les différentes fonctionnalités du téléphone

Les –

  • Uniquement réservé pour iOs

Le site: http://impactjs.com/ejecta
 

Intel XDK

Pas très connu, et pourtant extrêmement efficace, intel XDK permet de build un jeu JavaScript développé à partir de n’importe quel framework JS (Phaser, Impact JS, etc.) sur tous les supports existants (Android, iPhone, Windows App / Desktop, Mac, XBOX ONE, PS4, et bien d’autres)
Les +

  • Peu gourmand et très léger
  • Prend en compte les fonctionnalités du support désiré
  • Prend les balises HTML
  • Permet de build sur tous les supports existants

Les –

  • La gestion du son et des musiques ne semblent pour l’heure pas encore au point (baisse de performance, bug au niveau du son)

Le site: https://software.intel.com/en-us/intel-xdk
 

PhoneGAP

Je n’ai volontairement pas cité PhoneGAP, qui est pourtant le plus connu des logiciels permettant de builder son application sur mobile. Je ne suis pas particulièrement fan pour la simple et bonne raison qu’en plus de créer des Apps assez lourdes, celles-ci ne sont pas performantes et pas optimisées pour les jeux-vidéos.
Le site: http://phonegap.com/
 

Conclusion

Nous savons maintenant que les jeux en JavaScript n’ont rien à envier aux autres concurrents. Avec sa panoplie de frameworks, les développeurs JavaScript ne peuvent que trouver que leur bonheur.
Aussi, et pour conclure, je vous propose un jeu développé avec Impact JS qui a retenu toute mon attention : Cross-Code. Un énorme travail a été fourni par l’équipe responsable du développement et le résultat est assez bluffant ! Il n’a rien à envier aux autres jeux indépendant de sa catégorie. Enjoy 🙂
 

Ce qu’il y a aura dans le prochain article

Dans le prochain article, nous allons nous intéresser un peu plus au développement d’un jeu-vidéo en 2D à travers deux librairies :

  • PIXI. Ensemble, nous allons voir comment fonctionne PIXI en développant un mini-jeu de A à Z
  • Sideral JS. Cette librairie, encore en développement au sein de JS-Republic, va permettre de développer des jeux-vidéos en utilisant une approche similaire à Impact JS et Rpg Maker: donner aux développeurs un panel de fonctionnalités simples et configurables afin de faciliter le développement de jeux complets / complexes.

 
Christophe, JS-Republicain @JSRepublic
[actionbox color=”default” title=”” description=”JS-REPUBLIC est une société de services spécialisée dans le développement JavaScript. Nous sommes centre de formation agréé. Retrouvez toutes nos formations techniques sur notre site partenaire dédié au Training” btn_label=”Nos formations” btn_link=”http://training.ux-republic.com” btn_color=”primary” btn_size=”big” btn_icon=”star” btn_external=”1″]