Skip to content

Commit

Permalink
Merge branch 'main' into 20240727-Learn/JavaScript/First_steps/Variables
Browse files Browse the repository at this point in the history
  • Loading branch information
mfuji09 authored Jul 28, 2024
2 parents db8c5db + d0b2c19 commit 4e02d81
Show file tree
Hide file tree
Showing 3,782 changed files with 17,292 additions and 8,032 deletions.
The diff you're trying to view is too large. We only load the first 3000 changed files.
3 changes: 2 additions & 1 deletion files/fr/games/index.md
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,8 @@ Bienvenue dans le centre de développement de jeux MDN ! Dans cette zone du site

Nous avons également inclus une section de références afin que vous puissiez facilement trouver des informations sur toutes les API les plus courantes utilisées dans le développement de jeux.

> **Note :** La création de jeux sur le Web s'appuie sur un certain nombre de technologies Web de base telles que HTML, CSS et JavaScript. La [Zone "Apprendre"](/fr/Apprendre) est un bon endroit pour commencer avec les bases.
> [!NOTE]
> La création de jeux sur le Web s'appuie sur un certain nombre de technologies Web de base telles que HTML, CSS et JavaScript. La [Zone "Apprendre"](/fr/Apprendre) est un bon endroit pour commencer avec les bases.
## Portez des jeux natifs sur le Web

Expand Down
3 changes: 2 additions & 1 deletion files/fr/games/publishing_games/game_distribution/index.md
Original file line number Diff line number Diff line change
Expand Up @@ -65,7 +65,8 @@ Vous pouvez aussi uploader et publier votre jeu directement sur différentes bou

Voyons quelles options sont à notre disposition en matière de marketplaces/magasins d'applications disponibles pour chaque plateforme et système d'exploitation.

> **Note :** Ces plateformes de distribution sont les plus populaires, mais cela ne signifie pas qu'elles sont les seules. Plutôt que d'essayer d'ajouter votre jeu à des milliers d'autres dans l'app store iOS par exemple, vous pouvez également tenter de trouver une niche et faire la promotion de votre jeu directement auprès d'une audience qui sera intéressée par vos jeux. Il est essentiel de faire preuve de créativité ici.
> [!NOTE]
> Ces plateformes de distribution sont les plus populaires, mais cela ne signifie pas qu'elles sont les seules. Plutôt que d'essayer d'ajouter votre jeu à des milliers d'autres dans l'app store iOS par exemple, vous pouvez également tenter de trouver une niche et faire la promotion de votre jeu directement auprès d'une audience qui sera intéressée par vos jeux. Il est essentiel de faire preuve de créativité ici.
### Boutiques en ligne

Expand Down
6 changes: 4 additions & 2 deletions files/fr/games/techniques/2d_collision_detection/index.md
Original file line number Diff line number Diff line change
Expand Up @@ -33,7 +33,8 @@ if (5 < 30 && 55 > 20 && 5 < 20 && 55 > 10) {
}
```

> **Note :** vous pouvez tester un [exemple interactif de cet algorithme](https://jsfiddle.net/knam8/) sur jsFiddle, pour mieux comprendre le fonctionnement de ce code.
> [!NOTE]
> Vous pouvez tester un [exemple interactif de cet algorithme](https://jsfiddle.net/knam8/) sur jsFiddle, pour mieux comprendre le fonctionnement de ce code.
## Collision de cercles

Expand All @@ -52,7 +53,8 @@ if (distance < circle1.radius + circle2.radius) {
}
```

> **Note :** vous pouvez tester un [exemple interactif de cet algorithme](https://jsfiddle.net/gQ3hD/2/) sur jsFiddle, pour mieux comprendre le fonctionnement de ce code.
> [!NOTE]
> Vous pouvez tester un [exemple interactif de cet algorithme](https://jsfiddle.net/gQ3hD/2/) sur jsFiddle, pour mieux comprendre le fonctionnement de ce code.
## Théorème des axes séparateurs

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -19,7 +19,8 @@ PlayCanvas a publié quelques démos populaires présentant ses fonctionnalités

![](playcanvas-demos.png)

> **Note :** Consultez la liste des [démos](https://playcanvas.com/explore) pour trouver plus d'exemples.
> [!NOTE]
> Consultez la liste des [démos](https://playcanvas.com/explore) pour trouver plus d'exemples.
## Moteur vs Éditeur

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,8 @@ l10n:

Une scène 3D dans un jeu, même la plus simple qui soit, contient des éléments standard comme des formes situées dans un système de coordonnées, une caméra pour les voir, des lumières et des matériaux pour améliorer son esthétique, des animations pour la rendre vivante, etc. **Three.js**, comme avec toute autre bibliothèque 3D, fournit des fonctions d'assistance intégrées pour vous aider à implémenter plus rapidement les fonctionnalités 3D courantes. Dans cet article, nous vous expliquerons les bases de l'utilisation de Three.js, notamment la configuration d'un environnement de développement, la structure du code HTML nécessaire, les objets fondamentaux de ThreeJS et la manière de créer une démonstration de base.

> **Note :** Nous avons choisi ThreeJS, car il s'agit de l'une des bibliothèques [WebGL](/fr/docs/Web/API/WebGL_API) les plus populaires, avec laquelle il est facile de commencer. Nous ne disons pas qu'il s'agit de la meilleure bibliothèque WebGL disponible, n'hésitez pas à expérimenter avec d'autres bibliothèques, comme [CopperLicht](https://www.ambiera.com/copperlicht/index.html), ou [PlayCanvas](https://playcanvas.com/).
> [!NOTE]
> Nous avons choisi ThreeJS, car il s'agit de l'une des bibliothèques [WebGL](/fr/docs/Web/API/WebGL_API) les plus populaires, avec laquelle il est facile de commencer. Nous ne disons pas qu'il s'agit de la meilleure bibliothèque WebGL disponible, n'hésitez pas à expérimenter avec d'autres bibliothèques, comme [CopperLicht](https://www.ambiera.com/copperlicht/index.html), ou [PlayCanvas](https://playcanvas.com/).
## Configuration de l'environnement de développement

Expand Down Expand Up @@ -105,7 +106,8 @@ Il existe d'autres types de caméra (cube, orthographique), mais la plus simple

N'hésitez pas à modifier ces valeurs et observer les effets de ces changements sur la scène.

> **Note :** Les valeurs de distance (par exemple pour la position z de la caméra) sont sans unité et peuvent correspondre à toute unité que vous utiliserez pour l'ensemble des objets de la scène (millimètres, mètres, etc.).
> [!NOTE]
> Les valeurs de distance (par exemple pour la position z de la caméra) sont sans unité et peuvent correspondre à toute unité que vous utiliserez pour l'ensemble des objets de la scène (millimètres, mètres, etc.).
## Rendu de la scène

Expand Down
48 changes: 32 additions & 16 deletions files/fr/games/techniques/audio_for_web_games/index.md
Original file line number Diff line number Diff line change
Expand Up @@ -19,9 +19,11 @@ Pour une lecture automatique audio plus passive, par exemple une musique de fond

Pour faire primer l'audio de cette façon, nous voulons en jouer une partie ; pour cette raison, il est utile d'inclure un moment de silence à la fin de votre échantillon audio. Ce silence signifiera que nous pouvons maintenant utiliser JavaScript pour lire ce fichier à des points arbitraires.

> **Note :** Jouer une partie de votre fichier au volume zéro pourrait également fonctionner si le navigateur vous permet de changer le volume (voir ci-dessous). Notez également que la lecture et la mise en pause immédiate de votre audio ne garantissent pas qu'un petit morceau d'audio ne sera pas lu.
> [!NOTE]
> Jouer une partie de votre fichier au volume zéro pourrait également fonctionner si le navigateur vous permet de changer le volume (voir ci-dessous). Notez également que la lecture et la mise en pause immédiate de votre audio ne garantissent pas qu'un petit morceau d'audio ne sera pas lu.
> **Note :** L'ajout d'une application Web sur votre écran d'accueil mobile peut changer ses capacités. Dans le cas d'une lecture automatique sur iOS, cela semble être le cas actuellement. Si possible, vous devriez essayer votre code sur plusieurs appareils et platesformes pour voir comment cela fonctionne.
> [!NOTE]
> L'ajout d'une application Web sur votre écran d'accueil mobile peut changer ses capacités. Dans le cas d'une lecture automatique sur iOS, cela semble être le cas actuellement. Si possible, vous devriez essayer votre code sur plusieurs appareils et platesformes pour voir comment cela fonctionne.
### Volume

Expand All @@ -31,7 +33,8 @@ Le contrôle du volume programmé peut être désactivé dans les navigateurs mo

Probablement comme une tentative d'atténuation de l'utilisation des données du réseau mobile, nous trouvons souvent que la mise en mémoire tampon est désactivée avant que la lecture n'ait été lancée. La mise en mémoire tampon est le processus par lequel le navigateur télécharge le média à l'avance, ce que nous devons souvent faire pour assurer une lecture fluide.

> **Note :** À bien des égards, le concept de mise en mémoire tampon est obsolète. Tant que les demandes de plage d'octets sont acceptées (ce qui est le comportement par défaut), nous devrions pouvoir sauter à un point spécifique de l'audio sans avoir à télécharger le contenu précédent. Cependant, le préchargement est toujours utile; sans cela, il faudrait toujours avoir une certaine communication client-serveur avant de commencer à jouer.
> [!NOTE]
> À bien des égards, le concept de mise en mémoire tampon est obsolète. Tant que les demandes de plage d'octets sont acceptées (ce qui est le comportement par défaut), nous devrions pouvoir sauter à un point spécifique de l'audio sans avoir à télécharger le contenu précédent. Cependant, le préchargement est toujours utile; sans cela, il faudrait toujours avoir une certaine communication client-serveur avant de commencer à jouer.
### Lecture audio simultanée

Expand Down Expand Up @@ -115,13 +118,17 @@ Voici un tableau qui montre quelles plateformes mobiles prennent en charge les f
</tbody>
</table>

> **Note :** Safari 7 a des problèmes à jouer si vous essayez de démarrer tous les morceaux audio simultanément. Si vous échelonnez la lecture, vous aurez peut-être un certain succès.
> [!NOTE]
> Safari 7 a des problèmes à jouer si vous essayez de démarrer tous les morceaux audio simultanément. Si vous échelonnez la lecture, vous aurez peut-être un certain succès.
> **Note :** La lecture audio simultanée est testée à l'aide de notre [exemple de test audio simultané](https://jsfiddle.net/dmkyaq0r/), avec lequel nous essayons de lire trois morceaux en même temps en utilisant l'API audio standard.
> [!NOTE]
> La lecture audio simultanée est testée à l'aide de notre [exemple de test audio simultané](https://jsfiddle.net/dmkyaq0r/), avec lequel nous essayons de lire trois morceaux en même temps en utilisant l'API audio standard.
> **Note :** La fonctionnalité de lecture automatique simple est testée avec notre [exemp;e test lecture automatique](https://jsfiddle.net/vpdspp2b/).
> [!NOTE]
> La fonctionnalité de lecture automatique simple est testée avec notre [exemp;e test lecture automatique](https://jsfiddle.net/vpdspp2b/).
> **Note :** La variabilité du volume est testée avec notre [exemple test volume](https://jsfiddle.net/7ta12vw4/).
> [!NOTE]
> La variabilité du volume est testée avec notre [exemple test volume](https://jsfiddle.net/7ta12vw4/).
## Solutions de contournement pour mobile

Expand Down Expand Up @@ -190,11 +197,14 @@ myAudio.addEventListener(
);
```

> **Note :** Vous pouvez [essayer notre lecteur de sprite audio](https://jsfiddle.net/59vwaame/) sur JSFiddle.
> [!NOTE]
> Vous pouvez [essayer notre lecteur de sprite audio](https://jsfiddle.net/59vwaame/) sur JSFiddle.
> **Note :** Sur mobile nous pouvons avoir besoin de déclencher ce code à partir d'un événement initié par l'utilisateur, tel qu'un bouton de démarrage pressé, comme décrit ci-dessus.
> [!NOTE]
> Sur mobile nous pouvons avoir besoin de déclencher ce code à partir d'un événement initié par l'utilisateur, tel qu'un bouton de démarrage pressé, comme décrit ci-dessus.
> **Note :** Attention aux débits binaires. L'encodage de votre audio à des débits binaires inférieurs signifie des tailles de fichier plus petites, mais une précision de recherche plus faible.
> [!NOTE]
> Attention aux débits binaires. L'encodage de votre audio à des débits binaires inférieurs signifie des tailles de fichier plus petites, mais une précision de recherche plus faible.
## Musique de fond

Expand All @@ -208,7 +218,8 @@ Maintenant qu'il est supporté dans tous les navigateurs modernes à l'exception

Une stratégie inter-navigateurs envisageable serait de fournir un son basique à l'aide de l'élément standard {{HTMLElement ("audio")}} et, là où cela est pris en charge, d'améliorer l'expérience en utilisant l'API Web Audio.

> **Note :** De manière significative, iOS Safari prend désormais en charge l'API Web Audio, ce qui signifie qu'il est désormais possible d'écrire des jeux Web avec de l'audio de qualité native pour iOS.
> [!NOTE]
> De manière significative, iOS Safari prend désormais en charge l'API Web Audio, ce qui signifie qu'il est désormais possible d'écrire des jeux Web avec de l'audio de qualité native pour iOS.
Comme l'API Web Audio permet un timing et un contrôle précis de la lecture audio, nous pouvons l'utiliser pour jouer des échantillons à des moments spécifiques, ce qui est un aspect immersif crucial du jeu. Vous voulez que ces explosions soient **accompagnées** par un boom tonitruant, pas **l'un après les autres**, après tout.

Expand Down Expand Up @@ -296,7 +307,8 @@ for (var i = 0, len = tracks.length; i < len; i++) {
}
```

> **Note :** Vous pouvez essayer notre [démo multipiste API Web Audio](https://jsfiddle.net/c87z11jj/1/) sur JSFiddle.
> [!NOTE]
> Vous pouvez essayer notre [démo multipiste API Web Audio](https://jsfiddle.net/c87z11jj/1/) sur JSFiddle.
Regardons maintenant le code. Nous créons d'abord un nouveau {{domxref ("AudioContext")}} et créons une fonction `(playTrack ())` qui charge et commence à jouer une piste.

Expand All @@ -312,7 +324,8 @@ Si le second paramètre de `start ()` — the offset (_le décalage_) — est nu

Dans le contexte de votre monde de jeu, vous pouvez avoir des boucles et des échantillons qui sont joués dans différentes circonstances, et il peut être utile de pouvoir les synchroniser avec d'autres pistes pour une expérience plus transparente.

> **Note :** Cet exemple n'attend pas la fin du battement avant d'introduire le morceau suivant; nous pourrions le faire si nous connaissions le BPM (battement par minute) des pistes.
> [!NOTE]
> Cet exemple n'attend pas la fin du battement avant d'introduire le morceau suivant; nous pourrions le faire si nous connaissions le BPM (battement par minute) des pistes.
Vous pouvez trouver que l'introduction d'une nouvelle piste sonne plus naturelle si elle entre dans le battement, la mesure ou la phrase, selon l'unité que vous voulez pour votre musique de fond.

Expand All @@ -333,9 +346,11 @@ if (offset == 0) {
}
```

> **Note :** Ici, vous pouvez [essayer notre code calculateur d'attente](https://jsfiddle.net/c87z11jj/2/) , sur JSFiddle (synchronisé à la mesure).
> [!NOTE]
> Ici, vous pouvez [essayer notre code calculateur d'attente](https://jsfiddle.net/c87z11jj/2/) , sur JSFiddle (synchronisé à la mesure).
> **Note :** Si le premier paramètre est 0 ou inférieur au contexte `currentTime`, la musique commence immédiatement.
> [!NOTE]
> Si le premier paramètre est 0 ou inférieur au contexte `currentTime`, la musique commence immédiatement.
### Audio positionnel

Expand All @@ -351,7 +366,8 @@ Nous pouvons relier :

Ceci est particulièrement utile dans un environnement tridimensionnel rendu en utilisant [WebGL](/fr/docs/Web/API/WebGL_API), avec lequel l'API Web Audio permet d'associer l'audio aux objets et aux points de vue .

> **Note :** Voir [Web Audio API Spatialization Basics](/fr/docs/Web/API/Web_Audio_API/Web_audio_spatialization_basics) _(Bases de la spacialisation de l'API Web Audio)_ pour plus de détails.
> [!NOTE]
> Voir [Web Audio API Spatialization Basics](/fr/docs/Web/API/Web_Audio_API/Web_audio_spatialization_basics) _(Bases de la spacialisation de l'API Web Audio)_ pour plus de détails.
## Voir aussi

Expand Down
3 changes: 2 additions & 1 deletion files/fr/games/tutorials/2d_breakout_game_phaser/index.md
Original file line number Diff line number Diff line change
Expand Up @@ -40,7 +40,8 @@ Comme note sur les parcours d'apprentissage — en commençant par le JavaScript

Après cela, vous pouvez choisir n'importe quel framework que vous voulez et l'utiliser pour vos projets ; nous avons choisi Phaser car c'est un bon framework solide, avec un bon support et une communauté disponible, et un bon ensemble de plugins. Les cadres accélèrent le temps de développement et aident à prendre soin des parties ennuyeuses, vous permettant ainsi de vous concentrer sur les choses amusantes. Cependant, les frameworks ne sont pas toujours parfaits, donc si quelque chose d'inattendu se produit ou si vous voulez écrire des fonctionnalités que le framework ne fournit pas, vous aurez besoin de connaissances en JavaScript pur.

> **Note :** Cette série d'articles peut être utilisée comme matériel pour des ateliers pratiques de développement de jeux. Vous pouvez également utiliser la fonction [Gamedev Phaser Content Kit](https://github.com/end3r/Gamedev-Phaser-Content-Kit) basé sur ce tutoriel si vous voulez donner une conférence sur le développement d'un jeu avec Phaser.
> [!NOTE]
> Cette série d'articles peut être utilisée comme matériel pour des ateliers pratiques de développement de jeux. Vous pouvez également utiliser la fonction [Gamedev Phaser Content Kit](https://github.com/end3r/Gamedev-Phaser-Content-Kit) basé sur ce tutoriel si vous voulez donner une conférence sur le développement d'un jeu avec Phaser.
## Prochaines étapes

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -32,9 +32,11 @@ Toutes les leçons — et les différentes versions de ce [jeu de casse-brique M

Commencer avec du Javascript pur et dur est le meilleur moyen d'acquérir des connaissances de développement de jeu web. Après ceci, vous pourrez prendre n'importe quel "framework" et l'utiliser pour vos projets. Les "frameworks" sont des outils créés avec le langage Javascript ; donc, même si vous voulez travailler avec ces derniers, c'est toujours bon d'apprendre le langage lui-même pour savoir ce qu'il se passe exactement. Les "frameworks" améliorent la vitesse de développement et aident à traiter les parties les moins intéressantes du jeu, mais si quelque chose ne fonctionne pas comme prévu, vous pouvez toujours essayer de déboguer ou juste écrire vos propre solutions en Javascript.

> **Note :** Si vous êtes intéressé par l'apprentissage du développement un jeu web 2D avec un "framework", consultez la série [Jeu de casse-tête 2D avec Phaser](/fr/docs/Games/Tutorials/2D_breakout_game_Phaser).
> [!NOTE]
> Si vous êtes intéressé par l'apprentissage du développement un jeu web 2D avec un "framework", consultez la série [Jeu de casse-tête 2D avec Phaser](/fr/docs/Games/Tutorials/2D_breakout_game_Phaser).
> **Note :** Cette série d'articles peut être utilisée comme matériel pour des ateliers pratiques de développement de jeux. Vous pouvez également utiliser le [Gamedev Canvas Content Kit](https://github.com/end3r/Gamedev-Canvas-Content-Kit) basé sur ce tutoriel si vous voulez faire une présentation sur le développement de jeux en général .
> [!NOTE]
> Cette série d'articles peut être utilisée comme matériel pour des ateliers pratiques de développement de jeux. Vous pouvez également utiliser le [Gamedev Canvas Content Kit](https://github.com/end3r/Gamedev-Canvas-Content-Kit) basé sur ce tutoriel si vous voulez faire une présentation sur le développement de jeux en général .
## Prochaines étapes

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -82,7 +82,8 @@ La ligne ci-dessus va initialiser l'instance de Phaser - les arguments sont la l

La chose importante à retenir est que le framework met en place des méthodes utiles pour accélérer beaucoup de choses comme la manipulation d'images ou la gestion des éléments, ce qui serait beaucoup plus difficile à faire manuellement.

> **Note :** Vous pouvez lire l'article [Building Monster Wants Candy](http://gamedevelopment.tutsplus.com/tutorials/getting-started-with-phaser-building-monster-wants-candy--cms-21723) pour une introduction approfondie aux fonctions et méthodes de base de Phaser.
> [!NOTE]
> Vous pouvez lire l'article [Building Monster Wants Candy](http://gamedevelopment.tutsplus.com/tutorials/getting-started-with-phaser-building-monster-wants-candy--cms-21723) pour une introduction approfondie aux fonctions et méthodes de base de Phaser.
Retour aux états du jeu : la ligne ci-dessous ajoute un nouvel état appelé Boot au jeu :

Expand Down Expand Up @@ -322,7 +323,8 @@ Plus l'appareil est incliné, plus la force appliquée à la balle et sa véloci

![](cyber-orb-flame-orientation.png)

> **Note :** Pour en savoir plus sur l'implémentation de l'orientation du périphérique et sur le code brut, lisez [Gardez-le au niveau : en réponse aux changements d'orientation du périphérique](/fr/Apps/Build/gather_and_modify_data/responding_to_device_orientation_changes).
> [!NOTE]
> Pour en savoir plus sur l'implémentation de l'orientation du périphérique et sur le code brut, lisez [Gardez-le au niveau : en réponse aux changements d'orientation du périphérique](/fr/Apps/Build/gather_and_modify_data/responding_to_device_orientation_changes).
### Ajout du trou

Expand Down
Loading

0 comments on commit 4e02d81

Please sign in to comment.