diff options
author | SphinxKnight <SphinxKnight@users.noreply.github.com> | 2022-03-16 17:52:18 +0100 |
---|---|---|
committer | GitHub <noreply@github.com> | 2022-03-16 17:52:18 +0100 |
commit | 500f444d23a7a758da229ebe6b9691cc5d4fe731 (patch) | |
tree | ca277561f7f3c5f2c9c3e80a895ac32f30852238 /files/fr/games/techniques | |
parent | de831e4687986c3a60b9ced69ce9faefda8df4b9 (diff) | |
download | translated-content-500f444d23a7a758da229ebe6b9691cc5d4fe731.tar.gz translated-content-500f444d23a7a758da229ebe6b9691cc5d4fe731.tar.bz2 translated-content-500f444d23a7a758da229ebe6b9691cc5d4fe731.zip |
Fix #4269 - Removes empty/special characters (#4270)
* Remove ufeff
* Remove u2064
* Remove u2062
* Replace u202f followed by : with :
* Replace u202f next to « or » with and « or »
* Replace u202f followed by ; with ;
* Replace u202f followed by ! with
* Replace u202f followed by ? with ?
* Replace remaining u202f with classical space
* Replace u200b surrounded by space with classical space
* Replace u200b surrounded by space with classical space - again (repeated)
* Remove remaining u200b
* Remove u200a
* Replace u2009 with
* Remove u00ad
* Replace u00a0 followed by : ! or ? with and punctuation
* Replace u00a0 surrounded « or » with and punctuation
* Replace u00a0 followed by whitespaces
* Replace u00a0 preceded by whitespaces
* Replace u00a0 followed by a newline with a newline
* Replace u00a0 followed by a newline with a newline - Take2
* Replace u00a0 followed by a ; and punctuation
* Remove u00a0 followed by ,
* Remove u00a0 in indentation spaces with \n([ ]*)([\u00a0])([ ]*)
* Manual replacement of ([\u00a0])([ ]+)
* Replace remaining ([\u00a0]+) by a space
* cleaning empty elements
* remove ufe0f
* Remove u00a0 and u202f after merging against updated main
* remove double whitespace using (\w)( )(\w)
Diffstat (limited to 'files/fr/games/techniques')
6 files changed, 46 insertions, 46 deletions
diff --git a/files/fr/games/techniques/2d_collision_detection/index.md b/files/fr/games/techniques/2d_collision_detection/index.md index 2cdee32e6a..38f2b5d916 100644 --- a/files/fr/games/techniques/2d_collision_detection/index.md +++ b/files/fr/games/techniques/2d_collision_detection/index.md @@ -13,7 +13,7 @@ translation_of: Games/Techniques/2D_collision_detection {{IncludeSubnav("/fr/docs/Jeux")}} -Les algorithmes de détection de collisions dans les jeux en 2 dimensions dépendent de la forme des objets à détecter (par exemple : rectangle contre rectangle, cercle contre rectangle, cercle contre cercle…). Habituellement, il est préférable d’utiliser une forme générique appelée masque de collision (« *hitbox* ») qui couvrira l’entité. Ainsi, les collisions ne seront pas assurées au pixel près mais cela permettra d’avoir de bonnes performances pour un grand nombre d’entités à tester. +Les algorithmes de détection de collisions dans les jeux en 2 dimensions dépendent de la forme des objets à détecter (par exemple : rectangle contre rectangle, cercle contre rectangle, cercle contre cercle…). Habituellement, il est préférable d’utiliser une forme générique appelée masque de collision (« *hitbox* ») qui couvrira l’entité. Ainsi, les collisions ne seront pas assurées au pixel près mais cela permettra d’avoir de bonnes performances pour un grand nombre d’entités à tester. Cet article donne un résumé des techniques les plus utilisées pour la détection des collisions dans les jeux en deux dimensions. @@ -26,9 +26,9 @@ var rect1 = {x: 5, y: 5, width: 50, height: 50} var rect2 = {x: 20, y: 10, width: 10, height: 10} if (rect1.x < rect2.x + rect2.width && - rect1.x + rect1.width > rect2.x && - rect1.y < rect2.y + rect2.height && - rect1.height + rect1.y > rect2.y) { + rect1.x + rect1.width > rect2.x && + rect1.y < rect2.y + rect2.height && + rect1.height + rect1.y > rect2.y) { // collision détectée ! } @@ -67,25 +67,25 @@ if (distance < circle1.radius + circle2.radius) { Cet algorithme permet de détecter une collision entre deux polygones _convexes_. Cet algorithme est plus compliqué à implémenter que les deux précédents mais il est bien plus puissant. La complexité d’un tel algorithme induit de prendre en considération l’optimisation des performances (voir section suivante). -L’implémentation de cet algorithme est hors de propos sur cette page, nous vous conseillons les articles suivants : +L’implémentation de cet algorithme est hors de propos sur cette page, nous vous conseillons les articles suivants : -1. [Separating Axis Theorem (SAT) explanation](http://www.sevenson.com.au/actionscript/sat/) ; -2. [(Anglais) Collision detection and response (en)](http://www.metanetsoftware.com/technique/tutorialA.html) ; -3. [Collision detection Using the Separating Axis Theorem (en)](http://gamedevelopment.tutsplus.com/tutorials/collision-detection-using-the-separating-axis-theorem--gamedev-169) ; -4. [SAT (Separating Axis Theorem) (en)](http://www.codezealot.org/archives/55) ; +1. [Separating Axis Theorem (SAT) explanation](http://www.sevenson.com.au/actionscript/sat/) ; +2. [(Anglais) Collision detection and response (en)](http://www.metanetsoftware.com/technique/tutorialA.html) ; +3. [Collision detection Using the Separating Axis Theorem (en)](http://gamedevelopment.tutsplus.com/tutorials/collision-detection-using-the-separating-axis-theorem--gamedev-169) ; +4. [SAT (Separating Axis Theorem) (en)](http://www.codezealot.org/archives/55) ; 5. [Separation of Axis Theorem (SAT) for Collision Detection (en)](http://rocketmandevelopment.com/blog/separation-of-axis-theorem-for-collision-detection/). ## Performances -Alors que la plupart de ces algorithmes de détection de collision sont très simples à calculer, cela peut être une perte de ressources de tester _chaque entité_ avec les autres entités. Habituellement les jeux découpent les collisions en deux phases : large (« *broad* ») et étroite (« *narrow* »). +Alors que la plupart de ces algorithmes de détection de collision sont très simples à calculer, cela peut être une perte de ressources de tester _chaque entité_ avec les autres entités. Habituellement les jeux découpent les collisions en deux phases : large (« *broad* ») et étroite (« *narrow* »). ### Phase large -La phase large sert à récupérer une liste d’entités qui _pourraient_ entrer en collision. Cela peut être facilement implémenté avec une structure de données spaciale qui vous donnera une meilleure idée d’où est situé chaque entité et de ce qui existe autour d’elle. Par exemple : +La phase large sert à récupérer une liste d’entités qui _pourraient_ entrer en collision. Cela peut être facilement implémenté avec une structure de données spaciale qui vous donnera une meilleure idée d’où est situé chaque entité et de ce qui existe autour d’elle. Par exemple : -- Les _Quad Trees_ (exemple : [JavaScript QuadTree Implementation (en)](http://blogs.adobe.com/digitalmedia/2011/03/javascript-quadtree-implementation/)) ; -- Les _R-Trees_ (voir [R-Tree sur Wikipedia.org (en)](http://en.wikipedia.org/wiki/R-tree)) ; -- Une « *hashmap* ». +- Les _Quad Trees_ (exemple : [JavaScript QuadTree Implementation (en)](http://blogs.adobe.com/digitalmedia/2011/03/javascript-quadtree-implementation/)) ; +- Les _R-Trees_ (voir [R-Tree sur Wikipedia.org (en)](http://en.wikipedia.org/wiki/R-tree)) ; +- Une « *hashmap* ». ### Phase étroite diff --git a/files/fr/games/techniques/3d_on_the_web/basic_theory/index.md b/files/fr/games/techniques/3d_on_the_web/basic_theory/index.md index e4074f5f75..609a2a98b6 100644 --- a/files/fr/games/techniques/3d_on_the_web/basic_theory/index.md +++ b/files/fr/games/techniques/3d_on_the_web/basic_theory/index.md @@ -23,22 +23,22 @@ La 3D est principalement basée sur la représentation de formes 3D dans l'espac ![](mdn-games-3d-coordinate-system.png) -WebGL utilise le système de coordonnées de droite — l'axe x pointe vers la droite, l'axe y vers le haut et l'axe z dans la profondeur, comme shématisé ci-dessus. +WebGL utilise le système de coordonnées de droite — l'axe x pointe vers la droite, l'axe y vers le haut et l'axe z dans la profondeur, comme shématisé ci-dessus. ## Objets -Differents types d'objets sont construits en utilisant les sommets. Un Sommet (Vertex) est un point dans l'espace ayant sa propre position 3D dans le système de coordonnées et souvent quelques informations supplémentaires qui le définissent. Chaque sommet est décrit par ces attributs : +Differents types d'objets sont construits en utilisant les sommets. Un Sommet (Vertex) est un point dans l'espace ayant sa propre position 3D dans le système de coordonnées et souvent quelques informations supplémentaires qui le définissent. Chaque sommet est décrit par ces attributs : -- **Position** : L'identifie dans un espace 3D (`x`, `y`, `z`). -- **Color** (Couleur) : Prend une valeur RVBA (R, V et B pour le Rouge, Vert et Bleu, A (alpha) pour l'opacité — toutes les valeurs comprises entre 0.0 et 1.0) -- **Normal :** Une manière de décrire la direction à laquelle fait face le sommet. +- **Position** : L'identifie dans un espace 3D (`x`, `y`, `z`). +- **Color** (Couleur) : Prend une valeur RVBA (R, V et B pour le Rouge, Vert et Bleu, A (alpha) pour l'opacité — toutes les valeurs comprises entre 0.0 et 1.0) +- **Normal :** Une manière de décrire la direction à laquelle fait face le sommet. - **Texture** : Une image 2D que le sommet peut utiliser pour décorer la surface dont il fait partie à la place d'une simple couleur. -Vous pouvez faire de la géométrie en utilisant ces informations — voici l'exemple d'un cube : +Vous pouvez faire de la géométrie en utilisant ces informations — voici l'exemple d'un cube : ![Cube](mdn-games-3d-cube.png) -Une face de la forme donnée est un plan entre des sommets. Par exemple, un cube a 8 différents sommets (points dans l'espace) et 6 différentes faces, chacune construite à partir de 4 sommets. Une norme définit de quelle manière la face est orientée. De plus, en connectant les points, on crée les arêtes du cube.La géométrie est basée sur les sommets et les faces, où le matériau est une texture, utilisant une couleur ou une image. Si l'on connecte la géométrie avec le matériau, on obtient une maille (mesh) +Une face de la forme donnée est un plan entre des sommets. Par exemple, un cube a 8 différents sommets (points dans l'espace) et 6 différentes faces, chacune construite à partir de 4 sommets. Une norme définit de quelle manière la face est orientée. De plus, en connectant les points, on crée les arêtes du cube.La géométrie est basée sur les sommets et les faces, où le matériau est une texture, utilisant une couleur ou une image. Si l'on connecte la géométrie avec le matériau, on obtient une maille (mesh) ## Rendu des tuyaux (_pipeline_) @@ -48,11 +48,11 @@ Le rendu des tuyaux est un procédé avec lequel les images sont préparées et Terminologie utilisée dans le diagramme ci-dessus : -- Une **Primitive** : Une source pour le tuyau — construite à partir de sommets et peut être un triangle, un point ou une ligne. -- Un **Fragment** : Une projection 3D d'un pixel, qui a les mêmes attributs qu'un pixel. -- Un **Pixel** : Un point sur l'écran arrangé sur une grille 2D, qui prend une couleur RVBA. +- Une **Primitive** : Une source pour le tuyau — construite à partir de sommets et peut être un triangle, un point ou une ligne. +- Un **Fragment** : Une projection 3D d'un pixel, qui a les mêmes attributs qu'un pixel. +- Un **Pixel** : Un point sur l'écran arrangé sur une grille 2D, qui prend une couleur RVBA. -Le traitement des sommets et des fragments est programmable — vous pouvez [écrire vos propres shaders](/fr/docs/Games/Techniques/3D_on_the_web/GLSL_Shaders) qui manipulent le rendu. +Le traitement des sommets et des fragments est programmable — vous pouvez [écrire vos propres shaders](/fr/docs/Games/Techniques/3D_on_the_web/GLSL_Shaders) qui manipulent le rendu. ## Traitement de sommet @@ -60,11 +60,11 @@ Le traitement de sommet consiste à combiner les informations à propos de chaqu ![](mdn-games-3d-vertex-processing.png) -Il y a 4 étapes dans ce traitement : la première implique d'arranger les objets dans le monde, elle est appelée la **transformation du modèle**. Ensuite, il y a la **transformation de la vue**, qui prend soin de positionner et de régler l'orientation de la caméra dans l'espace 3D. La caméra a 3 paramètres — position, direction et orientation — qui doivent être définis pour la scène nouvellement créée. +Il y a 4 étapes dans ce traitement : la première implique d'arranger les objets dans le monde, elle est appelée la **transformation du modèle**. Ensuite, il y a la **transformation de la vue**, qui prend soin de positionner et de régler l'orientation de la caméra dans l'espace 3D. La caméra a 3 paramètres — position, direction et orientation — qui doivent être définis pour la scène nouvellement créée. ![Camera](mdn-games-3d-camera.png) -La **transformation de la projection** (aussi appelée transformation de la perspective) définit ensuite les réglages de la caméra. Elle définit ce qui peut être vu par la caméra — la configuration inclut le champ de vision, le ratio d'aspect, et éventuellement les plans proches et éloignés. Lisez le [paragraphe sur la Caméra](/fr/docs/Games/Techniques/3D_on_the_web/Building_up_a_basic_demo_with_Three.js#Camera) dans l'article de Three.js pour en savoir plus. +La **transformation de la projection** (aussi appelée transformation de la perspective) définit ensuite les réglages de la caméra. Elle définit ce qui peut être vu par la caméra — la configuration inclut le champ de vision, le ratio d'aspect, et éventuellement les plans proches et éloignés. Lisez le [paragraphe sur la Caméra](/fr/docs/Games/Techniques/3D_on_the_web/Building_up_a_basic_demo_with_Three.js#Camera) dans l'article de Three.js pour en savoir plus. ![](mdn-games-3d-camera-settings.png) @@ -76,7 +76,7 @@ La rastérisation convertit les primitives (des sommets reliés) à un ensemble ![](mdn-games-3d-rasterization.png) -Ces fragments — qui sont des projections 3D de pixels 2D — sont alignés sur la grille de pixels, donc éventuellement ils peuvent être affichés comme des pixels sur un écran 2D durant la phase de fusion du résultat. +Ces fragments — qui sont des projections 3D de pixels 2D — sont alignés sur la grille de pixels, donc éventuellement ils peuvent être affichés comme des pixels sur un écran 2D durant la phase de fusion du résultat. ## Traitement de fragment @@ -86,13 +86,13 @@ Le traitement de fragment se concentre sur les textures et les lumières — il ### Textures -Les textures sont des images 2D utilisées dans l'espace 3D pour faire que les objets rendent mieux et paraissent plus réalistes. Les textures sont combinées à partir de simples éléments de texture appelés texels, de la même manière que les images sont combinées à partir de pixels. Appliquer des textures sur des objets durant le traitement des fragments, vous permet de l'ajuster en lui donnant une enveloppe ou des filtres si nécessaire. +Les textures sont des images 2D utilisées dans l'espace 3D pour faire que les objets rendent mieux et paraissent plus réalistes. Les textures sont combinées à partir de simples éléments de texture appelés texels, de la même manière que les images sont combinées à partir de pixels. Appliquer des textures sur des objets durant le traitement des fragments, vous permet de l'ajuster en lui donnant une enveloppe ou des filtres si nécessaire. L'habillage de texture permet de répéter l'image 2D autour de l'objet 3D. Le filtrage de texture est appliqué lorsque la résolution d'origine ou l'image de texture est différente du fragment affiché — elle sera réduite ou agrandie en conséquence. ### Lumières -Les couleurs que nous voyons sur l'écran sont le résultat d'une source de lumière intéragissant avec la couleur à la surface des matériaux des objets. La lumière peut être absorbée ou réfléchie. Le **modèle de lumière Phong** standard implémenté dans WebGL a 4 types de base de lumière : +Les couleurs que nous voyons sur l'écran sont le résultat d'une source de lumière intéragissant avec la couleur à la surface des matériaux des objets. La lumière peut être absorbée ou réfléchie. Le **modèle de lumière Phong** standard implémenté dans WebGL a 4 types de base de lumière : - **Diffuse** _(diffusion)_ : Une lumière directionnelle distante, comme le Soleil. - **Specular** _(Particulier)_ : Un point de lumière, comme un bulle de lumière dans une pièce ou un flash. diff --git a/files/fr/games/techniques/3d_on_the_web/building_up_a_basic_demo_with_playcanvas/index.md b/files/fr/games/techniques/3d_on_the_web/building_up_a_basic_demo_with_playcanvas/index.md index 588289c009..3143678cee 100644 --- a/files/fr/games/techniques/3d_on_the_web/building_up_a_basic_demo_with_playcanvas/index.md +++ b/files/fr/games/techniques/3d_on_the_web/building_up_a_basic_demo_with_playcanvas/index.md @@ -23,7 +23,7 @@ translation_of: Games/Techniques/3D_on_the_web/Building_up_a_basic_demo_with_Pla PlayCanvas a publié quelques démos populaires présentant ses fonctionnalités. - [Tanx](http://playcanv.as/p/aP0oxhUr) est un jeu de char multijoueur dans lequel vous pouvez conduire votre char, en tirant sur d'autres joueurs au fur et à mesure. -- [Swooop](http://playcanv.as/p/JtL2iqIH) est un jeu de vol où vous pilotez votre avion autour d'une île magique tout en collectant des bijoux et du carburant. +- [Swooop](http://playcanv.as/p/JtL2iqIH) est un jeu de vol où vous pilotez votre avion autour d'une île magique tout en collectant des bijoux et du carburant. - Des visualisations comme the [Star Lord](http://playcanv.as/b/FQbBsJTd) et [BMW i8](http://playcanv.as/p/RqJJ9oU9) mettent également en valeur les possibilités du moteur. ![](playcanvas-demos.png) @@ -38,7 +38,7 @@ Le moteur peut lui même être utilisé comme une bibliotheque standard en inclu Conçu pour les navigateurs modernes, PlayCanvas est un moteur de jeu 3D complet intégrant le chargement de ressources, un système d'entité et de composants, une manipulation avancée des graphismes, un moteur de collision et de physique (conçu avec [ammo.js](https://github.com/kripken/ammo.js/)), la gestion du son et des simplifications pour la gestion des entrées de nombreux dispositifs (y compris les manettes de jeu). C'est une liste assez impressionnante de sonctionnalités — observez-en quelques-unes en action en consultant la rubrique [Conception d'une démo de base avec PlayCanvas](/fr/docs/Games/Techniques/3D_on_the_web/Building_up_a_basic_demo_with_PlayCanvas/engine) pour plus de détails. -## Éditeur PlayCanvas +## Éditeur PlayCanvas Au lieu de tout coder à parir de zéro, vous pouvez également utiliser l'éditeur en ligne. Cela peut être un environnement de travail plus agréable si vous n'êtes pas très orienté codage. Voici la [construction d'une démo de base avec l'éditeur de PlayCanvas](/fr/docs/Games/Techniques/3D_on_the_web/Building_up_a_basic_demo_with_PlayCanvas/editor) pour plus de détails. diff --git a/files/fr/games/techniques/3d_on_the_web/building_up_a_basic_demo_with_three.js/index.md b/files/fr/games/techniques/3d_on_the_web/building_up_a_basic_demo_with_three.js/index.md index 9cca38137f..44d4b8acce 100644 --- a/files/fr/games/techniques/3d_on_the_web/building_up_a_basic_demo_with_three.js/index.md +++ b/files/fr/games/techniques/3d_on_the_web/building_up_a_basic_demo_with_three.js/index.md @@ -5,7 +5,7 @@ translation_of: Games/Techniques/3D_on_the_web/Building_up_a_basic_demo_with_Thr --- {{GamesSidebar}} -Une scène 3D dans un jeu - même la plus simple - contient des éléments standard comme des formes situées dans un système de coordonnées, une caméra pour les voir réellement, des lumières et des matériaux pour amelioré 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, notamment la configuration d'un environnement de développement, la structuration du code HTML nécessaire, les objets fondamentaux de Three et la manière de créer une démonstration de base. +Une scène 3D dans un jeu - même la plus simple - contient des éléments standard comme des formes situées dans un système de coordonnées, une caméra pour les voir réellement, des lumières et des matériaux pour amelioré 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, notamment la configuration d'un environnement de développement, la structuration du code HTML nécessaire, les objets fondamentaux de Three et la manière de créer une démonstration de base. > **Note :** Nous avons choisi Three car il s'agit de l'une des bibliothèques WebGL les plus populaires, et il est facile de commencer. Nous n'essayons pas de dire que c'est mieux que toute autre bibliothèque WebGL disponible, et vous devriez vous sentir libre d'essayer une autre bibliothèque, comme CopperLicht, GLGE ou PlayCanvas @@ -54,9 +54,9 @@ avant de poursuivre copier se code dans un fichier nommé index.html. ## Renderer ou Moteur de rendue -un Moteur de rendue est un outil qui affiche les scénes directement dans votre navigateur.Il existe plusieur moteur different :WebGL est la valeur par défaut, vous pouvez utilisercanvas,SVG,CSS et DOM . ils différent dans la façons dont il gere le rendu. Malgres leurs differences , l experience utilisateur sera la meme. +un Moteur de rendue est un outil qui affiche les scénes directement dans votre navigateur.Il existe plusieur moteur different :WebGL est la valeur par défaut, vous pouvez utilisercanvas,SVG,CSS et DOM . ils différent dans la façons dont il gere le rendu. Malgres leurs differences , l experience utilisateur sera la meme. -Grace à cette approche, une solution de secour peut etre utilisée , si une technologie n'est pas prise en charge par le navigatueur. +Grace à cette approche, une solution de secour peut etre utilisée , si une technologie n'est pas prise en charge par le navigatueur. ```js var renderer = new THREE.WebGLRenderer({antialias:true}); @@ -103,7 +103,7 @@ Vous devez expérimenter ces valeurs et voir comment elles changent ce que vous ## Rendu de la scene -Tout est prêt, mais on ne voit toujours rien. Bien que nous ayons configuré le moteur de rendu, nous devons toujours effetué le rendu. Notre fonction render () fera ce travail, avec un peu d'aide de requestAnimationFrame (), ce qui fait que la scène sera restituée sur chaque image: +Tout est prêt, mais on ne voit toujours rien. Bien que nous ayons configuré le moteur de rendu, nous devons toujours effetué le rendu. Notre fonction render () fera ce travail, avec un peu d'aide de requestAnimationFrame (), ce qui fait que la scène sera restituée sur chaque image: ```js function render() { @@ -157,7 +157,7 @@ We've now created a cube, using the geometry and material defined earlier. The l scene.add(cube); ``` -If you save, and refresh your Web browser, our object will now look like a square, because it's facing the camera. The good thing about objects, is that we can move them on the scene, however we want. For example, rotating and scaling as we like. Let's apply a little rotation to the cube, so we can see more than one face. Again, adding our code below the previous: +If you save, and refresh your Web browser, our object will now look like a square, because it's facing the camera. The good thing about objects, is that we can move them on the scene, however we want. For example, rotating and scaling as we like. Let's apply a little rotation to the cube, so we can see more than one face. Again, adding our code below the previous: ```js cube.rotation.set(0.4, 0.2, 0); @@ -181,7 +181,7 @@ Now we will add more shapes to the scene, and explore other shapes, materials, l cube.position.x = -25; ``` -Now onto more shapes and materials. What might happen when you add a torus, wrapped in the Phong material? Try adding the following lines, just below the lines defining the cube. +Now onto more shapes and materials. What might happen when you add a torus, wrapped in the Phong material? Try adding the following lines, just below the lines defining the cube. ```js var torusGeometry = new THREE.TorusGeometry(7, 1, 6, 12); @@ -224,7 +224,7 @@ This looks a little boring though. In a game, something is usually happening. We ## Animation -We already used rotation, to adjust the position of the cube. We can also scale the shapes, or change their positions. To show animation, we need to make changes to these values inside the render loop, so they update on each frame. +We already used rotation, to adjust the position of the cube. We can also scale the shapes, or change their positions. To show animation, we need to make changes to these values inside the render loop, so they update on each frame. ### Rotation @@ -251,7 +251,7 @@ t += 0.01; torus.scale.y = Math.abs(Math.sin(t)); ``` -We use `Math.sin`, ending up with quite an interesting result. This scales the torus, repeating the process, as `sin` is a periodic function. We're wrapping the scale value in `Math.abs`, to pass the absolute values, greater or equal to 0. As sin is between -1 and 1, negative values might render out torus in unexpected way. In this case it looks black half the time. +We use `Math.sin`, ending up with quite an interesting result. This scales the torus, repeating the process, as `sin` is a periodic function. We're wrapping the scale value in `Math.abs`, to pass the absolute values, greater or equal to 0. As sin is between -1 and 1, negative values might render out torus in unexpected way. In this case it looks black half the time. Now, onto movement. diff --git a/files/fr/games/techniques/3d_on_the_web/index.md b/files/fr/games/techniques/3d_on_the_web/index.md index 7d294a7a53..bb153d79cb 100644 --- a/files/fr/games/techniques/3d_on_the_web/index.md +++ b/files/fr/games/techniques/3d_on_the_web/index.md @@ -51,11 +51,11 @@ Il y a aussi la [construction d'une démo de base avec l'article A-Frame](/fr/do Le codage de WebGL brut est assez complexe, mais vous aurez envie de le maîtriser à long terme, car vos projets seront plus avancés (consultez notre [documentation WebGL](/fr/docs/Web/API/WebGL_API) pour commencer). Pour les projets de monde réel, vous utiliserez probablement aussi un "framework" pour accélérer le développement et vous aider à gérer le projet. L'utilisation d'un "framework" pour les jeux 3D permet également d'optimiser les performances, car les outils que vous utilisez vous permettent de vous concentrer sur la construction du jeu. -La bibliothèque 3D JavaScript la plus populaire est [Three.js](http://threejs.org/), un outil polyvalent qui rend les techniques 3D plus simples à implémenter. Il existe d'autres bibliothèques et cadres de développement de jeux populaires qui valent la peine d'être regardés ; [A-Frame](https://aframe.io), [PlayCanvas](https://playcanvas.com/) et [Babylon.js](http://www.babylonjs.com/) sont parmi les plus reconnaissables avec une documentation riche, des éditeurs en ligne et des communautés actives. +La bibliothèque 3D JavaScript la plus populaire est [Three.js](http://threejs.org/), un outil polyvalent qui rend les techniques 3D plus simples à implémenter. Il existe d'autres bibliothèques et cadres de développement de jeux populaires qui valent la peine d'être regardés ; [A-Frame](https://aframe.io), [PlayCanvas](https://playcanvas.com/) et [Babylon.js](http://www.babylonjs.com/) sont parmi les plus reconnaissables avec une documentation riche, des éditeurs en ligne et des communautés actives. ### Construction d'une démo de base avec A-Frame -A-Frame est un "framework" web pour construire des expériences 3D et de la réalité virtuelle. Sous le capot, il s'agit d'un "framework" three.js avec un modèle déclaratif entité-composant, ce qui signifie que nous pouvons construire des scènes avec seulement du HTML. Voir la page [Construction d'une démo de base avec A-Frame](/fr/docs/Games/Techniques/3D_on_the_web/Building_up_a_basic_demo_with_A-Frame) pour le processus étape par étape de création de la démo . +A-Frame est un "framework" web pour construire des expériences 3D et de la réalité virtuelle. Sous le capot, il s'agit d'un "framework" three.js avec un modèle déclaratif entité-composant, ce qui signifie que nous pouvons construire des scènes avec seulement du HTML. Voir la page [Construction d'une démo de base avec A-Frame](/fr/docs/Games/Techniques/3D_on_the_web/Building_up_a_basic_demo_with_A-Frame) pour le processus étape par étape de création de la démo . ### Construction d'une démo de base avec Babylon.js @@ -67,7 +67,7 @@ PlayCanvas est un moteur de jeu 3D WebGL populaire ouvert sur GitHub, avec un é ### Construction d'une démo de base avec Three.js -Three.js, comme toute autre bibliothèque, vous donne un énorme avantage : au lieu d'écrire des centaines de lignes de code WebGL pour construire quelque chose d'intéressant, vous pouvez utiliser des fonctions intégrées pour le faire beaucoup plus facilement et plus rapidement. Voir la page [Construction d'une démo de base avec Three.js](/fr/docs/Games/Techniques/3D_on_the_web/Building_up_a_basic_demo_with_Three.js) pour le processus étape par étape de création de la démo . +Three.js, comme toute autre bibliothèque, vous donne un énorme avantage : au lieu d'écrire des centaines de lignes de code WebGL pour construire quelque chose d'intéressant, vous pouvez utiliser des fonctions intégrées pour le faire beaucoup plus facilement et plus rapidement. Voir la page [Construction d'une démo de base avec Three.js](/fr/docs/Games/Techniques/3D_on_the_web/Building_up_a_basic_demo_with_Three.js) pour le processus étape par étape de création de la démo . ### Autres outils diff --git a/files/fr/games/techniques/audio_for_web_games/index.md b/files/fr/games/techniques/audio_for_web_games/index.md index 8049e4ae04..9a5323ab2c 100644 --- a/files/fr/games/techniques/audio_for_web_games/index.md +++ b/files/fr/games/techniques/audio_for_web_games/index.md @@ -300,7 +300,7 @@ Regardons maintenant le code. Nous créons d'abord un nouveau {{domxref ("AudioC `start()` (anciennement appelé `noteOn ())` commence à lire un élément audio. `start ()` demande trois paramètres (facultatifs) : -1. when _(quand)_ : le temps absolu pour commencer la lecture . +1. when _(quand)_ : le temps absolu pour commencer la lecture . 2. where (offset) _(où)_ : la partie de l'audio qui doit commencer à être jouée. 3. how long _(combien de temps)_ : la durée pendant laquelle elle doit être jouée. @@ -316,7 +316,7 @@ Vous pouvez trouver que l'introduction d'une nouvelle piste sonne plus naturelle Pour ce faire, avant de jouer la piste que vous voulez synchroniser, vous devez calculer combien de temps cela va durer jusqu'au début de la prochaine unité musicale. -Voici un peu de code qui donne un tempo (le temps en secondes de votre battement / mesure), calcule combien de temps attendre pour jouer la partie suivante — vous alimentez la valeur initiale de la fonction `start ()` avec le premier paramètre qui prend le temps absolu de début de la lecture. Notez que le deuxième paramètre (où commencer à jouer à partir de la nouvelle piste) est relatif : +Voici un peu de code qui donne un tempo (le temps en secondes de votre battement / mesure), calcule combien de temps attendre pour jouer la partie suivante — vous alimentez la valeur initiale de la fonction `start ()` avec le premier paramètre qui prend le temps absolu de début de la lecture. Notez que le deuxième paramètre (où commencer à jouer à partir de la nouvelle piste) est relatif : ```js if (offset == 0) { @@ -347,7 +347,7 @@ Nous pouvons relier : - la direction des objets (mouvement de position et génération de l'effet Doppler) - l'environnement (caverneux, sous-marin, etc.) -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 . +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. |