1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
|
---
title: Introduction au développement de jeux vidéo
slug: Jeux/Introduction
tags:
- Firefox OS
- Guide
- Jeux
- Mobile
translation_of: Games/Introduction
---
<div>{{GamesSidebar}}</div>
<p> {{IncludeSubnav("/fr/docs/Jeux")}} </p>
<div>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.</div>
<div> </div>
<div>Imaginez tous les jeux qui peuvent être créés...</div>
<p>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 <a href="/en-US/docs/JavaScript" title="/en-US/docs/JavaScript">JavaScript</a> et aux nouvelles APIs, vous pouvez construire des jeux vidéo qui fonctionnent dans un navigateur (ou sur des plateformes HTML5 comme <a href="/en-US/docs/Mozilla/Firefox_OS" title="/en-US/docs/Mozilla/Firefox_OS">Firefox OS</a>) sans compromettre les performances.</p>
<h2 id="La_plateforme_HTML5_pour_les_jeux">La plateforme HTML5 pour les jeux</h2>
<p>Le Web peut vraiment se concevoir comme une plateforme pour les jeux : "le Web est la plateforme". La liste qui suit présente les technologies au cœur de celle-ci.</p>
<table class="standard-table">
<thead>
<tr>
<th scope="col">Fonctionnalités</th>
<th scope="col">Technologie</th>
</tr>
</thead>
<tbody>
<tr>
<td><strong>Audio</strong></td>
<td><a href="https://developer.mozilla.org/fr/docs/Web/API/Web_Audio_API" title="/en-US/docs/Web_Audio_API">Web Audio API</a></td>
</tr>
<tr>
<td><strong>Graphisme</strong></td>
<td><a href="/fr/docs/WebGL" title="/fr/docs/WebGL">WebGL</a> (<a href="http://www.khronos.org/opengles/" title="http://www.khronos.org/opengles/">OpenGL ES</a> 2.0)</td>
</tr>
<tr>
<td><strong>Mécanismes d'interface utilisateur</strong></td>
<td><a href="/fr/docs/Web/Guide/DOM/Events/Touch_events" title="/fr/docs/Web/Guide/DOM/Events/Touch_events">Événements tactiles</a>, <a href="/fr/docs/Web/Guide/API/Gamepad" title="/fr/docs/Web/Guide/API/Gamepad">Gamepad API</a>, capteurs, <a href="/fr/docs/WebRTC" title="/fr/docs/WebRTC">WebRTC</a>, <a href="/fr/docs/Web/Guide/DOM/Using_full_screen_mode" title="/fr/docs/Web/Guide/DOM/Using_full_screen_mode">Full Screen API</a>, <a href="/fr/docs/WebAPI/Pointer_Lock" title="/fr/docs/WebAPI/Pointer_Lock">Pointer Lock API</a></td>
</tr>
<tr>
<td><strong>Langage</strong></td>
<td><a href="/fr/docs/JavaScript" title="/fr/docs/JavaScript">JavaScript</a> (ou C/C++ utilisé avec <a href="https://github.com/kripken/emscripten/wiki" title="https://github.com/kripken/emscripten/wiki">Emscripten</a> pour être compilé en JavaScript)</td>
</tr>
<tr>
<td><strong>Réseau</strong></td>
<td><a href="/fr/docs/WebRTC" title="/fr/docs/WebRTC">WebRTC</a> et/ou les <a href="/fr/docs/WebSockets" title="/fr/docs/WebSockets">WebSockets</a></td>
</tr>
<tr>
<td><strong>Stockage</strong></td>
<td><a href="/fr/docs/IndexedDB" title="/fr/docs/IndexedDB">IndexedDB</a> ou le "cloud"</td>
</tr>
<tr>
<td><strong>Web</strong></td>
<td><a href="/fr/docs/Web/HTML" title="/fr/docs/Web/HTML">HTML</a>, <a href="/fr/docs/Web/CSS" title="/fr/docs/Web/CSS">CSS</a>, <a href="/fr/docs/SVG" title="/fr/docs/SVG">SVG</a>, <a href="/fr/docs/Social_API" title="/fr/docs/Social_API">Social API</a> (et plus encore...)</td>
</tr>
</tbody>
</table>
<p> </p>
<h2 id="L'aspect_commercial">L'aspect commercial</h2>
<div>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 :</div>
<p> </p>
<ol>
<li>
<div>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.</div>
</li>
<li>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" <em>(magasin d'applications)</em> 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.</li>
<li>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.</li>
<li>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.</li>
<li>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.</li>
<li>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 magasin d'application. Soyez directement au contact de vos clients, sans intermédiaire.</li>
<li>Le Web est partout et vos joueurs peuvent donc jouer où bon leur semble : leurs téléphones, tablettes, ordinateurs de bureau ou portables...</li>
</ol>
<p> </p>
<h2 id="Les_technologies_Web_pour_les_développeurs_de_jeux_vidéo">Les technologies Web pour les développeurs de jeux vidéo</h2>
<p>Pour celles et ceux qui souhaitent plonger dans la technique, voici la liste des APIs et des technologies Web qui vont alimenter votre jeu.</p>
<div class="twocolumns">
<dl>
<dt><a href="https://developer.mozilla.org/fr/docs/Web/Guide/DOM/Using_full_screen_mode" title="/en-US/docs/DOM/Using_fullscreen_mode">Full Screen API</a></dt>
<dd>Cette API simple permet à votre jeu de fonctionner en plein écran et d'offrir ainsi une expérience plus immersive.</dd>
<dt><a href="https://developer.mozilla.org/fr/docs/Web/Guide/API/Gamepad" title="/en-US/docs/API/Gamepad/Using_Gamepad_API">Gamepad API</a></dt>
<dd>Si vous souhaitez que vos joueurs puissent utiliser des manettes ou d'autres contrôleurs pour votre jeu, vous aurez besoin de cette API.</dd>
<dt><a href="https://developer.mozilla.org/fr/docs/Web/HTML" title="/en-US/docs/HTML">HTML</a> et <a href="https://developer.mozilla.org/fr/docs/Web/CSS" title="/en-US/docs/CSS">CSS</a></dt>
<dd>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 {{HTMLElement("canvas")}} permet de gérer des graphismes en deux dimensions.</dd>
<dt><a href="https://developer.mozilla.org/fr/docs/Web/HTML/Element/audio" title="/en-US/docs/HTML/Element/audio">HTML audio</a></dt>
<dd>L'élément HTML {{HTMLElement("audio")}} vous permet de jouer de la musique et des sons. Si vous souhaitez aller plus loin, l'API <a href="https://developer.mozilla.org/fr/docs/Web/API/Web_Audio_API" title="/en-US/docs/Web_Audio_API">Web Audio</a> vous offre plus de possibilités de traitement !</dd>
<dt><a href="https://developer.mozilla.org/fr/docs/Web/API/API_IndexedDB" title="/en-US/docs/IndexedDB">IndexedDB</a></dt>
<dd>Une API puissante, permettant de maintenir les données de l'utilsateur stockées sur son ordinateur ou son appareil. Une bonne façon de sauvegarder l'état d'un jeu ou autre information localement de telle sorte qu'elle ne sera pas téléchargée à chaque fois qu'on aura besoin d'elle. Aussi utile pour rendre le jeu utilisable même quand le joueur n'est pas connecté à internet (comme durant un long vol en avion...).</dd>
<dt><a href="https://developer.mozilla.org/fr/docs/Web/JavaScript" title="/en-US/docs/JavaScript">JavaScript</a></dt>
<dd>JavaScript, est un langage de programmation utilisé sur internet. Il a d'excellentes performances sur les navigateurs modernes et est sans cesse amélioré. Utilisez sa puissance pour coder vos jeux, ou regardez son utilisation dans des technologies comme <a href="https://github.com/kripken/emscripten/wiki" title="https://github.com/kripken/emscripten/wiki">Emscripten</a> ou <a href="http://asmjs.org/spec/latest/" title="http://asmjs.org/spec/latest/">Asm.js</a> pour porter facilement vos jeux existants.</dd>
<dt><a href="https://developer.mozilla.org/fr/docs/WebAPI/Pointer_Lock" title="/en-US/docs/WebAPI/Pointer_Lock">Pointer Lock API</a></dt>
<dd>L'API Pointer Lock vous permet de bloquer la souris ou tout autre appareil de pointage à l'intérieur de l'interface de votre jeu, de telle sorte qu'au lieu de recevoir une position absolue du pointeur vous recevrez le delta des coordonnées. Ce qui vous donne une mesure plus précise de ce que fait l'utilisateur, mais aussi l'empêche d'envoyer accidentellement ses entrées ailleurs pour ne pas manquer des actions importantes.</dd>
<dt><a href="https://developer.mozilla.org/fr/docs/Web/SVG" title="/en-US/docs/SVG">SVG</a> (Scalable Vector Graphics)</dt>
<dd><span id="result_box" lang="fr"><span>Vous permet de créer des graphiques vectoriels dont l'échelle est fluide, quelle que soit la taille ou la résolution de l'affichage de l'utilisateur.</span></span></dd>
<dt><a href="https://developer.mozilla.org/fr/docs/Web/JavaScript/Tableaux_typ%C3%A9s" title="/en-US/docs/JavaScript/Typed_arrays">Typed Arrays</a></dt>
<dd><span id="result_box" lang="fr"><span>Les tableaux typés JavaScript vous donnent accès à des données binaires brutes depuis JavaScript ;</span> <span>cela vous permet de manipuler des textures GL, des données de jeu ou tout autre chose, même si ce n'est pas dans un format JavaScript natif.</span></span></dd>
<dt><a href="https://developer.mozilla.org/fr/docs/Web/API/Web_Audio_API" title="/en-US/docs/Web_Audio_API">Web Audio API</a></dt>
<dd><span id="result_box" lang="fr"><span>Cette API pour contrôler la lecture, la synthèse et la manipulation de l'audio à partir du code JavaScript vous permet de créer des effets sonores impressionnants, de jouer et de manipuler de la musique en temps réel.</span></span></dd>
<dt><a href="https://developer.mozilla.org/fr/docs/Web/API/WebGL_API" title="/en-US/docs/WebGL">WebGL</a></dt>
<dd>Vous permet de créer à partir de contenu internet des graphismes de hautes performances, avec l'accélération matérielle de graphisme 3D (et 2D). C'est une implémentation qui permet la prise en charge web de <a href="http://www.khronos.org/opengles/" title="http://www.khronos.org/opengles/">OpenGL ES</a> 2.0.</dd>
<dt><a href="https://developer.mozilla.org/fr/docs/Web/API/WebRTC_API" title="/en-US/docs/WebRTC">WebRTC</a></dt>
<dd>L'API WebRTC (Real-Time Communications) vous donne le pouvoir de contrôler les données audio et vidéo, y compris la téléconférence, et de transmettre des données d'applications aux utilisateurs et entre utilisateurs. Vous voulez que vos joueurs discutent lorsqu'ils explosent des monstres ? Cette API est faite pour vous.</dd>
<dt><a href="https://developer.mozilla.org/fr/docs/WebSockets" title="/en-US/docs/WebSockets">WebSockets</a></dt>
<dd>L'API WebSocket vous permet de connecter votre application ou site à un serveur pour transmettre des données en temps réel. Parfait pour les jeux d'action multi-joueurs, services de "chat" <em>(discussion)</em> et autres.</dd>
<dt><a href="https://developer.mozilla.org/fr/docs/Utilisation_des_web_workers" title="/en-US/docs/DOM/Using_web_workers">Web Workers</a></dt>
<dd>Les "Workers" vous donnent la possibilité de créer des routines qui tournent en arrière-plan avec leur propre code javascript, pour prendre avantage des processeurs multi-core modernes.</dd>
<dt><a href="https://developer.mozilla.org/fr/docs/Web/API/XMLHttpRequest" title="/en-US/docs/DOM/XMLHttpRequest">XMLHttpRequest</a> and <a href="https://developer.mozilla.org/fr/docs/Web/API/API_fichier_systeme" title="/en-US/docs/DOM/File_API">File API</a></dt>
<dd>La combinaison de XMLHttpRequest et de l'API File vous permet d'envoyer et de recevoir toutes les sortes de données que vous voulez (ne vous fiez pas au "XML" dans son nom !) depuis un serveur Web. Il s'agit d'une bonne façon de réaliser diverses choses comme télécharger de nouveaux niveaux du jeu et les éléments de graphismes ou encore transmettre (pas en temps réel) les informations de l'état du jeu vers votre serveur.</dd>
</dl>
</div>
<p> </p>
|
