Introduction au développement de jeux vidéo

Le Web d'aujourd'hui est désormais une plate-forme viable pour créer des jeux époustouflants et de bonne qualité mais aussi et surtout pour distribuer ces jeux.

Imaginez tous les jeux qui peuvent être créés...

Grâce aux technologies web actuelles et aux navigateurs récents, il est tout à fait possible de créer un jeu excellent pour le Web. Et nous ne parlons pas ici de jeux de cartes ou de jeux sociaux multi-joueurs déjà créés il y a longtemps avec Flash® mais bien de jeux de tirs en 3D, de RPG etc. Grâce aux améliorations des performances des compilateurs juste-à-temps JavaScript et aux nouvelles APIs, vous pouvez construire des jeux vidéo qui fonctionnent dans un navigateur (ou sur des plate-formes HTML5 comme Firefox OS) sans compromettre les performances.

La plate-forme HTML5 pour les jeux

Le Web peut vraiment se concevoir comme une plate-forme pour les jeux : "le Web est la plate-forme". La liste qui suit présente les technologies au cœur de cette plate-forme.

Fonctionnalités	Technologie
Audio	Web Audio API
Graphiques	WebGL (OpenGL ES 2.0)
Mécanismes d'interface utilisateur	Événements tactiles, Gamepad API, capteurs, WebRTC, Full Screen API, Pointer Lock API
Langage	JavaScript (ou C/C++ utilisé avec Emscripten pour être compilé en JavaScript)
Réseau	WebRTC et/ou les WebSockets
Stockage	IndexedDB ou le "cloud"
Web	HTML, CSS, SVG, Social API (et plus encore...)

Types de jeux

Jeux « casual » (simples)

WebViews, etc..

Jeux avec des composants

WebGL, etc...

L'aspect commercial

En tant que développeur de jeux vidéo, que vous soyez seul ou fassiez partie d'un studio plus grand, vous voulez savoir pourquoi le Web serait pertinent pour votre prochain jeu. Nous verrons ici en quoi le Web peut vous aider :

Distribution

Contrôle

Monétisation ?

La portée du Web est phénoménale : il est partout. Les jeux construits avec HTML5 peuvent fonctionner sur les smartphones, les tablettes, les PCs et les télévisions connectées.
La visibilité de votre jeu et le marketing en sont améliorés. En effet, la promotion de votre jeu n'est pas limitée à un app store maîtrisé par quelqu'un d'autre. Vous pouvez tout à fait promouvoir et faire la publicité de votre jeu sur le Web lui-même comme sur d'autres médias. Les liens, les partages effectués sur le Web sont autant d'avantages pour atteindre de nouveaux utilisateurs.
Vous disposez d'un contrôle à un endroit important : les paiements. Il n'est pas nécessaire pour vous de reverser 30% de vos revenus à d'autres simplement parce que votre jeu fait partie de leur écosystème. Vous pouvez décider de votre propre politique tarifaire et utiliser le service de paiement que vous voulez.
Le contrôle, encore. Vous pouvez mettre à jour votre jeu dès que vous le souhaitez. Vous n'avez pas à attendre l'approbation de quelqu'un d'une autre entreprise décidant si oui ou non tel ou tel correctif sera livré aujourd'hui ou demain.
L'analytique. Plutôt que de vous reposer sur des décisions et influences externes quant aux données dont vous avez besoin, vous pouvez collecter les statistiques que vous voulez, ou bien utiliser un outil analytique tiers de votre choix afin de mesurer les ventes et la portée de votre jeu.
Vous pouvez gérer la relation clientèle de façon plus directe, sans que les retours des clients soient limités aux mécanismes d'un app store. Soyez directement en contact avec vos clients, sans intermédiaire.
Le Web est partout et vos joueurs peuvent donc jouer où bon leur semble : leurs téléphones, tablettes, ordinateurs de bureau ou portables...

Les technologies Web pour les développeurs de jeux vidéo

Pour celles et ceux qui souhaitent plonger dans la technique, voici la liste des APIs et des technologies Web qui vont alimenter votre jeu.

Full Screen API: Cette API simple permet à votre jeu de fonctionner en plein écran et d'offrir ainsi une expérience plus immersive.
Gamepad API: Si vous souhaitez que vos joueurs puissent utiliser des manettes ou d'autres contrôleurs pour votre jeu, vous aurez besoin de cette API.
HTML et CSS: Combinées ensembles, ces deux technologies vous permettent de construire et de mettre en forme l'interface utilisateur de votre jeu. L'élément HTML <canvas> permet de gérer des graphiques en deux dimensions.
HTML audio: L'élément HTML <audio> vous permet de jouer de la musique et des sons. Si vous souhaitez aller plus loin, l'API Web Audio vous offre plus de possibilités de traitement !
IndexedDB: Une API puissante, permettant de maintenir les données de l'utilsateur stockées sur son ordinateur ou son appareil. A great way to save game state and other information locally so it doesn't have to be downloaded every time it's needed. Also useful to help make your game playable even when the user isn't connected to the Web (such as when they're stuck on an airplane for hours on end...).
JavaScript: JavaScript, the programming language used on the Web, is blazing fast in modern browsers and getting faster all the time. Use its power to write the code for your game, or look at using technologies like Emscripten or Asm.js to easily port your existing games.
Pointer Lock API: The Pointer Lock API lets you lock the mouse or other pointing device within your game's interface so that instead of absolute cursor positioning you receive coordinate deltas that give you more precise measurements of what the user is doing, and prevent the user from accidentally sending their input somewhere else, thereby missing important action.
SVG (Scalable Vector Graphics): Lets you build vector graphics that scale smoothly regardless of the size or resolution of the user's display.
Typed Arrays: JavaScript typed arrays give you access to raw binary data from within JavaScript; this lets you manipulate GL textures, game data, or anything else, even if it's not in a native JavaScript format.
Web Audio API: This API for controlling the playback, synthesis, and manipulation of audio from JavaScript code lets you create awesome sound effects as well as play and manipulate music in real time.
WebGL: Lets you create high-performance, hardware-accelerated 3D (and 2D) graphics from Web content. This is a Web-supported implementation of OpenGL ES 2.0.
WebRTC: The WebRTC (Real-Time Communications) API gives you the power to control audio and video data, including teleconferencing and transmitting other application data back and forth between two users. Want your players to be able to talk to each other while blowing up monsters? This is the API for you.
WebSockets: The WebSocket API lets you connect your app or site to a server to transmit data back and forth in real-time. Perfect for multiplayer gaming action, chat services, and so forth.
Web Workers: Workers give you the ability to spawn background threads running their own JavaScript code, to take advantage of modern, multi-core processors.
XMLHttpRequest and File API: The combination of XMLHttpRequest and the File API let you send and receive any kind of data you want (don't let the "XML" throw you!) from a Web server. This is a great way to do anything from downloading new game levels and artwork to transmitting non-real-time game status information back and forth.