CRISPR: A quoi ça sert ?
2023-02-10
Comment les jeux vidéo ont battu tous les autres médias en 20 ans?
2023-03-10
Comment créer des jeux sur la toile en 2023
Dans mon post précédent, j'ai expliqué que nous préférions créer des jeux directement pour le navigateur, en utilisant des technologies web basées sur HTML5, plutôt que d'utiliser des moteurs de jeu comme Unity ou Unreal. Il en résulte des jeux rapides à charger, faciles à partager et rapides à développer. Une fois les jeux prêts, nous pouvons les intégrer dans des applications mobiles ou de bureau.
Pour ce faire, nous nous appuyons sur certaines technologies clés présentes dans votre navigateur web. Voyons de quoi il s'agit.
Anatomie d'un jeu par navigateur
Qu'y a-t-il dans un jeu ? Pour rendre cet article plus concret, je vais prendre comme exemple le jeu Red Boat Quest que nous avons réalisé pour Edenred, et passer en revue les composants techniques sur lesquels nous nous sommes appuyés pour le réaliser.
Red Boat Quest se veut un jeu décontracté, c'est-à-dire facile à prendre en main, même pour ceux qui ne se considèrent pas comme des joueurs sérieux. Le joueur contrôle un bateau, et se promène en essayant de ramasser les déchets qui flottent dans la mer. S'ils touchent des icebergs ou des animaux, ils perdent une vie, et après 3 vies, c'est la fin du jeu. Le jeu leur indique alors leur score et l'ajoute à un décompte global pour tous les joueurs. Espérons qu'ils voudront jouer à nouveau et que le jeu continuera !
Malgré la simplicité de ce jeu décontracté, il fait appel à un certain nombre de technologies :
-
Programmation- If(hitWhale) then gameOver()
-
Graphiques & Animation - Le bateau ne reste pas immobile, après tout !
-
Vidéo - Pendant que le joueur attend que le jeu se charge, il peut regarder une courte vidéo qui explique les règles et montre les graphiques.
-
Saisie- Le joueur peut utiliser la souris, le clavier ou les commandes tactiles sur mobile.
-
Son- Le joueur peut utiliser la souris, le clavier ou les commandes tactiles sur mobile.
-
Réseau- Le joueur peut utiliser la souris, le clavier ou les commandes tactiles sur mobile. Nous jouons de la musique et des effets sonores pendant le jeu.
-
Analytics - Nous voulons savoir combien de fois le jeu est joué et, idéalement, obtenir des informations sur l'origine du joueur.
Décortiquons maintenant chacune de ces fonctionnalités une par une, et voyons comment nous pouvons les mettre en œuvre sur le web.
Technologies Web clés pour la création de jeux
Au bon vieux temps, les documents Web n'étaient que du texte. Puis sont apparues les images, les titres défilants clignotants et, avant même de s'en rendre compte, des machines virtuelles complètes ont été installées sur nos téléphones.
Il y a souvent plusieurs façons d'accomplir le même type de tâche dans le monde du développement web. Passons en revue les caractéristiques que nous avons identifiées précédemment et voyons quelles sont nos options.
Programmation
Les navigateurs Web sont programmés à l'aide de JavaScript, désormais appelé techniquement ECMAScript pour faire référence aux nouvelles normes de l'ECMA. Il s'agit en effet d'un meilleur nom, puisque le langage n'a jamais rien eu à voir avec le langage Java et que le nom a été choisi uniquement à des fins de marketing. Mais il est difficile de se débarrasser d'une vieille habitude et j'ai tendance à l'appeler JavaScript de toute façon.
JavaScript a parcouru un long chemin depuis ses humbles débuts, et offre désormais de nombreuses fonctionnalités que nous envions à d'autres langages. Mais il est également possible de programmer dans des langues qui offrent des fonctionnalités supplémentaires, et de convertir ce programme en JavaScript lors de la publication pour le navigateur.
En particulier, nous faisons un usage intensif de TypeScript, un langage qui ajoute des fonctions statiques de sécurité des types. Pour les projets de taille moyenne à grande, cela permet de repérer les erreurs et les fautes de frappe avant qu'elles ne se manifestent.
Un autre développement intéressant est la norme WebAssembly, précédemment appelé asm.js, dans lequel les programmes écrits dans des langages de bas niveau comme le C peuvent être exécutés dans le navigateur. C'est ainsi qu'Unity compile ses jeux pour le web, par exemple. Actuellement, cette fonction n'est prise en charge que par les navigateurs de bureau, mais je ne vois pas pourquoi elle ne sera pas bientôt disponible sur les téléphones mobiles.
Graphisme et animation
La principale ligne de démarcation pour les graphiques et l'animation est de savoir si vous recherchez des graphiques en 2D ou en 3D.
Pour les graphiques 3D, le choix est clair : vous utilisez WebGL qui donne accès à la carte graphique du joueur. De nos jours, les cartes graphiques 3D sont des machines hautement programmables en elles-mêmes, qui peuvent nécessiter des connaissances spécialisées pour réaliser des effets visuels sophistiqués. La plupart des travaux que je connais dans ce domaine utilisent Three.js, une bibliothèque JavaScript qui simplifie l'interfaçage avec WebGL.
Qu'en est-il des graphiques 2D ? Ici, vous avez quelques choix :
-
Animation des éléments du DOM - Vous pouvez utiliser le CSS et/ou le JavaScript pour déplacer et modifier en douceur les éléments HTML de la page.
-
Canvas - Vous pouvez utiliser l'API Canvas pour dessiner des formes primitives, ainsi que des images.
-
Utilisez à nouveau les graphiques 3D - En fait, c'est ce que nous faisons !
Dans Red Boat Quest, nous utilisons l'excellente bibliothèque Pixi.js. Il utilise la puissance de la carte graphique 3D et l'applique aux graphiques 2D. Le résultat est une animation fluide et rapide qu'il est difficile d'obtenir avec les autres techniques.
Input
La gestion des entrées à partir de la souris et du clavier est assez standard à ce stade. Et les contrôles tactiles simples (toucher d'un doigt), fonctionnent essentiellement comme une souris, ce que nous avons utilisé pour Red Boat Quest.
Les commandes multi-touch sont un peu plus compliquées à gérer, mais elles sont bien prises en charge par l'API Événements tactiles.
Un cas d'utilisation plus intéressant est celui des manettes de jeu, aussi appelées joysticks ou contrôleurs. Il existe une API solide pour le Gamepad link] that allows you to plug in several controllers at once. La prise en charge de cette fonction était auparavant assez limitée, mais aujourd'hui, presque tous les navigateurs de bureau la prennent en charge. Allez jouer sur le canapé !
Vidéo
La vidéo reste l'un de ces points sensibles où les différents navigateurs web présentent des restrictions et des bugs différents. En particulier, les navigateurs ne veulent pas que des publicités vidéo avec du son se mettent à clignoter lorsque vous visitez une page. C'est pourquoi la plupart des navigateurs empêchent le développeur de jouer du son, ou de lire une vidéo avec du son, tant que l'utilisateur n'a pas cliqué quelque part sur la page.
Normalement, nous devrions pouvoir lire des vidéos en utilisant Pixi.js, qui permet de manipuler les images obtenues et de les intégrer dans une scène animée. Mais après avoir rencontré un certain nombre de problèmes, je réserve désormais la vidéo au classique.
Son
Il y a au moins différentes voies que vous pouvez emprunter avec l'audio au pays du HTML5. L'approche classique consiste à charger un son en utilisant la fonction (ou un équivalent JavaScript) et lui demander simplement de jouer.
Si vous voulez faire quelque chose de plus intéressant, tournez-vous vers l'API audio Web. Cela vous permet d'enchaîner des effets audio et de mélanger des sources audio de manière créative. Bien sûr, c'est aussi un peu plus compliqué à comprendre.
Cela vous donne envie de devenir ingénieur du son !
Pour Red Boat Quest, nous avons utilisé la bibliothèque howler.js pour charger et jouer nos sons. Pour nos besoins, nous voulons simplement définir les sons qui tournent en boucle (la musique) et ceux qui ne tournent pas (les effets sonores).
Je suis un peu jaloux du genre de travail que les gens ont fait avec le FMOD - modifier l'audio en temps réel pour s'adapter au niveau d'action dans le jeu. Il existe un portage HTML5 de FMOD, mais la dernière fois que je l'ai testé, nous avons eu du mal à faire fonctionner correctement le projet d'exemple.
Mise en réseau
La mise en réseau peut être une tâche gargantuesque en soi, surtout s'il s'agit d'un jeu en ligne massivement multijoueur où de légères différences de timing peuvent signifier la vie ou la mort, du moins pour le personnage d'un joueur !
If your game doesn’t require such exact timing, you can use simpler techniques that are available in modern web browsers. La méthode la plus simple consiste à envoyer des requêtes HTTP pour obtenir des mises à jour du serveur ou envoyer des données, à l'aide des API XHR ou Fetch. L'inconvénient est que le navigateur doit envoyer la requête, le serveur ne peut pas lui "transmettre" les données à chaque fois que quelque chose d'intéressant se produit.
Les WebSockets, quant à elles, ouvrent un canal de communication bidirectionnel en temps réel, où le serveur et le client peuvent envoyer des données dans les deux sens quand ils le souhaitent.
Ces deux techniques nécessitent le codage d'un backend personnalisé, généralement un serveur et une base de données, pour traiter les demandes. Pour gagner du temps, vous pouvez envisager d'utiliser des services existants, tels que Firebase ou Nakama, qui sont gratuits ou bon marché pour les petits jeux mais peuvent devenir coûteux si le jeu est très fréquent.
Analytics
Enfin, vous voulez probablement savoir si votre jeu fonctionne bien. Combien de personnes jouent, combien de temps restent-elles, d'où viennent-elles et comment ont-elles entendu parler de votre jeu, sont autant de questions auxquelles vous aimeriez certainement obtenir une réponse.
Là encore, vous pouvez coder votre propre solution personnalisée ou vous tourner vers des services existants. Dans ce cas, plusieurs sociétés proposent des services d'analyse gratuits, à condition qu'elles aient accès à vos données. GameAnalytics est un choix populaire, tout comme Firebase Analytics, qui est en fait Google Analytics, mais avec quelques fonctionnalités supplémentaires spécifiques aux jeux.
Dans notre cas, notre client voulait éviter de stocker des données personnelles ou d'utiliser des services externes qui pourraient le faire. Pour cette raison, nous avons choisi d'utiliser Firebase mais pas Firebase Analytics, et n'avons stocké que des données génériques telles que le temps de jeu, les points marqués et la langue du navigateur.
Voilà qui conclut notre tour d'horizon des technologies web clés pour la création de jeux. Mais avec tous les navigateurs différents qui existent, comment pouvez-vous être sûr qu'il fonctionnera pour vos joueurs ?
Cela fonctionnera-t-il pour tout le monde ?
Créer des jeux pour le web n'est pas tou Le problème technique le plus important est probablement la mise en œuvre incohérente des normes web, en particulier sur les anciennes versions des navigateurs. Ce problème se pose davantage sur les téléphones plus anciens, qui pourraient ne plus recevoir de mises à jour de leurs navigateurs et de leurs systèmes d'exploitation.
Dès le début, le marché des navigateurs a été une jungle hautement compétitive, dans laquelle les entreprises rivalisent pour établir la domination du marché pour leur navigateur. Souvent, cela signifie qu'ils doivent se débrouiller seuls pour créer des fonctionnalités qui les distingueront de leurs concurrents. Lorsque les efforts sont fructueux, d'autres les copient, pour finalement converger vers une sorte de norme. Dans d'autres cas, la fonctionnalité ne sera pas exploitée et les navigateurs cesseront de la prendre en charge au fil du temps.
Par conséquent, il n'existe pas de norme HTML5 unique. Au contraire, il existe différents ensembles de fonctionnalités, et pour chacun d'entre eux, la prise en charge par les navigateurs diffère. Ces normes sont rédigées par des comités tels que le W3C (World Wide Web Consortium) et le WHATWG, mais les fabricants de navigateurs sont libres d'y prêter attention ou de les ignorer totalement.
Heureusement pour les développeurs, des sites comme CanIUse et MDN fournissent des informations actualisées sur les navigateurs qui prennent en charge telle ou telle fonctionnalité, et même sur le pourcentage d'utilisateurs potentiels qui disposent de ces navigateurs. Cependant, à un moment donné, rien ne remplace l'essai par soi-même !
Exemple d'informations sur une fonction du navigateur sur CanIUse. Le vert signifie qu'il est soutenu, le rouge qu'il ne l'est pas, et le marron qu'il l'est avec des réserves. Remarquez que l'Ogg (un format de fichier audio compressé, similaire au MP3 mais à code source ouvert) fonctionne sur le Safari de bureau mais pas sur le Safari d'iOS. Et comme d'habitude, l'ancien navigateur Internet Explorer (IE) ne le supporte pas non plus, puisqu'il stagne depuis des années depuis que Microsoft est passé à Edge
Tout mettre en place
Lorsque vous mélangez tous ces ingrédients, vous avez la recette pour créer un jeu génial pour le navigateur Web.
Cette approche contraste fortement avec la manière dont la plupart des jeux sont développés, qui s'appuie sur un moteur de jeu unifié, comme Unity ou Unreal, qui regroupe tous ces composants. En effet, il y a des avantages et des inconvénients à travailler avec un système unifié.
Dans notre cas, nous avons constaté que l'utilisation de composants distincts nous permet de maximiser notre flexibilité - nous pouvons relativement facilement changer nos composants de réseau, par exemple, ou utiliser un moteur de rendu différent si nécessaire. Ceci est rendu possible par notre moteur de jeu interne, appelé Booyah, qui n'est pas lié à un composant particulier (nous y reviendrons dans un prochain article).
Toutefois, pour ceux qui aspirent à une expérience plus unifiée, il existe des moteurs de jeu HTML5 bien établis, tels que Phaser ou PlayCanvas.
Les prochaines étapes
Vous connaissez maintenant les principales technologies utilisées pour créer un jeu pour le navigateur, mais qu'en est-il de ce mystérieux moteur de jeu auquel nous ne cessons de faire allusion ? C'est ce dont je parlerai dans mon prochain post.
- Jesse Himmelstein
