From 728e7b64e54f3b6e56eaba38b65adbbaa42990ca Mon Sep 17 00:00:00 2001 From: julieng Date: Thu, 11 Nov 2021 07:45:08 +0100 Subject: move *.html to *.md --- files/fr/games/anatomy/index.html | 326 --------------- files/fr/games/anatomy/index.md | 326 +++++++++++++++ files/fr/games/examples/index.html | 128 ------ files/fr/games/examples/index.md | 128 ++++++ files/fr/games/index.html | 69 ---- files/fr/games/index.md | 69 ++++ files/fr/games/index/index.html | 11 - files/fr/games/index/index.md | 11 + files/fr/games/introduction/index.html | 128 ------ files/fr/games/introduction/index.md | 128 ++++++ .../index.html | 101 ----- .../index.md | 101 +++++ .../publishing_games/game_distribution/index.html | 137 ------- .../publishing_games/game_distribution/index.md | 137 +++++++ .../publishing_games/game_monetization/index.html | 101 ----- .../publishing_games/game_monetization/index.md | 101 +++++ .../publishing_games/game_promotion/index.html | 93 ----- .../games/publishing_games/game_promotion/index.md | 93 +++++ files/fr/games/publishing_games/index.html | 29 -- files/fr/games/publishing_games/index.md | 29 ++ .../techniques/2d_collision_detection/index.html | 94 ----- .../techniques/2d_collision_detection/index.md | 94 +++++ .../3d_on_the_web/basic_theory/index.html | 126 ------ .../techniques/3d_on_the_web/basic_theory/index.md | 126 ++++++ .../index.html | 49 --- .../index.md | 49 +++ .../index.html | 266 ------------ .../index.md | 266 ++++++++++++ files/fr/games/techniques/3d_on_the_web/index.html | 113 ------ files/fr/games/techniques/3d_on_the_web/index.md | 113 ++++++ .../techniques/audio_for_web_games/index.html | 385 ------------------ .../games/techniques/audio_for_web_games/index.md | 385 ++++++++++++++++++ files/fr/games/techniques/index.html | 31 -- files/fr/games/techniques/index.md | 31 ++ files/fr/games/tools/asm.js/index.html | 24 -- files/fr/games/tools/asm.js/index.md | 24 ++ files/fr/games/tools/index.html | 39 -- files/fr/games/tools/index.md | 39 ++ .../tutorials/2d_breakout_game_phaser/index.html | 62 --- .../tutorials/2d_breakout_game_phaser/index.md | 62 +++ .../bounce_off_the_walls/index.html | 109 ----- .../bounce_off_the_walls/index.md | 109 +++++ .../build_the_brick_field/index.html | 115 ------ .../build_the_brick_field/index.md | 115 ++++++ .../collision_detection/index.html | 133 ------ .../collision_detection/index.md | 133 ++++++ .../create_the_canvas_and_draw_on_it/index.html | 115 ------ .../create_the_canvas_and_draw_on_it/index.md | 115 ++++++ .../finishing_up/index.html | 107 ----- .../finishing_up/index.md | 107 +++++ .../game_over/index.html | 94 ----- .../game_over/index.md | 94 +++++ .../2d_breakout_game_pure_javascript/index.html | 59 --- .../2d_breakout_game_pure_javascript/index.md | 59 +++ .../mouse_controls/index.html | 58 --- .../mouse_controls/index.md | 58 +++ .../move_the_ball/index.html | 143 ------- .../move_the_ball/index.md | 143 +++++++ .../paddle_and_keyboard_controls/index.html | 138 ------- .../paddle_and_keyboard_controls/index.md | 138 +++++++ .../track_the_score_and_win/index.html | 92 ----- .../track_the_score_and_win/index.md | 92 +++++ .../index.html | 444 --------------------- .../index.md | 444 +++++++++++++++++++++ files/fr/games/tutorials/index.html | 29 -- files/fr/games/tutorials/index.md | 29 ++ 66 files changed, 3948 insertions(+), 3948 deletions(-) delete mode 100644 files/fr/games/anatomy/index.html create mode 100644 files/fr/games/anatomy/index.md delete mode 100644 files/fr/games/examples/index.html create mode 100644 files/fr/games/examples/index.md delete mode 100644 files/fr/games/index.html create mode 100644 files/fr/games/index.md delete mode 100644 files/fr/games/index/index.html create mode 100644 files/fr/games/index/index.md delete mode 100644 files/fr/games/introduction/index.html create mode 100644 files/fr/games/introduction/index.md delete mode 100644 files/fr/games/introduction_to_html5_game_development/index.html create mode 100644 files/fr/games/introduction_to_html5_game_development/index.md delete mode 100644 files/fr/games/publishing_games/game_distribution/index.html create mode 100644 files/fr/games/publishing_games/game_distribution/index.md delete mode 100644 files/fr/games/publishing_games/game_monetization/index.html create mode 100644 files/fr/games/publishing_games/game_monetization/index.md delete mode 100644 files/fr/games/publishing_games/game_promotion/index.html create mode 100644 files/fr/games/publishing_games/game_promotion/index.md delete mode 100644 files/fr/games/publishing_games/index.html create mode 100644 files/fr/games/publishing_games/index.md delete mode 100644 files/fr/games/techniques/2d_collision_detection/index.html create mode 100644 files/fr/games/techniques/2d_collision_detection/index.md delete mode 100644 files/fr/games/techniques/3d_on_the_web/basic_theory/index.html create mode 100644 files/fr/games/techniques/3d_on_the_web/basic_theory/index.md delete mode 100644 files/fr/games/techniques/3d_on_the_web/building_up_a_basic_demo_with_playcanvas/index.html create mode 100644 files/fr/games/techniques/3d_on_the_web/building_up_a_basic_demo_with_playcanvas/index.md delete mode 100644 files/fr/games/techniques/3d_on_the_web/building_up_a_basic_demo_with_three.js/index.html create mode 100644 files/fr/games/techniques/3d_on_the_web/building_up_a_basic_demo_with_three.js/index.md delete mode 100644 files/fr/games/techniques/3d_on_the_web/index.html create mode 100644 files/fr/games/techniques/3d_on_the_web/index.md delete mode 100644 files/fr/games/techniques/audio_for_web_games/index.html create mode 100644 files/fr/games/techniques/audio_for_web_games/index.md delete mode 100644 files/fr/games/techniques/index.html create mode 100644 files/fr/games/techniques/index.md delete mode 100644 files/fr/games/tools/asm.js/index.html create mode 100644 files/fr/games/tools/asm.js/index.md delete mode 100644 files/fr/games/tools/index.html create mode 100644 files/fr/games/tools/index.md delete mode 100644 files/fr/games/tutorials/2d_breakout_game_phaser/index.html create mode 100644 files/fr/games/tutorials/2d_breakout_game_phaser/index.md delete mode 100644 files/fr/games/tutorials/2d_breakout_game_pure_javascript/bounce_off_the_walls/index.html create mode 100644 files/fr/games/tutorials/2d_breakout_game_pure_javascript/bounce_off_the_walls/index.md delete mode 100644 files/fr/games/tutorials/2d_breakout_game_pure_javascript/build_the_brick_field/index.html create mode 100644 files/fr/games/tutorials/2d_breakout_game_pure_javascript/build_the_brick_field/index.md delete mode 100644 files/fr/games/tutorials/2d_breakout_game_pure_javascript/collision_detection/index.html create mode 100644 files/fr/games/tutorials/2d_breakout_game_pure_javascript/collision_detection/index.md delete mode 100644 files/fr/games/tutorials/2d_breakout_game_pure_javascript/create_the_canvas_and_draw_on_it/index.html create mode 100644 files/fr/games/tutorials/2d_breakout_game_pure_javascript/create_the_canvas_and_draw_on_it/index.md delete mode 100644 files/fr/games/tutorials/2d_breakout_game_pure_javascript/finishing_up/index.html create mode 100644 files/fr/games/tutorials/2d_breakout_game_pure_javascript/finishing_up/index.md delete mode 100644 files/fr/games/tutorials/2d_breakout_game_pure_javascript/game_over/index.html create mode 100644 files/fr/games/tutorials/2d_breakout_game_pure_javascript/game_over/index.md delete mode 100644 files/fr/games/tutorials/2d_breakout_game_pure_javascript/index.html create mode 100644 files/fr/games/tutorials/2d_breakout_game_pure_javascript/index.md delete mode 100644 files/fr/games/tutorials/2d_breakout_game_pure_javascript/mouse_controls/index.html create mode 100644 files/fr/games/tutorials/2d_breakout_game_pure_javascript/mouse_controls/index.md delete mode 100644 files/fr/games/tutorials/2d_breakout_game_pure_javascript/move_the_ball/index.html create mode 100644 files/fr/games/tutorials/2d_breakout_game_pure_javascript/move_the_ball/index.md delete mode 100644 files/fr/games/tutorials/2d_breakout_game_pure_javascript/paddle_and_keyboard_controls/index.html create mode 100644 files/fr/games/tutorials/2d_breakout_game_pure_javascript/paddle_and_keyboard_controls/index.md delete mode 100644 files/fr/games/tutorials/2d_breakout_game_pure_javascript/track_the_score_and_win/index.html create mode 100644 files/fr/games/tutorials/2d_breakout_game_pure_javascript/track_the_score_and_win/index.md delete mode 100644 files/fr/games/tutorials/html5_gamedev_phaser_device_orientation/index.html create mode 100644 files/fr/games/tutorials/html5_gamedev_phaser_device_orientation/index.md delete mode 100644 files/fr/games/tutorials/index.html create mode 100644 files/fr/games/tutorials/index.md (limited to 'files/fr') diff --git a/files/fr/games/anatomy/index.html b/files/fr/games/anatomy/index.html deleted file mode 100644 index 4a1bb06c8e..0000000000 --- a/files/fr/games/anatomy/index.html +++ /dev/null @@ -1,326 +0,0 @@ ---- -title: Anatomie d'un jeu vidéo -slug: Games/Anatomy -tags: - - Boucle Principale - - JavaScript - - Jeux - - requestAnimationFrame -translation_of: Games/Anatomy -original_slug: Jeux/Anatomie ---- -
{{GamesSidebar}}

  {{IncludeSubnav("/fr/docs/Jeux")}}

- -

Cet article se concentre sur l'anatomie et le flux de la plupart des jeux video à partir d'un point de vue technique, concernant la manière dont la boucle principale devrait tourner. Cela aide les débutants dans l'arène du développement à comprendre  ce qui est requis quand il est question de bâtir un jeu et comment les standards du web comme JavaScript leur est offert comme outil. Les programmeurs de jeux expérimentés et nouveaux dans le développement web pourront aussi en tirer bénéfice.

- -

Présenter, accepter, interpréter, calculer, repéter

- -

Le but de chaque jeu vidéo est de présenter à (aux) utilisateur(s) une situation, accepter leur entrée, interpréter ces signaux en actions, et calculer une nouvelle situation résultant de ces actes. Les jeux bouclent continuellement à travers ces niveaux, jusqu'à ce qu'une condition finale arrive (comme gagner, perdre, ou quitter le jeu). Sans surprise, ce modèle correspond à la manière dont un moteur de jeu est programmé.

- -

Ces spécificités dépendent du jeu.

- -

Certains jeu maintiennent ce cycle par les entrées du joueur. Imaginez que vous développez un jeu du type "trouvez les différences entre ces deux images". Ces jeux présentent deux images à l'utilisateur; ils accèptent leur clics (ou touchés); ils interprètent l'entrée comme un succès, une erreur, une pause, une interaction de menu, etc.; finalement, ils calculent une scène mise à jour resultant de l'entrée de donnée. La boucle du jeu évolue par l'entrée de l'utilisateur et s'arrête jusqu'à ce qu'il en soumette une nouvelle. C'est plus une approche au coup par coup qui ne demande pas une mise à jour continuelle de chaque image, mais juste quand le joueur réagit.

- -

D'autres jeux demandent un contrôle précis à chaque fraction de seconde. Les principes sont les mêmes avec une légère différence: chaque animation fait progresser le cycle et tout changement d'entrée d'un utilisateur est capturé dès que possible. Ce modèle au coup par image  est implementé dans ce que l'on appelle la boucle principale. Si vos boucles de jeu sont basées sur le temps alors ce sera là-dessus que seront basées vos simulations.

- -

Mais parfois ce n'est pas un contrôle dans le temps. Votre boucle de jeu peut être similaire à l'exemple cherchez les différences et se baser directement sur les entrées. Cela peut être nécessaire d'avoir à la fois les entrées et un temps simulé. Cela peut aussi être basé sur une boucle qui utilise d'autre chose.

- -

Le JavaScript moderne — comme décrit dans les prochaines sections — heureusement, facilite le développement d'une boucle efficace éxécutée une fois par seconde. Bien sûr, votre jeu sera optimisé au long de sa conception. Si quelque chose doit s'apparenter à un évènement peu fréquent alors il sera préférable de briser la boucle principale (mais pas tout le temps).

- -

Construire une boucle principale en JavaScript

- -

JavaScript travaille beaucoup mieux avec des évènements et des fonctions de rappel. Les navigateur modernes s'efforcent d'appeler des méthodes au moment où elles sont nécessaires et mises en pause (ou font leur travail) le reste du temps. Il est de bonne pratique d'attacher votre code au moment le plus approprié. Pensez à quel moment votre fonction à besoin d'être appelée sur un interval de temps strict, à chaque image, ou seulement après que quelque chose se soit passé. Être plus spécifique avec le navigateur quand votre fonction à besoin d'être appelée permet au navigateur d'être optimisé une fois votre boucle appelée. De plus, cela peut rendre votre tâche plus aisée.

- -

Certain programmes ont besoin d'être lancés image-par-image alors pourquoi y attacher quelque chose d'autre que le taux de rafraîchissement du navigateur ? Dans le web, {{ domxref("window.requestAnimationFrame()") }} sera la fondation de bien des boucles principales. Une fonction de rappel doit lui être passée quand elle est appelée. Cette fonction de rappel sera éxécutée à un moment précis avant le prochain rafraîchissement. Voici un exemple d'une simple boucle principale:

- -
window.main = function () {
-  window.requestAnimationFrame( main );
-
-  //Qu'importe ce que votre boucle principale doit faire.
-};
-
-main(); //Débuter le cycle.
- -

Note: Dans chaque méthodes main() présentées ici, nous planifions un nouveau requestAnimationFrame avant de lancer le contenu de notre boucle. Ce n'est pas par accident et c'est considéré comme une meilleure pratique. Appeler le prochain requestAnimationFrame plus tôt assure que le navigateur la recevra à temps pour le planifier convenablement même si vous image courrante rate la fenêtre de synchronisation principale (VSync).

- -

La portion de code ci-dessus comporte deux déclarations. La première créée une fonction comme variable globale appelée main(). Cette fonction effectue un travail et indique aussi au navigateur de s'appeler elle-même au prochain window.requestAnimationFrame(). La seconde déclaration appelle la fonction main(), definie dans la première déclaration. Parceque main() est appelé une fois dans la seconde déclaration et chaque appel de celle-ci la place dans la queue des choses à faire à chaque image, main() est synchronisée à votre taux de rafraîchissement.

- -

Bien sûr, cette boucle n'est pas parfaite. Avant que nous discutions de manières de la modifier, parlons de ce qu'elle fait de bien.

- -

Temporiser la boucle principale avec le rafraîchissement du navigateur permet à votre boucle d'être éxécutée aussi fréquemment que le navigateur à besoin de rafraîchir l'écran. Cela vous permet de contrôler chaque image de votre animation. C'est aussi beaucoup plus simple car main() est la seule fonction qui est bouclée. Dans un jeu de tir à la première personne (ou un jeu équivalent) on présente une nouvelle scène à chaque image. Vous ne pouvez donc pas obtenir quelque chose de plus fluide que cela.

- -

Pourtant n'imaginez pas que les animations requièrent un contrôle image-par-image. De simples animations peuvent être éxécutées, même avec une accélération matérielle, avec des animations CSS et d'autres outils inclus dans le navigateur. Bon nombre vont vous faciliter la vie.

- -

Construire une meilleure boucle principale en Javascript

- -

Il y a deux problèmes évidents avec notre boucle principale précédente: main() pollue l'objet {{ domxref("window") }} (où sont stockées toutes les variables globales) et l'exemple donné ne nous permet pas de stopper la boucle à moins que l'onglet du navigateur ne soit fermé ou rafraîchit. Pour le premier problème, si vous désirez que la boucle principale tourne simplement sans y accéder directement, vous pouvez en crééer une fonction à accès immédiat -(FAI ou "Immediately-Invoked Function Expression - IIFE").

- -
/*
-* Débuter avec le point virgue au cas où le code qui réside au-dessus de cet exemple
-* s'appuie sur l'insertion automatique de point virgule (ASI). Le navigateur peut alors accidentellement
-* penser que c'est un exemple complet provenant de la ligne précédente. Le point virgule de tête
-* marque le début de notre nouvelle ligne si la précédente n'était pas vide ou complétée.
-*/
-
-;(function () {
-  function main() {
-    window.requestAnimationFrame( main );
-
-    // Contenu de votre boucle principale.
-  }
-
-  main(); // Débute le cycle
-})();
- -

Quand le navigateur passe à travers la FAI, cela va définir votre boucle principale et immédiatement la mettre en file d'attente pour la prochaine image. Cela ne sera attaché à aucun objet et main (ou main() pour les méthodes) sera un nom valide inutilisé dans le reste de l'application, libre d'être défini comme quelque chose d'autre.

- -

Note: En pratique, il est plus courant de prévenir le prochain requestAnimationFrame() avec une déclaration "if", plutôt que d'appeler cancelAnimationFrame().

- -

Pour le second problème, arrêter la boucle principale, vous aurez besoin d'annuler l'appel à main() avec {{ domxref("window.cancelAnimationFrame()") }}. Vous aurez besoin de passer la valeur donneé par cancelAnimationFrame() en référence à requestAnimationFrame() quand elle a été appelée en dernier. Assumons que vos fonctions de jeu et les variables sont bâties dans un espace de nom appelé MyGame. Avec notre dernier exemple étendu, la boucle principale aura maintenant l'air de ceci:

- -
/*
-* Débuter avec le point virgue au cas où le code qui réside au-dessus de cet exemple
-* s'appuie sur l'insertion automatique de point virgule (ASI). Le navigateur peut alors accidentellement
-* penser que c'est un exemple complet provenant de la ligne précédente. Le point virgule de tête
-* marque le début de notre nouvelle ligne si la précédente n'était pas vide ou complétée.
-*
-* Assumons aussi que MyGame est défini précédemment.
-*/
-
-;(function () {
-  function main() {
-    MyGame.stopMain = window.requestAnimationFrame( main );
-
-    // Contenu de votre boucle principale.
-  }
-
-  main(); // Début du cycle
-})();
- -

Nous avons maintenant une variable déclarée dans l'espace de nom MyGame, que nous appelons stopMain, qui contient la valeur de l'appel de notre boucle principale requestAnimationFrame() la plus récente. À tout moment, nous pouvons stopper la boucle principale en disant au navigateur d'annuler la requête qui correspond à notre valeur.

- -
window.cancelAnimationFrame( MyGame.stopMain );
- -

La clé pour programmer une boucle principale, en JavaScript, est d'attacher n'importe quel évènement qui doit diriger votre action et porter attention aux systèmes interconnectés. Vous pourriez avoir différents composants dirigés par différents évènements. Cela paraît comme d'une complexité inutile mais cela peut être une bonne optimisation (pas nécessairement, bien sûr). Le problème c'est que vous ne programmez pas une boucle principale typique. En Javascript, vous utilisez la boucle principale du navigateur et vous essayez de le faire avec efficacité.

- -

Construire une boucle principale encore plus optimisée en JavaScript

- -

En fin de compte, en JavaScript, le navigateur roule sa propre boucle principale et votre code existe dans certaines de ses étapes. La section ci-dessus décrit des boucles principales qui essaient de ne pas lâcher le contrôle du navigateur. Ces méthodes principales s'attachent à window.requestAnimationFrame(), qui demandent au navigateur le contrôle sur la prochaine image qui arrive. C'est au navigateur de décider de la gestion de sa boucle principale. Les spécifications du W3C en matière de requestAnimationFrame ne définissent pas exactement quand les navigateur doivent éxécuter les rappels de requestAnimationFrame. Cela pourrait être bénéfique car cela laisse aux concepteurs de navigateurs la liberté d'expérimenter les solutions qu'ils pensent être les meilleures au travers du temps.

- -

Les versions modernes de Firefox et Google Chrome (et probablement d'autres)tentent de connecter les rappels de requestAnimationFrame à leur fil principal au tout début de chaque image. De ce fait, le déroulement principal essaye d'être le plus possible comme ci-dessous:

- -
    -
  1. Débuter une nouvelle image (pendant que la précédente est prise en charge par l'affichage).
    2. -
  2. Passer à travers la liste de retours requestAnimationFrame et les appeler.
    3. -
  3. Passer le ramasse-miettes et autres tâches par-images quand les retours ci-dessous cessent de controler le fil principal.
    4. -
  4. Se mettre en veille (à moins qu'un évènement interrompe la sieste du navigateur) jusqu'à ce que le moniteur ne soit prêt pour votre image (VSync) et répète.
    5. -
- -

Vous pouvez considérer que développer une application en temps réél est comme avoir un temps donné pour faire le travail. Toutes les étapes ci-dessus doivent prendre effet toutes les 16.5 millisecondes pour fonctionner avec un affichage de 60Hz. Les navigateurs invoquent leur code aussitôt que possible pour donner un maximum de temps aux calculs. Votre fil principal va souvent débuter par les tâches qui ne sont même pas dans le fil principal (tel que la rasterisation ou les ombrages en WebGL). Les longs calculs peuvent être fait par un Web Worker ou une accélération matérielle en même temps que le navigateur utilise son propre fil principal pour passer le ramasse-miette, ces autres tâches, ou gérer les évènements asynchrones.

- -

Bien que nous ne discutons pas du gain de temps, plusieurs navigateur ont un outil appelé Temps Haute Résolution. L'objet {{ domxref("Date") }} n'est plus la méthode reconnue pour temporiser les évènements car elle est très imprécise et peut être modifiée par l'horloge système. Le Temps Haute Résolution, d'un autre côté, compte le nombre de millisecondes depuis navigationStart (quand le document précédent est déchargé). Cette valeur est retournée en un nombre décimal précis au millième de seconde. Il est connu comme étant {{ domxref("DOMHighResTimeStamp") }} mais, à toutes fins utiles, considérez le comme un nombre décimal à virgule flottante.

- -

Note: Les systèmes (matériels ou logiciels) qui ne sont pas capables d'avoir une précision à la microseconde sont autorisés à fournir une précision à la milliseconde au minimum. Sinon, ils devraient fournir une précision de 0.001ms s'ils en sont capables.

- -

Seule, cette valeur n'est pas très utile, considérant qu'il est relatif à un évènement peu intéressant, mais ils peut quand même être soustrait d'une autre prise de temps pour déterminer plus précisément combien de temps s'est déroulé entre ces deux poins. Pour obtenir une de ces prises de temps, vous pouvez appeler la fonction window.performance.now() et stocker le résultat dans une variable.

- -
var tNow = window.performance.now();
-
- -

Retournons sur le sujet de la boucle principale. Il vous arrivera souvent de vouloir savoir quand votre boucle principale a été invoquée. Parce que cela est commun, la fonction window.requestAnimationFrame() fourni toujours un DOMHighResTimeStamp avec un argument de retour quand elles sont éxécutées. Cela mène à une amélioration de notre boucle précédente.

- -
/*
-* Débuter avec le point virgue au cas où le code qui réside au-dessus de cet exemple
-* s'appuie sur l'insertion automatique de point virgule (ASI). Le navigateur peut alors accidentellement
-* penser que c'est un exemple complet provenant de la ligne précédente. Le point virgule de tête
-* marque le début de notre nouvelle ligne si la précédente n'était pas vide ou complétée.
-*
-* Assumons aussi que MyGame est défini précédemment.
-*/
-
-;(function () {
-  function main( tFrame ) {
-    MyGame.stopMain = window.requestAnimationFrame( main );
-
-    // Contenu de votre boucle principale.
-    // tFrame, provenant de "function main ( tFrame )", est maintenant un DOMHighResTimeStamp (Temps Haute Résolution du DOM) fourni par rAF.
-  }
-
-  main(); // Débute le cycle
-})();
- -

Plusieurs autres optimisations sont possibles et cela dépend vraiment de ce que votre jeu tente d'accomplir. Le genre de votre jeu va visiblement faire la différence mais il peut être aussi subtil que cela. Vous pourriez dessiner un pixel à la fois sur un canvas ou vous pourriez étager des éléments du DOM (incluant de multiples canvas de WebGL avec des arrières-plans transparents si vous le désirez) en une hierarchie complexe. Chacunes de ces solutions mènera à des contraintes et opportunités différentes.

- -

Il est temps de la... décision

- -

Vous aurez besoin de faire un choix difficile concernant votre boucle principale: comment simuler l'évolution du temps. Si vous désirez un contrôle par image alors vous aurez besoin de déterminer combien sera-t-il nécessaire à votre jeu d'être remis à jour et dessiné. Vous pourriez même vouloir une mise à jour et dessiner à différents taux (de rafraîchissement). Vous aurez aussi besoin de considérer combien comment votre jeu échouera gracieusement si le système de l'utilisateur ne peut soutenir la charge de travail. Commençons par considérer que vous serez capables de gérer les entrées de l'utilisateur et de mettre à jour l'état du jeu à chaque fois que vous dessinez. Nous ramifierons après.

- -

Note: Changer la manière dont votre boucle principale gère le temps est un cauchemar de débuggage, partout. Pensez à vos besoins, précautionneusement, avant de travailler sur votre boucle principale.

- -

De quoi les jeux dans le navigateur devraient avoir l'air

- -

Si votre jeu peut atteindre le maximum du taux de rafraîchissement sur n'importe quel matériel que vous supportez, alors votre travail est plutôt facile. Vous pouvez simplement mettre à jour, effectuer le rendu, et ne rien faire avant la synchronisation verticale (VSync).

- -
/*
-* Débuter avec le point virgue au cas où le code qui réside au-dessus de cet exemple
-* s'appuie sur l'insertion automatique de point virgule (ASI). Le navigateur peut alors accidentellement
-* penser que c'est un exemple complet provenant de la ligne précédente. Le point virgule de tête
-* marque le début de notre nouvelle ligne si la précédente n'était pas vide ou complétée.
-*
-* Assumons aussi que MyGame est défini précédemment.
-*/
-
-;(function () {
-  function main( tFrame ) {
-    MyGame.stopMain = window.requestAnimationFrame( main );
-
-    update( tFrame ); //Appelez votre méthode de mise à jour. Dans notre cas, nous lui donnons la capture de temps rAF.
-    render();
-  }
-
-  main(); // Start the cycle
-})();
- -

Si le maximum du taux de rafraîchissement ne peut être atteind, les paramètres de qualités pourraient être mis à jour pour rester sous notre gain en temps. L'exemple le plus célèbre de ce concept est le jeu de id Software, RAGE. Ce jeu a retiré à l'utilisateur le contrôle afin de conserver son temps de calcul à environ 16ms (ou environ 60ips). Si le calcul prenait trop de temps alors la résolution serait diminuée, les textures et autres éléments échoueraient au chargement et à l'affichage, et ainsi de suite. Ce cas (non-web) a créé plusieurs hypothèses et faits:

- - - -

Autres manières de gérer les besoins du taux de rafraîchissement variable

- -

D'autres méthodes d'approcher le problème existent.

- -

Une technique commune est de mettre à jour la simulation à une fréquence constante et dessiner autant (ou au moins) que le taux actuel le permet. Cette méthode de mise à jour peut continuer à boucler sans se soucier de ce que l'utilisateur voit. Cette méthode peut voir la dernière mise à jour, et quand elle est arrivée. Quand le dessin sait quand il est représenté, et le temps simulé pour la dernière mise à jour, il peut prédire une image plausible à dessiner. Cela n'a pas d'importance si c'est plus fréquent que la mise à jour officielle (ou même moins fréquente). La méthode de mise à jour établis des points de contrôle, autant que le système le permet, la méthode de rendu va dessiner autour de ces intants de temps. Il y a plusieurs manières de séparer la méthode de mise à jour dans les standards du web:

- - - -

Chacune de ces méthodes ont un compromis similaire:

- - - -

Une méthode séparée de mise à jour et de dessin pourrait avoir l'air de l'exemple suivant. Pour les besoins de la démonstration, l'exemple est basé sur le troisième point, sans l'utilisation des Web Workers par soucis de lecture (et, soyons honnête, pour faciliter l'écriture).

- -

Note: Cet exemple spécifiquement, aurait besoin d'une relecture.

- -
/*
-* Débuter avec le point virgue au cas où le code qui réside au-dessus de cet exemple
-* s'appuie sur l'insertion automatique de point virgule (ASI). Le navigateur peut alors accidentellement
-* penser que c'est un exemple complet provenant de la ligne précédente. Le point virgule de tête
-* marque le début de notre nouvelle ligne si la précédente n'était pas vide ou complétée.
-*
-* Assumons aussi que MyGame est défini précédemment.
-*
-*
-* MyGame.lastRender fait le suivi du dernier poinçon de temps fourni par requestAnimationFrame.
-* MyGame.lastTick fait le suivi de la dernière mise à jour. Toujours incrémenté par tickLength.
-* MyGame.tickLength est à quelle fréquence le jeu est mis à jour. C'est 20 Hz (50ms) ici.
-*
-* timeSinceTick est le temps entre un retour de requestAnimationFrame et la dernière mise à jour.
-* numTicks est combien de mises à jour auraient dû avoir lieu entre 2 rendus d'images.
-*
-* render() se voit passé tFrame car il est considéré que la méthode de rendu va calculer
-           combien de temps se sera écoulé depuis la mise à jour la plus récente pour
-           extrapolation (purement cosmétique pour des systèmes rapides). La scène est dessinée.
-*
-* update() calcule l'état du jeu comme point donné dans le temps. Ça devrait toujours être
-           incrémenté par tickLength. C'est l'autorité de l'état du jeu. On lui passe le
-           DOMHighResTimeStamp pour le temps que cela représente (qui, à nouveau, est toujours
-           la dernière mise à jour + MyGame.tickLength qu'une pause ne soit ajoutée, etc.)
-*
-* setInitialState() réalise n'importe quel tâche mise de côté avant que la boucle principale ne doive tourner.
-*                   Ceci est juste un exemple générique d'une fonction que vous devriez ajouter.
-*/
-
-;(function () {
-  function main( tFrame ) {
-    MyGame.stopMain = window.requestAnimationFrame( main );
-    var nextTick = MyGame.lastTick + MyGame.tickLength;
-    var numTicks = 0;
-
-    //Si tFrame < nextTick alors 0 ticks doit être mis à jour (0 est par défaut pour numTicks).
-    //Si tFrame = nextTick alors 1 tick doit être mis à jour (et ainsi de suite).
-    //Note: Comme nous le mentionons dans le sommaire, vous devriez faire un suivi de la taille de numTicks.
-    //S'il est important, alors soit votre jeu est en veille, soit votre machine ne répond plus.
-    if (tFrame > nextTick) {
-      var timeSinceTick = tFrame - MyGame.lastTick;
-      numTicks = Math.floor( timeSinceTick / MyGame.tickLength );
-    }
-
-    queueUpdates( numTicks );
-    render( tFrame );
-    MyGame.lastRender = tFrame;
-  }
-
-  function queueUpdates( numTicks ) {
-    for(var i=0; i < numTicks; i++) {
-      MyGame.lastTick = MyGame.lastTick + MyGame.tickLength; //Maitenant lastTick est ce tick.
-      update( MyGame.lastTick );
-    }
-  }
-
-  MyGame.lastTick = performance.now();
-  MyGame.lastRender = MyGame.lastTick; //Prétendre que le premier dessin était sur la première mise à jour.
-  MyGame.tickLength = 50; //Cela positionne votre simulation pour tourner à 20Hz (50ms)
-
-  setInitialState();
-  main(performance.now()); // Débute le cycle
-})();
- -

Une autre alternative est de simplement faire certaines choses moins souvent. Si une portion de votre boucle de mise à jour est difficile à calculer et intense (en temps), vous devrier considérer réduire sa fréquence et, idéalement, la diviser en portions à travers une période plus allongée. Un exemple implicite de cela est rencontré dans "The Artillery Blog for Artillery Games", où ils ajustent leur taux de création de miettes pour optimiser leur ramasse-miettes. Apparemment, le nettoyage des ressources n'est pas sensible au temps (spécialement si le nettoyage est plus dérangeant que le la miette elle-même).

- -

Cela peut aussi s'appliquer à vos propres tâches. Elles sont de bonnes candidates pour en générer quand les ressources disponibles deviennent un problème.

- -

Sommaire

- -

J'aimerai être clair que rien de ce qu'il y a ci-dessus, ou rien de cela, ne puisse être ce qu'il y a de mieux pour votre jeu. La décision correcte dépend entièrement des compromis que vous êtes prêts (ou pas) à faire. La préocupation est principalement de permuter vers une autre option. Heureusement, je n'en ai pas l'expérience mais j'ai entendu dire que c'est un jeu de cache-cache exténuant.

- -

Une chose importante à retenir pour les plateformes gérées, telles que le web, est que votre boucle pourrait arrêter son éxécution pour une période de temps significative. Cela pourrait arriver quand l'utilisateur déselectionne votre onglet et que le navigateur tombe en veille (ou ralenti) son interval de retour requestAnimationFrame. Vous avez plusieurs façons de gérer cela et cela peut dépendre de votre jeu, s'il est pour un seul joueur ou multijoueurs. Certains des choix sont:

- - - -

Une fois que votre boucle principale a été développée et que vous avez pris vos décisions sur un lot d'hypothèses et de compromis qui conviendront à votre jeu, cela devient juste une question d'utilisation de vos décisions pour calculer n'importe quelle physique applicable, intelligence artificielle, sons, synchronisation réseau, et quoique votre jeu ai besoin.

diff --git a/files/fr/games/anatomy/index.md b/files/fr/games/anatomy/index.md new file mode 100644 index 0000000000..4a1bb06c8e --- /dev/null +++ b/files/fr/games/anatomy/index.md @@ -0,0 +1,326 @@ +--- +title: Anatomie d'un jeu vidéo +slug: Games/Anatomy +tags: + - Boucle Principale + - JavaScript + - Jeux + - requestAnimationFrame +translation_of: Games/Anatomy +original_slug: Jeux/Anatomie +--- +
{{GamesSidebar}}

  {{IncludeSubnav("/fr/docs/Jeux")}}

+ +

Cet article se concentre sur l'anatomie et le flux de la plupart des jeux video à partir d'un point de vue technique, concernant la manière dont la boucle principale devrait tourner. Cela aide les débutants dans l'arène du développement à comprendre  ce qui est requis quand il est question de bâtir un jeu et comment les standards du web comme JavaScript leur est offert comme outil. Les programmeurs de jeux expérimentés et nouveaux dans le développement web pourront aussi en tirer bénéfice.

+ +

Présenter, accepter, interpréter, calculer, repéter

+ +

Le but de chaque jeu vidéo est de présenter à (aux) utilisateur(s) une situation, accepter leur entrée, interpréter ces signaux en actions, et calculer une nouvelle situation résultant de ces actes. Les jeux bouclent continuellement à travers ces niveaux, jusqu'à ce qu'une condition finale arrive (comme gagner, perdre, ou quitter le jeu). Sans surprise, ce modèle correspond à la manière dont un moteur de jeu est programmé.

+ +

Ces spécificités dépendent du jeu.

+ +

Certains jeu maintiennent ce cycle par les entrées du joueur. Imaginez que vous développez un jeu du type "trouvez les différences entre ces deux images". Ces jeux présentent deux images à l'utilisateur; ils accèptent leur clics (ou touchés); ils interprètent l'entrée comme un succès, une erreur, une pause, une interaction de menu, etc.; finalement, ils calculent une scène mise à jour resultant de l'entrée de donnée. La boucle du jeu évolue par l'entrée de l'utilisateur et s'arrête jusqu'à ce qu'il en soumette une nouvelle. C'est plus une approche au coup par coup qui ne demande pas une mise à jour continuelle de chaque image, mais juste quand le joueur réagit.

+ +

D'autres jeux demandent un contrôle précis à chaque fraction de seconde. Les principes sont les mêmes avec une légère différence: chaque animation fait progresser le cycle et tout changement d'entrée d'un utilisateur est capturé dès que possible. Ce modèle au coup par image  est implementé dans ce que l'on appelle la boucle principale. Si vos boucles de jeu sont basées sur le temps alors ce sera là-dessus que seront basées vos simulations.

+ +

Mais parfois ce n'est pas un contrôle dans le temps. Votre boucle de jeu peut être similaire à l'exemple cherchez les différences et se baser directement sur les entrées. Cela peut être nécessaire d'avoir à la fois les entrées et un temps simulé. Cela peut aussi être basé sur une boucle qui utilise d'autre chose.

+ +

Le JavaScript moderne — comme décrit dans les prochaines sections — heureusement, facilite le développement d'une boucle efficace éxécutée une fois par seconde. Bien sûr, votre jeu sera optimisé au long de sa conception. Si quelque chose doit s'apparenter à un évènement peu fréquent alors il sera préférable de briser la boucle principale (mais pas tout le temps).

+ +

Construire une boucle principale en JavaScript

+ +

JavaScript travaille beaucoup mieux avec des évènements et des fonctions de rappel. Les navigateur modernes s'efforcent d'appeler des méthodes au moment où elles sont nécessaires et mises en pause (ou font leur travail) le reste du temps. Il est de bonne pratique d'attacher votre code au moment le plus approprié. Pensez à quel moment votre fonction à besoin d'être appelée sur un interval de temps strict, à chaque image, ou seulement après que quelque chose se soit passé. Être plus spécifique avec le navigateur quand votre fonction à besoin d'être appelée permet au navigateur d'être optimisé une fois votre boucle appelée. De plus, cela peut rendre votre tâche plus aisée.

+ +

Certain programmes ont besoin d'être lancés image-par-image alors pourquoi y attacher quelque chose d'autre que le taux de rafraîchissement du navigateur ? Dans le web, {{ domxref("window.requestAnimationFrame()") }} sera la fondation de bien des boucles principales. Une fonction de rappel doit lui être passée quand elle est appelée. Cette fonction de rappel sera éxécutée à un moment précis avant le prochain rafraîchissement. Voici un exemple d'une simple boucle principale:

+ +
window.main = function () {
+  window.requestAnimationFrame( main );
+
+  //Qu'importe ce que votre boucle principale doit faire.
+};
+
+main(); //Débuter le cycle.
+ +

Note: Dans chaque méthodes main() présentées ici, nous planifions un nouveau requestAnimationFrame avant de lancer le contenu de notre boucle. Ce n'est pas par accident et c'est considéré comme une meilleure pratique. Appeler le prochain requestAnimationFrame plus tôt assure que le navigateur la recevra à temps pour le planifier convenablement même si vous image courrante rate la fenêtre de synchronisation principale (VSync).

+ +

La portion de code ci-dessus comporte deux déclarations. La première créée une fonction comme variable globale appelée main(). Cette fonction effectue un travail et indique aussi au navigateur de s'appeler elle-même au prochain window.requestAnimationFrame(). La seconde déclaration appelle la fonction main(), definie dans la première déclaration. Parceque main() est appelé une fois dans la seconde déclaration et chaque appel de celle-ci la place dans la queue des choses à faire à chaque image, main() est synchronisée à votre taux de rafraîchissement.

+ +

Bien sûr, cette boucle n'est pas parfaite. Avant que nous discutions de manières de la modifier, parlons de ce qu'elle fait de bien.

+ +

Temporiser la boucle principale avec le rafraîchissement du navigateur permet à votre boucle d'être éxécutée aussi fréquemment que le navigateur à besoin de rafraîchir l'écran. Cela vous permet de contrôler chaque image de votre animation. C'est aussi beaucoup plus simple car main() est la seule fonction qui est bouclée. Dans un jeu de tir à la première personne (ou un jeu équivalent) on présente une nouvelle scène à chaque image. Vous ne pouvez donc pas obtenir quelque chose de plus fluide que cela.

+ +

Pourtant n'imaginez pas que les animations requièrent un contrôle image-par-image. De simples animations peuvent être éxécutées, même avec une accélération matérielle, avec des animations CSS et d'autres outils inclus dans le navigateur. Bon nombre vont vous faciliter la vie.

+ +

Construire une meilleure boucle principale en Javascript

+ +

Il y a deux problèmes évidents avec notre boucle principale précédente: main() pollue l'objet {{ domxref("window") }} (où sont stockées toutes les variables globales) et l'exemple donné ne nous permet pas de stopper la boucle à moins que l'onglet du navigateur ne soit fermé ou rafraîchit. Pour le premier problème, si vous désirez que la boucle principale tourne simplement sans y accéder directement, vous pouvez en crééer une fonction à accès immédiat -(FAI ou "Immediately-Invoked Function Expression - IIFE").

+ +
/*
+* Débuter avec le point virgue au cas où le code qui réside au-dessus de cet exemple
+* s'appuie sur l'insertion automatique de point virgule (ASI). Le navigateur peut alors accidentellement
+* penser que c'est un exemple complet provenant de la ligne précédente. Le point virgule de tête
+* marque le début de notre nouvelle ligne si la précédente n'était pas vide ou complétée.
+*/
+
+;(function () {
+  function main() {
+    window.requestAnimationFrame( main );
+
+    // Contenu de votre boucle principale.
+  }
+
+  main(); // Débute le cycle
+})();
+ +

Quand le navigateur passe à travers la FAI, cela va définir votre boucle principale et immédiatement la mettre en file d'attente pour la prochaine image. Cela ne sera attaché à aucun objet et main (ou main() pour les méthodes) sera un nom valide inutilisé dans le reste de l'application, libre d'être défini comme quelque chose d'autre.

+ +

Note: En pratique, il est plus courant de prévenir le prochain requestAnimationFrame() avec une déclaration "if", plutôt que d'appeler cancelAnimationFrame().

+ +

Pour le second problème, arrêter la boucle principale, vous aurez besoin d'annuler l'appel à main() avec {{ domxref("window.cancelAnimationFrame()") }}. Vous aurez besoin de passer la valeur donneé par cancelAnimationFrame() en référence à requestAnimationFrame() quand elle a été appelée en dernier. Assumons que vos fonctions de jeu et les variables sont bâties dans un espace de nom appelé MyGame. Avec notre dernier exemple étendu, la boucle principale aura maintenant l'air de ceci:

+ +
/*
+* Débuter avec le point virgue au cas où le code qui réside au-dessus de cet exemple
+* s'appuie sur l'insertion automatique de point virgule (ASI). Le navigateur peut alors accidentellement
+* penser que c'est un exemple complet provenant de la ligne précédente. Le point virgule de tête
+* marque le début de notre nouvelle ligne si la précédente n'était pas vide ou complétée.
+*
+* Assumons aussi que MyGame est défini précédemment.
+*/
+
+;(function () {
+  function main() {
+    MyGame.stopMain = window.requestAnimationFrame( main );
+
+    // Contenu de votre boucle principale.
+  }
+
+  main(); // Début du cycle
+})();
+ +

Nous avons maintenant une variable déclarée dans l'espace de nom MyGame, que nous appelons stopMain, qui contient la valeur de l'appel de notre boucle principale requestAnimationFrame() la plus récente. À tout moment, nous pouvons stopper la boucle principale en disant au navigateur d'annuler la requête qui correspond à notre valeur.

+ +
window.cancelAnimationFrame( MyGame.stopMain );
+ +

La clé pour programmer une boucle principale, en JavaScript, est d'attacher n'importe quel évènement qui doit diriger votre action et porter attention aux systèmes interconnectés. Vous pourriez avoir différents composants dirigés par différents évènements. Cela paraît comme d'une complexité inutile mais cela peut être une bonne optimisation (pas nécessairement, bien sûr). Le problème c'est que vous ne programmez pas une boucle principale typique. En Javascript, vous utilisez la boucle principale du navigateur et vous essayez de le faire avec efficacité.

+ +

Construire une boucle principale encore plus optimisée en JavaScript

+ +

En fin de compte, en JavaScript, le navigateur roule sa propre boucle principale et votre code existe dans certaines de ses étapes. La section ci-dessus décrit des boucles principales qui essaient de ne pas lâcher le contrôle du navigateur. Ces méthodes principales s'attachent à window.requestAnimationFrame(), qui demandent au navigateur le contrôle sur la prochaine image qui arrive. C'est au navigateur de décider de la gestion de sa boucle principale. Les spécifications du W3C en matière de requestAnimationFrame ne définissent pas exactement quand les navigateur doivent éxécuter les rappels de requestAnimationFrame. Cela pourrait être bénéfique car cela laisse aux concepteurs de navigateurs la liberté d'expérimenter les solutions qu'ils pensent être les meilleures au travers du temps.

+ +

Les versions modernes de Firefox et Google Chrome (et probablement d'autres)tentent de connecter les rappels de requestAnimationFrame à leur fil principal au tout début de chaque image. De ce fait, le déroulement principal essaye d'être le plus possible comme ci-dessous:

+ +
    +
  1. Débuter une nouvelle image (pendant que la précédente est prise en charge par l'affichage).
    2. +
  2. Passer à travers la liste de retours requestAnimationFrame et les appeler.
    3. +
  3. Passer le ramasse-miettes et autres tâches par-images quand les retours ci-dessous cessent de controler le fil principal.
    4. +
  4. Se mettre en veille (à moins qu'un évènement interrompe la sieste du navigateur) jusqu'à ce que le moniteur ne soit prêt pour votre image (VSync) et répète.
    5. +
+ +

Vous pouvez considérer que développer une application en temps réél est comme avoir un temps donné pour faire le travail. Toutes les étapes ci-dessus doivent prendre effet toutes les 16.5 millisecondes pour fonctionner avec un affichage de 60Hz. Les navigateurs invoquent leur code aussitôt que possible pour donner un maximum de temps aux calculs. Votre fil principal va souvent débuter par les tâches qui ne sont même pas dans le fil principal (tel que la rasterisation ou les ombrages en WebGL). Les longs calculs peuvent être fait par un Web Worker ou une accélération matérielle en même temps que le navigateur utilise son propre fil principal pour passer le ramasse-miette, ces autres tâches, ou gérer les évènements asynchrones.

+ +

Bien que nous ne discutons pas du gain de temps, plusieurs navigateur ont un outil appelé Temps Haute Résolution. L'objet {{ domxref("Date") }} n'est plus la méthode reconnue pour temporiser les évènements car elle est très imprécise et peut être modifiée par l'horloge système. Le Temps Haute Résolution, d'un autre côté, compte le nombre de millisecondes depuis navigationStart (quand le document précédent est déchargé). Cette valeur est retournée en un nombre décimal précis au millième de seconde. Il est connu comme étant {{ domxref("DOMHighResTimeStamp") }} mais, à toutes fins utiles, considérez le comme un nombre décimal à virgule flottante.

+ +

Note: Les systèmes (matériels ou logiciels) qui ne sont pas capables d'avoir une précision à la microseconde sont autorisés à fournir une précision à la milliseconde au minimum. Sinon, ils devraient fournir une précision de 0.001ms s'ils en sont capables.

+ +

Seule, cette valeur n'est pas très utile, considérant qu'il est relatif à un évènement peu intéressant, mais ils peut quand même être soustrait d'une autre prise de temps pour déterminer plus précisément combien de temps s'est déroulé entre ces deux poins. Pour obtenir une de ces prises de temps, vous pouvez appeler la fonction window.performance.now() et stocker le résultat dans une variable.

+ +
var tNow = window.performance.now();
+
+ +

Retournons sur le sujet de la boucle principale. Il vous arrivera souvent de vouloir savoir quand votre boucle principale a été invoquée. Parce que cela est commun, la fonction window.requestAnimationFrame() fourni toujours un DOMHighResTimeStamp avec un argument de retour quand elles sont éxécutées. Cela mène à une amélioration de notre boucle précédente.

+ +
/*
+* Débuter avec le point virgue au cas où le code qui réside au-dessus de cet exemple
+* s'appuie sur l'insertion automatique de point virgule (ASI). Le navigateur peut alors accidentellement
+* penser que c'est un exemple complet provenant de la ligne précédente. Le point virgule de tête
+* marque le début de notre nouvelle ligne si la précédente n'était pas vide ou complétée.
+*
+* Assumons aussi que MyGame est défini précédemment.
+*/
+
+;(function () {
+  function main( tFrame ) {
+    MyGame.stopMain = window.requestAnimationFrame( main );
+
+    // Contenu de votre boucle principale.
+    // tFrame, provenant de "function main ( tFrame )", est maintenant un DOMHighResTimeStamp (Temps Haute Résolution du DOM) fourni par rAF.
+  }
+
+  main(); // Débute le cycle
+})();
+ +

Plusieurs autres optimisations sont possibles et cela dépend vraiment de ce que votre jeu tente d'accomplir. Le genre de votre jeu va visiblement faire la différence mais il peut être aussi subtil que cela. Vous pourriez dessiner un pixel à la fois sur un canvas ou vous pourriez étager des éléments du DOM (incluant de multiples canvas de WebGL avec des arrières-plans transparents si vous le désirez) en une hierarchie complexe. Chacunes de ces solutions mènera à des contraintes et opportunités différentes.

+ +

Il est temps de la... décision

+ +

Vous aurez besoin de faire un choix difficile concernant votre boucle principale: comment simuler l'évolution du temps. Si vous désirez un contrôle par image alors vous aurez besoin de déterminer combien sera-t-il nécessaire à votre jeu d'être remis à jour et dessiné. Vous pourriez même vouloir une mise à jour et dessiner à différents taux (de rafraîchissement). Vous aurez aussi besoin de considérer combien comment votre jeu échouera gracieusement si le système de l'utilisateur ne peut soutenir la charge de travail. Commençons par considérer que vous serez capables de gérer les entrées de l'utilisateur et de mettre à jour l'état du jeu à chaque fois que vous dessinez. Nous ramifierons après.

+ +

Note: Changer la manière dont votre boucle principale gère le temps est un cauchemar de débuggage, partout. Pensez à vos besoins, précautionneusement, avant de travailler sur votre boucle principale.

+ +

De quoi les jeux dans le navigateur devraient avoir l'air

+ +

Si votre jeu peut atteindre le maximum du taux de rafraîchissement sur n'importe quel matériel que vous supportez, alors votre travail est plutôt facile. Vous pouvez simplement mettre à jour, effectuer le rendu, et ne rien faire avant la synchronisation verticale (VSync).

+ +
/*
+* Débuter avec le point virgue au cas où le code qui réside au-dessus de cet exemple
+* s'appuie sur l'insertion automatique de point virgule (ASI). Le navigateur peut alors accidentellement
+* penser que c'est un exemple complet provenant de la ligne précédente. Le point virgule de tête
+* marque le début de notre nouvelle ligne si la précédente n'était pas vide ou complétée.
+*
+* Assumons aussi que MyGame est défini précédemment.
+*/
+
+;(function () {
+  function main( tFrame ) {
+    MyGame.stopMain = window.requestAnimationFrame( main );
+
+    update( tFrame ); //Appelez votre méthode de mise à jour. Dans notre cas, nous lui donnons la capture de temps rAF.
+    render();
+  }
+
+  main(); // Start the cycle
+})();
+ +

Si le maximum du taux de rafraîchissement ne peut être atteind, les paramètres de qualités pourraient être mis à jour pour rester sous notre gain en temps. L'exemple le plus célèbre de ce concept est le jeu de id Software, RAGE. Ce jeu a retiré à l'utilisateur le contrôle afin de conserver son temps de calcul à environ 16ms (ou environ 60ips). Si le calcul prenait trop de temps alors la résolution serait diminuée, les textures et autres éléments échoueraient au chargement et à l'affichage, et ainsi de suite. Ce cas (non-web) a créé plusieurs hypothèses et faits:

+ + + +

Autres manières de gérer les besoins du taux de rafraîchissement variable

+ +

D'autres méthodes d'approcher le problème existent.

+ +

Une technique commune est de mettre à jour la simulation à une fréquence constante et dessiner autant (ou au moins) que le taux actuel le permet. Cette méthode de mise à jour peut continuer à boucler sans se soucier de ce que l'utilisateur voit. Cette méthode peut voir la dernière mise à jour, et quand elle est arrivée. Quand le dessin sait quand il est représenté, et le temps simulé pour la dernière mise à jour, il peut prédire une image plausible à dessiner. Cela n'a pas d'importance si c'est plus fréquent que la mise à jour officielle (ou même moins fréquente). La méthode de mise à jour établis des points de contrôle, autant que le système le permet, la méthode de rendu va dessiner autour de ces intants de temps. Il y a plusieurs manières de séparer la méthode de mise à jour dans les standards du web:

+ + + +

Chacune de ces méthodes ont un compromis similaire:

+ + + +

Une méthode séparée de mise à jour et de dessin pourrait avoir l'air de l'exemple suivant. Pour les besoins de la démonstration, l'exemple est basé sur le troisième point, sans l'utilisation des Web Workers par soucis de lecture (et, soyons honnête, pour faciliter l'écriture).

+ +

Note: Cet exemple spécifiquement, aurait besoin d'une relecture.

+ +
/*
+* Débuter avec le point virgue au cas où le code qui réside au-dessus de cet exemple
+* s'appuie sur l'insertion automatique de point virgule (ASI). Le navigateur peut alors accidentellement
+* penser que c'est un exemple complet provenant de la ligne précédente. Le point virgule de tête
+* marque le début de notre nouvelle ligne si la précédente n'était pas vide ou complétée.
+*
+* Assumons aussi que MyGame est défini précédemment.
+*
+*
+* MyGame.lastRender fait le suivi du dernier poinçon de temps fourni par requestAnimationFrame.
+* MyGame.lastTick fait le suivi de la dernière mise à jour. Toujours incrémenté par tickLength.
+* MyGame.tickLength est à quelle fréquence le jeu est mis à jour. C'est 20 Hz (50ms) ici.
+*
+* timeSinceTick est le temps entre un retour de requestAnimationFrame et la dernière mise à jour.
+* numTicks est combien de mises à jour auraient dû avoir lieu entre 2 rendus d'images.
+*
+* render() se voit passé tFrame car il est considéré que la méthode de rendu va calculer
+           combien de temps se sera écoulé depuis la mise à jour la plus récente pour
+           extrapolation (purement cosmétique pour des systèmes rapides). La scène est dessinée.
+*
+* update() calcule l'état du jeu comme point donné dans le temps. Ça devrait toujours être
+           incrémenté par tickLength. C'est l'autorité de l'état du jeu. On lui passe le
+           DOMHighResTimeStamp pour le temps que cela représente (qui, à nouveau, est toujours
+           la dernière mise à jour + MyGame.tickLength qu'une pause ne soit ajoutée, etc.)
+*
+* setInitialState() réalise n'importe quel tâche mise de côté avant que la boucle principale ne doive tourner.
+*                   Ceci est juste un exemple générique d'une fonction que vous devriez ajouter.
+*/
+
+;(function () {
+  function main( tFrame ) {
+    MyGame.stopMain = window.requestAnimationFrame( main );
+    var nextTick = MyGame.lastTick + MyGame.tickLength;
+    var numTicks = 0;
+
+    //Si tFrame < nextTick alors 0 ticks doit être mis à jour (0 est par défaut pour numTicks).
+    //Si tFrame = nextTick alors 1 tick doit être mis à jour (et ainsi de suite).
+    //Note: Comme nous le mentionons dans le sommaire, vous devriez faire un suivi de la taille de numTicks.
+    //S'il est important, alors soit votre jeu est en veille, soit votre machine ne répond plus.
+    if (tFrame > nextTick) {
+      var timeSinceTick = tFrame - MyGame.lastTick;
+      numTicks = Math.floor( timeSinceTick / MyGame.tickLength );
+    }
+
+    queueUpdates( numTicks );
+    render( tFrame );
+    MyGame.lastRender = tFrame;
+  }
+
+  function queueUpdates( numTicks ) {
+    for(var i=0; i < numTicks; i++) {
+      MyGame.lastTick = MyGame.lastTick + MyGame.tickLength; //Maitenant lastTick est ce tick.
+      update( MyGame.lastTick );
+    }
+  }
+
+  MyGame.lastTick = performance.now();
+  MyGame.lastRender = MyGame.lastTick; //Prétendre que le premier dessin était sur la première mise à jour.
+  MyGame.tickLength = 50; //Cela positionne votre simulation pour tourner à 20Hz (50ms)
+
+  setInitialState();
+  main(performance.now()); // Débute le cycle
+})();
+ +

Une autre alternative est de simplement faire certaines choses moins souvent. Si une portion de votre boucle de mise à jour est difficile à calculer et intense (en temps), vous devrier considérer réduire sa fréquence et, idéalement, la diviser en portions à travers une période plus allongée. Un exemple implicite de cela est rencontré dans "The Artillery Blog for Artillery Games", où ils ajustent leur taux de création de miettes pour optimiser leur ramasse-miettes. Apparemment, le nettoyage des ressources n'est pas sensible au temps (spécialement si le nettoyage est plus dérangeant que le la miette elle-même).

+ +

Cela peut aussi s'appliquer à vos propres tâches. Elles sont de bonnes candidates pour en générer quand les ressources disponibles deviennent un problème.

+ +

Sommaire

+ +

J'aimerai être clair que rien de ce qu'il y a ci-dessus, ou rien de cela, ne puisse être ce qu'il y a de mieux pour votre jeu. La décision correcte dépend entièrement des compromis que vous êtes prêts (ou pas) à faire. La préocupation est principalement de permuter vers une autre option. Heureusement, je n'en ai pas l'expérience mais j'ai entendu dire que c'est un jeu de cache-cache exténuant.

+ +

Une chose importante à retenir pour les plateformes gérées, telles que le web, est que votre boucle pourrait arrêter son éxécution pour une période de temps significative. Cela pourrait arriver quand l'utilisateur déselectionne votre onglet et que le navigateur tombe en veille (ou ralenti) son interval de retour requestAnimationFrame. Vous avez plusieurs façons de gérer cela et cela peut dépendre de votre jeu, s'il est pour un seul joueur ou multijoueurs. Certains des choix sont:

+ + + +

Une fois que votre boucle principale a été développée et que vous avez pris vos décisions sur un lot d'hypothèses et de compromis qui conviendront à votre jeu, cela devient juste une question d'utilisation de vos décisions pour calculer n'importe quelle physique applicable, intelligence artificielle, sons, synchronisation réseau, et quoique votre jeu ai besoin.

diff --git a/files/fr/games/examples/index.html b/files/fr/games/examples/index.html deleted file mode 100644 index 4f81187ec3..0000000000 --- a/files/fr/games/examples/index.html +++ /dev/null @@ -1,128 +0,0 @@ ---- -title: Exemples -slug: Games/Examples -tags: - - Demos - - Exemples - - Jeux - - Web -translation_of: Games/Examples -original_slug: Jeux/Exemples ---- -
{{GamesSidebar}}
  {{IncludeSubnav("/fr/docs/Jeux")}}
- -

Cette page liste un grand nombre de démos de technologies web impressionnantes vous permettant de vous inspirer et de vous amuser. Une preuve de ce qui peut être fait avec Javascript, WebGL et autres. Les deux premières sections listent des jeux tandis que la troisième est une liste de démos de technologies web.

- -

Démos/Jeux gratuits

- -
-
Orpega
-
Jeu de tir massivement multijoueur sur le thème de l'espace en HTML5 / JavaScript sans moteur et NodeJS pour le serveur (http://orpe.ga/)
-
Beloola
-
Plateforme sociale de réalité virtuelle web pour les passionnés. Expérience disponible à la fois sur écrans 2D et casques de réalité virtuelle (Paramètres / Passer en mode VR)
-
Tanx
-
Un jeu de combat de tanks multijoueurs, créé avec PlayCanvas.
-
Hyper Vanguard Force
-
Un "space shooter" (tireur de l'espace) à défilement vertical.
-
Swooop
-
Un jeu d'aviation : contrôle ton avion et récupère les joyaux. Aussi créé avec PlayCanvas.
-
Save the Day
-
Volez à bord de votre hélicoptère de sauvetage vers la zone sinistrée et sauvez les victimes coincées (ga.me).
-
Polycraft
-
Un jeu de survie, explore l'île et bats les monstres.
-
HexGL
-
Un jeu de course futuriste rythmé.
-
Dead Trigger 2
-
Un jeu d'action avec des zombies, créé avec Unity3D.
-
Angry Bots
-
Une démo de jeu de tir futuriste à la 3ème personne, créé avec Unity3D.
-
Nutmeg
-
Jeu de plateforme action rétro.
-
Back to Candyland
-
Un jeu de type Match 3 (Candy Crush).
-
Biolab Disaster
-
Un jeu de plateforme et de tir à défilement horizontal.
-
X-Type
-
Une démo de "space shooter" (tireur de l'espace) à défilement vertical.
-
Xibalba
-
Un jeu rétro de tir à la première personne (Doom-style).
-
Gorescript
-
Un autre jeu rétro de tir à la première personne.
-
The Wizard
-
Un jeu de réflexion au tour par tour.
-
Hextris
-
Un jeu de réflexion hexagonal ressemblant à Tetris.
-
2048
-
Un jeu de réflexion où il faut faire glisser des tuiles.
-
BananaBread
-
Un jeu de tir à la première personne en 3D développé en utilisant Emscripten, WebGL et WebRTC.
-
Monster Madness
-
Un jeu de tir multijoueur en ligne développé par "Nom Nom Games" et "Trendy entertainment" en utilisant WebGL et asm.js.
-
Auralux
-
Un jeu de stratégie basé sur WebGL et asm.js : capture tous les soleils pour gagner !
-
BrowserQuest
-
Un MMORPG crée par the Little Workshop et Mozilla.
-
Shoot The Rocks
-
Un jeu de tir solo 2D Canvas, dans le style des classiques Asteroids d' Atari, jeux d' arcade depuis 1979.
-
Star Citadel
-
Une nouvelle version de Star Castle, le classique jeu d'arcade 1980 de Cinematronics, construit avec Canvas 2D.
-
- -

Jeux payants

- -
-
Oort Online
-
Un MMO d'exploration, de construction et de bataille (actuellement en développement).
-
A Wizard's Lizard
-
Un RPG d'exploration ressemblant à Zelda.
-
QbQbQb
-
Un jeu de réflexion arcade sur le thème de la science fiction.
-
Elliot Quest
-
Jeu d'aventure rétro aux graphiques 8-bit.
-
RPG MO
-
MMORPG isométrique ayant des similitudes avec RuneScape Classic et Ultima.
-
- -

Démos diverses

- -
-
WaveGL
-
Visualiseur WebGL pour la source de sons.
-
Canvas Airport Simulation
-
Carte animée montrant les avions décollants et atterrissants à l'aéroport avec les itinéraires de vols.
-
Animation Physics
-
Rendu 3D d'un terrain et de voitures utilisant ammo.js pour les calculs physiques.
-
Volumetric Particle Flow
-
Simulation physique de liquides s'écoulant.
-
Explosion and chain reaction
-
Particules explosant et déclenchant d'autres explosions.
-
Canvas generated planet
-
Une ceinture d'astéroides orbitant autour d'une planète.
-
Digital Fireworks
-
Effets d'explosions de feu d'artifice.
-
Autumn
-
Feuilles automnales qui tombent, illuminées par une source lumineuse. Créé avec Three.js.
-
Fire walk with me
-
Effet de nuage de feu flottant.
-
Rainbow Firestorm
-
Des particules de couleur arc-en-ciel, tombant comme de la pluie, rebondissent sur un terrain d'orbes.
-
Crowd Simulation
-
Simulation d'une foule de personnes agitées  voulant rejoindre des directions opposées.
-
SVG Masking Experiment
-
Une machine à rayons X, créée en utilisant un calque SVG.
-
Realistic Water Simulation
-
De l'eau en mouvement, comme les vagues d'un océan.
-
Dungeon demo
-
Scène de donjon basée sur Haxor avec un personnage jouable.
-
Massive Assault tech demo
-
Archipel avec des véhicules militaires futuristes.
-
Flight Stream
-
Globe en 3D avec des itinéraires d'avions simulés.
-
WebGL filters
-
Démo montrant comment WebGL peut être utilisé pour ajouter des effets à des éléments HTML.
-
SVG isometic tiles
-
Génère des tuiles isométriques avec une matrice SVG.
-
ThreeJS App Player
-
Un lecteur dans lequel il est possible de charger et lancer des exemples de Three.js.
-
- diff --git a/files/fr/games/examples/index.md b/files/fr/games/examples/index.md new file mode 100644 index 0000000000..4f81187ec3 --- /dev/null +++ b/files/fr/games/examples/index.md @@ -0,0 +1,128 @@ +--- +title: Exemples +slug: Games/Examples +tags: + - Demos + - Exemples + - Jeux + - Web +translation_of: Games/Examples +original_slug: Jeux/Exemples +--- +
{{GamesSidebar}}
  {{IncludeSubnav("/fr/docs/Jeux")}}
+ +

Cette page liste un grand nombre de démos de technologies web impressionnantes vous permettant de vous inspirer et de vous amuser. Une preuve de ce qui peut être fait avec Javascript, WebGL et autres. Les deux premières sections listent des jeux tandis que la troisième est une liste de démos de technologies web.

+ +

Démos/Jeux gratuits

+ +
+
Orpega
+
Jeu de tir massivement multijoueur sur le thème de l'espace en HTML5 / JavaScript sans moteur et NodeJS pour le serveur (http://orpe.ga/)
+
Beloola
+
Plateforme sociale de réalité virtuelle web pour les passionnés. Expérience disponible à la fois sur écrans 2D et casques de réalité virtuelle (Paramètres / Passer en mode VR)
+
Tanx
+
Un jeu de combat de tanks multijoueurs, créé avec PlayCanvas.
+
Hyper Vanguard Force
+
Un "space shooter" (tireur de l'espace) à défilement vertical.
+
Swooop
+
Un jeu d'aviation : contrôle ton avion et récupère les joyaux. Aussi créé avec PlayCanvas.
+
Save the Day
+
Volez à bord de votre hélicoptère de sauvetage vers la zone sinistrée et sauvez les victimes coincées (ga.me).
+
Polycraft
+
Un jeu de survie, explore l'île et bats les monstres.
+
HexGL
+
Un jeu de course futuriste rythmé.
+
Dead Trigger 2
+
Un jeu d'action avec des zombies, créé avec Unity3D.
+
Angry Bots
+
Une démo de jeu de tir futuriste à la 3ème personne, créé avec Unity3D.
+
Nutmeg
+
Jeu de plateforme action rétro.
+
Back to Candyland
+
Un jeu de type Match 3 (Candy Crush).
+
Biolab Disaster
+
Un jeu de plateforme et de tir à défilement horizontal.
+
X-Type
+
Une démo de "space shooter" (tireur de l'espace) à défilement vertical.
+
Xibalba
+
Un jeu rétro de tir à la première personne (Doom-style).
+
Gorescript
+
Un autre jeu rétro de tir à la première personne.
+
The Wizard
+
Un jeu de réflexion au tour par tour.
+
Hextris
+
Un jeu de réflexion hexagonal ressemblant à Tetris.
+
2048
+
Un jeu de réflexion où il faut faire glisser des tuiles.
+
BananaBread
+
Un jeu de tir à la première personne en 3D développé en utilisant Emscripten, WebGL et WebRTC.
+
Monster Madness
+
Un jeu de tir multijoueur en ligne développé par "Nom Nom Games" et "Trendy entertainment" en utilisant WebGL et asm.js.
+
Auralux
+
Un jeu de stratégie basé sur WebGL et asm.js : capture tous les soleils pour gagner !
+
BrowserQuest
+
Un MMORPG crée par the Little Workshop et Mozilla.
+
Shoot The Rocks
+
Un jeu de tir solo 2D Canvas, dans le style des classiques Asteroids d' Atari, jeux d' arcade depuis 1979.
+
Star Citadel
+
Une nouvelle version de Star Castle, le classique jeu d'arcade 1980 de Cinematronics, construit avec Canvas 2D.
+
+ +

Jeux payants

+ +
+
Oort Online
+
Un MMO d'exploration, de construction et de bataille (actuellement en développement).
+
A Wizard's Lizard
+
Un RPG d'exploration ressemblant à Zelda.
+
QbQbQb
+
Un jeu de réflexion arcade sur le thème de la science fiction.
+
Elliot Quest
+
Jeu d'aventure rétro aux graphiques 8-bit.
+
RPG MO
+
MMORPG isométrique ayant des similitudes avec RuneScape Classic et Ultima.
+
+ +

Démos diverses

+ +
+
WaveGL
+
Visualiseur WebGL pour la source de sons.
+
Canvas Airport Simulation
+
Carte animée montrant les avions décollants et atterrissants à l'aéroport avec les itinéraires de vols.
+
Animation Physics
+
Rendu 3D d'un terrain et de voitures utilisant ammo.js pour les calculs physiques.
+
Volumetric Particle Flow
+
Simulation physique de liquides s'écoulant.
+
Explosion and chain reaction
+
Particules explosant et déclenchant d'autres explosions.
+
Canvas generated planet
+
Une ceinture d'astéroides orbitant autour d'une planète.
+
Digital Fireworks
+
Effets d'explosions de feu d'artifice.
+
Autumn
+
Feuilles automnales qui tombent, illuminées par une source lumineuse. Créé avec Three.js.
+
Fire walk with me
+
Effet de nuage de feu flottant.
+
Rainbow Firestorm
+
Des particules de couleur arc-en-ciel, tombant comme de la pluie, rebondissent sur un terrain d'orbes.
+
Crowd Simulation
+
Simulation d'une foule de personnes agitées  voulant rejoindre des directions opposées.
+
SVG Masking Experiment
+
Une machine à rayons X, créée en utilisant un calque SVG.
+
Realistic Water Simulation
+
De l'eau en mouvement, comme les vagues d'un océan.
+
Dungeon demo
+
Scène de donjon basée sur Haxor avec un personnage jouable.
+
Massive Assault tech demo
+
Archipel avec des véhicules militaires futuristes.
+
Flight Stream
+
Globe en 3D avec des itinéraires d'avions simulés.
+
WebGL filters
+
Démo montrant comment WebGL peut être utilisé pour ajouter des effets à des éléments HTML.
+
SVG isometic tiles
+
Génère des tuiles isométriques avec une matrice SVG.
+
ThreeJS App Player
+
Un lecteur dans lequel il est possible de charger et lancer des exemples de Three.js.
+
+ diff --git a/files/fr/games/index.html b/files/fr/games/index.html deleted file mode 100644 index 713c74a6b7..0000000000 --- a/files/fr/games/index.html +++ /dev/null @@ -1,69 +0,0 @@ ---- -title: Développement de jeux vidéo -slug: Games -tags: - - Applications - - Développement - - Jeux -translation_of: Games -original_slug: Jeux ---- -
{{GamesSidebar}}
- -

Les jeux vidéo sont parmi les activités numériques les plus populaires. L'arrivée continue de nouvelles technologies permet de développer encore des jeux de meilleure qualité et plus performants qui peuvent fonctionner dans n'importe quel navigateur respectant les standards du web.

- -

{{EmbedGHLiveSample("web-tech-games/index.html", '100%', 820)}}

- -

Développement de jeux pour le web

- -

Bienvenue dans le centre de développement de jeux MDN ! Dans cette zone du site, nous fournissons des ressources pour les développeurs web désireux de développer des jeux. Vous trouverez de nombreux tutoriels et articles techniques dans le menu principal à gauche, alors n'hésitez pas à explorer.

- -

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" est un bon endroit pour commencer avec les bases.

-
- - -

Portez des jeux natifs sur le Web

- -

Si vous êtes un développeur natif (par exemple écrivant des jeux en C ++), et que vous êtes intéressé par la façon dont vous pouvez porter vos jeux sur le Web, vous devriez en apprendre plus sur notre outil Emscripten - c'est un compilateur LLVM vers JavaScript, qui prend le "bytecode LLVM" (par exemple, généré à partir de C / C ++ en utilisant Clang ou un autre langage) et le compile dans asm.js , qui peut être exécuté sur le Web.

- -

Pour commencer, voir :

- - - -

Exemples

- -

Pour une liste d'exemples de jeux, voir notre page exemples. Consultez aussi https://games.mozilla.org/ pour des ressources et des exemples plus utiles !

- -

Voir aussi

- -
-
Build New Games (en)
-
Un site collaboratif avec de nombreux tutoriels concernant le développement de jeux vidéo sur le Web. N'a pas été très actif récemment, mais détient toujours de belles ressources.
-
Creative JS (en)
-
Un ensemble de techniques et d'expérimentations JavaScript, pas nécessairement liées au domaine vidéo-ludique mais qui se révèlent plutôt utiles et impressionnantes. N'a pas été très actif récemment, mais détient toujours de belles ressources.
-
Game programming patterns (en)
-
Un livre en ligne, écrit par Bob Nystrom, qui traite des modèles de programmation dans le contexte du développement de jeux, dans le but d'aider les développeurs de jeux à produire un code plus réussi et plus opérationnel.
-
Gamedev.js Weekly (en)
-
Bulletin hebdomadaire sur le développement de jeux HTML5, envoyé tous les vendredis. Contient les derniers articles, didacticiels, outils et ressources.
-
HTML5 Game Devs Forum (en)
-
Forums pour développeurs, créateurs de "framework" et éditeurs. Posez des questions, obtenez des commentaires, aidez les autres.
-
HTML5 Game Engine (en)
-
Liste des architectures de jeux HTML5 les plus populaires ainsi que leurs classement, fonctionnalités et exemples.
-
JSBreakouts (en)
-
Comparez les clones JavaScript Breakout dans différents systèmes pour vous aider à choisir le bon pour vous.
-
Tuts+ Game Development (en)
-
Tutoriels et articles sur le developpement de jeux en général.
-
HTML5 Gamedev Starter (en)
-
De quoi démarrer pour les nouveaux développeurs de jeux, une liste organisée de liens vers diverses ressources utiles sur le web.
-
js13kGames (en)
-
Concours de codage JavaScript pour les développeurs de jeux HTML5 avec une limite de taille de fichier fixée à 13 kilo-octets. Tous les jeux soumis sont disponibles sous forme lisible sur GitHub.
-
Mozilla Hacks blog (en)
-
Catégorie Jeux sur le blog "Hacks" de Mozilla contenant des articles connexes intéressants.
-
\ No newline at end of file diff --git a/files/fr/games/index.md b/files/fr/games/index.md new file mode 100644 index 0000000000..713c74a6b7 --- /dev/null +++ b/files/fr/games/index.md @@ -0,0 +1,69 @@ +--- +title: Développement de jeux vidéo +slug: Games +tags: + - Applications + - Développement + - Jeux +translation_of: Games +original_slug: Jeux +--- +
{{GamesSidebar}}
+ +

Les jeux vidéo sont parmi les activités numériques les plus populaires. L'arrivée continue de nouvelles technologies permet de développer encore des jeux de meilleure qualité et plus performants qui peuvent fonctionner dans n'importe quel navigateur respectant les standards du web.

+ +

{{EmbedGHLiveSample("web-tech-games/index.html", '100%', 820)}}

+ +

Développement de jeux pour le web

+ +

Bienvenue dans le centre de développement de jeux MDN ! Dans cette zone du site, nous fournissons des ressources pour les développeurs web désireux de développer des jeux. Vous trouverez de nombreux tutoriels et articles techniques dans le menu principal à gauche, alors n'hésitez pas à explorer.

+ +

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" est un bon endroit pour commencer avec les bases.

+
+ + +

Portez des jeux natifs sur le Web

+ +

Si vous êtes un développeur natif (par exemple écrivant des jeux en C ++), et que vous êtes intéressé par la façon dont vous pouvez porter vos jeux sur le Web, vous devriez en apprendre plus sur notre outil Emscripten - c'est un compilateur LLVM vers JavaScript, qui prend le "bytecode LLVM" (par exemple, généré à partir de C / C ++ en utilisant Clang ou un autre langage) et le compile dans asm.js , qui peut être exécuté sur le Web.

+ +

Pour commencer, voir :

+ + + +

Exemples

+ +

Pour une liste d'exemples de jeux, voir notre page exemples. Consultez aussi https://games.mozilla.org/ pour des ressources et des exemples plus utiles !

+ +

Voir aussi

+ +
+
Build New Games (en)
+
Un site collaboratif avec de nombreux tutoriels concernant le développement de jeux vidéo sur le Web. N'a pas été très actif récemment, mais détient toujours de belles ressources.
+
Creative JS (en)
+
Un ensemble de techniques et d'expérimentations JavaScript, pas nécessairement liées au domaine vidéo-ludique mais qui se révèlent plutôt utiles et impressionnantes. N'a pas été très actif récemment, mais détient toujours de belles ressources.
+
Game programming patterns (en)
+
Un livre en ligne, écrit par Bob Nystrom, qui traite des modèles de programmation dans le contexte du développement de jeux, dans le but d'aider les développeurs de jeux à produire un code plus réussi et plus opérationnel.
+
Gamedev.js Weekly (en)
+
Bulletin hebdomadaire sur le développement de jeux HTML5, envoyé tous les vendredis. Contient les derniers articles, didacticiels, outils et ressources.
+
HTML5 Game Devs Forum (en)
+
Forums pour développeurs, créateurs de "framework" et éditeurs. Posez des questions, obtenez des commentaires, aidez les autres.
+
HTML5 Game Engine (en)
+
Liste des architectures de jeux HTML5 les plus populaires ainsi que leurs classement, fonctionnalités et exemples.
+
JSBreakouts (en)
+
Comparez les clones JavaScript Breakout dans différents systèmes pour vous aider à choisir le bon pour vous.
+
Tuts+ Game Development (en)
+
Tutoriels et articles sur le developpement de jeux en général.
+
HTML5 Gamedev Starter (en)
+
De quoi démarrer pour les nouveaux développeurs de jeux, une liste organisée de liens vers diverses ressources utiles sur le web.
+
js13kGames (en)
+
Concours de codage JavaScript pour les développeurs de jeux HTML5 avec une limite de taille de fichier fixée à 13 kilo-octets. Tous les jeux soumis sont disponibles sous forme lisible sur GitHub.
+
Mozilla Hacks blog (en)
+
Catégorie Jeux sur le blog "Hacks" de Mozilla contenant des articles connexes intéressants.
+
\ No newline at end of file diff --git a/files/fr/games/index/index.html b/files/fr/games/index/index.html deleted file mode 100644 index d42a4663e8..0000000000 --- a/files/fr/games/index/index.html +++ /dev/null @@ -1,11 +0,0 @@ ---- -title: Index -slug: Games/Index -tags: - - Meta -translation_of: Games/Index -original_slug: Jeux/Index ---- -
{{GamesSidebar}}
{{IncludeSubnav("/fr/docs/Jeux")}}
- -

{{Index("/fr/docs/Jeux")}}

diff --git a/files/fr/games/index/index.md b/files/fr/games/index/index.md new file mode 100644 index 0000000000..d42a4663e8 --- /dev/null +++ b/files/fr/games/index/index.md @@ -0,0 +1,11 @@ +--- +title: Index +slug: Games/Index +tags: + - Meta +translation_of: Games/Index +original_slug: Jeux/Index +--- +
{{GamesSidebar}}
{{IncludeSubnav("/fr/docs/Jeux")}}
+ +

{{Index("/fr/docs/Jeux")}}

diff --git a/files/fr/games/introduction/index.html b/files/fr/games/introduction/index.html deleted file mode 100644 index 9f98c00cd2..0000000000 --- a/files/fr/games/introduction/index.html +++ /dev/null @@ -1,128 +0,0 @@ ---- -title: Introduction au développement de jeux vidéo -slug: Games/Introduction -tags: - - Firefox OS - - Guide - - Jeux - - Mobile -translation_of: Games/Introduction -original_slug: Jeux/Introduction ---- -
{{GamesSidebar}}
- -

  {{IncludeSubnav("/fr/docs/Jeux")}}  

- -
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 plateformes HTML5 comme Firefox OS) sans compromettre les performances.

- -

La plateforme HTML5 pour les jeux

- -

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.

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
FonctionnalitésTechnologie
AudioWeb Audio API
GraphismeWebGL (OpenGL ES 2.0)
Mécanismes d'interface utilisateurÉvénements tactiles, Gamepad API, capteurs, WebRTC, Full Screen API, Pointer Lock API
LangageJavaScript (ou C/C++ utilisé avec Emscripten pour être compilé en JavaScript)
RéseauWebRTC et/ou les WebSockets
StockageIndexedDB ou le "cloud"
WebHTML, CSS, SVG, Social API (et plus encore...)
- -

 

- -

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 :
- -

 

- -
    -
  1. -
    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.
    -
    2. -
  2. 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" (magasin d'applications) 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.
    3. -
  3. 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.
    4. -
  4. 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.
    5. -
  5. 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.
    6. -
  6. 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.
    7. -
  7. Le Web est partout et vos joueurs peuvent donc jouer où bon leur semble : leurs téléphones, tablettes, ordinateurs de bureau ou portables...
    8. -
- -

 

- -

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 {{HTMLElement("canvas")}} permet de gérer des graphismes en deux dimensions.
-
HTML audio
-
L'élément HTML {{HTMLElement("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. 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...).
-
JavaScript
-
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 Emscripten ou Asm.js pour porter facilement vos jeux existants.
-
Pointer Lock API
-
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.
-
SVG (Scalable Vector Graphics)
-
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.
-
Typed Arrays
-
Les tableaux typés JavaScript vous donnent accès à des données binaires brutes depuis JavaScript ; 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.
-
Web Audio API
-
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.
-
WebGL
-
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 OpenGL ES 2.0.
-
WebRTC
-
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.
-
WebSockets
-
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" (discussion) et autres.
-
Web Workers
-
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.
-
XMLHttpRequest and File API
-
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.
-
-
- -

 

diff --git a/files/fr/games/introduction/index.md b/files/fr/games/introduction/index.md new file mode 100644 index 0000000000..9f98c00cd2 --- /dev/null +++ b/files/fr/games/introduction/index.md @@ -0,0 +1,128 @@ +--- +title: Introduction au développement de jeux vidéo +slug: Games/Introduction +tags: + - Firefox OS + - Guide + - Jeux + - Mobile +translation_of: Games/Introduction +original_slug: Jeux/Introduction +--- +
{{GamesSidebar}}
+ +

  {{IncludeSubnav("/fr/docs/Jeux")}}  

+ +
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 plateformes HTML5 comme Firefox OS) sans compromettre les performances.

+ +

La plateforme HTML5 pour les jeux

+ +

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.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FonctionnalitésTechnologie
AudioWeb Audio API
GraphismeWebGL (OpenGL ES 2.0)
Mécanismes d'interface utilisateurÉvénements tactiles, Gamepad API, capteurs, WebRTC, Full Screen API, Pointer Lock API
LangageJavaScript (ou C/C++ utilisé avec Emscripten pour être compilé en JavaScript)
RéseauWebRTC et/ou les WebSockets
StockageIndexedDB ou le "cloud"
WebHTML, CSS, SVG, Social API (et plus encore...)
+ +

 

+ +

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 :
+ +

 

+ +
    +
  1. +
    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.
    +
    2. +
  2. 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" (magasin d'applications) 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.
    3. +
  3. 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.
    4. +
  4. 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.
    5. +
  5. 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.
    6. +
  6. 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.
    7. +
  7. Le Web est partout et vos joueurs peuvent donc jouer où bon leur semble : leurs téléphones, tablettes, ordinateurs de bureau ou portables...
    8. +
+ +

 

+ +

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 {{HTMLElement("canvas")}} permet de gérer des graphismes en deux dimensions.
+
HTML audio
+
L'élément HTML {{HTMLElement("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. 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...).
+
JavaScript
+
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 Emscripten ou Asm.js pour porter facilement vos jeux existants.
+
Pointer Lock API
+
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.
+
SVG (Scalable Vector Graphics)
+
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.
+
Typed Arrays
+
Les tableaux typés JavaScript vous donnent accès à des données binaires brutes depuis JavaScript ; 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.
+
Web Audio API
+
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.
+
WebGL
+
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 OpenGL ES 2.0.
+
WebRTC
+
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.
+
WebSockets
+
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" (discussion) et autres.
+
Web Workers
+
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.
+
XMLHttpRequest and File API
+
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.
+
+
+ +

 

diff --git a/files/fr/games/introduction_to_html5_game_development/index.html b/files/fr/games/introduction_to_html5_game_development/index.html deleted file mode 100644 index ef15c35b78..0000000000 --- a/files/fr/games/introduction_to_html5_game_development/index.html +++ /dev/null @@ -1,101 +0,0 @@ ---- -title: Introduction au développement de jeux HTML5 (résumé) -slug: Games/Introduction_to_HTML5_Game_Development -tags: - - Firefox OS - - HTML5 - - Jeux - - Mobile -translation_of: Games/Introduction_to_HTML5_Game_Development_(summary) -original_slug: Jeux/Introduction_to_HTML5_Game_Gevelopment_(summary) ---- -
{{GamesSidebar}}
- -
{{IncludeSubnav("/fr/docs/Games")}}
- -

Avantages

- -
    -
  1. Les jeux construits avec HTML5 fonctionnent sur les smartphones, les tablettes, les PC et les téléviseurs intelligents.
    2. -
  2. Annoncez et promouvez votre jeu sur le Web, ainsi que sur d'autres médias.
    3. -
  3. Paiements. Chargez ce que vous voulez et utilisez le service de traitement des paiements de votre choix.
    4. -
  4. Mettez à jour votre jeu quand vous le souhaitez.
    5. -
  5. Collectez vos propres analyses !
    6. -
  6. Connectez-vous plus étroitement avec vos clients,
    7. -
  7. Les joueurs peuvent jouer au jeu n'importe où, n'importe quand.
    8. -
- -

Technologies Web

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
FonctionTechnologie
AudioWeb Audio API
GraphiqueWebGL (OpenGL ES 2.0)
InputÉvénements tactiles, Utiliser l'API Gamepad, capteurs de l'appareil , L'API WebRTC, Utiliser le mode plein écran, Pointer Lock API
LanguageJavaScript (ou C/C++  utilisant Emscripten pour compiler en JavaScript )
NetworkingWebRTC et/ou WebSockets
StockageIndexedDB  ou le "cloud"
WebHTML, CSS, SVG, Social API ( et beaucoup plus! )
- -
-
API plein écran
-
Gameplay en plein écran.
-
API Gamepad
-
Utilisez des manettes ou d'autres contrôleurs de jeu.
-
HTML et CSS
-
Créez, stylisez et aménagez l'interface utilisateur de votre jeu.
-
Audio HTML
-
Jouez facilement des effets sonores et de la musique simplement.
-
IndexedDB
-
Stockez les données utilisateur sur leur propre ordinateur ou appareil.
-
JavaScript
-
Langage de programmation Web rapide pour écrire le code de votre jeu.
- Pour porter facilement vos jeux existants Emscripten ou Asm.js
-
API de verrouillage de pointeur
-
Verrouillez la souris ou tout autre périphérique de pointage dans l'interface de votre jeu.
-
SVG (Scalable Vector Graphics)
-
Créez des graphiques vectoriels qui évoluent en douceur, quelle que soit la taille ou la résolution de l'écran de l'utilisateur.
-
Tableaux typés
-
Accédez aux données binaires brutes depuis JavaScript; Manipulez les textures GL, les données de jeu ou tout autre chose.
-
API Web Audio
-
Contrôlez la lecture, la synthèse et la manipulation de l'audio en temps réel.
-
WebGL
-
Créez des graphiques 3D (et 2D) haute performance à accélération matérielle. OpenGL ES 2.0.
-
WebRTC
-
Communications en temps réel pour contrôler les données audio et vidéo, y compris la téléconférence et la transmission d'autres données d'application entre deux utilisateurs comme le chat.
-
WebSockets
-
Connectez votre application ou votre site à un serveur pour transmettre des données en temps réel. Parfait pour l'action de jeu multijoueur, les services de chat, etc.
-
Web Workers
-
Créez des threads d'arrière-plan exécutant leur propre code JavaScript pour les processeurs multicœurs.
-
XMLHttpRequest et File API
-
Envoyez et recevez tout type de données que vous souhaitez à partir d'un serveur Web, comme le téléchargement de nouveaux niveaux de jeu et d'illustrations pour transmettre des informations sur l'état du jeu non en temps réel dans les deux sens.
-
\ No newline at end of file diff --git a/files/fr/games/introduction_to_html5_game_development/index.md b/files/fr/games/introduction_to_html5_game_development/index.md new file mode 100644 index 0000000000..ef15c35b78 --- /dev/null +++ b/files/fr/games/introduction_to_html5_game_development/index.md @@ -0,0 +1,101 @@ +--- +title: Introduction au développement de jeux HTML5 (résumé) +slug: Games/Introduction_to_HTML5_Game_Development +tags: + - Firefox OS + - HTML5 + - Jeux + - Mobile +translation_of: Games/Introduction_to_HTML5_Game_Development_(summary) +original_slug: Jeux/Introduction_to_HTML5_Game_Gevelopment_(summary) +--- +
{{GamesSidebar}}
+ +
{{IncludeSubnav("/fr/docs/Games")}}
+ +

Avantages

+ +
    +
  1. Les jeux construits avec HTML5 fonctionnent sur les smartphones, les tablettes, les PC et les téléviseurs intelligents.
    2. +
  2. Annoncez et promouvez votre jeu sur le Web, ainsi que sur d'autres médias.
    3. +
  3. Paiements. Chargez ce que vous voulez et utilisez le service de traitement des paiements de votre choix.
    4. +
  4. Mettez à jour votre jeu quand vous le souhaitez.
    5. +
  5. Collectez vos propres analyses !
    6. +
  6. Connectez-vous plus étroitement avec vos clients,
    7. +
  7. Les joueurs peuvent jouer au jeu n'importe où, n'importe quand.
    8. +
+ +

Technologies Web

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FonctionTechnologie
AudioWeb Audio API
GraphiqueWebGL (OpenGL ES 2.0)
InputÉvénements tactiles, Utiliser l'API Gamepad, capteurs de l'appareil , L'API WebRTC, Utiliser le mode plein écran, Pointer Lock API
LanguageJavaScript (ou C/C++  utilisant Emscripten pour compiler en JavaScript )
NetworkingWebRTC et/ou WebSockets
StockageIndexedDB  ou le "cloud"
WebHTML, CSS, SVG, Social API ( et beaucoup plus! )
+ +
+
API plein écran
+
Gameplay en plein écran.
+
API Gamepad
+
Utilisez des manettes ou d'autres contrôleurs de jeu.
+
HTML et CSS
+
Créez, stylisez et aménagez l'interface utilisateur de votre jeu.
+
Audio HTML
+
Jouez facilement des effets sonores et de la musique simplement.
+
IndexedDB
+
Stockez les données utilisateur sur leur propre ordinateur ou appareil.
+
JavaScript
+
Langage de programmation Web rapide pour écrire le code de votre jeu.
+ Pour porter facilement vos jeux existants Emscripten ou Asm.js
+
API de verrouillage de pointeur
+
Verrouillez la souris ou tout autre périphérique de pointage dans l'interface de votre jeu.
+
SVG (Scalable Vector Graphics)
+
Créez des graphiques vectoriels qui évoluent en douceur, quelle que soit la taille ou la résolution de l'écran de l'utilisateur.
+
Tableaux typés
+
Accédez aux données binaires brutes depuis JavaScript; Manipulez les textures GL, les données de jeu ou tout autre chose.
+
API Web Audio
+
Contrôlez la lecture, la synthèse et la manipulation de l'audio en temps réel.
+
WebGL
+
Créez des graphiques 3D (et 2D) haute performance à accélération matérielle. OpenGL ES 2.0.
+
WebRTC
+
Communications en temps réel pour contrôler les données audio et vidéo, y compris la téléconférence et la transmission d'autres données d'application entre deux utilisateurs comme le chat.
+
WebSockets
+
Connectez votre application ou votre site à un serveur pour transmettre des données en temps réel. Parfait pour l'action de jeu multijoueur, les services de chat, etc.
+
Web Workers
+
Créez des threads d'arrière-plan exécutant leur propre code JavaScript pour les processeurs multicœurs.
+
XMLHttpRequest et File API
+
Envoyez et recevez tout type de données que vous souhaitez à partir d'un serveur Web, comme le téléchargement de nouveaux niveaux de jeu et d'illustrations pour transmettre des informations sur l'état du jeu non en temps réel dans les deux sens.
+
\ No newline at end of file diff --git a/files/fr/games/publishing_games/game_distribution/index.html b/files/fr/games/publishing_games/game_distribution/index.html deleted file mode 100644 index 303600a677..0000000000 --- a/files/fr/games/publishing_games/game_distribution/index.html +++ /dev/null @@ -1,137 +0,0 @@ ---- -title: Distribution de jeux -slug: Games/Publishing_games/Game_distribution -tags: - - CocoonIO - - Game - - Game publishing - - Games - - Gaming - - HTML5 - - JavaScript - - Mobile Game Distribution - - Phonegap - - Web Stores - - distribution ---- -
{{GamesSidebar}}
- -

Vous avez suivi un tutoriel ou deux et créé un jeu en HTML5 : c'est génial ! Cet article couvre tout ce que vous avez besoin de savoir sur la façon de distribuer votre nouveau jeu dans la nature : que vous l'hébergiez en ligne vous-même, que vous le proposiez sur des plateformes ouvertes, ou encore que vous le mettiez à disposition sur des plateformes privées comme Google Play ou l'App Store iOS d'Apple.

- -

Avantages du HTML5 par rapport à du natif

- -

Choisir du HTML5 pour développer des jeux vous offre un certain nombre d'avantages :

- -

Les joies du multi-plateformes

- -

La technologie HTML5 en elle-même est multi-plateformes, donc vous pouvez écrire votre code une seule fois et viser plusieurs types d'appareils. Qu'il s'agisse de smartphone ou de tablettes bas de gamme, de PC portables ou de bureau, de smart TV, de montres, ou même d'un frigo si celui-ci supporte des navigateurs suffisamment récents!

- -

Vous n'avez pas besoin d'équipes dédiées pour travailler sur un même titre et visant différentes plateformes, et vous n'avez qu'un seul code source à gérer. Vous pouvez dédier plus de temps et d'argent à la promotion et à la monétisation de votre jeu.

- -

Des mises à jour immédiates

- -

Pas besoin d'attendre plusieurs jours pour mettre à jour le code source de votre jeu! Si un joueur trouve un bug, vous pouvez rapidement le corriger, mettre à jour le système et actualiser le jeu sur votre serveur pour offrir à vos joueurs une version mise à jour quasi instantanément.

- - - -

Avec les jeux HTML5, vous n'avez pas besoin de dire aux gens de chercher votre jeu sur un magasin d'applications. Vous pouvez simplement leur envoyer un lien direct pour accéder au jeu, et ils peuvent cliquer pour jouer sans attendre, sans qu'il soit nécessaire d'utiliser des plugins tiers, ou de télécharger et d'installer de gros packages. Gardez toutefois à l'esprit que le chargement de votre jeu peut prendre un peu de temps, en fonction de sa taille ou de la vitesse de votre connexion Internet. Dans tous les cas, il est beaucoup plus facile de faire la promotion de votre jeu si vous pouvez amener du trafic directement là où vous le souhaitez, sans avoir à passer toute une série d'obstacles avant de pouvoir jouer.

- -

Ordinateur vs mobile

- -

La majeure partie du trafic qui nous intéresse (des personnes jouant à des jeux en HTML5) arrive par le biais d'appareils mobiles, il va donc falloir se concentrer dessus si l'on souhaite vraiment réussir. Les appareils mobiles sont des plateformes idéales pour faire briller la technologie HTML5 et profiter de ses avantages. Pas de Flash, et le HTML5 est totalement multi-plateformes.

- -

Chercher à concurrencer les jeux pour ordinateur en direct est très difficile. Vous pouvez certes proposer votre jeu en HTML5 dans la même arène (voir la section Les boutiques de jeux pour ordinateur plus bas), et vous devriez d'ailleurs, car c'est une bonne chose que d'apporter de la diversité dans les plateformes que vous appréciez, mais souvenez-vous que les développeurs qui créent des jeux pour ordinateur ont des années d'expérience derrière eux, de supers outils et des canaux de distribution stables. Beaucoup de jeux HTML5 vont donc viser des segments de marché différents des jeux PC natifs : on proposera par exemple de petits jeux pour passer le temps dans les transports plutôt que des expériences hyper-immersives. De tels jeux sont souvent conçus pour être jouer à deux voire un seul doigt, de façon à pouvoir tenir votre appareil d'une main pour jouer et pouvoir garder votre seconde main libre peu importe ce dont vous avez besoin.

- -

Ceci étant dit, les plateformes pour ordinateurs peuvent être utilisées très simplement pour distribuer vos jeux, grâce à des "wrappers", des fonctionnalités qui vous aident préparer des builds natifs de votre jeu (voir le paragraphe sur les packs de jeux). C'est également appréciable de prévoir des commandes pour ordinateurs dans vos jeux, même si vous visez principalement les mobiles. Les joueurs apprécient vos jeux sur n'importe quelle plateforme disponible, et les postes fixes en font partie. En outre, il est généralement plus facile de construire et de tester un jeu sur ordinateur d'abord, avant de se lancer dans le débogage de la version mobile.

- -

Publier le jeu

- -

Il y a trois grandes possibilités à considérer lorsqu'on souhaite publier un jeu :

- - - -

Rappelez-vous que le nom de votre jeu doit être suffisamment distinctif pour être rapidement promu à l'avenir, mais également suffisamment accrocheur pour que les gens s'en rappellent.

- -

Auto-hébergement

- -

En tant que développeur.se front-end, vous savez sans doute déjà quoi faire : un jeu en HTML5 est simplement un autre site. Vous pouvez l'uploader sur un serveur distant, récupérer un nom de domaine accrocheur, et l'héberger vous-même.

- -

Si vous voulez gagner un peu d'argent avec le développement de jeux, prenez soin de sécuriser votre code source d'une façon ou d'une autre afin d'éviter que d'autres personnes ne vous le piquent et ne le vendent comme si c'était le leur. Vous pouvez par exemple concaténer et le réduire pour le rendre plus petit, ou encore le rendre beaucoup plus moche afin qu'il soit beaucoup plus difficile de déconstruire votre jeu. Une autre bonne mesure à prendre est de mettre à disposition une démo en ligne si vous prévoyez de le packager et de le vendre sur une boutique fermée du type iTunes ou Steam.

- -

Si vous travaillez sur un projet annexe juste pour le plaisir, garder le code source ouvert bénéficiera à celles et ceux qui voudraient apprendre à partir de vos créations. Dans ce cas vous n'avez même pas besoin de vous soucier de trouver un fournisseur d'hébergement, puisqu'il est possible d'héberger vos jeux sur GitHub Pages. Vous bénéficiez d'un hébergement gratuit, d'un contrôle de versions et de contributeurs potentiels si votre projet est suffisamment intéressant.

- -

Éditeurs et portails

- -

Comme leur nom le suggère, les éditeurs peuvent gérer la publication de votre jeu pour vous. Que vous choisissiez cette option ou non dépend de vos attentes en matière de distribution de votre jeu : souhaitez-vous l'envoyer partout où c'est possible, ou préférez-vous limiter sa présence à ceux qui auront acheté une licence exclusive ? À vous de voir. Étudiez plusieurs options, expérimentez chacune et tirez-en vos propres conclusions. Les éditeurs vous seront expliqués plus en détail dans notre article dédié à la monétisation.

- -

Il existe également des portails indépendants qui rassemblent des jeux intéressants, citons par exemple HTML5Games.com, GameArter.com, MarketJS.com, GameFlare, GameDistribution.com ou encore Poki. Vous pouvez y publier votre jeu et il recevra naturellement de la visibilité grâce au trafic conséquent que ces sites génèrent. Certains d'entre eux prennent vos fichiers et les hébergent sur leur serveur, tandis que d'autres renverront simplement un lien vers votre site web ou intègreront votre jeu sur leur site. Une telle exposition peuvent apporter uniquement de la visibilité à votre jeu, ou, si vous avez des publicités à côté de votre jeu (ou toute autre méthode de monétisation) cela peut également vous procurer des revenus.

- -

Le Web et les magasins d'applications natifs

- -

Vous pouvez aussi uploader et publier votre jeu directement sur différentes boutiques, ou marketplaces (places de marché). Pour cela vous devrez au préalable préparer et empaqueter votre jeu dans un format de construction spécifique à chaque écosystème d'application que vous visez. Voir à ce sujet la section {{anch("Marketplaces — Plateformes de distribution")}} pour obtenir plus de détails sur les différents types de marketplace disponibles.

- -

Marketplaces — Plateformes de distribution

- -

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.

-
- -

Boutiques en ligne

- -

Les meilleures plateformes de jeux HTML5 sont des boutiques Web. Il est facile de préparer un jeu pour ces plateformes, puisque cela ne demande que très peu voire aucune modification au jeu lui-même : il suffit en général d'ajouter une simple notice explicative ("manifeste") avec toutes les informations nécessaires dans un dossier zip contenant l'ensemble des ressources.

- - - -

Les App Store natifs

- -

Quand on s'intéresse aux supports mobiles, on retrouve l'App Store d'Apple pour iOS, Google Play pour Android, et tous leurs concurrents. Les App Store natifs comptent déjà des développeurs bien établis vendant de très bons jeux, il faudra donc avoir du talent et de la chance pour vous faire remarquer!

- - - -

Si vous souhaitez obtenir plus d'informations sur les différents types de boutiques d'applications, vous pouvez jeter un oeil à la liste des plateformes de distribution de logiciels mobiles (en anglais) sur Wikipédia.

- -

Les boutiques de jeux pour ordinateur

- -

Afin d'élargir votre audience, vous pouvez également viser l'écosystème des jeux pour ordinateur avec vos jeux en HTML5 - gardez toutefois à l'esprit tous les jeux de catégorie AAA qui captent la majeure partie du marché, et demandez vous bien si cela correspond à votre stratégie ou non. Pour faire les choses proprement sur ordinateur, vous devez apporter un support aux trois systèmes d'exploitation: Windows, Mac OS et Linux. La plus grosse plateforme en ligne de distribution de jeux est de loin Steam; les développeurs indépendants peuvent intégrer Steam via le programme Steam Direct. Rappelez-vous que vous devrez gérer les problématiques multi-plateformes vous-même en uploadant des versions différentes pour chaque plateforme.

- -

Au-delà de Steam, il existe des initiatives qui font beaucoup parler d'elles, comme Humble Bundle, où les jeux indépendants les plus populaires sont présentés à une audience plus large. Mais voyez-le plutôt comme une excellente opportunité de se faire connaître que de gagner beaucoup d'argent, car le prix que l'on paie pour des jeux dans un lot est généralement assez faible.

- -

Des packs de jeux

- -

Le Web est le choix le plus évident et le plus intéressant pour des jeux HTML5, mais si vous souhaitez atteindre une audience plus large et distribuer votre jeu dans un écosystème fermé, vous avez toujours la possibilité de le proposer dans un lot. L'avantage c'est que vous n'aurez pas besoin de faire travailler des équipes sur un même jeu pour des plateformes différentes : vous pouvez construire le jeu une fois pour toutes et utiliser des outils comme Phonegap ou CocoonIO pour l'intégrer dans un package pour des boutiques natives. Les lots ainsi obtenus sont généralement assez fiables, mais vous devriez malgré tout les tester et rester à l'affût des petits problèmes ou bugs à corriger.

- -

Outils disponibles

- -

Il existe toute une variété d'outils, à choisir en fonction de vos compétences, de vos frameworks favoris ou des plateformes que vous visez. Tout l'enjeu consiste à choisir le meilleur outil pour réaliser la tâche que vous souhaitez réaliser.

- - - -

Parmi les autres outils existants, on peut citer :

- - - -

Résumé

- -

La distribution permet d'offrir au monde entier un accès à votre jeu. Il existe de nombreuses possibilités et il n'existe pas de meilleure réponse, tout dépend de vos objectifs. Une fois que vous avez publié votre jeu, il est temps de se concentrer sur sa promotion : il est temps que les gens sachent que votre jeu existe! Si vous n'en faites pas la promotion, ils ne sauront même pas que votre jeu existe, et pourront encore moins y jouer.

diff --git a/files/fr/games/publishing_games/game_distribution/index.md b/files/fr/games/publishing_games/game_distribution/index.md new file mode 100644 index 0000000000..303600a677 --- /dev/null +++ b/files/fr/games/publishing_games/game_distribution/index.md @@ -0,0 +1,137 @@ +--- +title: Distribution de jeux +slug: Games/Publishing_games/Game_distribution +tags: + - CocoonIO + - Game + - Game publishing + - Games + - Gaming + - HTML5 + - JavaScript + - Mobile Game Distribution + - Phonegap + - Web Stores + - distribution +--- +
{{GamesSidebar}}
+ +

Vous avez suivi un tutoriel ou deux et créé un jeu en HTML5 : c'est génial ! Cet article couvre tout ce que vous avez besoin de savoir sur la façon de distribuer votre nouveau jeu dans la nature : que vous l'hébergiez en ligne vous-même, que vous le proposiez sur des plateformes ouvertes, ou encore que vous le mettiez à disposition sur des plateformes privées comme Google Play ou l'App Store iOS d'Apple.

+ +

Avantages du HTML5 par rapport à du natif

+ +

Choisir du HTML5 pour développer des jeux vous offre un certain nombre d'avantages :

+ +

Les joies du multi-plateformes

+ +

La technologie HTML5 en elle-même est multi-plateformes, donc vous pouvez écrire votre code une seule fois et viser plusieurs types d'appareils. Qu'il s'agisse de smartphone ou de tablettes bas de gamme, de PC portables ou de bureau, de smart TV, de montres, ou même d'un frigo si celui-ci supporte des navigateurs suffisamment récents!

+ +

Vous n'avez pas besoin d'équipes dédiées pour travailler sur un même titre et visant différentes plateformes, et vous n'avez qu'un seul code source à gérer. Vous pouvez dédier plus de temps et d'argent à la promotion et à la monétisation de votre jeu.

+ +

Des mises à jour immédiates

+ +

Pas besoin d'attendre plusieurs jours pour mettre à jour le code source de votre jeu! Si un joueur trouve un bug, vous pouvez rapidement le corriger, mettre à jour le système et actualiser le jeu sur votre serveur pour offrir à vos joueurs une version mise à jour quasi instantanément.

+ + + +

Avec les jeux HTML5, vous n'avez pas besoin de dire aux gens de chercher votre jeu sur un magasin d'applications. Vous pouvez simplement leur envoyer un lien direct pour accéder au jeu, et ils peuvent cliquer pour jouer sans attendre, sans qu'il soit nécessaire d'utiliser des plugins tiers, ou de télécharger et d'installer de gros packages. Gardez toutefois à l'esprit que le chargement de votre jeu peut prendre un peu de temps, en fonction de sa taille ou de la vitesse de votre connexion Internet. Dans tous les cas, il est beaucoup plus facile de faire la promotion de votre jeu si vous pouvez amener du trafic directement là où vous le souhaitez, sans avoir à passer toute une série d'obstacles avant de pouvoir jouer.

+ +

Ordinateur vs mobile

+ +

La majeure partie du trafic qui nous intéresse (des personnes jouant à des jeux en HTML5) arrive par le biais d'appareils mobiles, il va donc falloir se concentrer dessus si l'on souhaite vraiment réussir. Les appareils mobiles sont des plateformes idéales pour faire briller la technologie HTML5 et profiter de ses avantages. Pas de Flash, et le HTML5 est totalement multi-plateformes.

+ +

Chercher à concurrencer les jeux pour ordinateur en direct est très difficile. Vous pouvez certes proposer votre jeu en HTML5 dans la même arène (voir la section Les boutiques de jeux pour ordinateur plus bas), et vous devriez d'ailleurs, car c'est une bonne chose que d'apporter de la diversité dans les plateformes que vous appréciez, mais souvenez-vous que les développeurs qui créent des jeux pour ordinateur ont des années d'expérience derrière eux, de supers outils et des canaux de distribution stables. Beaucoup de jeux HTML5 vont donc viser des segments de marché différents des jeux PC natifs : on proposera par exemple de petits jeux pour passer le temps dans les transports plutôt que des expériences hyper-immersives. De tels jeux sont souvent conçus pour être jouer à deux voire un seul doigt, de façon à pouvoir tenir votre appareil d'une main pour jouer et pouvoir garder votre seconde main libre peu importe ce dont vous avez besoin.

+ +

Ceci étant dit, les plateformes pour ordinateurs peuvent être utilisées très simplement pour distribuer vos jeux, grâce à des "wrappers", des fonctionnalités qui vous aident préparer des builds natifs de votre jeu (voir le paragraphe sur les packs de jeux). C'est également appréciable de prévoir des commandes pour ordinateurs dans vos jeux, même si vous visez principalement les mobiles. Les joueurs apprécient vos jeux sur n'importe quelle plateforme disponible, et les postes fixes en font partie. En outre, il est généralement plus facile de construire et de tester un jeu sur ordinateur d'abord, avant de se lancer dans le débogage de la version mobile.

+ +

Publier le jeu

+ +

Il y a trois grandes possibilités à considérer lorsqu'on souhaite publier un jeu :

+ + + +

Rappelez-vous que le nom de votre jeu doit être suffisamment distinctif pour être rapidement promu à l'avenir, mais également suffisamment accrocheur pour que les gens s'en rappellent.

+ +

Auto-hébergement

+ +

En tant que développeur.se front-end, vous savez sans doute déjà quoi faire : un jeu en HTML5 est simplement un autre site. Vous pouvez l'uploader sur un serveur distant, récupérer un nom de domaine accrocheur, et l'héberger vous-même.

+ +

Si vous voulez gagner un peu d'argent avec le développement de jeux, prenez soin de sécuriser votre code source d'une façon ou d'une autre afin d'éviter que d'autres personnes ne vous le piquent et ne le vendent comme si c'était le leur. Vous pouvez par exemple concaténer et le réduire pour le rendre plus petit, ou encore le rendre beaucoup plus moche afin qu'il soit beaucoup plus difficile de déconstruire votre jeu. Une autre bonne mesure à prendre est de mettre à disposition une démo en ligne si vous prévoyez de le packager et de le vendre sur une boutique fermée du type iTunes ou Steam.

+ +

Si vous travaillez sur un projet annexe juste pour le plaisir, garder le code source ouvert bénéficiera à celles et ceux qui voudraient apprendre à partir de vos créations. Dans ce cas vous n'avez même pas besoin de vous soucier de trouver un fournisseur d'hébergement, puisqu'il est possible d'héberger vos jeux sur GitHub Pages. Vous bénéficiez d'un hébergement gratuit, d'un contrôle de versions et de contributeurs potentiels si votre projet est suffisamment intéressant.

+ +

Éditeurs et portails

+ +

Comme leur nom le suggère, les éditeurs peuvent gérer la publication de votre jeu pour vous. Que vous choisissiez cette option ou non dépend de vos attentes en matière de distribution de votre jeu : souhaitez-vous l'envoyer partout où c'est possible, ou préférez-vous limiter sa présence à ceux qui auront acheté une licence exclusive ? À vous de voir. Étudiez plusieurs options, expérimentez chacune et tirez-en vos propres conclusions. Les éditeurs vous seront expliqués plus en détail dans notre article dédié à la monétisation.

+ +

Il existe également des portails indépendants qui rassemblent des jeux intéressants, citons par exemple HTML5Games.com, GameArter.com, MarketJS.com, GameFlare, GameDistribution.com ou encore Poki. Vous pouvez y publier votre jeu et il recevra naturellement de la visibilité grâce au trafic conséquent que ces sites génèrent. Certains d'entre eux prennent vos fichiers et les hébergent sur leur serveur, tandis que d'autres renverront simplement un lien vers votre site web ou intègreront votre jeu sur leur site. Une telle exposition peuvent apporter uniquement de la visibilité à votre jeu, ou, si vous avez des publicités à côté de votre jeu (ou toute autre méthode de monétisation) cela peut également vous procurer des revenus.

+ +

Le Web et les magasins d'applications natifs

+ +

Vous pouvez aussi uploader et publier votre jeu directement sur différentes boutiques, ou marketplaces (places de marché). Pour cela vous devrez au préalable préparer et empaqueter votre jeu dans un format de construction spécifique à chaque écosystème d'application que vous visez. Voir à ce sujet la section {{anch("Marketplaces — Plateformes de distribution")}} pour obtenir plus de détails sur les différents types de marketplace disponibles.

+ +

Marketplaces — Plateformes de distribution

+ +

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.

+
+ +

Boutiques en ligne

+ +

Les meilleures plateformes de jeux HTML5 sont des boutiques Web. Il est facile de préparer un jeu pour ces plateformes, puisque cela ne demande que très peu voire aucune modification au jeu lui-même : il suffit en général d'ajouter une simple notice explicative ("manifeste") avec toutes les informations nécessaires dans un dossier zip contenant l'ensemble des ressources.

+ + + +

Les App Store natifs

+ +

Quand on s'intéresse aux supports mobiles, on retrouve l'App Store d'Apple pour iOS, Google Play pour Android, et tous leurs concurrents. Les App Store natifs comptent déjà des développeurs bien établis vendant de très bons jeux, il faudra donc avoir du talent et de la chance pour vous faire remarquer!

+ + + +

Si vous souhaitez obtenir plus d'informations sur les différents types de boutiques d'applications, vous pouvez jeter un oeil à la liste des plateformes de distribution de logiciels mobiles (en anglais) sur Wikipédia.

+ +

Les boutiques de jeux pour ordinateur

+ +

Afin d'élargir votre audience, vous pouvez également viser l'écosystème des jeux pour ordinateur avec vos jeux en HTML5 - gardez toutefois à l'esprit tous les jeux de catégorie AAA qui captent la majeure partie du marché, et demandez vous bien si cela correspond à votre stratégie ou non. Pour faire les choses proprement sur ordinateur, vous devez apporter un support aux trois systèmes d'exploitation: Windows, Mac OS et Linux. La plus grosse plateforme en ligne de distribution de jeux est de loin Steam; les développeurs indépendants peuvent intégrer Steam via le programme Steam Direct. Rappelez-vous que vous devrez gérer les problématiques multi-plateformes vous-même en uploadant des versions différentes pour chaque plateforme.

+ +

Au-delà de Steam, il existe des initiatives qui font beaucoup parler d'elles, comme Humble Bundle, où les jeux indépendants les plus populaires sont présentés à une audience plus large. Mais voyez-le plutôt comme une excellente opportunité de se faire connaître que de gagner beaucoup d'argent, car le prix que l'on paie pour des jeux dans un lot est généralement assez faible.

+ +

Des packs de jeux

+ +

Le Web est le choix le plus évident et le plus intéressant pour des jeux HTML5, mais si vous souhaitez atteindre une audience plus large et distribuer votre jeu dans un écosystème fermé, vous avez toujours la possibilité de le proposer dans un lot. L'avantage c'est que vous n'aurez pas besoin de faire travailler des équipes sur un même jeu pour des plateformes différentes : vous pouvez construire le jeu une fois pour toutes et utiliser des outils comme Phonegap ou CocoonIO pour l'intégrer dans un package pour des boutiques natives. Les lots ainsi obtenus sont généralement assez fiables, mais vous devriez malgré tout les tester et rester à l'affût des petits problèmes ou bugs à corriger.

+ +

Outils disponibles

+ +

Il existe toute une variété d'outils, à choisir en fonction de vos compétences, de vos frameworks favoris ou des plateformes que vous visez. Tout l'enjeu consiste à choisir le meilleur outil pour réaliser la tâche que vous souhaitez réaliser.

+ + + +

Parmi les autres outils existants, on peut citer :

+ + + +

Résumé

+ +

La distribution permet d'offrir au monde entier un accès à votre jeu. Il existe de nombreuses possibilités et il n'existe pas de meilleure réponse, tout dépend de vos objectifs. Une fois que vous avez publié votre jeu, il est temps de se concentrer sur sa promotion : il est temps que les gens sachent que votre jeu existe! Si vous n'en faites pas la promotion, ils ne sauront même pas que votre jeu existe, et pourront encore moins y jouer.

diff --git a/files/fr/games/publishing_games/game_monetization/index.html b/files/fr/games/publishing_games/game_monetization/index.html deleted file mode 100644 index 4e5930c930..0000000000 --- a/files/fr/games/publishing_games/game_monetization/index.html +++ /dev/null @@ -1,101 +0,0 @@ ---- -title: Monétisation du jeu -slug: Games/Publishing_games/Game_monetization -tags: - - Games - - HTML5 - - JavaScript - - Jeux - - Licence - - Monétisation - - annonces - - iap - - image de marque -translation_of: Games/Publishing_games/Game_monetization -original_slug: Jeux/Publier_jeux/Game_monetization ---- -
{{GamesSidebar}}
- -

Lorsque vous avez passé votre temps à créer un jeu, à le distribuer et à en faire la promotion, vous devriez envisager d'en gagner de l'argent. Si votre travail est une entreprise sérieuse sur la voie de devenir un développeur de jeux indépendant capable de gagner sa vie, lisez la suite et voyez quelles sont vos options. La technologie est suffisamment mature; maintenant, il s'agit simplement de choisir la bonne approche.

- -

Jeux payants

- -

Le premier choix, le plus évident qui vous vient à l'esprit pourrait être de vendre les jeux de la même manière que pour d'énormes titres AAA — avec un prix initial fixe. Même si le marché numérique est essentiel et que vous n'avez pas besoin d'imprimer des couvertures et de placer votre jeu dans un magasin physique dans des boîtes, pour gagner de l'argent décent en vendant vos jeux à un prix fixe, vous devez investir votre temps et votre argent dans le marketing.

- -

Le prix que vous facturez pour votre jeu dépend du marché, de la qualité de votre jeu et de nombreux autres petits facteurs. Un titre arcade iOS peut être vendu pour 0.99 USD, mais un jeu de bureau plus long de style RPG sur Steam peut coûter 20 USD; les deux prix sont corrects. Vous devez suivre le marché et faire vos propres recherches — apprendre rapidement de vos erreurs est important.

- -

Achats dans l'application

- -

Au lieu de faire payer votre jeu à l'avance, vous pouvre proposer un jeu gratuit avec des achats intégrés (IAPs). Dans ce cas, le jeu peut être acquis sans dépenser un centime — donnez le jeu aux joueurs, mais offrez de la monnaie du jeu, des bonus ou des avantages en argent réel. Des exemples spécifiques peuvent inclure des niveaux bonus, de meilleurs armes ou sorts, ou le remplissage de l'énergie nécessaire pour jouer. Concevoir un bon système IAP est un art en soi.

- -

N'oubliez pas que vous avez besoin de milliers de téléchargements de votre jeu pour rendre les IAP efficaces — seule une petite fraction des joueurs paiera réellement pour les IAP. Comment petit? Cela varie, mais environ une personne sur mille est dans la moyenne. Plus il y a de personnes qui jouent à votre jeu, plus les chances que quelqu'un paie est élevée, donc vos revenus dépendent fortement de vos activités de promotion.

- -

Freemium

- -

Les jeux qui comportent des IAP sont souvent appelés freemium ou free-to-play — un jeu freemium peut être acquis et joué gratuitement, mais vous pouvez payer pour des fonctionnalités supplémentaires (premium), des biens virtuels ou d'autres avantages. Le mot lui-même a acquis des connotations négatives après que les grandes entreprises se soient concentrées sur la création de jeux, dont le but principal était d'obtenir autant d'argent que possible des joueurs au lieu de proposer une expérience amusante. Les pires cas étaient lorsque vous pouviez utiliser de l'argent réel pour payer pour obtenir des avantages par rapport aux autres joueurs, ou lorsqu'ils restreignaient l'accès aux étapes suivantes du jeu à moins que les joueurs ne paient. Le terme «pay to win» a été inventé et cette approche n'est pas appréciée par de nombreux joueurs et développeurs. Si vous souhaitez mettre en œuvre des IAP, essayez d'ajouter de la valeur au jeu avec quelque chose que les joueurs apprécieront au lieu de le retirer et de le facturer.

- -

Add-ons et DLCs

- -

Les Add-ons et les DLCs sont un bon moyen de fournir une valeur supplémentaire à un jeu déjà sorti, mais n'oubliez pas que vous devrez proposer un contenu décent et divertissant pour attirer les gens à l'acheter. Un tout nouvel ensemble de niveaux avec de nouveaux personnages, de nouvelles armes et une nouvelle histoire est un bon matériau pour le DLC, mais pour avoir suffisamment de ventes, le jeu lui-même doit être populaire, sinon aucun joueur ne voudra dépenser son argent durement gagné.

- -

Advertisements

- -

Au lieu de vendre activement les jeux, vous pouvez également essayer de vous procurer un revenu passif — afficher des publicités et s'appuyer sur des activités précédentes liées à la promotion de votre jeu peut en bénéficier, mais votre jeu doit crée une dépendance, ce qui n'est pas aussi facile qu'il y paraît. Vous devez encore le planifier, et à un moment donné vous aurez également besoin d'un peu de chance. Si votre jeu devient viral et que les gens commencent à le partager, vous pouvez obtenir beaucoup de téléchargements et d'argent grâce aux publicités.

- -

De nombreuses entreprises proposent des systèmes de publicité - vous vous inscrivez et leur permettez de diffuser des publicités en échange d'un pourcentage des revenus. On dit que Google AdSense est le plus efficace, mais il n'est pas conçu pour les jeux et c'est une très mauvaise pratique de l'utiliser à cette fin. Au lieu de risquer de fermer votre compte et de bloquer tout l'argent, essayez d'utiliser les portails habituels ciblés par gamedev comme LeadBolt. Ils offrent des systèmes faciles à mettre en œuvre pour afficher les publicités dans vos jeux et partager les gains avec vous.

- -

Les publicités vidéo sont de plus en plus populaires, en particulier sous la forme d'un pré-roll - elles sont diffusées au début de votre jeu pendant son chargement. Et pour savoir où placer les publicités dans votre jeu, cela dépend vraiment de vous. Il doit être aussi subtil que possible pour ne pas trop gêner les joueurs, mais suffisamment visible pour les faire cliquer ou du moins en prendre note. L'ajout de publicités entre les sessions de jeu sur les écrans de jeu est une approche populaire.

- -

Licence

- -

Il existe une approche qui peut fonctionner comme un modèle de monétisation à elle seule, et qui consiste à vendre des licences pour la distribution de votre jeu. Il y a de plus en plus de portails intéressés à montrer vos jeux sur leurs sites Web. Ils suivent diverses stratégies pour gagner de l'argent via vos jeux, mais vous n'avez pas à vous soucier de tout cela car la vente de la licence est généralement une transaction unique. Vous obtenez de l'argent et ils peuvent faire preuve de créativité en utilisant votre jeu pour gagner de l'argent.

- -

Trouver des éditeurs peut être difficile au début — esssayez de les rechercher sur les forums HTML5 Gamedevs. Si vous êtes bien connu, ils peuvent vous contacter. La plupart des offres sont conclues par e-mail lorsque vous parlez à une personne dédiée du côté de l'éditeur. Certains sites Web d'éditeurs ont ces informations facilement disponibles, tandis que d'autres sont plus difficiles à trouver. Lorsque vous atteignez un éditeur, essayez d'être gentil et direct - ce sont des gens occupés.

- -

Licences exclusives

- -

La licence exclusive est un type de licence pour un éditeur — vous avez créé un jeu et vous en vendez tous les droits à une seule entité ainsi que les droits de le redistribuer — Softgames est un exemple d'un tel éditeur. Vous ne pouvez pas le revendre sous quelque forme que ce soit tant que l'éditeur en a les droits - c'est pourquoi les accords exclusifs valent beaucoup d'argent. Combien exactement? Cela dépend de la qualité du jeu, de son genre, de son éditeur et de bien d'autres, mais généralement, ce sera entre 2000 et 5000 USD. Une fois que vous avez vendu une licence exclusive, vous pouvez oublier la promotion de ce jeu particulier car vous ne gagnerez pas plus, alors ne concluez un tel accord que si vous êtes sûr qu'il est suffisamment rentable.

- -

Licences non exclusives

- -

Cette approche est moins stricte - vous pouvez vendre une licence à plusieurs éditeurs. C'est l'approche la plus populaire car avec chaque nouvel éditeur (et ils apparaissent constamment), vous pouvez vendre vos jeux à des conditions non exclusives. N'oubliez pas qu'avec cette licence, l'éditeur ne peut pas la redistribuer davantage - cela s'appelle souvent un accord verrouillé sur le site, car il achète le droit de publier le jeu sur son propre portail. Le coût habituel d'une licence non exclusive est d'environ 500 USD.

- -

Abonnements

- -

Il existe également une option pour obtenir un revenu mensuel passif via un abonnement. Au lieu d'obtenir un paiement unique, vous pouvez obtenir une petite somme d'argent par jeu, par mois - cela peut représenter environ 20 à 50 USD par mois et par jeu. C'est normalement à vous de décider si vous voulez obtenir tout l'argent en une somme forfaitaire ou l'obtenir par mois. N'oubliez pas qu'il peut être annulé, ce n'est donc pas une solution qui fonctionne indéfiniment.

- -

Revenus publicitaires

- -

Vous pouvez implémenter vous-même des publicités dans votre jeu et essayer de trouver le trafic pour gagner un peu, mais vous pouvez également conclure un accord de partage des revenus avec un éditeur. Ils se chargeront de gérer le trafic et partageront les gains - généralement dans un accord 70/30 ou 50/50, collecté par mois.

- -

N'oubliez pas que de nombreux nouveaux éditeurs de mauvaise qualité voudront obtenir votre jeu pour des revenus publicitaires au lieu de l'octroi de licences, car cela leur coûtera moins cher et vous pourriez vous retrouver avec des revenus d'environ 2 USD par jeu pour l'ensemble de la transaction. Soyez prudent lorsque vous traitez avec de nouveaux éditeurs - il est parfois préférable de réduire le coût de la licence pour un éditeur connu plutôt que de risquer une fraude avec un éditeur inconnu pour plus d'argent.

- -

Les éditeurs prenant vos jeux pour le partage des revenus et / ou l'octroi de licences peuvent nécessiter la mise en œuvre de leurs propres API, ce qui peut demander un travail supplémentaire, alors considérez cela également dans vos tarifs.

- -

L'image de marque

- -

Vous pouvez vendre les droits d'utilisation de votre jeu à des fins de branding ou le faire vous-même. Dans le premier cas, c'est presque comme une licence non exclusive, mais le client achètera généralement les droits pour le code et implémentera ses propres graphiques. Dans le second cas, c'est comme un accord indépendant, mais vous réutilisez le code et ajoutez des graphiques fournis par le client, parfois en les implémentant comme il vous le demande. Par exemple, si vous avez un jeu dans lequel un joueur tape des aliments, vous pouvez changer la nourriture des produits du client pour leur faire de la publicité. Les prix de ce modèle varient considérablement en fonction de la marque, du client et de la quantité de travail que vous effectuez.

- -

Autres stratégies de monétisation non axées sur le jeu

- -

Il existe d'autres façons de gagner de l'argent lors de la création de jeux HTML5, et cela n'a même pas besoin d'être lié au jeu.

- -

Vendre des ressources

- -

Si vous êtes graphiste, vous pouvez vendre les actifs des jeux que vous avez créés ou quelque chose de nouveau exclusivement à cette fin dans des boutiques en ligne comme Envato Market. Ce n'est pas beaucoup, mais si vous êtes un designer connu, cela peut être un flux de revenus passif supplémentaire.

- -

Rédaction d'articles et de tutoriels

- -

Il est possible d'écrire des articles sur vos jeux et même d'être payé pour eux. La promotion et la monétisation de jeux en même temps sont gagnant-gagnant, et si vous n'en abusez pas avec trop de publicité, les lecteurs apprécieront de les lire et d'apprendre une chose ou deux. Si vous vous concentrez d'abord sur le partage des connaissances et que vous utilisez vos jeux comme des exemples, cela devrait être correct. Consultez Tuts+ Game Development ou des sites Web similaires pour des opportunités d'écriture.

- -

Marchandise

- -

Vous pouvez vendre des t-shirts, des autocollants ou d'autres gadgets — certains développeurs gagnent plus d'argent avec la marchandise qu'avec les jeux eux-mêmes, mais cela ne fonctionne que sur des jeux très populaires et reconnaissables comme Angry Birds. Pourtant, cela pourrait être un autre petit flux de revenus passifs. Plus vos revenus sont diversifiés, meilleure est la stabilité de votre entreprise.

- -

Donations

- -

Lorsque tout le reste échoue, vous pouvez essayer de mettre un bouton de don sur la page de votre jeu et demander le soutien de la communauté. Parfois, cela fonctionne, mais seulement si le joueur vous connaît et estime que cela vous aidera dans votre situation. C'est pourquoi il est si important de gérer soigneusement votre communauté. Cela a fonctionné avec la compétition js13kGames — chaque participant a reçu un t-shirt gratuit, et certains ont même rendu quelques dollars pour l'aider à continuer dans les années à venir.

- -

Résumé

- -

Il existe de nombreuses façons de gagner de l'argent - tout ce qui s'applique au monde du jeu AAA "normal" peut être plus ou moins appliqué aux jeux HTML5 occasionnels. Cependant, vous pouvez également vous concentrer sur la vente de licences, la création de marque ou le partage des revenus grâce aux publicités. C'est à vous de décider quel chemin vous allez suivre.

diff --git a/files/fr/games/publishing_games/game_monetization/index.md b/files/fr/games/publishing_games/game_monetization/index.md new file mode 100644 index 0000000000..4e5930c930 --- /dev/null +++ b/files/fr/games/publishing_games/game_monetization/index.md @@ -0,0 +1,101 @@ +--- +title: Monétisation du jeu +slug: Games/Publishing_games/Game_monetization +tags: + - Games + - HTML5 + - JavaScript + - Jeux + - Licence + - Monétisation + - annonces + - iap + - image de marque +translation_of: Games/Publishing_games/Game_monetization +original_slug: Jeux/Publier_jeux/Game_monetization +--- +
{{GamesSidebar}}
+ +

Lorsque vous avez passé votre temps à créer un jeu, à le distribuer et à en faire la promotion, vous devriez envisager d'en gagner de l'argent. Si votre travail est une entreprise sérieuse sur la voie de devenir un développeur de jeux indépendant capable de gagner sa vie, lisez la suite et voyez quelles sont vos options. La technologie est suffisamment mature; maintenant, il s'agit simplement de choisir la bonne approche.

+ +

Jeux payants

+ +

Le premier choix, le plus évident qui vous vient à l'esprit pourrait être de vendre les jeux de la même manière que pour d'énormes titres AAA — avec un prix initial fixe. Même si le marché numérique est essentiel et que vous n'avez pas besoin d'imprimer des couvertures et de placer votre jeu dans un magasin physique dans des boîtes, pour gagner de l'argent décent en vendant vos jeux à un prix fixe, vous devez investir votre temps et votre argent dans le marketing.

+ +

Le prix que vous facturez pour votre jeu dépend du marché, de la qualité de votre jeu et de nombreux autres petits facteurs. Un titre arcade iOS peut être vendu pour 0.99 USD, mais un jeu de bureau plus long de style RPG sur Steam peut coûter 20 USD; les deux prix sont corrects. Vous devez suivre le marché et faire vos propres recherches — apprendre rapidement de vos erreurs est important.

+ +

Achats dans l'application

+ +

Au lieu de faire payer votre jeu à l'avance, vous pouvre proposer un jeu gratuit avec des achats intégrés (IAPs). Dans ce cas, le jeu peut être acquis sans dépenser un centime — donnez le jeu aux joueurs, mais offrez de la monnaie du jeu, des bonus ou des avantages en argent réel. Des exemples spécifiques peuvent inclure des niveaux bonus, de meilleurs armes ou sorts, ou le remplissage de l'énergie nécessaire pour jouer. Concevoir un bon système IAP est un art en soi.

+ +

N'oubliez pas que vous avez besoin de milliers de téléchargements de votre jeu pour rendre les IAP efficaces — seule une petite fraction des joueurs paiera réellement pour les IAP. Comment petit? Cela varie, mais environ une personne sur mille est dans la moyenne. Plus il y a de personnes qui jouent à votre jeu, plus les chances que quelqu'un paie est élevée, donc vos revenus dépendent fortement de vos activités de promotion.

+ +

Freemium

+ +

Les jeux qui comportent des IAP sont souvent appelés freemium ou free-to-play — un jeu freemium peut être acquis et joué gratuitement, mais vous pouvez payer pour des fonctionnalités supplémentaires (premium), des biens virtuels ou d'autres avantages. Le mot lui-même a acquis des connotations négatives après que les grandes entreprises se soient concentrées sur la création de jeux, dont le but principal était d'obtenir autant d'argent que possible des joueurs au lieu de proposer une expérience amusante. Les pires cas étaient lorsque vous pouviez utiliser de l'argent réel pour payer pour obtenir des avantages par rapport aux autres joueurs, ou lorsqu'ils restreignaient l'accès aux étapes suivantes du jeu à moins que les joueurs ne paient. Le terme «pay to win» a été inventé et cette approche n'est pas appréciée par de nombreux joueurs et développeurs. Si vous souhaitez mettre en œuvre des IAP, essayez d'ajouter de la valeur au jeu avec quelque chose que les joueurs apprécieront au lieu de le retirer et de le facturer.

+ +

Add-ons et DLCs

+ +

Les Add-ons et les DLCs sont un bon moyen de fournir une valeur supplémentaire à un jeu déjà sorti, mais n'oubliez pas que vous devrez proposer un contenu décent et divertissant pour attirer les gens à l'acheter. Un tout nouvel ensemble de niveaux avec de nouveaux personnages, de nouvelles armes et une nouvelle histoire est un bon matériau pour le DLC, mais pour avoir suffisamment de ventes, le jeu lui-même doit être populaire, sinon aucun joueur ne voudra dépenser son argent durement gagné.

+ +

Advertisements

+ +

Au lieu de vendre activement les jeux, vous pouvez également essayer de vous procurer un revenu passif — afficher des publicités et s'appuyer sur des activités précédentes liées à la promotion de votre jeu peut en bénéficier, mais votre jeu doit crée une dépendance, ce qui n'est pas aussi facile qu'il y paraît. Vous devez encore le planifier, et à un moment donné vous aurez également besoin d'un peu de chance. Si votre jeu devient viral et que les gens commencent à le partager, vous pouvez obtenir beaucoup de téléchargements et d'argent grâce aux publicités.

+ +

De nombreuses entreprises proposent des systèmes de publicité - vous vous inscrivez et leur permettez de diffuser des publicités en échange d'un pourcentage des revenus. On dit que Google AdSense est le plus efficace, mais il n'est pas conçu pour les jeux et c'est une très mauvaise pratique de l'utiliser à cette fin. Au lieu de risquer de fermer votre compte et de bloquer tout l'argent, essayez d'utiliser les portails habituels ciblés par gamedev comme LeadBolt. Ils offrent des systèmes faciles à mettre en œuvre pour afficher les publicités dans vos jeux et partager les gains avec vous.

+ +

Les publicités vidéo sont de plus en plus populaires, en particulier sous la forme d'un pré-roll - elles sont diffusées au début de votre jeu pendant son chargement. Et pour savoir où placer les publicités dans votre jeu, cela dépend vraiment de vous. Il doit être aussi subtil que possible pour ne pas trop gêner les joueurs, mais suffisamment visible pour les faire cliquer ou du moins en prendre note. L'ajout de publicités entre les sessions de jeu sur les écrans de jeu est une approche populaire.

+ +

Licence

+ +

Il existe une approche qui peut fonctionner comme un modèle de monétisation à elle seule, et qui consiste à vendre des licences pour la distribution de votre jeu. Il y a de plus en plus de portails intéressés à montrer vos jeux sur leurs sites Web. Ils suivent diverses stratégies pour gagner de l'argent via vos jeux, mais vous n'avez pas à vous soucier de tout cela car la vente de la licence est généralement une transaction unique. Vous obtenez de l'argent et ils peuvent faire preuve de créativité en utilisant votre jeu pour gagner de l'argent.

+ +

Trouver des éditeurs peut être difficile au début — esssayez de les rechercher sur les forums HTML5 Gamedevs. Si vous êtes bien connu, ils peuvent vous contacter. La plupart des offres sont conclues par e-mail lorsque vous parlez à une personne dédiée du côté de l'éditeur. Certains sites Web d'éditeurs ont ces informations facilement disponibles, tandis que d'autres sont plus difficiles à trouver. Lorsque vous atteignez un éditeur, essayez d'être gentil et direct - ce sont des gens occupés.

+ +

Licences exclusives

+ +

La licence exclusive est un type de licence pour un éditeur — vous avez créé un jeu et vous en vendez tous les droits à une seule entité ainsi que les droits de le redistribuer — Softgames est un exemple d'un tel éditeur. Vous ne pouvez pas le revendre sous quelque forme que ce soit tant que l'éditeur en a les droits - c'est pourquoi les accords exclusifs valent beaucoup d'argent. Combien exactement? Cela dépend de la qualité du jeu, de son genre, de son éditeur et de bien d'autres, mais généralement, ce sera entre 2000 et 5000 USD. Une fois que vous avez vendu une licence exclusive, vous pouvez oublier la promotion de ce jeu particulier car vous ne gagnerez pas plus, alors ne concluez un tel accord que si vous êtes sûr qu'il est suffisamment rentable.

+ +

Licences non exclusives

+ +

Cette approche est moins stricte - vous pouvez vendre une licence à plusieurs éditeurs. C'est l'approche la plus populaire car avec chaque nouvel éditeur (et ils apparaissent constamment), vous pouvez vendre vos jeux à des conditions non exclusives. N'oubliez pas qu'avec cette licence, l'éditeur ne peut pas la redistribuer davantage - cela s'appelle souvent un accord verrouillé sur le site, car il achète le droit de publier le jeu sur son propre portail. Le coût habituel d'une licence non exclusive est d'environ 500 USD.

+ +

Abonnements

+ +

Il existe également une option pour obtenir un revenu mensuel passif via un abonnement. Au lieu d'obtenir un paiement unique, vous pouvez obtenir une petite somme d'argent par jeu, par mois - cela peut représenter environ 20 à 50 USD par mois et par jeu. C'est normalement à vous de décider si vous voulez obtenir tout l'argent en une somme forfaitaire ou l'obtenir par mois. N'oubliez pas qu'il peut être annulé, ce n'est donc pas une solution qui fonctionne indéfiniment.

+ +

Revenus publicitaires

+ +

Vous pouvez implémenter vous-même des publicités dans votre jeu et essayer de trouver le trafic pour gagner un peu, mais vous pouvez également conclure un accord de partage des revenus avec un éditeur. Ils se chargeront de gérer le trafic et partageront les gains - généralement dans un accord 70/30 ou 50/50, collecté par mois.

+ +

N'oubliez pas que de nombreux nouveaux éditeurs de mauvaise qualité voudront obtenir votre jeu pour des revenus publicitaires au lieu de l'octroi de licences, car cela leur coûtera moins cher et vous pourriez vous retrouver avec des revenus d'environ 2 USD par jeu pour l'ensemble de la transaction. Soyez prudent lorsque vous traitez avec de nouveaux éditeurs - il est parfois préférable de réduire le coût de la licence pour un éditeur connu plutôt que de risquer une fraude avec un éditeur inconnu pour plus d'argent.

+ +

Les éditeurs prenant vos jeux pour le partage des revenus et / ou l'octroi de licences peuvent nécessiter la mise en œuvre de leurs propres API, ce qui peut demander un travail supplémentaire, alors considérez cela également dans vos tarifs.

+ +

L'image de marque

+ +

Vous pouvez vendre les droits d'utilisation de votre jeu à des fins de branding ou le faire vous-même. Dans le premier cas, c'est presque comme une licence non exclusive, mais le client achètera généralement les droits pour le code et implémentera ses propres graphiques. Dans le second cas, c'est comme un accord indépendant, mais vous réutilisez le code et ajoutez des graphiques fournis par le client, parfois en les implémentant comme il vous le demande. Par exemple, si vous avez un jeu dans lequel un joueur tape des aliments, vous pouvez changer la nourriture des produits du client pour leur faire de la publicité. Les prix de ce modèle varient considérablement en fonction de la marque, du client et de la quantité de travail que vous effectuez.

+ +

Autres stratégies de monétisation non axées sur le jeu

+ +

Il existe d'autres façons de gagner de l'argent lors de la création de jeux HTML5, et cela n'a même pas besoin d'être lié au jeu.

+ +

Vendre des ressources

+ +

Si vous êtes graphiste, vous pouvez vendre les actifs des jeux que vous avez créés ou quelque chose de nouveau exclusivement à cette fin dans des boutiques en ligne comme Envato Market. Ce n'est pas beaucoup, mais si vous êtes un designer connu, cela peut être un flux de revenus passif supplémentaire.

+ +

Rédaction d'articles et de tutoriels

+ +

Il est possible d'écrire des articles sur vos jeux et même d'être payé pour eux. La promotion et la monétisation de jeux en même temps sont gagnant-gagnant, et si vous n'en abusez pas avec trop de publicité, les lecteurs apprécieront de les lire et d'apprendre une chose ou deux. Si vous vous concentrez d'abord sur le partage des connaissances et que vous utilisez vos jeux comme des exemples, cela devrait être correct. Consultez Tuts+ Game Development ou des sites Web similaires pour des opportunités d'écriture.

+ +

Marchandise

+ +

Vous pouvez vendre des t-shirts, des autocollants ou d'autres gadgets — certains développeurs gagnent plus d'argent avec la marchandise qu'avec les jeux eux-mêmes, mais cela ne fonctionne que sur des jeux très populaires et reconnaissables comme Angry Birds. Pourtant, cela pourrait être un autre petit flux de revenus passifs. Plus vos revenus sont diversifiés, meilleure est la stabilité de votre entreprise.

+ +

Donations

+ +

Lorsque tout le reste échoue, vous pouvez essayer de mettre un bouton de don sur la page de votre jeu et demander le soutien de la communauté. Parfois, cela fonctionne, mais seulement si le joueur vous connaît et estime que cela vous aidera dans votre situation. C'est pourquoi il est si important de gérer soigneusement votre communauté. Cela a fonctionné avec la compétition js13kGames — chaque participant a reçu un t-shirt gratuit, et certains ont même rendu quelques dollars pour l'aider à continuer dans les années à venir.

+ +

Résumé

+ +

Il existe de nombreuses façons de gagner de l'argent - tout ce qui s'applique au monde du jeu AAA "normal" peut être plus ou moins appliqué aux jeux HTML5 occasionnels. Cependant, vous pouvez également vous concentrer sur la vente de licences, la création de marque ou le partage des revenus grâce aux publicités. C'est à vous de décider quel chemin vous allez suivre.

diff --git a/files/fr/games/publishing_games/game_promotion/index.html b/files/fr/games/publishing_games/game_promotion/index.html deleted file mode 100644 index 5c35777d31..0000000000 --- a/files/fr/games/publishing_games/game_promotion/index.html +++ /dev/null @@ -1,93 +0,0 @@ ---- -title: Promouvoir un jeu -slug: Games/Publishing_games/Game_promotion -tags: - - Community - - Games - - JavaScript - - Online Games - - Promotion - - blog - - competitions ---- -
{{GamesSidebar}}
- -

Développer un jeu et le mettre en ligne ne suffit pas. Vous devez faire connaître au monde que vous avez un jeu intéressant auquel les gens auront envie de jouer. Il y a bien des façons de promouvoir votre jeu ; la plupart sont gratuites, donc même si vous avez du mal à gagner votre vie en tant que développeur indépendant, vous pouvez malgré tout faire beaucoup de choses pour faire connaître votre super nouveau jeu aux autres, y compris sans budget. Faire la promotion d'un jeu sera également très utile lorsque vous voudrez le monétiser, il est donc important de le faire correctement.

- -

Compétitions

- -

Participer à des compétitions n'aura pas seulement pour effet d'accroître vos talents pour le développement de jeu et de sympathiser avec de nouvelles développeuses et développeurs auprès desquels vous pourrez apprendre : cela vous fera également intégrer une communauté. Si vous créez un bon jeu à l'occasion d'un tournoi et que vous gagnez des prix au passage, votre jeu sera automatiquement promu par les organisateurs et les autres participants. À vous la richesse et la gloire ! ou quelque chose dans le genre.

- -

Beaucoup de grands jeux naissent d'une petite démo rapide créée pendant une compétition. Si l'idée et sa réalisation sont suffisamment bonnes, vous réussirez. De plus, les tournois demandent généralement que les jeux suivent un thème obligatoire, donc vous pourrez vous montrer créatif sur un concept donné si vous peinez à trouver des idées.

- -

Site internet et blog

- -

Vous avez tout intérêt à créer votre propre site internet comprenant toutes les informations relatives à vos jeux, de façon à montrer aux gens ce sur quoi vous avez travaillé. Plus vous pouvez intégrer d'informations, mieux c'est : captures d'écrans, descriptions, bande-annonce, dossier de presse, configurations nécessaires, plateformes disponibles, détails sur l'assistance, etc. Vous marquerez des points en autorisant vos utilisateurs à jouer directement à vos jeux en ligne, a minima à une démo. Vous devriez également travailler un peu votre référencement sur les moteurs de recherche (SEO - Search Engine Optimization) pour permettre aux gens de trouver vos jeux plus facilement.

- -

Vous pouvez également tenir un blog dédié à tout ce qui concerne vos activités de développeur⋅se de jeux. Décrivez votre processus de développement, discutez des bugs les plus affreux que vous rencontrez, partagez des anecdotes marrantes ou ce que vous avez appris, les hauts et les bas d'une vie de développeur de jeu. La publication régulière d'informations à propos de vos jeux aidera à éduquer d'autres personnes, à améliorer votre réputation au sein de la communauté, et améliorera également votre référencement. Une possibilité plus avancée consiste à publier un rapport mensuel qui synthétise vos progrès : il vous permet de voir ce que vous avez accompli au cours du mois passé, ce qu'il reste à faire, et il rappelle aux gens que votre jeu sera bientôt publié. C'est toujours une bonne chose de générer du buzz.

- -

Bien que vous puissiez créer votre site web de zéro, il existe également des outils pour rendre le processus plus facile. ManaKeep par exemple est un constructeur de sites internet conçu spécifiquement pour les développeurs de jeux indépendants, et représente un super point de départ pour créer votre site. Presskit() quant à lui peut vous aider à monter une page dédiée à la presse que vous pouvez partager avec les médias.

- -

Médias sociaux

- -

Votre présence sur les médias en ligne est très importante : suivez les bons hashtags, faites-vous des amis, participez à des discussions, aidez d'autres développeuses et développeurs qui en ont besoin. L'honnêteté est essentielle ; soyez authentiques : personne n'aime les communiqués de presse ennuyants ni la publicité insistante. Le moment venu, le bouche-à-oreille généré par votre communauté vous aidera à faire connaître votre jeu.

- -

Twitter et Facebook sont également à compter parmi les réseaux nécessaires, soyez présent⋅e⋅s sur les bons forums : le plus populaire s'appelle HTML5GameDevs.com. Partagez-y les nouvelles relatives au développement de votre jeu, répondez aux questions : les gens valoriseront ce que vous faites. Rappelez-vous de ne pas vous montrer trop insistant ni lourd quand vous parlez à tout le monde de votre jeu : après tout vous n'êtes pas un panneau publicitaire sur pattes !

- -

Faites grandir votre groupe de fans en discutant avec eux, en partageant des astuces, en offrant des remises, en remettant des prix lors de compétitions et de challenges, ou plaignez-vous simplement de la météo ou du navigateur plein de bugs avec lequel vous essayez de vous dépatouiller. Soyez cool, généreux⋅se, soyez vous-mêmes et soyez là pour les autres, et vous serez traité⋅e avec respect.

- -

Portails de jeux

- -

L'utilisation de portails de jeux est principalement liée à la monétisation. Cependant, si vous n'avez pas prévu de vendre des licences d'achat à vos utilisateurs mais que vous prévoyez à la place d'intégrer des publicités ou de passer par des achats dans l'application même, la promotion de votre jeu sur des portails gratuits peut être efficace.

- -

Plusieurs options s'offrent à vous en termes de publication, grâce à des portails comme CrazyGames.com, GameDistribution.com, Pffg.online, Lagged.com, PacoGames.com ,games4html5.com, HTML5Games.com, BestGamo.com ou encore Crazy Games, et au moins 20 ou 30 autres portails connus, avec ou sans API.

- -

Les portails qui possèdent leur propre API vous permettront d'autoriser des accès pour vos utilisateurs, de sauvegarder leurs progrès ou de suivre leurs achats au sein de l'application. Vous pouvez également vendre une version complète de votre jeu depuis la version démo sur navigateur, ce qui peut être une excellente tactique au vu de la forte concurrence qui existe ; certains développeurs parviennent même à proposer des versions intégrales sur navigateur. La plupart des portails proposent soit des contrats de partage des revenus de votre jeu, soit vous achèteront des licences non exclusives.

- -

Les portails gratuits quant à eux vous amènent du trafic, mais seuls les meilleurs sont assez populaires pour vous permettre de générer des revenus grâce à la publicité ou aux achats in-app. D'un autre côté, ils représentent un excellent outil pour donner de la visibilité à vos jeux auprès d'une audience plus large, surtout quand vous n'avez pas de budget et peu de temps.

- -

Presse

- -

Vous pouvez essayer de contacter la presse spécialisée à propos de votre jeu ; gardez toutefois à l'esprit que les journalistes reçoivent déjà des tonnes de demandes chaque jour qui passe : restez humble et patient si vous ne recevez pas de réponse tout de suite, et restez poli⋅e quand vous leur parlez. Assurez-vous au préalable qu'ils traitent bien du genre de jeu ou de plateformes dont vous souhaitez leur parler : vous éviterez ainsi de leur envoyer des demandes qui ne relèvent pas de leur domaine d'intérêt. Du moment que vous gardez une approche honnête et que votre jeu est bon, vous aurez de bien meilleures chances de réussite.

- -

Si vous souhaitez en savoir plus sur la déontologie et la façon de s'adresser à la presse, vous devriez absolument consulter ces deux ressources : un guide génial traduit par Game Sphere intitulé "Comment contacter la presse" (en français) (tiré du guide "How To Contact Press" en anglais), et des listes de YouTubers et de sites (y compris français) à contacter que PixelProspector propose.

- -

Tutoriels

- -

C'est une bonne idée de partager vos connaissances avec d'autres dévs : après tout, vous avez sans doute vous aussi appris une chose ou l'autre grâce à des articles en ligne, donc c'est une façon de prendre le temps à votre tour de diffuser des connaissances. Discuter ou écrire à propos de quelque chose que vous avez accompli, ou de problèmes que vous avez réussi à résoudre intéresse les gens. En plus vous pouvez utiliser votre propre jeu comme exemple : exemple, si vous publiez un tutoriel dans lequel vous montrez comment faire quelque chose que vous avez déjà implémenté. De cette façon, tout le monde est gagnant : votre audience apprend de nouvelles choses, votre jeu gagne en popularité, et si vous avez de la chance vous pouvez même être payés pour écrire un tutoriel s'il est assez bon.

- -

Il existe des portails comme Tuts+ Game Development qui seront plus qu'heureux de recevoir vos contributions ; ils rémunèrent le contenu, mais toutes les idées d'articles ne sont pas acceptées. Quand vous écrivez un tutoriel, assurez-vous d'apporter quelque chose que votre audience valorise. Elle veut apprendre quelque chose : offrez votre expertise et utilisez votre jeu comme cas d'étude. Concentrez-vous sur un aspect donné, et essayez d'expliquer de façon exhaustive et en détail. Enfin, pensez à poursuivre la conversation dans les commentaires si les gens ont des questions.

- -

Si les portails que vous contactez ne sont pas intéressés par votre contenu parce que vous n'avez pas d'expérience, vous pouvez toujours écrire des tutoriels et les publier sur votre propre blog d'abord. C'est la façon la plus simple de développer vos talents d'écrivain par vous-même.

- -

YouTubeurs et YouTubeuses

- -

C'est une tendance croissante ; ne sous-estimez pas l'influence des YouTubeurs et YouTubeuses qui jouent à votre jeu, en parlent et partagent leur expérience en direct quand il s'agit de donner de la visibilité à votre jeu. Restez réalistes toutefois : ne pensez pas que ça suffise à faire décoller vos téléchargements ou le nombre de visites, et surtout soyez prêt⋅e⋅s à devoir gérer des critiques aussi bien négatives que positives.

- -

Il y a deux façons d'attirer l'attention des YouTubeurs : la première c'est de les contacter directement et de leur envoyer un lien vers votre jeu, par mail ou dans un message privé. La seconde s'inscrit dans la durée : si vous êtes suffisamment connu⋅e, les YouTubeurs vous contacteront eux-mêmes pour vous demander un lien ou un exécutable de votre jeu. Cette méga Liste de YouTubeurs est un très bon point de départ. Vous pouvez également trouver des influenceurs YouTube et Twitch.tv sur gameInfluencer.com pour aider à faire la promotion de votre jeu.

- -

Évènements

- -

Si vous avez déjà testé toutes les options listées ci-dessus, vous pouvez encore trouver de nouvelles façons, plus créatives, de faire la promotion de votre jeu : les événements en constituent un bon exemple. Participer à des événements, qu'ils soient locaux ou plus globaux, vous offre une occasion de rencontrer vos fans en vrai, ainsi que d'autres membres de la communauté du développement. Ils passent du temps pour vous voir, réjouissez-vous !

- -

Conférences

- -

Il existe de nombreuses conférences où vous pouvez prendre la parole pour décrire des difficultés techniques que vous avez résolues, ou comment vous avez implémenté telle ou telle API. Encore une fois, utilisez-y vos jeux comme cas d'étude. Il est important de se concentrer sur la dimension "connaissances" et de réduire la dimension "marketing" : les développeurs sont assez sensibles à ces aspects et vous risquer d'irritier votre audience si vous vous contentez d'essayer de leur vendre quelque chose.

- -

Salons et foires

- -

Les foires, salons ou expos sont une autre possibilité en matière d'événementiel : dans ce genre de rendez-vous vous pouvez occuper un stand parmi d'autres développeurs et faire la promotion de votre jeu à tous les participants qui passent devant. Si vous le faites, essayez de vous montrer unique et original⋅e, de façon à vous distinguer de la foule. Faites-le de la bonne manière et tout le monde parlera de vous et de votre jeu. Le fait d'avoir un stand vous donne la possibilité d'interagir avec vos fans directement : au-delà de la dimension promotionnelle vous pouvez également tester de nouvelles versions de votre jeu auprès de personnes ordinaires et de corriger n'importe quel bug (ou intégrer n'importe quelle idée) qu'ils relèvent. Vous ne pouvez pas deviner ce qui peut se produire lorsque des gens jouent à votre jeu, ou quelles erreurs évidentes vous avez pu louper pendant que vous passiez des heures à l'affiner.

- -

Codes promo

- -

Si vous vendez votre jeu, intégrez-y la possibilité d'appliquer des codes promotionnels pour jouer gratuitement à votre jeu (ou au moins à une démo ou à une version limitée dans le temps), puis envoyez ce code à des journalistes, YouTubeuses et YouTubeurs, partagez-les comme récompenses dans un tournoi, etc. Si vous touchez les bonnes personnes cela vous fera une publicité gratuite auprès de milliers de joueurs ; si vous êtes chanceux vous pourrez même obtenir un gain d'intérêt pour votre jeu qui dépassera tout le reste.

- -

Déveloper votre communauté

- -

Vous pouvez aider votre communauté à grandir, et faire votre propre promotion ainsi que celle de vos jeux en même temps. En envoyant des newsletters hebdomadaires et en organisant des tournois en ligne ou des événements locaux vous montrerez aux autres que vous êtes passionné⋅e par ce que vous faites et qu'ils peuvent compter sur vous. Dès lors, si vous avez besoin d'un coup de main vous savez qu'ils seront là pour vous.

- -

Résumé

- -

Toutes les façons de faire la promotion de votre jeu sont bonnes. Vous avez tout un tas d'options qui vous sont offertes, et la plupart d'entre elles sont gratuites : tout ce qui compte c'est votre enthousiasme et le temps dont vous disposez ! Parfois vous devrez passer plus de temps à faire la promotion d'un jeu qu'à le développer. Mais rappelez-vous qu'il ne sert à rien d'avoir le meilleur jeu au monde… si personne ne sait qu'il existe!

- -

Passons maintenant à la monétisation de votre jeu, et comment vous pouvez gagner votre vie avec.

diff --git a/files/fr/games/publishing_games/game_promotion/index.md b/files/fr/games/publishing_games/game_promotion/index.md new file mode 100644 index 0000000000..5c35777d31 --- /dev/null +++ b/files/fr/games/publishing_games/game_promotion/index.md @@ -0,0 +1,93 @@ +--- +title: Promouvoir un jeu +slug: Games/Publishing_games/Game_promotion +tags: + - Community + - Games + - JavaScript + - Online Games + - Promotion + - blog + - competitions +--- +
{{GamesSidebar}}
+ +

Développer un jeu et le mettre en ligne ne suffit pas. Vous devez faire connaître au monde que vous avez un jeu intéressant auquel les gens auront envie de jouer. Il y a bien des façons de promouvoir votre jeu ; la plupart sont gratuites, donc même si vous avez du mal à gagner votre vie en tant que développeur indépendant, vous pouvez malgré tout faire beaucoup de choses pour faire connaître votre super nouveau jeu aux autres, y compris sans budget. Faire la promotion d'un jeu sera également très utile lorsque vous voudrez le monétiser, il est donc important de le faire correctement.

+ +

Compétitions

+ +

Participer à des compétitions n'aura pas seulement pour effet d'accroître vos talents pour le développement de jeu et de sympathiser avec de nouvelles développeuses et développeurs auprès desquels vous pourrez apprendre : cela vous fera également intégrer une communauté. Si vous créez un bon jeu à l'occasion d'un tournoi et que vous gagnez des prix au passage, votre jeu sera automatiquement promu par les organisateurs et les autres participants. À vous la richesse et la gloire ! ou quelque chose dans le genre.

+ +

Beaucoup de grands jeux naissent d'une petite démo rapide créée pendant une compétition. Si l'idée et sa réalisation sont suffisamment bonnes, vous réussirez. De plus, les tournois demandent généralement que les jeux suivent un thème obligatoire, donc vous pourrez vous montrer créatif sur un concept donné si vous peinez à trouver des idées.

+ +

Site internet et blog

+ +

Vous avez tout intérêt à créer votre propre site internet comprenant toutes les informations relatives à vos jeux, de façon à montrer aux gens ce sur quoi vous avez travaillé. Plus vous pouvez intégrer d'informations, mieux c'est : captures d'écrans, descriptions, bande-annonce, dossier de presse, configurations nécessaires, plateformes disponibles, détails sur l'assistance, etc. Vous marquerez des points en autorisant vos utilisateurs à jouer directement à vos jeux en ligne, a minima à une démo. Vous devriez également travailler un peu votre référencement sur les moteurs de recherche (SEO - Search Engine Optimization) pour permettre aux gens de trouver vos jeux plus facilement.

+ +

Vous pouvez également tenir un blog dédié à tout ce qui concerne vos activités de développeur⋅se de jeux. Décrivez votre processus de développement, discutez des bugs les plus affreux que vous rencontrez, partagez des anecdotes marrantes ou ce que vous avez appris, les hauts et les bas d'une vie de développeur de jeu. La publication régulière d'informations à propos de vos jeux aidera à éduquer d'autres personnes, à améliorer votre réputation au sein de la communauté, et améliorera également votre référencement. Une possibilité plus avancée consiste à publier un rapport mensuel qui synthétise vos progrès : il vous permet de voir ce que vous avez accompli au cours du mois passé, ce qu'il reste à faire, et il rappelle aux gens que votre jeu sera bientôt publié. C'est toujours une bonne chose de générer du buzz.

+ +

Bien que vous puissiez créer votre site web de zéro, il existe également des outils pour rendre le processus plus facile. ManaKeep par exemple est un constructeur de sites internet conçu spécifiquement pour les développeurs de jeux indépendants, et représente un super point de départ pour créer votre site. Presskit() quant à lui peut vous aider à monter une page dédiée à la presse que vous pouvez partager avec les médias.

+ +

Médias sociaux

+ +

Votre présence sur les médias en ligne est très importante : suivez les bons hashtags, faites-vous des amis, participez à des discussions, aidez d'autres développeuses et développeurs qui en ont besoin. L'honnêteté est essentielle ; soyez authentiques : personne n'aime les communiqués de presse ennuyants ni la publicité insistante. Le moment venu, le bouche-à-oreille généré par votre communauté vous aidera à faire connaître votre jeu.

+ +

Twitter et Facebook sont également à compter parmi les réseaux nécessaires, soyez présent⋅e⋅s sur les bons forums : le plus populaire s'appelle HTML5GameDevs.com. Partagez-y les nouvelles relatives au développement de votre jeu, répondez aux questions : les gens valoriseront ce que vous faites. Rappelez-vous de ne pas vous montrer trop insistant ni lourd quand vous parlez à tout le monde de votre jeu : après tout vous n'êtes pas un panneau publicitaire sur pattes !

+ +

Faites grandir votre groupe de fans en discutant avec eux, en partageant des astuces, en offrant des remises, en remettant des prix lors de compétitions et de challenges, ou plaignez-vous simplement de la météo ou du navigateur plein de bugs avec lequel vous essayez de vous dépatouiller. Soyez cool, généreux⋅se, soyez vous-mêmes et soyez là pour les autres, et vous serez traité⋅e avec respect.

+ +

Portails de jeux

+ +

L'utilisation de portails de jeux est principalement liée à la monétisation. Cependant, si vous n'avez pas prévu de vendre des licences d'achat à vos utilisateurs mais que vous prévoyez à la place d'intégrer des publicités ou de passer par des achats dans l'application même, la promotion de votre jeu sur des portails gratuits peut être efficace.

+ +

Plusieurs options s'offrent à vous en termes de publication, grâce à des portails comme CrazyGames.com, GameDistribution.com, Pffg.online, Lagged.com, PacoGames.com ,games4html5.com, HTML5Games.com, BestGamo.com ou encore Crazy Games, et au moins 20 ou 30 autres portails connus, avec ou sans API.

+ +

Les portails qui possèdent leur propre API vous permettront d'autoriser des accès pour vos utilisateurs, de sauvegarder leurs progrès ou de suivre leurs achats au sein de l'application. Vous pouvez également vendre une version complète de votre jeu depuis la version démo sur navigateur, ce qui peut être une excellente tactique au vu de la forte concurrence qui existe ; certains développeurs parviennent même à proposer des versions intégrales sur navigateur. La plupart des portails proposent soit des contrats de partage des revenus de votre jeu, soit vous achèteront des licences non exclusives.

+ +

Les portails gratuits quant à eux vous amènent du trafic, mais seuls les meilleurs sont assez populaires pour vous permettre de générer des revenus grâce à la publicité ou aux achats in-app. D'un autre côté, ils représentent un excellent outil pour donner de la visibilité à vos jeux auprès d'une audience plus large, surtout quand vous n'avez pas de budget et peu de temps.

+ +

Presse

+ +

Vous pouvez essayer de contacter la presse spécialisée à propos de votre jeu ; gardez toutefois à l'esprit que les journalistes reçoivent déjà des tonnes de demandes chaque jour qui passe : restez humble et patient si vous ne recevez pas de réponse tout de suite, et restez poli⋅e quand vous leur parlez. Assurez-vous au préalable qu'ils traitent bien du genre de jeu ou de plateformes dont vous souhaitez leur parler : vous éviterez ainsi de leur envoyer des demandes qui ne relèvent pas de leur domaine d'intérêt. Du moment que vous gardez une approche honnête et que votre jeu est bon, vous aurez de bien meilleures chances de réussite.

+ +

Si vous souhaitez en savoir plus sur la déontologie et la façon de s'adresser à la presse, vous devriez absolument consulter ces deux ressources : un guide génial traduit par Game Sphere intitulé "Comment contacter la presse" (en français) (tiré du guide "How To Contact Press" en anglais), et des listes de YouTubers et de sites (y compris français) à contacter que PixelProspector propose.

+ +

Tutoriels

+ +

C'est une bonne idée de partager vos connaissances avec d'autres dévs : après tout, vous avez sans doute vous aussi appris une chose ou l'autre grâce à des articles en ligne, donc c'est une façon de prendre le temps à votre tour de diffuser des connaissances. Discuter ou écrire à propos de quelque chose que vous avez accompli, ou de problèmes que vous avez réussi à résoudre intéresse les gens. En plus vous pouvez utiliser votre propre jeu comme exemple : exemple, si vous publiez un tutoriel dans lequel vous montrez comment faire quelque chose que vous avez déjà implémenté. De cette façon, tout le monde est gagnant : votre audience apprend de nouvelles choses, votre jeu gagne en popularité, et si vous avez de la chance vous pouvez même être payés pour écrire un tutoriel s'il est assez bon.

+ +

Il existe des portails comme Tuts+ Game Development qui seront plus qu'heureux de recevoir vos contributions ; ils rémunèrent le contenu, mais toutes les idées d'articles ne sont pas acceptées. Quand vous écrivez un tutoriel, assurez-vous d'apporter quelque chose que votre audience valorise. Elle veut apprendre quelque chose : offrez votre expertise et utilisez votre jeu comme cas d'étude. Concentrez-vous sur un aspect donné, et essayez d'expliquer de façon exhaustive et en détail. Enfin, pensez à poursuivre la conversation dans les commentaires si les gens ont des questions.

+ +

Si les portails que vous contactez ne sont pas intéressés par votre contenu parce que vous n'avez pas d'expérience, vous pouvez toujours écrire des tutoriels et les publier sur votre propre blog d'abord. C'est la façon la plus simple de développer vos talents d'écrivain par vous-même.

+ +

YouTubeurs et YouTubeuses

+ +

C'est une tendance croissante ; ne sous-estimez pas l'influence des YouTubeurs et YouTubeuses qui jouent à votre jeu, en parlent et partagent leur expérience en direct quand il s'agit de donner de la visibilité à votre jeu. Restez réalistes toutefois : ne pensez pas que ça suffise à faire décoller vos téléchargements ou le nombre de visites, et surtout soyez prêt⋅e⋅s à devoir gérer des critiques aussi bien négatives que positives.

+ +

Il y a deux façons d'attirer l'attention des YouTubeurs : la première c'est de les contacter directement et de leur envoyer un lien vers votre jeu, par mail ou dans un message privé. La seconde s'inscrit dans la durée : si vous êtes suffisamment connu⋅e, les YouTubeurs vous contacteront eux-mêmes pour vous demander un lien ou un exécutable de votre jeu. Cette méga Liste de YouTubeurs est un très bon point de départ. Vous pouvez également trouver des influenceurs YouTube et Twitch.tv sur gameInfluencer.com pour aider à faire la promotion de votre jeu.

+ +

Évènements

+ +

Si vous avez déjà testé toutes les options listées ci-dessus, vous pouvez encore trouver de nouvelles façons, plus créatives, de faire la promotion de votre jeu : les événements en constituent un bon exemple. Participer à des événements, qu'ils soient locaux ou plus globaux, vous offre une occasion de rencontrer vos fans en vrai, ainsi que d'autres membres de la communauté du développement. Ils passent du temps pour vous voir, réjouissez-vous !

+ +

Conférences

+ +

Il existe de nombreuses conférences où vous pouvez prendre la parole pour décrire des difficultés techniques que vous avez résolues, ou comment vous avez implémenté telle ou telle API. Encore une fois, utilisez-y vos jeux comme cas d'étude. Il est important de se concentrer sur la dimension "connaissances" et de réduire la dimension "marketing" : les développeurs sont assez sensibles à ces aspects et vous risquer d'irritier votre audience si vous vous contentez d'essayer de leur vendre quelque chose.

+ +

Salons et foires

+ +

Les foires, salons ou expos sont une autre possibilité en matière d'événementiel : dans ce genre de rendez-vous vous pouvez occuper un stand parmi d'autres développeurs et faire la promotion de votre jeu à tous les participants qui passent devant. Si vous le faites, essayez de vous montrer unique et original⋅e, de façon à vous distinguer de la foule. Faites-le de la bonne manière et tout le monde parlera de vous et de votre jeu. Le fait d'avoir un stand vous donne la possibilité d'interagir avec vos fans directement : au-delà de la dimension promotionnelle vous pouvez également tester de nouvelles versions de votre jeu auprès de personnes ordinaires et de corriger n'importe quel bug (ou intégrer n'importe quelle idée) qu'ils relèvent. Vous ne pouvez pas deviner ce qui peut se produire lorsque des gens jouent à votre jeu, ou quelles erreurs évidentes vous avez pu louper pendant que vous passiez des heures à l'affiner.

+ +

Codes promo

+ +

Si vous vendez votre jeu, intégrez-y la possibilité d'appliquer des codes promotionnels pour jouer gratuitement à votre jeu (ou au moins à une démo ou à une version limitée dans le temps), puis envoyez ce code à des journalistes, YouTubeuses et YouTubeurs, partagez-les comme récompenses dans un tournoi, etc. Si vous touchez les bonnes personnes cela vous fera une publicité gratuite auprès de milliers de joueurs ; si vous êtes chanceux vous pourrez même obtenir un gain d'intérêt pour votre jeu qui dépassera tout le reste.

+ +

Déveloper votre communauté

+ +

Vous pouvez aider votre communauté à grandir, et faire votre propre promotion ainsi que celle de vos jeux en même temps. En envoyant des newsletters hebdomadaires et en organisant des tournois en ligne ou des événements locaux vous montrerez aux autres que vous êtes passionné⋅e par ce que vous faites et qu'ils peuvent compter sur vous. Dès lors, si vous avez besoin d'un coup de main vous savez qu'ils seront là pour vous.

+ +

Résumé

+ +

Toutes les façons de faire la promotion de votre jeu sont bonnes. Vous avez tout un tas d'options qui vous sont offertes, et la plupart d'entre elles sont gratuites : tout ce qui compte c'est votre enthousiasme et le temps dont vous disposez ! Parfois vous devrez passer plus de temps à faire la promotion d'un jeu qu'à le développer. Mais rappelez-vous qu'il ne sert à rien d'avoir le meilleur jeu au monde… si personne ne sait qu'il existe!

+ +

Passons maintenant à la monétisation de votre jeu, et comment vous pouvez gagner votre vie avec.

diff --git a/files/fr/games/publishing_games/index.html b/files/fr/games/publishing_games/index.html deleted file mode 100644 index fc12eab7ad..0000000000 --- a/files/fr/games/publishing_games/index.html +++ /dev/null @@ -1,29 +0,0 @@ ---- -title: Publier des jeux -slug: Games/Publishing_games -tags: - - HTML5 - - JavaScript - - Jeux - - Monétisation - - Promotion - - distribution - - publication -translation_of: Games/Publishing_games -original_slug: Jeux/Publier_jeux ---- -
{{GamesSidebar}}
- -

Les jeux en HTML5 ont un avantage certain face à ceux écrits dans un langage natif en terme de publication et de distribution — vous avez en effet la liberté de distribuer, promouvoir et monétiser votre jeu sur Internet au lieu de voir chaque version de votre jeu emprisonnée au sein d'un store propriétaire. En étant sur le web, vous bénéficiez automatiquement d'un jeu multi plate-formes. Cette série d'articles vous présente les options dont vous disposez afin de publier et de distribuer votre jeu et de gagner quelque chose en attendant de faire de votre jeu un incontournable.

- -

Distribuer votre jeu

- -

Vous avez déjà suivi un tutoriel ou deux et vous avez créé un jeu en HTML5 ? Génial ! L'article Distribuer votre jeu vous indique tout ce que vous devez savoir sur les moyens de partager votre toute dernière création — y compris comment vous pouvez l'héberger en ligne, le proposer sur les boutiques en ligne ouvertes, et le soumettre aux stores propriétaires comme Google Play ou Apple Store.

- -

Promouvoir votre jeu

- -

Développer et finaliser un jeu ne suffit pas. Vous devez informer le monde que vous avez réalisé quelque chose d'intéressant, avec lequel les gens auront plaisir à jouer. Il y a de nombreux moyens de Promouvoir votre jeu — beaucoup d'entre-eux sont gratuits — et donc, même si vous avez du mal à gagner votre vie en tant que développeur indépendant avec un budget nul, vous disposez malgré tout de nombreux moyens d'informer les gens de votre nouveau super jeu. Faire la promotion de votre jeu vous aidera beaucoup notamment si vous souhaitez le monétiser par la suite, il est donc important de le faire correctement.

- -

Monétiser votre jeu

- -

Après avoir passé beaucoup de temps à coder, publier et promouvoir votre jeu, vous penserez sans doute à un moyen de rémunérer votre travail. Monétiser son jeu est essentiel à quiconque considère que le travail qu'il a réalisé pour créer son jeu est fait sérieusement par un développeur de jeux indépendant désormais capable de vivre de ses créations. Découvrez quelles sont vos options. La technologie est suffisamment avancée, la question est de savoir quelle approche sera la meilleure pour vous.

diff --git a/files/fr/games/publishing_games/index.md b/files/fr/games/publishing_games/index.md new file mode 100644 index 0000000000..fc12eab7ad --- /dev/null +++ b/files/fr/games/publishing_games/index.md @@ -0,0 +1,29 @@ +--- +title: Publier des jeux +slug: Games/Publishing_games +tags: + - HTML5 + - JavaScript + - Jeux + - Monétisation + - Promotion + - distribution + - publication +translation_of: Games/Publishing_games +original_slug: Jeux/Publier_jeux +--- +
{{GamesSidebar}}
+ +

Les jeux en HTML5 ont un avantage certain face à ceux écrits dans un langage natif en terme de publication et de distribution — vous avez en effet la liberté de distribuer, promouvoir et monétiser votre jeu sur Internet au lieu de voir chaque version de votre jeu emprisonnée au sein d'un store propriétaire. En étant sur le web, vous bénéficiez automatiquement d'un jeu multi plate-formes. Cette série d'articles vous présente les options dont vous disposez afin de publier et de distribuer votre jeu et de gagner quelque chose en attendant de faire de votre jeu un incontournable.

+ +

Distribuer votre jeu

+ +

Vous avez déjà suivi un tutoriel ou deux et vous avez créé un jeu en HTML5 ? Génial ! L'article Distribuer votre jeu vous indique tout ce que vous devez savoir sur les moyens de partager votre toute dernière création — y compris comment vous pouvez l'héberger en ligne, le proposer sur les boutiques en ligne ouvertes, et le soumettre aux stores propriétaires comme Google Play ou Apple Store.

+ +

Promouvoir votre jeu

+ +

Développer et finaliser un jeu ne suffit pas. Vous devez informer le monde que vous avez réalisé quelque chose d'intéressant, avec lequel les gens auront plaisir à jouer. Il y a de nombreux moyens de Promouvoir votre jeu — beaucoup d'entre-eux sont gratuits — et donc, même si vous avez du mal à gagner votre vie en tant que développeur indépendant avec un budget nul, vous disposez malgré tout de nombreux moyens d'informer les gens de votre nouveau super jeu. Faire la promotion de votre jeu vous aidera beaucoup notamment si vous souhaitez le monétiser par la suite, il est donc important de le faire correctement.

+ +

Monétiser votre jeu

+ +

Après avoir passé beaucoup de temps à coder, publier et promouvoir votre jeu, vous penserez sans doute à un moyen de rémunérer votre travail. Monétiser son jeu est essentiel à quiconque considère que le travail qu'il a réalisé pour créer son jeu est fait sérieusement par un développeur de jeux indépendant désormais capable de vivre de ses créations. Découvrez quelles sont vos options. La technologie est suffisamment avancée, la question est de savoir quelle approche sera la meilleure pour vous.

diff --git a/files/fr/games/techniques/2d_collision_detection/index.html b/files/fr/games/techniques/2d_collision_detection/index.html deleted file mode 100644 index d8f6c3687c..0000000000 --- a/files/fr/games/techniques/2d_collision_detection/index.html +++ /dev/null @@ -1,94 +0,0 @@ ---- -title: Détection de collisions en 2D -slug: Games/Techniques/2D_collision_detection -tags: - - 2D - - Algorithmes - - Détection de collisions - - JavaScript - - Jeux -translation_of: Games/Techniques/2D_collision_detection ---- -
{{GamesSidebar}}

  {{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.

- -

Cet article donne un résumé des techniques les plus utilisées pour la détection des collisions dans les jeux en deux dimensions.

- -

Boîtes englobantes alignées sur les axes

- -

Une des formes les plus simples de détection de collision est une collision entre deux rectangles alignés sur les mêmes axes (c’est-à-dire sans rotation). L’algorithme suivant fonctionne en vérifiant qu’il n’y a pas d’espace vide entre les 4 côtés du rectangle. Si l’ensemble du rectangle est entouré de vide, on en conclut qu’il n’y a pas de collision.

- -
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) {
-    // collision détectée !
-}
-
-// remplissage des valeurs =>
-
-if (5 < 30 &&
-    55 > 20 &&
-    5 < 20 &&
-    55 > 10) {
-    // collision détectée !
-}
- -
-

Note : vous pouvez tester un exemple interactif de cet algorithme sur jsFiddle, pour mieux comprendre le fonctionnement de ce code.

-
- -

Collision de cercles

- -

Une autre forme simple de détection de collision est la collision entre deux cercles. Cet algorithme fonctionne en prenant le point central de deux cercles puis il vérifie que la distance entre ces deux points est inférieure à la somme des rayons de ces deux cercles.

- -
var circle1 = {radius: 20, x: 5, y: 5};
-var circle2 = {radius: 12, x: 10, y: 5};
-
-var dx = circle1.x - circle2.x;
-var dy = circle1.y - circle2.y;
-var distance = Math.sqrt(dx * dx + dy * dy);
-
-if (distance < circle1.radius + circle2.radius) {
-    // collision détectée !
-}
- -
-

Note : vous pouvez tester un exemple interactif de cet algorithme sur jsFiddle, pour mieux comprendre le fonctionnement de ce code.

-
- -

Théorème des axes séparateurs

- -

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 :

- -
    -
  1. Separating Axis Theorem (SAT) explanation ;
    2. -
  2. (Anglais) Collision detection and response (en) ;
    3. -
  3. Collision detection Using the Separating Axis Theorem (en) ;
    4. -
  4. SAT (Separating Axis Theorem) (en) ;
    5. -
  5. Separation of Axis Theorem (SAT) for Collision Detection (en).
    6. -
- -

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 »).

- -

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 :

- - - -

Phase étroite

- -

Quand vous avez une liste réduite d’entités à vérifier, il convient d’utiliser un algorithme de phase étroite tels que ceux décrits ci-dessus afin de détecter s’il y a bien une collision entre deux objets ou non.

diff --git a/files/fr/games/techniques/2d_collision_detection/index.md b/files/fr/games/techniques/2d_collision_detection/index.md new file mode 100644 index 0000000000..d8f6c3687c --- /dev/null +++ b/files/fr/games/techniques/2d_collision_detection/index.md @@ -0,0 +1,94 @@ +--- +title: Détection de collisions en 2D +slug: Games/Techniques/2D_collision_detection +tags: + - 2D + - Algorithmes + - Détection de collisions + - JavaScript + - Jeux +translation_of: Games/Techniques/2D_collision_detection +--- +
{{GamesSidebar}}

  {{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.

+ +

Cet article donne un résumé des techniques les plus utilisées pour la détection des collisions dans les jeux en deux dimensions.

+ +

Boîtes englobantes alignées sur les axes

+ +

Une des formes les plus simples de détection de collision est une collision entre deux rectangles alignés sur les mêmes axes (c’est-à-dire sans rotation). L’algorithme suivant fonctionne en vérifiant qu’il n’y a pas d’espace vide entre les 4 côtés du rectangle. Si l’ensemble du rectangle est entouré de vide, on en conclut qu’il n’y a pas de collision.

+ +
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) {
+    // collision détectée !
+}
+
+// remplissage des valeurs =>
+
+if (5 < 30 &&
+    55 > 20 &&
+    5 < 20 &&
+    55 > 10) {
+    // collision détectée !
+}
+ +
+

Note : vous pouvez tester un exemple interactif de cet algorithme sur jsFiddle, pour mieux comprendre le fonctionnement de ce code.

+
+ +

Collision de cercles

+ +

Une autre forme simple de détection de collision est la collision entre deux cercles. Cet algorithme fonctionne en prenant le point central de deux cercles puis il vérifie que la distance entre ces deux points est inférieure à la somme des rayons de ces deux cercles.

+ +
var circle1 = {radius: 20, x: 5, y: 5};
+var circle2 = {radius: 12, x: 10, y: 5};
+
+var dx = circle1.x - circle2.x;
+var dy = circle1.y - circle2.y;
+var distance = Math.sqrt(dx * dx + dy * dy);
+
+if (distance < circle1.radius + circle2.radius) {
+    // collision détectée !
+}
+ +
+

Note : vous pouvez tester un exemple interactif de cet algorithme sur jsFiddle, pour mieux comprendre le fonctionnement de ce code.

+
+ +

Théorème des axes séparateurs

+ +

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 :

+ +
    +
  1. Separating Axis Theorem (SAT) explanation ;
    2. +
  2. (Anglais) Collision detection and response (en) ;
    3. +
  3. Collision detection Using the Separating Axis Theorem (en) ;
    4. +
  4. SAT (Separating Axis Theorem) (en) ;
    5. +
  5. Separation of Axis Theorem (SAT) for Collision Detection (en).
    6. +
+ +

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 »).

+ +

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 :

+ + + +

Phase étroite

+ +

Quand vous avez une liste réduite d’entités à vérifier, il convient d’utiliser un algorithme de phase étroite tels que ceux décrits ci-dessus afin de détecter s’il y a bien une collision entre deux objets ou non.

diff --git a/files/fr/games/techniques/3d_on_the_web/basic_theory/index.html b/files/fr/games/techniques/3d_on_the_web/basic_theory/index.html deleted file mode 100644 index 4243e68e9a..0000000000 --- a/files/fr/games/techniques/3d_on_the_web/basic_theory/index.html +++ /dev/null @@ -1,126 +0,0 @@ ---- -title: Explication des bases théoriques de la 3D -slug: Games/Techniques/3D_on_the_web/Basic_theory -tags: - - 3D - - Bases - - Images - - Lumières - - Textures - - fragment - - vertex -translation_of: Games/Techniques/3D_on_the_web/Basic_theory ---- -
{{GamesSidebar}}

  {{IncludeSubnav("/fr/docs/Jeux")}}

- -

Cet article explique l'ensemble des bases théoriques utiles à connaître lorsque vous commencez à travailler avec la 3D.

- -

Système de coordonnées

- -

La 3D est principalement basée sur la représentation de formes 3D dans l'espace, avec un système de coordonnées utilisé pour calculer leurs positions.

- -

- -

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 :

- - - -

Vous pouvez faire de la géométrie en utilisant ces informations — voici l'exemple d'un cube :

- -

Cube

- -

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)

- -

Le rendu des tuyaux est un procédé avec lequel les images sont préparées et affichées sur l'écran. Les graphismes utilisant les rendus de tuyaux prennent des objets 3D construits à partir de primitives décrites à l'aide de sommets, les transforment, calculent les fragments, et les affichent sur un écran 2D en tant que pixels.

- -

Rendering pipeline

- -

Terminologie utilisée dans le diagramme ci-dessus :

- - - -

Le traitement des sommets et des fragments est programmable — vous pouvez écrire vos propres shaders qui manipulent le rendu.

- -

Traitement de sommet

- -

Le traitement de sommet consiste à combiner les informations à propos de chaque sommet dans des primitives et de définir leurs coordonnées dans l'espace 3D pour le spectateur. C'est comme prendre une photo de la scène donnée que vous avez préparée — vous devez placer les objets en premier, configurer la caméra, et prendre la photo.

- -

- -

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

- -

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 dans l'article de Three.js pour en savoir plus.

- -

- -

La dernière étape est la transformation de la fenêtre, qui implique la production de tout pour la prochaine étape dans le rendu du tuyau.

- -

Rastérisation

- -

La rastérisation convertit les primitives (des sommets reliés) à un ensemble de fragments.

- -

- -

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

- -

Le traitement de fragment se concentre sur les textures et les lumières — il calcule les couleurs finales à partir des paramètres donnés.

- -

- -

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.

- -

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 :

- - - -

Fusion de sortie

- -

Durant l'étape de manipulation du résultat, tous les fragments des primitives de l'espace 3D sont transformés sur une grille de pixels 2D qui est ensuite affichée sur l'écran.

- -

Durant la fusion de sortie, quelques traitements sont aussi appliqués pour ignorer de l'information qui n'est pas utile — par exemple, les paramètres des objets qui sont à l'extérieur de l'écran ou derrière d'autres, et par conséquent non visibles, ne sont pas calculés.

- - - -

Conclusion

- -

Maintenant vous connaissez les bases de la théorie derrière la manipulation 3D, si vous voulez passer à la pratique et voir quelques démonstrations en action, continuez avec les tutoriels ci-dessous :

- - - -

Allez-y et faites quelques expémentations 3D sympas par vous-même !

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 new file mode 100644 index 0000000000..4243e68e9a --- /dev/null +++ b/files/fr/games/techniques/3d_on_the_web/basic_theory/index.md @@ -0,0 +1,126 @@ +--- +title: Explication des bases théoriques de la 3D +slug: Games/Techniques/3D_on_the_web/Basic_theory +tags: + - 3D + - Bases + - Images + - Lumières + - Textures + - fragment + - vertex +translation_of: Games/Techniques/3D_on_the_web/Basic_theory +--- +
{{GamesSidebar}}

  {{IncludeSubnav("/fr/docs/Jeux")}}

+ +

Cet article explique l'ensemble des bases théoriques utiles à connaître lorsque vous commencez à travailler avec la 3D.

+ +

Système de coordonnées

+ +

La 3D est principalement basée sur la représentation de formes 3D dans l'espace, avec un système de coordonnées utilisé pour calculer leurs positions.

+ +

+ +

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 :

+ + + +

Vous pouvez faire de la géométrie en utilisant ces informations — voici l'exemple d'un cube :

+ +

Cube

+ +

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)

+ +

Le rendu des tuyaux est un procédé avec lequel les images sont préparées et affichées sur l'écran. Les graphismes utilisant les rendus de tuyaux prennent des objets 3D construits à partir de primitives décrites à l'aide de sommets, les transforment, calculent les fragments, et les affichent sur un écran 2D en tant que pixels.

+ +

Rendering pipeline

+ +

Terminologie utilisée dans le diagramme ci-dessus :

+ + + +

Le traitement des sommets et des fragments est programmable — vous pouvez écrire vos propres shaders qui manipulent le rendu.

+ +

Traitement de sommet

+ +

Le traitement de sommet consiste à combiner les informations à propos de chaque sommet dans des primitives et de définir leurs coordonnées dans l'espace 3D pour le spectateur. C'est comme prendre une photo de la scène donnée que vous avez préparée — vous devez placer les objets en premier, configurer la caméra, et prendre la photo.

+ +

+ +

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

+ +

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 dans l'article de Three.js pour en savoir plus.

+ +

+ +

La dernière étape est la transformation de la fenêtre, qui implique la production de tout pour la prochaine étape dans le rendu du tuyau.

+ +

Rastérisation

+ +

La rastérisation convertit les primitives (des sommets reliés) à un ensemble de fragments.

+ +

+ +

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

+ +

Le traitement de fragment se concentre sur les textures et les lumières — il calcule les couleurs finales à partir des paramètres donnés.

+ +

+ +

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.

+ +

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 :

+ + + +

Fusion de sortie

+ +

Durant l'étape de manipulation du résultat, tous les fragments des primitives de l'espace 3D sont transformés sur une grille de pixels 2D qui est ensuite affichée sur l'écran.

+ +

Durant la fusion de sortie, quelques traitements sont aussi appliqués pour ignorer de l'information qui n'est pas utile — par exemple, les paramètres des objets qui sont à l'extérieur de l'écran ou derrière d'autres, et par conséquent non visibles, ne sont pas calculés.

+ + + +

Conclusion

+ +

Maintenant vous connaissez les bases de la théorie derrière la manipulation 3D, si vous voulez passer à la pratique et voir quelques démonstrations en action, continuez avec les tutoriels ci-dessous :

+ + + +

Allez-y et faites quelques expémentations 3D sympas par vous-même !

diff --git a/files/fr/games/techniques/3d_on_the_web/building_up_a_basic_demo_with_playcanvas/index.html b/files/fr/games/techniques/3d_on_the_web/building_up_a_basic_demo_with_playcanvas/index.html deleted file mode 100644 index 8a10f15237..0000000000 --- a/files/fr/games/techniques/3d_on_the_web/building_up_a_basic_demo_with_playcanvas/index.html +++ /dev/null @@ -1,49 +0,0 @@ ---- -title: Building up a basic demo with PlayCanvas -slug: Games/Techniques/3D_on_the_web/Building_up_a_basic_demo_with_PlayCanvas -tags: - - 3D - - Animation - - Débutant - - PlayCanvas - - Rendu - - Tutoriel - - WebGL - - camera -translation_of: Games/Techniques/3D_on_the_web/Building_up_a_basic_demo_with_PlayCanvas ---- -
{{GamesSidebar}}

PlayCanvas est un populaire moteur 3D WebGL de jeu, originellement concu par Will Eastcott et Dave Evans. Il est disponible en open-source sur GitHub, avec un éditeur en ligne et une bonne documentation. L'éditeur en ligne est gratuit pour les projets publics avec jusqu'à deux membres d'équipe, mais il y a aussi des plans payants si vous vous lancez dans un projet commercial privé avec plus de développeurs.

- -

Site PlayCanvas

- -

Jeux et Démos

- -

PlayCanvas a publié quelques démos populaires présentant ses fonctionnalités.

- - - -

- -
-

Note : Consultez la liste des démos pour trouver plus d'exemples.

-
- -

Moteur vs Éditeur

- -

Le moteur peut lui même être utilisé comme une bibliotheque standard en incluant directement ses fichiers JavaScript dans votre code HTML, vous permettant de commencer à coder instantanémment. De plus l'ensemble d'outils de PlayCanvas s'accompagne d'un éditeur en ligne vous permettant d'ajouter des éléments à la scène par glisser déposer — un formidable mode de création de jeux et autres applications nécessitant des scènes si vous êtes meilleur designer que codeur. Ces approches sont différentes mais se valent dans l'atteinte des objectifs.

- -

Moteur PlayCanvas

- -

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), 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 pour plus de détails.

- -

É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 pour plus de détails.

- -

Résumé

- -

Votre approche sera déterminante. Les designers préféreront utiliser l'éditeur en ligne alors que les programmeurs voudront avoir le contrôle total de l'environnement de codage et utiliseront probablement les fichiers source du moteur. Ce qui est intéressant est que vous êtes libre dans le choix des outils vous convenant le mieux.

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 new file mode 100644 index 0000000000..8a10f15237 --- /dev/null +++ b/files/fr/games/techniques/3d_on_the_web/building_up_a_basic_demo_with_playcanvas/index.md @@ -0,0 +1,49 @@ +--- +title: Building up a basic demo with PlayCanvas +slug: Games/Techniques/3D_on_the_web/Building_up_a_basic_demo_with_PlayCanvas +tags: + - 3D + - Animation + - Débutant + - PlayCanvas + - Rendu + - Tutoriel + - WebGL + - camera +translation_of: Games/Techniques/3D_on_the_web/Building_up_a_basic_demo_with_PlayCanvas +--- +
{{GamesSidebar}}

PlayCanvas est un populaire moteur 3D WebGL de jeu, originellement concu par Will Eastcott et Dave Evans. Il est disponible en open-source sur GitHub, avec un éditeur en ligne et une bonne documentation. L'éditeur en ligne est gratuit pour les projets publics avec jusqu'à deux membres d'équipe, mais il y a aussi des plans payants si vous vous lancez dans un projet commercial privé avec plus de développeurs.

+ +

Site PlayCanvas

+ +

Jeux et Démos

+ +

PlayCanvas a publié quelques démos populaires présentant ses fonctionnalités.

+ + + +

+ +
+

Note : Consultez la liste des démos pour trouver plus d'exemples.

+
+ +

Moteur vs Éditeur

+ +

Le moteur peut lui même être utilisé comme une bibliotheque standard en incluant directement ses fichiers JavaScript dans votre code HTML, vous permettant de commencer à coder instantanémment. De plus l'ensemble d'outils de PlayCanvas s'accompagne d'un éditeur en ligne vous permettant d'ajouter des éléments à la scène par glisser déposer — un formidable mode de création de jeux et autres applications nécessitant des scènes si vous êtes meilleur designer que codeur. Ces approches sont différentes mais se valent dans l'atteinte des objectifs.

+ +

Moteur PlayCanvas

+ +

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), 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 pour plus de détails.

+ +

É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 pour plus de détails.

+ +

Résumé

+ +

Votre approche sera déterminante. Les designers préféreront utiliser l'éditeur en ligne alors que les programmeurs voudront avoir le contrôle total de l'environnement de codage et utiliseront probablement les fichiers source du moteur. Ce qui est intéressant est que vous êtes libre dans le choix des outils vous convenant le mieux.

diff --git a/files/fr/games/techniques/3d_on_the_web/building_up_a_basic_demo_with_three.js/index.html b/files/fr/games/techniques/3d_on_the_web/building_up_a_basic_demo_with_three.js/index.html deleted file mode 100644 index ea4b25a2c8..0000000000 --- a/files/fr/games/techniques/3d_on_the_web/building_up_a_basic_demo_with_three.js/index.html +++ /dev/null @@ -1,266 +0,0 @@ ---- -title: Building up a basic demo with Three.js -slug: Games/Techniques/3D_on_the_web/Building_up_a_basic_demo_with_Three.js -translation_of: Games/Techniques/3D_on_the_web/Building_up_a_basic_demo_with_Three.js ---- -
{{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.

- -
-

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

-
- -

Configuration de l environnement de Developpement

- -

Pour commencer a developper avec Three.js :

- - - -

Structure HTML

- -

Voici la structure que nous allons utiliser

- -
<!DOCTYPE html>
-<html>
-<head>
-	<meta charset="utf-8">
-	<title>MDN Games: Three.js demo</title>
-	<style>
-		body { margin: 0; padding: 0; }
-		canvas { width: 100%; height: 100%; }
-	</style>
-</head>
-<body>
-<script src="three.min.js"></script>
-<script>
-	var WIDTH = window.innerWidth;
-	var HEIGHT = window.innerHeight;
-	/* all our JavaScript code goes here */
-</script>
-</body>
-</html>
-
- -

 Cette structure contient des informations de base , un peu de CSS pour definir la largeur et la hauteur de l élément canvas, ici 100% pour remplir tout l'espace disponnible.

- -

la premeire balise de script inclut la bibliotheque Three.js dans la page. nous ecrirons notre code dans la deuxieme balise script.

- -

nous avons deja inclut deux variables d assitance pour stocké la alrgeur et la hauteur de la fenetre.

- -

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.

- -

Grace à cette approche, une solution de secour peut etre  utilisée , si une technologie n'est pas prise en charge par le navigatueur.

- -
var renderer = new THREE.WebGLRenderer({antialias:true});
-renderer.setSize(WIDTH, HEIGHT);
-renderer.setClearColor(0xDDDDDD, 1);
-document.body.appendChild(renderer.domElement);
-
- -

Nous créons un nouveau rendu WebGL, définissons sa taille pour qu'elle corresponde à tout l'espace disponible à l'écran et ajoutons la structure DOM à la page. Vous avez peut-être remarqué le paramètre d'antialias dans la première ligne - cela rend les bords des formes plus fluides. La méthode setClearColor () définit notre arrière-plan sur une couleur gris clair, au lieu de la couleur noire par défaut.
-
- Ajoutez ce code dans notre deuxième balise script du fichier index.html, juste en dessous du commentaire JavaScript.

- -

Scene

- -

Une scène est l'endroit où tout se passe. Lors de la création de nouveaux objets dans la démo, nous les ajoutons tous à l'intérieur de la scène pour devenir visibles à l'écran. Dans three.js, la scène est représentée par un objet Scene. Créons-le, en ajoutant la ligne suivante sous nos lignes précédentes:

- -
var scene = new THREE.Scene();
-
- -

plutard nous utiliserons la methode add() , pour ajouter des objets a cette scene.

- -

Camera

- -

Nous avons la scène , mais nous devons encore ajouter une caméra pour voir notre travail - imaginez un film sans caméra. Les lignes suivantes mettent la caméra en place dans le système de coordonnées 3D et la pointent dans la direction de notre scène, afin que nous puissions enfin voir quelque chose:

- -
var camera = new THREE.PerspectiveCamera(70, WIDTH/HEIGHT);
-camera.position.z = 50;
-scene.add(camera);
-
- -

Ajoutez les lignes ci-dessus à votre code, en dessous de celles précédemment ajoutées.
-
- Il existe d'autres types de camera (Cube, Orthographique), mais la plus simple est Perspective. Pour l'initialiser, nous devons définir son champ de vision et son rapport d'aspect: le premier est utilisé pour définir la quantité de vue, et le second est important pour que les objets à l'écran aient les bonnes proportions lors du rendu, et ne semblent pas étirés . Expliquons les valeurs que nous définissons pour le code ci-dessus:>

- - - -

Vous devez expérimenter ces valeurs et voir comment elles changent ce que vous voyez dans la scène. .

- -
-

Note : Les valeurs de distance (par exemple pour la position z de la caméra) sont sans unité et peuvent être tout ce que vous jugez approprié pour votre scène: millimètres, mètres, pieds ou miles.

-
- -

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:

- -
function render() {
-	requestAnimationFrame(render);
-	renderer.render(scene, camera);
-}
-render();
-
- -

On every new frame the render function is invoked, and the renderer renders the scene and the camera. Right after the function declaration, we're invoking it for the first time to start the loop, after which it will be used indefinitely.

- -

Again, add this new code below your previous additions. Try saving the file and opening it in your browser. You should now see a gray window. Congratulations!

- -

Geometry

- -

Now our scene is properly rendering, we can start adding 3D shapes. To speed up development, Three.js provides a bunch of predefined primitives, which you can use to create shapes instantly in a single line of code. There's cubes, spheres, cylinders, and more complicated shapes available. Detail like drawing required vertices and faces, for a given shape, is handled by the Three framework, so we can focus on higher level coding. Let's start, by defining the geometry for a cube shape, adding the following just above the render() function:

- -
var boxGeometry = new THREE.BoxGeometry(10, 10, 10);
-
- -

In this case, we define a simple cube that is 10 x 10 x 10 units. The geometry itself is not enough though, we also need a material that will be used for our shape.

- -

Material

- -

A material is what covers an object, the colors, or textures on its surface. In our case, we will choose a simple blue color to paint our box. There are a number of predefined materials which can be used: Basic, Phong, Lambert. Let's play with the last two later, but for now, the Basic one should be enough:

- -
var basicMaterial = new THREE.MeshBasicMaterial({color: 0x0095DD});
-
- -

Add this line below the previously added.

- -

Our material is now ready, what next?

- -

Mesh

- -

To apply the material to a geometry, a mesh is used. This takes on a shape, and adds the specified material to every face:

- -
var cube = new THREE.Mesh(boxGeometry, basicMaterial);
-
- -

Again, add this line below the one you previously added.

- -

Adding the cube to the scene

- -

We've now created a cube, using the geometry and material defined earlier. The last thing to do is to place the cube to our scene. Add this line below the previous one:

- -
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:

- -
cube.rotation.set(0.4, 0.2, 0);
-
- -

Congratulations, you've created an object in a 3D environment! This might have proven easier than you first thought? Here's how it should look:

- -

- -

And here's the code we have created so far:

- -

{{JSFiddleEmbed("https://jsfiddle.net/end3r/bwup75fa/","","350")}}

- -

You can also check it out on GitHub.

- -

More shapes and materials

- -

Now we will add more shapes to the scene, and explore other shapes, materials, lighting, and more. Let's move the cube to the left, to make space for some friends. Adding the following line just below the previous one:

- -
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.

- -
var torusGeometry = new THREE.TorusGeometry(7, 1, 6, 12);
-var phongMaterial = new THREE.MeshPhongMaterial({color: 0xFF9500});
-var torus = new THREE.Mesh(torusGeometry, phongMaterial);
-scene.add(torus);
-
- -

These lines will add a torus geometry; the TorusGeometry() method's parameters define, and the parameters are radius, tube diameter, radial segment count, and tubular segment count. The Phong material should look more glossy than the box's simple Basic material, though right now our torus will just look black.

- -

We can choose more fun predefined shapes. Let's play some more. Add the following lines, below those defining the torus:

- -
var dodecahedronGeometry = new THREE.DodecahedronGeometry(7);
-var lambertMaterial = new THREE.MeshLambertMaterial({color: 0xEAEFF2});
-var dodecahedron = new THREE.Mesh(dodecahedronGeometry, lambertMaterial);
-dodecahedron.position.x = 25;
-scene.add(dodecahedron);
-
- -

This time, we are creating a dodecahedron, a shape containing twelve flat faces. The parameter, DodecahedronGeometry(), defines the size of the object. We're using a Lambert material, similar to Phong, but should be less glossy. Again it's black, for now. We're moving the object to the right, so it's not in the same position as the box, or torus.

- -

As mentioned above, the new objects currently just look black. To have both, the Phong and Lambert materials properly visible, we need to introduce a source of light.

- -

Lights

- -

There are various types of light sources available in Three.js. The most basic is PointLight, which works like a flashlight, shining a spotlight in a defined direction. Add the following lines, below your shape definitions:

- -
var light = new THREE.PointLight(0xFFFFFF);
-light.position.set(-10, 15, 50);
-scene.add(light);
-
- -

We define a white point of light, set its position a little away from the center of the scene, so it can light up some parts of the shapes, finally adding it to the scene. Now everything works as it should, all three shapes are visible. You should check the documentation for other types of lights, like Ambient, Directional, Hemisphere, or Spot. Experiment placing them on our scene, to see how they affect it.

- -

- -

This looks a little boring though. In a game, something is usually happening. We might see animations and such. So let's try breathing a little life into these shapes, by animating them!

- -

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.

- -

Rotation

- -

Rotating is straighforward. You add a value to a given direction of rotation on each frame. Add this line of code, right after the requestAnimationFrame() invocation inside the render function:

- -
cube.rotation.y += 0.01;
-
- -

This rotates the cube on every frame, by a tiny bit, so the animation looks smooth.

- -

Scaling

- -

We can also scale an object. Applying a constant value, we would make it grow, or shrink just once. Let's make things more interesting. First, we implement a helper variable, called t, for counting elapsed time. Add it right before the render() function:

- -
var t = 0;
-
- -

Now let's increase the value by a given constant value, on each frame of the animation. Add the following lines, just below the requestAnimationFrame() invocation:

- -
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.

- -

Now, onto movement.

- -

Moving

- -

Aside from rotation, and scaling, we can additionally move objects around the scene. Add the following, again just below our requestAnimationFrame() invocation:

- -
dodecahedron.position.y = -7*Math.sin(t*2);
-
- -

This will move the dodecahedron up and down, by applying the sin() value to the y axis on each frame, and a little adjustment to make it look cooler. Try changing these values, to see how it affects the animations.

- -

Conclusion

- -

Here's the final code:

- -

{{JSFiddleEmbed("https://jsfiddle.net/rybr720u/","","350")}}

- -

You can also see it on GitHub and fork the repository, if you want to play with it locally. Now you understand the basics of Three.js, you can jump back to the parent page, 3D on the Web.

- -

You could also try learning raw WebGL, to gain a better understanding of what's going on underneath. See our WebGL documentation.

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 new file mode 100644 index 0000000000..ea4b25a2c8 --- /dev/null +++ b/files/fr/games/techniques/3d_on_the_web/building_up_a_basic_demo_with_three.js/index.md @@ -0,0 +1,266 @@ +--- +title: Building up a basic demo with Three.js +slug: Games/Techniques/3D_on_the_web/Building_up_a_basic_demo_with_Three.js +translation_of: Games/Techniques/3D_on_the_web/Building_up_a_basic_demo_with_Three.js +--- +
{{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.

+ +
+

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

+
+ +

Configuration de l environnement de Developpement

+ +

Pour commencer a developper avec Three.js :

+ + + +

Structure HTML

+ +

Voici la structure que nous allons utiliser

+ +
<!DOCTYPE html>
+<html>
+<head>
+	<meta charset="utf-8">
+	<title>MDN Games: Three.js demo</title>
+	<style>
+		body { margin: 0; padding: 0; }
+		canvas { width: 100%; height: 100%; }
+	</style>
+</head>
+<body>
+<script src="three.min.js"></script>
+<script>
+	var WIDTH = window.innerWidth;
+	var HEIGHT = window.innerHeight;
+	/* all our JavaScript code goes here */
+</script>
+</body>
+</html>
+
+ +

 Cette structure contient des informations de base , un peu de CSS pour definir la largeur et la hauteur de l élément canvas, ici 100% pour remplir tout l'espace disponnible.

+ +

la premeire balise de script inclut la bibliotheque Three.js dans la page. nous ecrirons notre code dans la deuxieme balise script.

+ +

nous avons deja inclut deux variables d assitance pour stocké la alrgeur et la hauteur de la fenetre.

+ +

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.

+ +

Grace à cette approche, une solution de secour peut etre  utilisée , si une technologie n'est pas prise en charge par le navigatueur.

+ +
var renderer = new THREE.WebGLRenderer({antialias:true});
+renderer.setSize(WIDTH, HEIGHT);
+renderer.setClearColor(0xDDDDDD, 1);
+document.body.appendChild(renderer.domElement);
+
+ +

Nous créons un nouveau rendu WebGL, définissons sa taille pour qu'elle corresponde à tout l'espace disponible à l'écran et ajoutons la structure DOM à la page. Vous avez peut-être remarqué le paramètre d'antialias dans la première ligne - cela rend les bords des formes plus fluides. La méthode setClearColor () définit notre arrière-plan sur une couleur gris clair, au lieu de la couleur noire par défaut.
+
+ Ajoutez ce code dans notre deuxième balise script du fichier index.html, juste en dessous du commentaire JavaScript.

+ +

Scene

+ +

Une scène est l'endroit où tout se passe. Lors de la création de nouveaux objets dans la démo, nous les ajoutons tous à l'intérieur de la scène pour devenir visibles à l'écran. Dans three.js, la scène est représentée par un objet Scene. Créons-le, en ajoutant la ligne suivante sous nos lignes précédentes:

+ +
var scene = new THREE.Scene();
+
+ +

plutard nous utiliserons la methode add() , pour ajouter des objets a cette scene.

+ +

Camera

+ +

Nous avons la scène , mais nous devons encore ajouter une caméra pour voir notre travail - imaginez un film sans caméra. Les lignes suivantes mettent la caméra en place dans le système de coordonnées 3D et la pointent dans la direction de notre scène, afin que nous puissions enfin voir quelque chose:

+ +
var camera = new THREE.PerspectiveCamera(70, WIDTH/HEIGHT);
+camera.position.z = 50;
+scene.add(camera);
+
+ +

Ajoutez les lignes ci-dessus à votre code, en dessous de celles précédemment ajoutées.
+
+ Il existe d'autres types de camera (Cube, Orthographique), mais la plus simple est Perspective. Pour l'initialiser, nous devons définir son champ de vision et son rapport d'aspect: le premier est utilisé pour définir la quantité de vue, et le second est important pour que les objets à l'écran aient les bonnes proportions lors du rendu, et ne semblent pas étirés . Expliquons les valeurs que nous définissons pour le code ci-dessus:>

+ + + +

Vous devez expérimenter ces valeurs et voir comment elles changent ce que vous voyez dans la scène. .

+ +
+

Note : Les valeurs de distance (par exemple pour la position z de la caméra) sont sans unité et peuvent être tout ce que vous jugez approprié pour votre scène: millimètres, mètres, pieds ou miles.

+
+ +

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:

+ +
function render() {
+	requestAnimationFrame(render);
+	renderer.render(scene, camera);
+}
+render();
+
+ +

On every new frame the render function is invoked, and the renderer renders the scene and the camera. Right after the function declaration, we're invoking it for the first time to start the loop, after which it will be used indefinitely.

+ +

Again, add this new code below your previous additions. Try saving the file and opening it in your browser. You should now see a gray window. Congratulations!

+ +

Geometry

+ +

Now our scene is properly rendering, we can start adding 3D shapes. To speed up development, Three.js provides a bunch of predefined primitives, which you can use to create shapes instantly in a single line of code. There's cubes, spheres, cylinders, and more complicated shapes available. Detail like drawing required vertices and faces, for a given shape, is handled by the Three framework, so we can focus on higher level coding. Let's start, by defining the geometry for a cube shape, adding the following just above the render() function:

+ +
var boxGeometry = new THREE.BoxGeometry(10, 10, 10);
+
+ +

In this case, we define a simple cube that is 10 x 10 x 10 units. The geometry itself is not enough though, we also need a material that will be used for our shape.

+ +

Material

+ +

A material is what covers an object, the colors, or textures on its surface. In our case, we will choose a simple blue color to paint our box. There are a number of predefined materials which can be used: Basic, Phong, Lambert. Let's play with the last two later, but for now, the Basic one should be enough:

+ +
var basicMaterial = new THREE.MeshBasicMaterial({color: 0x0095DD});
+
+ +

Add this line below the previously added.

+ +

Our material is now ready, what next?

+ +

Mesh

+ +

To apply the material to a geometry, a mesh is used. This takes on a shape, and adds the specified material to every face:

+ +
var cube = new THREE.Mesh(boxGeometry, basicMaterial);
+
+ +

Again, add this line below the one you previously added.

+ +

Adding the cube to the scene

+ +

We've now created a cube, using the geometry and material defined earlier. The last thing to do is to place the cube to our scene. Add this line below the previous one:

+ +
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:

+ +
cube.rotation.set(0.4, 0.2, 0);
+
+ +

Congratulations, you've created an object in a 3D environment! This might have proven easier than you first thought? Here's how it should look:

+ +

+ +

And here's the code we have created so far:

+ +

{{JSFiddleEmbed("https://jsfiddle.net/end3r/bwup75fa/","","350")}}

+ +

You can also check it out on GitHub.

+ +

More shapes and materials

+ +

Now we will add more shapes to the scene, and explore other shapes, materials, lighting, and more. Let's move the cube to the left, to make space for some friends. Adding the following line just below the previous one:

+ +
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.

+ +
var torusGeometry = new THREE.TorusGeometry(7, 1, 6, 12);
+var phongMaterial = new THREE.MeshPhongMaterial({color: 0xFF9500});
+var torus = new THREE.Mesh(torusGeometry, phongMaterial);
+scene.add(torus);
+
+ +

These lines will add a torus geometry; the TorusGeometry() method's parameters define, and the parameters are radius, tube diameter, radial segment count, and tubular segment count. The Phong material should look more glossy than the box's simple Basic material, though right now our torus will just look black.

+ +

We can choose more fun predefined shapes. Let's play some more. Add the following lines, below those defining the torus:

+ +
var dodecahedronGeometry = new THREE.DodecahedronGeometry(7);
+var lambertMaterial = new THREE.MeshLambertMaterial({color: 0xEAEFF2});
+var dodecahedron = new THREE.Mesh(dodecahedronGeometry, lambertMaterial);
+dodecahedron.position.x = 25;
+scene.add(dodecahedron);
+
+ +

This time, we are creating a dodecahedron, a shape containing twelve flat faces. The parameter, DodecahedronGeometry(), defines the size of the object. We're using a Lambert material, similar to Phong, but should be less glossy. Again it's black, for now. We're moving the object to the right, so it's not in the same position as the box, or torus.

+ +

As mentioned above, the new objects currently just look black. To have both, the Phong and Lambert materials properly visible, we need to introduce a source of light.

+ +

Lights

+ +

There are various types of light sources available in Three.js. The most basic is PointLight, which works like a flashlight, shining a spotlight in a defined direction. Add the following lines, below your shape definitions:

+ +
var light = new THREE.PointLight(0xFFFFFF);
+light.position.set(-10, 15, 50);
+scene.add(light);
+
+ +

We define a white point of light, set its position a little away from the center of the scene, so it can light up some parts of the shapes, finally adding it to the scene. Now everything works as it should, all three shapes are visible. You should check the documentation for other types of lights, like Ambient, Directional, Hemisphere, or Spot. Experiment placing them on our scene, to see how they affect it.

+ +

+ +

This looks a little boring though. In a game, something is usually happening. We might see animations and such. So let's try breathing a little life into these shapes, by animating them!

+ +

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.

+ +

Rotation

+ +

Rotating is straighforward. You add a value to a given direction of rotation on each frame. Add this line of code, right after the requestAnimationFrame() invocation inside the render function:

+ +
cube.rotation.y += 0.01;
+
+ +

This rotates the cube on every frame, by a tiny bit, so the animation looks smooth.

+ +

Scaling

+ +

We can also scale an object. Applying a constant value, we would make it grow, or shrink just once. Let's make things more interesting. First, we implement a helper variable, called t, for counting elapsed time. Add it right before the render() function:

+ +
var t = 0;
+
+ +

Now let's increase the value by a given constant value, on each frame of the animation. Add the following lines, just below the requestAnimationFrame() invocation:

+ +
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.

+ +

Now, onto movement.

+ +

Moving

+ +

Aside from rotation, and scaling, we can additionally move objects around the scene. Add the following, again just below our requestAnimationFrame() invocation:

+ +
dodecahedron.position.y = -7*Math.sin(t*2);
+
+ +

This will move the dodecahedron up and down, by applying the sin() value to the y axis on each frame, and a little adjustment to make it look cooler. Try changing these values, to see how it affects the animations.

+ +

Conclusion

+ +

Here's the final code:

+ +

{{JSFiddleEmbed("https://jsfiddle.net/rybr720u/","","350")}}

+ +

You can also see it on GitHub and fork the repository, if you want to play with it locally. Now you understand the basics of Three.js, you can jump back to the parent page, 3D on the Web.

+ +

You could also try learning raw WebGL, to gain a better understanding of what's going on underneath. See our WebGL documentation.

diff --git a/files/fr/games/techniques/3d_on_the_web/index.html b/files/fr/games/techniques/3d_on_the_web/index.html deleted file mode 100644 index 47d25bbffd..0000000000 --- a/files/fr/games/techniques/3d_on_the_web/index.html +++ /dev/null @@ -1,113 +0,0 @@ ---- -title: Jeux 3D sur le web -slug: Games/Techniques/3D_on_the_web -tags: - - 3D - - Images - - Jeux - - WebGL - - WebVR - - three.js -translation_of: Games/Techniques/3D_on_the_web ---- -
{{GamesSidebar}}
- -

  {{IncludeSubnav("/fr/docs/Jeux")}}

- -

Pour des expériences de jeu riches sur le Web, l'arme de choix est WebGL, qui est fourni sur HTML {{htmlelement ("canvas")}}. WebGL est essentiellement un OpenGL ES 2.0 pour le Web - c'est une API JavaScript fournissant des outils pour créer des animations interactives riches et bien sûr aussi des jeux. Vous pouvez générer et rendre des graphiques 3D dynamiques avec du JavaScript accéléré.

- -

Documentation et support du navigateur

- -

La documentation et les spécifications du projet WebGL sont gérées par le Groupe Khronos, pas le W3C comme pour la plupart des API Web. Le support sur les navigateurs modernes est très bon, même sur mobile, donc vous n'avez pas trop à vous en soucier. Les principaux navigateurs prennent en charge WebGL et tout ce dont vous avez besoin est de vous concentrer sur l'optimisation des performances sur les appareils que vous utilisez.

- -

Il y a un effort continu pour rendre libre WebGL 2.0 (basé sur OpenGL ES 3.0) dans un proche avenir, ce qui apporterait de nombreuses améliorations et aiderait les développeurs à construire des jeux pour le Web moderne en utilisant le matériel puissant actuel.

- -

Explication des bases de la théorie 3D

- -

Les bases de la théorie 3D s'articulent autour des formes représentées dans un espace 3D, avec un système de coordonnées utilisé pour calculer leurs positions. Consultez notre article de base sur la théorie 3D pour toutes les informations dont vous avez besoin.

- -

Concepts avancés

- -

Vous pouvez faire beaucoup plus avec WebGL. Il y a des concepts avancés dans lesquels vous devriez plonger et en apprendre davantage — les "shaders", la détection de collision ou le dernier sujet brûlant — la réalité virtuelle sur le Web.

- -

Shaders

- -

Il convient de distinguer les shaders, qui sont un cas particulier. Les Shaders utilisent GLSL, un langage d'ombrage OpenGL spécial avec une syntaxe similaire à C, qui est exécuté directement par le pipeline graphique. Ils peuvent être divisés en "Vertex Shaders" et "Fragment Shaders" (ou "Pixel Shaders") — le premier transforme les positions des formes en véritables coordonnées de dessin 3D, tandis que le second calcule les couleurs de rendu et d'autres attributs. Vous devriez absolument lire l'article GLSL Shaders pour en apprendre plus à leur sujet.

- -

Détection de collision

- -

Il est difficile d'imaginer un jeu sans la détection de collision — nous devons toujours mettre au point quand quelque chose frappe quelque chose d'autre. Nous avons des informations disponibles pour votre apprentissage de :

- - - -

Réalité virtuelle sur le web

- -

Le concept de réalité virtuelle n'est pas nouveau, mais il est en train de conquérir le web grâce à des avancées matérielles telles que l' Oculus Rift et l'API WebVR (actuellement expérimental) pour capturer les informations du matériel de réalité virtuelle et les rendre disponibles pour les applications JavaScript. Pour en savoir plus, lisez WebVR - Réalité virtuelle pour le Web.

- -

Il y a aussi la construction d'une démo de base avec l'article A-Frame qui montre comment il est facile de construire des environnements 3D pour la réalité virtuelle en utilisant le framework A-Frame .

- -

L'essor des bibliothèques et des cadres

- -

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 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, 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, PlayCanvas et Babylon.js 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 pour le processus étape par étape de création de la démo .

- -

Construction d'une démo de base avec Babylon.js

- -

Babylon.js est l'un des moteurs de jeux 3D les plus populaires utilisés par les développeurs. Comme avec n'importe quelle autre bibliothèque 3D, il fournit des fonctions intégrées pour vous aider à implémenter les fonctionnalités 3D courantes plus rapidement. Voir la page Construction d'une démo de base avec Babylon.js sur les bases et l'utilisation de Babylon.js, y compris la mise en place d'un environnement de développement, la structuration du code HTML nécessaire et l'écriture du code JavaScript.

- -

Construction d'une démo de base avec PlayCanvas

- -

PlayCanvas est un moteur de jeu 3D WebGL populaire ouvert sur GitHub, avec un éditeur disponible en ligne et une bonne documentation. Voir la page Construction d'une démo de base avec PlayCanvas pour des détails de haut niveau, et d'autres articles montrant comment créer des démos à l'aide de la bibliothèque PlayCanvas et de l'éditeur en ligne.

- -

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  pour le processus étape par étape de création de la démo .

- -

Autres outils

- -

Les deux Unity et Unreal peuvent exporter votre jeu vers WebGL avec asm.js , de sorte que vous êtes libre d'utiliser leurs outils et techniques pour construire des jeux qui seront exportés vers le web.

- -

- -

Où aller ensuite

- -

Avec cet article, nous avons juste effleuré la surface de ce qu'il est possible de faire avec les technologies actuellement disponibles. Vous pouvez créer des jeux 3D immersifs, beaux et rapides à l'aide de WebGL, les bibliothèques et les frameworks s'appuient dessus.

- -

Code source

- -

Vous pouvez trouver tous les codes source de cette série de démos sur GitHub.

- -

API

- - - -

Frameworks

- - - -

Tutorials

- - diff --git a/files/fr/games/techniques/3d_on_the_web/index.md b/files/fr/games/techniques/3d_on_the_web/index.md new file mode 100644 index 0000000000..47d25bbffd --- /dev/null +++ b/files/fr/games/techniques/3d_on_the_web/index.md @@ -0,0 +1,113 @@ +--- +title: Jeux 3D sur le web +slug: Games/Techniques/3D_on_the_web +tags: + - 3D + - Images + - Jeux + - WebGL + - WebVR + - three.js +translation_of: Games/Techniques/3D_on_the_web +--- +
{{GamesSidebar}}
+ +

  {{IncludeSubnav("/fr/docs/Jeux")}}

+ +

Pour des expériences de jeu riches sur le Web, l'arme de choix est WebGL, qui est fourni sur HTML {{htmlelement ("canvas")}}. WebGL est essentiellement un OpenGL ES 2.0 pour le Web - c'est une API JavaScript fournissant des outils pour créer des animations interactives riches et bien sûr aussi des jeux. Vous pouvez générer et rendre des graphiques 3D dynamiques avec du JavaScript accéléré.

+ +

Documentation et support du navigateur

+ +

La documentation et les spécifications du projet WebGL sont gérées par le Groupe Khronos, pas le W3C comme pour la plupart des API Web. Le support sur les navigateurs modernes est très bon, même sur mobile, donc vous n'avez pas trop à vous en soucier. Les principaux navigateurs prennent en charge WebGL et tout ce dont vous avez besoin est de vous concentrer sur l'optimisation des performances sur les appareils que vous utilisez.

+ +

Il y a un effort continu pour rendre libre WebGL 2.0 (basé sur OpenGL ES 3.0) dans un proche avenir, ce qui apporterait de nombreuses améliorations et aiderait les développeurs à construire des jeux pour le Web moderne en utilisant le matériel puissant actuel.

+ +

Explication des bases de la théorie 3D

+ +

Les bases de la théorie 3D s'articulent autour des formes représentées dans un espace 3D, avec un système de coordonnées utilisé pour calculer leurs positions. Consultez notre article de base sur la théorie 3D pour toutes les informations dont vous avez besoin.

+ +

Concepts avancés

+ +

Vous pouvez faire beaucoup plus avec WebGL. Il y a des concepts avancés dans lesquels vous devriez plonger et en apprendre davantage — les "shaders", la détection de collision ou le dernier sujet brûlant — la réalité virtuelle sur le Web.

+ +

Shaders

+ +

Il convient de distinguer les shaders, qui sont un cas particulier. Les Shaders utilisent GLSL, un langage d'ombrage OpenGL spécial avec une syntaxe similaire à C, qui est exécuté directement par le pipeline graphique. Ils peuvent être divisés en "Vertex Shaders" et "Fragment Shaders" (ou "Pixel Shaders") — le premier transforme les positions des formes en véritables coordonnées de dessin 3D, tandis que le second calcule les couleurs de rendu et d'autres attributs. Vous devriez absolument lire l'article GLSL Shaders pour en apprendre plus à leur sujet.

+ +

Détection de collision

+ +

Il est difficile d'imaginer un jeu sans la détection de collision — nous devons toujours mettre au point quand quelque chose frappe quelque chose d'autre. Nous avons des informations disponibles pour votre apprentissage de :

+ + + +

Réalité virtuelle sur le web

+ +

Le concept de réalité virtuelle n'est pas nouveau, mais il est en train de conquérir le web grâce à des avancées matérielles telles que l' Oculus Rift et l'API WebVR (actuellement expérimental) pour capturer les informations du matériel de réalité virtuelle et les rendre disponibles pour les applications JavaScript. Pour en savoir plus, lisez WebVR - Réalité virtuelle pour le Web.

+ +

Il y a aussi la construction d'une démo de base avec l'article A-Frame qui montre comment il est facile de construire des environnements 3D pour la réalité virtuelle en utilisant le framework A-Frame .

+ +

L'essor des bibliothèques et des cadres

+ +

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 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, 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, PlayCanvas et Babylon.js 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 pour le processus étape par étape de création de la démo .

+ +

Construction d'une démo de base avec Babylon.js

+ +

Babylon.js est l'un des moteurs de jeux 3D les plus populaires utilisés par les développeurs. Comme avec n'importe quelle autre bibliothèque 3D, il fournit des fonctions intégrées pour vous aider à implémenter les fonctionnalités 3D courantes plus rapidement. Voir la page Construction d'une démo de base avec Babylon.js sur les bases et l'utilisation de Babylon.js, y compris la mise en place d'un environnement de développement, la structuration du code HTML nécessaire et l'écriture du code JavaScript.

+ +

Construction d'une démo de base avec PlayCanvas

+ +

PlayCanvas est un moteur de jeu 3D WebGL populaire ouvert sur GitHub, avec un éditeur disponible en ligne et une bonne documentation. Voir la page Construction d'une démo de base avec PlayCanvas pour des détails de haut niveau, et d'autres articles montrant comment créer des démos à l'aide de la bibliothèque PlayCanvas et de l'éditeur en ligne.

+ +

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  pour le processus étape par étape de création de la démo .

+ +

Autres outils

+ +

Les deux Unity et Unreal peuvent exporter votre jeu vers WebGL avec asm.js , de sorte que vous êtes libre d'utiliser leurs outils et techniques pour construire des jeux qui seront exportés vers le web.

+ +

+ +

Où aller ensuite

+ +

Avec cet article, nous avons juste effleuré la surface de ce qu'il est possible de faire avec les technologies actuellement disponibles. Vous pouvez créer des jeux 3D immersifs, beaux et rapides à l'aide de WebGL, les bibliothèques et les frameworks s'appuient dessus.

+ +

Code source

+ +

Vous pouvez trouver tous les codes source de cette série de démos sur GitHub.

+ +

API

+ + + +

Frameworks

+ + + +

Tutorials

+ + diff --git a/files/fr/games/techniques/audio_for_web_games/index.html b/files/fr/games/techniques/audio_for_web_games/index.html deleted file mode 100644 index a3bf43e413..0000000000 --- a/files/fr/games/techniques/audio_for_web_games/index.html +++ /dev/null @@ -1,385 +0,0 @@ ---- -title: L'audio dans les jeux Web -slug: Games/Techniques/Audio_for_Web_Games -tags: - - API - - Audio - - Jeux - - Web Audio API - - audio sprites -translation_of: Games/Techniques/Audio_for_Web_Games ---- -
{{GamesSidebar}}

  {{IncludeSubnav("/fr/docs/Jeux")}}

- -

L'audio représente une chose essentielle dans n'importe quel jeu vidéo; il apporte de l'information et contribue à l'atmosphère du jeu. La prise en charge de l'audio a évolué de manière rapide mais il reste encore beaucoup de différences de prise en charge entre les navigateurs. Nous avons souvent besoin de décider quelles parties de notre contenu audio est intéressant et laquelle ne l'est pas, et mettre en place une stratégie en conséquence. Cet article fournit un guide détaillé sur l'implémentation de l'audio dans les jeux HTML5, détaillant quels choix technologiques fonctionneront sur le plus grand nombre de navigateurs.

- -

Avertissement sur l'audio sur mobile

- -

Les plateformes mobiles sont de loin les plateformes où il est le plus difficile de mettre en place l'audio. Malheureusement c'est la plateforme la plus utilisée par les joueurs. Il y a certaines différences entre les plateformes de bureau (desktop) habituelles et les plateformes mobiles qui ont sûrement poussé les éditeurs de navigateur à faire des choix qui peuvent rendre difficle l'implémentation de l'audio par les utilisateurs. Regardons ensemble ces différences.

- -

Lecture automatique

- -

Beaucoup de navigateurs mobiles vont simplement ignorer n'importe quelle requête de lancement automatique de musique faite par votre jeu; à la place, l'utilisateur va être obligé de lancer lui même la lecture via une action quelconque. Cela signifie que vous allez devoir prendre en compte cette diférence lors de l'implementation de votre lecture automatique. Ce problème est généralement atténué en chargeant l'audio à l'avance et en l'amorçant sur un événement initié par l'utilisateur.

- -

Pour une lecture automatique audio plus passive, par exemple une musique de fond qui commence dès qu'un jeu se charge, une astuce consiste à détecter l'événement * any * initié par l'utilisateur et à démarrer la lecture. Pour d'autres sons plus actifs qui seront utilisés pendant le jeu, nous pouvons envisager de les amorcer dès que l'on appuie sur un bouton de démarrage.

- -

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 : 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

- -

Le contrôle du volume programmé peut être désactivé dans les navigateurs mobiles. La raison souvent donnée est que l'utilisateur doit maîtriser le volume au niveau du système d'exploitation et cela ne doit pas être ignoré.

- -

Mise en mémoire tampon et préchargement

- -

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.

-
- -

Lecture audio simultanée

- -

Une exigence de nombreux jeux est de jouer plus d'un morceau audio en même temps ; par exemple, il peut y avoir de la musique de fond et des effets sonores pour diverses actions se produisant dans le jeu. Bien que la situation évolue rapidement avec l'adoption de l' API Web Audio , la méthode actuellement la plus largement supportée, utilisant l'élément vanilla {{htmlelement ("audio")}}, produit des résultats inégaux sur les appareils mobiles.

- -

Test et support

- -

Voici un tableau qui montre quelles plateformes mobiles prennent en charge les fonctionnalités mentionnées ci-dessus.

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Mobile support for web audio features
Navigateur de mobileVersionLecture simultanéeLecture automatiqueAjustement du volumePréchargement
Chrome (Android)32+OuiNonNonNon
Firefox (Android)26+OuiOuiNonNon
Firefox OS1.2+OuiOuiOuiOui
IE Mobile11+OuiOuiNonOui
Opera Mobile11+NonNonNonNon
Safari (iOS)7+Oui/Non*NonNonOui
Android Browser2.3+NonNonNonNon
- -
-

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é, 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.

-
- -
-

Note : La variabilité du volume est testée avec notre exemple test volume.

-
- -

Solutions de contournement pour mobile

- -

Bien que les navigateurs mobiles puissent présenter les problèmes évoqués ci-dessus, il existe des moyens de les contourner.

- -

Les "sprites" audio

- -

Les "sprites" audio empruntent leur nom aux "sprites" CSS ; c'est une technique visuelle permettant d'utiliser CSS avec une seule ressource graphique pour la découper en une série d'objets-images. Nous pouvons appliquer le même principe à l'audio, au lieu de disposer d'un petit nombre de petits fichiers audio qui prennent du temps à charger et à lire, nous avons un fichier audio plus grand contenant tous les fragments audio plus petits dont nous avons besoin. Pour lire un son spécifique à partir du fichier, nous utilisons simplement les périodes de début et de fin connues pour chaque "sprite" audio.

- -

L'avantage est que nous pouvons amorcer un morceau d'audio et avoir nos "sprites" prêts à partir. Pour ce faire, nous pouvons juste jouer et mettre en pause instantanément la plus grande partie de l'audio. Nous réduisons également le nombre de demandes de serveur et économisons de la bande passante.

- -
var myAudio = document.createElement("audio");
-myAudio.src = "mysprite.mp3";
-myAudio.play();
-myAudio.pause();
- -

Vous aurez besoin d'échantillonner l'heure actuelle pour savoir quand l'arrêter. Si vous espacez vos sons individuels d'au moins 500 ms, l'utilisation de l'événement timeUpdate (qui se déclenche toutes les 250 ms) devrait suffire. Vos fichiers peuvent être légèrement plus longs que ce qu'ils devraient être, mais le silence se compresse bien.

- -

Voici un exemple d'un lecteur de "sprite" audio - nous allons d'abord configurer l'interface utilisateur en HTML :

- -
lt;audio id="myAudio" src="http://jPlayer.org/tmp/countdown.mp3"></audio>
-<button data-start="18" data-stop="19">0</button>
-<button data-start="16" data-stop="17">1</button>
-<button data-start="14" data-stop="15">2</button>
-<button data-start="12" data-stop="13">3</button>
-<button data-start="10" data-stop="11">4</button>
-<button data-start="8"  data-stop="9">5</button>
-<button data-start="6"  data-stop="7">6</button>
-<button data-start="4"  data-stop="5">7</button>
-<button data-start="2"  data-stop="3">8</button>
-<button data-start="0"  data-stop="1">9</button>
- -

Maintenant, nous avons des boutons avec des heures de début et de fin en quelques secondes. Le fichier MP3 "countdown.mp3" se compose d'un numéro qui est prononcé toutes les 2 secondes, l'idée étant de lire ce numéro lorsque le bouton correspondant est pressé.

- -

Ajoutons du JavaScript pour que ça marche:

- -
var myAudio = document.getElementById('myAudio');
-var buttons = document.getElementsByTagName('button');
-var stopTime = 0;
-
-for (var i = 0; i < buttons.length; i++) {
-  buttons[i].addEventListener('click', function() {
-    myAudio.currentTime = this.getAttribute("data-start");
-    stopTime = this.getAttribute("data-stop");
-    myAudio.play();
-  }, false);
-}
-
-myAudio.addEventListener('timeupdate', function() {
-  if (this.currentTime > stopTime) {
-    this.pause();
-  }
-}, false);
- -
-

Note : Vous pouvez essayer notre lecteur de sprite audio 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 : 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

- -

La musique dans les jeux peut avoir un effet émotionnel puissant. Vous pouvez mélanger et assortir divers échantillons de musique et, en supposant que vous pouvez contrôler le volume de votre élément audio, vous pouvez fondre différentes pièces musicales. En utilisant la méthode playbackRate() , vous pouvez même ajuster la vitesse de votre musique sans affecter la hauteur, pour mieux la synchroniser avec l'action.
-
- Tout ceci est possible en utilisant l'élément standard {{HTMLElement ("audio")}} associé à l'API {{domxref("HTMLMediaElement")}} , mais il devient beaucoup plus facile et flexible avec l'API Web Audio.

- -

API Web Audio pour les jeux

- -

Maintenant qu'il est supporté dans tous les navigateurs modernes à l'exception d'Opera Mini et d'Internet Explorer (bien que Microsoft travaille maintenant dessus), une approche acceptable pour de nombreuses situations est d'utiliser l'API Web Audio (voir la page Puis-je utiliser l'API Web Audio ? pour plus d'informations sur la compatibilité du navigateur). L'API Web Audio est une API JavaScript audio avancée, idéale pour l'audio du jeu. Les développeurs peuvent générer de l'audio et manipuler des échantillons audio tout en positionnant le son dans l'espace de jeu 3D.

- -

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.

-
- -

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.

- -

Musique de fond avec l'API Web Audio

- -

Bien que nous puissions utiliser l'élément {{HTMLElement ("audio")}} pour fournir une musique de fond linéaire, qui ne change pas en réaction à l'environnement du jeu, l'API Web Audio est idéale pour implémenter une expérience musicale plus dynamique. Vous pouvez vouloir que la musique change selon que vous essayez de créer du suspense ou d'encourager le joueur d'une manière ou d'une autre. La musique est une partie importante de l'expérience de jeu et, selon le type de jeu, vous voudrez peut-être investir des efforts considérables pour bien faire les choses.

- -

Une façon de rendre votre musique plus dynamique est de la diviser en boucles ou en pistes de composant. C'est souvent la façon dont les musiciens composent la musique de toute façon, et l'API Web Audio est extrêmement efficace pour garder ces parties synchronisées. Une fois que vous avez les différentes pistes qui composent votre morceau, vous pouvez apporter des pistes ou en retirer de la façon appropriée.

- -

Vous pouvez également appliquer des filtres ou des effets à la musique. Votre personnage est-il dans une grotte ? Augmentez l'écho. Peut-être que vous avez des scènes sous-marines, alors appliquez un filtre qui étouffe le son.

- -

Regardons quelques techniques de l'API Web Audio pour ajuster dynamiquement la musique à partir de ses pistes de base.

- -

Chargement des pistes

- -

Avec l'API Web Audio, vous pouvez charger individuellement des pistes et des boucles séparées en utilisant XMLHttpRequest, ce qui signifie que vous pouvez les charger de manière synchrone ou en parallèle. Le chargement synchrone peut signifier que certaines parties de votre musique sont prêtes plus tôt et vous pouvez commencer à les jouer pendant que d'autres se chargent.

- -

De toute façon, vous pouvez vouloir synchroniser des pistes ou des boucles. L'API Web Audio contient la notion d'horloge interne qui commence à cocher le moment où vous créez un contexte audio. Vous devez prendre en compte le temps entre la création d'un contexte audio et le moment où la première piste audio commence à jouer. L'enregistrement de ce décalage et l'interrogation de l'heure actuelle de la piste de lecture vous donnent suffisamment d'informations pour synchroniser des morceaux audio distincts.

- -

Pour voir cela en action, mettons en place des pistes distinctes :

- -
ul>
-  <li><a class="track" href="http://jPlayer.org/audio/mp3/gbreggae-leadguitar.mp3">Lead Guitar</a></li>
-  <li><a class="track" href="http://jPlayer.org/audio/mp3/gbreggae-drums.mp3">Drums</a></li>
-  <li><a class="track" href="http://jPlayer.org/audio/mp3/gbreggae-bassguitar.mp3">Bass Guitar</a></li>
-  <li><a class="track" href="http://jPlayer.org/audio/mp3/gbreggae-horns.mp3">Horns</a></li>
-  <li><a class="track" href="http://jPlayer.org/audio/mp3/gbreggae-clav.mp3">Clavi</a></li>
-</ul>
- -

Toutes ces pistes ont le même tempo et sont conçues pour être synchronisées les unes avec les autres.

- -
window.AudioContext = window.AudioContext || window.webkitAudioContext;
-
-var offset = 0;
-var context = new AudioContext();
-
-function playTrack(url) {
-  var request = new XMLHttpRequest();
-  request.open('GET', url, true);
-  request.responseType = 'arraybuffer';
-
-  var audiobuffer;
-
-  // Decode asynchronously
-  request.onload = function() {
-
-    if (request.status == 200) {
-
-      context.decodeAudioData(request.response, function(buffer) {
-        var source = context.createBufferSource();
-        source.buffer = buffer;
-        source.connect(context.destination);
-        console.log('context.currentTime ' + context.currentTime);
-
-        if (offset == 0) {
-          source.start();
-          offset = context.currentTime;
-        } else {
-          source.start(0,context.currentTime - offset);
-        }
-
-      }, function(e) {
-        console.log('Error decoding audio data:' + e);
-      });
-    } else {
-      console.log('Audio didn\'t load successfully; error code:' + request.statusText);
-    }
-  }
-  request.send();
-}
-
-var tracks = document.getElementsByClassName('track');
-
-for (var i = 0, len = tracks.length; i < len; i++) {
-  tracks[i].addEventListener('click', function(e){
-
-    playTrack(this.href);
-    e.preventDefault();
-  });
-}
- -
-

Note : Vous pouvez essayer notre démo multipiste API Web Audio 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.

- -

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 .
    2. -
  2. where (offset) (où) : la partie de l'audio qui doit commencer à être jouée.
    3. -
  3. how long (combien de temps) : la durée pendant laquelle elle doit être jouée.
    4. -
- -

stop() prend un paramètre facultatif - when - qui est le délai avant l'arrêt.
-
- Si le second paramètre de start () — the offset (le décalage) — est nul, nous commençons à jouer dès le début l'audio donné ; ce que nous faisons en premier. Nous stockons ensuite le {{domxref ("AudioContext.currentTime")}} — le décalage de la première lecture de la pièce, soustrayons celle des temps actuels pour calculer l'heure réelle, et utilisons cela pour synchroniser nos pistes.
-
- 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.

-
- -

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.

- -

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 :

- -
if (offset == 0) {
-  source.start();
-  offset = context.currentTime;
-} else {
-  var relativeTime = context.currentTime - offset;
-  var beats = relativeTime / tempo;
-  var remainder = beats - Math.floor(beats);
-  var delay = tempo - (remainder*tempo);
-  source.start(context.currentTime+delay, relativeTime+delay);
-}
- -
-

Note : Ici, vous pouvez essayer notre code calculateur d'attente , sur JSFiddle (synchronisé à la mesure).

-
- -
-

Note : Si le premier paramètre est 0 ou inférieur au contexte currentTime, la musique commence immédiatement.

-
- -

Audio positionnel

- -

L'audio positionnel peut être une technique importante pour faire de l'audio un élément clé d'une expérience de jeu immersive. L'API Web Audio permet non seulement de positionner un certain nombre de sources audio dans un espace tridimensionnel, mais également d'appliquer des filtres qui rendent cet audio plus réaliste.

- -

En bref, en utilisant les capacités positionnelles de l'API Web Audio, nous pouvons relier d'autres informations sur le monde du jeu pour le joueur.

- -

Nous pouvons relier :

- - - -

Ceci est particulièrement utile dans un environnement tridimensionnel rendu en utilisant WebGL, 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 (Bases de la spacialisation de l'API Web Audio) pour plus de détails.

-
- -

See Also

- - diff --git a/files/fr/games/techniques/audio_for_web_games/index.md b/files/fr/games/techniques/audio_for_web_games/index.md new file mode 100644 index 0000000000..a3bf43e413 --- /dev/null +++ b/files/fr/games/techniques/audio_for_web_games/index.md @@ -0,0 +1,385 @@ +--- +title: L'audio dans les jeux Web +slug: Games/Techniques/Audio_for_Web_Games +tags: + - API + - Audio + - Jeux + - Web Audio API + - audio sprites +translation_of: Games/Techniques/Audio_for_Web_Games +--- +
{{GamesSidebar}}

  {{IncludeSubnav("/fr/docs/Jeux")}}

+ +

L'audio représente une chose essentielle dans n'importe quel jeu vidéo; il apporte de l'information et contribue à l'atmosphère du jeu. La prise en charge de l'audio a évolué de manière rapide mais il reste encore beaucoup de différences de prise en charge entre les navigateurs. Nous avons souvent besoin de décider quelles parties de notre contenu audio est intéressant et laquelle ne l'est pas, et mettre en place une stratégie en conséquence. Cet article fournit un guide détaillé sur l'implémentation de l'audio dans les jeux HTML5, détaillant quels choix technologiques fonctionneront sur le plus grand nombre de navigateurs.

+ +

Avertissement sur l'audio sur mobile

+ +

Les plateformes mobiles sont de loin les plateformes où il est le plus difficile de mettre en place l'audio. Malheureusement c'est la plateforme la plus utilisée par les joueurs. Il y a certaines différences entre les plateformes de bureau (desktop) habituelles et les plateformes mobiles qui ont sûrement poussé les éditeurs de navigateur à faire des choix qui peuvent rendre difficle l'implémentation de l'audio par les utilisateurs. Regardons ensemble ces différences.

+ +

Lecture automatique

+ +

Beaucoup de navigateurs mobiles vont simplement ignorer n'importe quelle requête de lancement automatique de musique faite par votre jeu; à la place, l'utilisateur va être obligé de lancer lui même la lecture via une action quelconque. Cela signifie que vous allez devoir prendre en compte cette diférence lors de l'implementation de votre lecture automatique. Ce problème est généralement atténué en chargeant l'audio à l'avance et en l'amorçant sur un événement initié par l'utilisateur.

+ +

Pour une lecture automatique audio plus passive, par exemple une musique de fond qui commence dès qu'un jeu se charge, une astuce consiste à détecter l'événement * any * initié par l'utilisateur et à démarrer la lecture. Pour d'autres sons plus actifs qui seront utilisés pendant le jeu, nous pouvons envisager de les amorcer dès que l'on appuie sur un bouton de démarrage.

+ +

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 : 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

+ +

Le contrôle du volume programmé peut être désactivé dans les navigateurs mobiles. La raison souvent donnée est que l'utilisateur doit maîtriser le volume au niveau du système d'exploitation et cela ne doit pas être ignoré.

+ +

Mise en mémoire tampon et préchargement

+ +

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.

+
+ +

Lecture audio simultanée

+ +

Une exigence de nombreux jeux est de jouer plus d'un morceau audio en même temps ; par exemple, il peut y avoir de la musique de fond et des effets sonores pour diverses actions se produisant dans le jeu. Bien que la situation évolue rapidement avec l'adoption de l' API Web Audio , la méthode actuellement la plus largement supportée, utilisant l'élément vanilla {{htmlelement ("audio")}}, produit des résultats inégaux sur les appareils mobiles.

+ +

Test et support

+ +

Voici un tableau qui montre quelles plateformes mobiles prennent en charge les fonctionnalités mentionnées ci-dessus.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Mobile support for web audio features
Navigateur de mobileVersionLecture simultanéeLecture automatiqueAjustement du volumePréchargement
Chrome (Android)32+OuiNonNonNon
Firefox (Android)26+OuiOuiNonNon
Firefox OS1.2+OuiOuiOuiOui
IE Mobile11+OuiOuiNonOui
Opera Mobile11+NonNonNonNon
Safari (iOS)7+Oui/Non*NonNonOui
Android Browser2.3+NonNonNonNon
+ +
+

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é, 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.

+
+ +
+

Note : La variabilité du volume est testée avec notre exemple test volume.

+
+ +

Solutions de contournement pour mobile

+ +

Bien que les navigateurs mobiles puissent présenter les problèmes évoqués ci-dessus, il existe des moyens de les contourner.

+ +

Les "sprites" audio

+ +

Les "sprites" audio empruntent leur nom aux "sprites" CSS ; c'est une technique visuelle permettant d'utiliser CSS avec une seule ressource graphique pour la découper en une série d'objets-images. Nous pouvons appliquer le même principe à l'audio, au lieu de disposer d'un petit nombre de petits fichiers audio qui prennent du temps à charger et à lire, nous avons un fichier audio plus grand contenant tous les fragments audio plus petits dont nous avons besoin. Pour lire un son spécifique à partir du fichier, nous utilisons simplement les périodes de début et de fin connues pour chaque "sprite" audio.

+ +

L'avantage est que nous pouvons amorcer un morceau d'audio et avoir nos "sprites" prêts à partir. Pour ce faire, nous pouvons juste jouer et mettre en pause instantanément la plus grande partie de l'audio. Nous réduisons également le nombre de demandes de serveur et économisons de la bande passante.

+ +
var myAudio = document.createElement("audio");
+myAudio.src = "mysprite.mp3";
+myAudio.play();
+myAudio.pause();
+ +

Vous aurez besoin d'échantillonner l'heure actuelle pour savoir quand l'arrêter. Si vous espacez vos sons individuels d'au moins 500 ms, l'utilisation de l'événement timeUpdate (qui se déclenche toutes les 250 ms) devrait suffire. Vos fichiers peuvent être légèrement plus longs que ce qu'ils devraient être, mais le silence se compresse bien.

+ +

Voici un exemple d'un lecteur de "sprite" audio - nous allons d'abord configurer l'interface utilisateur en HTML :

+ +
lt;audio id="myAudio" src="http://jPlayer.org/tmp/countdown.mp3"></audio>
+<button data-start="18" data-stop="19">0</button>
+<button data-start="16" data-stop="17">1</button>
+<button data-start="14" data-stop="15">2</button>
+<button data-start="12" data-stop="13">3</button>
+<button data-start="10" data-stop="11">4</button>
+<button data-start="8"  data-stop="9">5</button>
+<button data-start="6"  data-stop="7">6</button>
+<button data-start="4"  data-stop="5">7</button>
+<button data-start="2"  data-stop="3">8</button>
+<button data-start="0"  data-stop="1">9</button>
+ +

Maintenant, nous avons des boutons avec des heures de début et de fin en quelques secondes. Le fichier MP3 "countdown.mp3" se compose d'un numéro qui est prononcé toutes les 2 secondes, l'idée étant de lire ce numéro lorsque le bouton correspondant est pressé.

+ +

Ajoutons du JavaScript pour que ça marche:

+ +
var myAudio = document.getElementById('myAudio');
+var buttons = document.getElementsByTagName('button');
+var stopTime = 0;
+
+for (var i = 0; i < buttons.length; i++) {
+  buttons[i].addEventListener('click', function() {
+    myAudio.currentTime = this.getAttribute("data-start");
+    stopTime = this.getAttribute("data-stop");
+    myAudio.play();
+  }, false);
+}
+
+myAudio.addEventListener('timeupdate', function() {
+  if (this.currentTime > stopTime) {
+    this.pause();
+  }
+}, false);
+ +
+

Note : Vous pouvez essayer notre lecteur de sprite audio 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 : 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

+ +

La musique dans les jeux peut avoir un effet émotionnel puissant. Vous pouvez mélanger et assortir divers échantillons de musique et, en supposant que vous pouvez contrôler le volume de votre élément audio, vous pouvez fondre différentes pièces musicales. En utilisant la méthode playbackRate() , vous pouvez même ajuster la vitesse de votre musique sans affecter la hauteur, pour mieux la synchroniser avec l'action.
+
+ Tout ceci est possible en utilisant l'élément standard {{HTMLElement ("audio")}} associé à l'API {{domxref("HTMLMediaElement")}} , mais il devient beaucoup plus facile et flexible avec l'API Web Audio.

+ +

API Web Audio pour les jeux

+ +

Maintenant qu'il est supporté dans tous les navigateurs modernes à l'exception d'Opera Mini et d'Internet Explorer (bien que Microsoft travaille maintenant dessus), une approche acceptable pour de nombreuses situations est d'utiliser l'API Web Audio (voir la page Puis-je utiliser l'API Web Audio ? pour plus d'informations sur la compatibilité du navigateur). L'API Web Audio est une API JavaScript audio avancée, idéale pour l'audio du jeu. Les développeurs peuvent générer de l'audio et manipuler des échantillons audio tout en positionnant le son dans l'espace de jeu 3D.

+ +

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.

+
+ +

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.

+ +

Musique de fond avec l'API Web Audio

+ +

Bien que nous puissions utiliser l'élément {{HTMLElement ("audio")}} pour fournir une musique de fond linéaire, qui ne change pas en réaction à l'environnement du jeu, l'API Web Audio est idéale pour implémenter une expérience musicale plus dynamique. Vous pouvez vouloir que la musique change selon que vous essayez de créer du suspense ou d'encourager le joueur d'une manière ou d'une autre. La musique est une partie importante de l'expérience de jeu et, selon le type de jeu, vous voudrez peut-être investir des efforts considérables pour bien faire les choses.

+ +

Une façon de rendre votre musique plus dynamique est de la diviser en boucles ou en pistes de composant. C'est souvent la façon dont les musiciens composent la musique de toute façon, et l'API Web Audio est extrêmement efficace pour garder ces parties synchronisées. Une fois que vous avez les différentes pistes qui composent votre morceau, vous pouvez apporter des pistes ou en retirer de la façon appropriée.

+ +

Vous pouvez également appliquer des filtres ou des effets à la musique. Votre personnage est-il dans une grotte ? Augmentez l'écho. Peut-être que vous avez des scènes sous-marines, alors appliquez un filtre qui étouffe le son.

+ +

Regardons quelques techniques de l'API Web Audio pour ajuster dynamiquement la musique à partir de ses pistes de base.

+ +

Chargement des pistes

+ +

Avec l'API Web Audio, vous pouvez charger individuellement des pistes et des boucles séparées en utilisant XMLHttpRequest, ce qui signifie que vous pouvez les charger de manière synchrone ou en parallèle. Le chargement synchrone peut signifier que certaines parties de votre musique sont prêtes plus tôt et vous pouvez commencer à les jouer pendant que d'autres se chargent.

+ +

De toute façon, vous pouvez vouloir synchroniser des pistes ou des boucles. L'API Web Audio contient la notion d'horloge interne qui commence à cocher le moment où vous créez un contexte audio. Vous devez prendre en compte le temps entre la création d'un contexte audio et le moment où la première piste audio commence à jouer. L'enregistrement de ce décalage et l'interrogation de l'heure actuelle de la piste de lecture vous donnent suffisamment d'informations pour synchroniser des morceaux audio distincts.

+ +

Pour voir cela en action, mettons en place des pistes distinctes :

+ +
ul>
+  <li><a class="track" href="http://jPlayer.org/audio/mp3/gbreggae-leadguitar.mp3">Lead Guitar</a></li>
+  <li><a class="track" href="http://jPlayer.org/audio/mp3/gbreggae-drums.mp3">Drums</a></li>
+  <li><a class="track" href="http://jPlayer.org/audio/mp3/gbreggae-bassguitar.mp3">Bass Guitar</a></li>
+  <li><a class="track" href="http://jPlayer.org/audio/mp3/gbreggae-horns.mp3">Horns</a></li>
+  <li><a class="track" href="http://jPlayer.org/audio/mp3/gbreggae-clav.mp3">Clavi</a></li>
+</ul>
+ +

Toutes ces pistes ont le même tempo et sont conçues pour être synchronisées les unes avec les autres.

+ +
window.AudioContext = window.AudioContext || window.webkitAudioContext;
+
+var offset = 0;
+var context = new AudioContext();
+
+function playTrack(url) {
+  var request = new XMLHttpRequest();
+  request.open('GET', url, true);
+  request.responseType = 'arraybuffer';
+
+  var audiobuffer;
+
+  // Decode asynchronously
+  request.onload = function() {
+
+    if (request.status == 200) {
+
+      context.decodeAudioData(request.response, function(buffer) {
+        var source = context.createBufferSource();
+        source.buffer = buffer;
+        source.connect(context.destination);
+        console.log('context.currentTime ' + context.currentTime);
+
+        if (offset == 0) {
+          source.start();
+          offset = context.currentTime;
+        } else {
+          source.start(0,context.currentTime - offset);
+        }
+
+      }, function(e) {
+        console.log('Error decoding audio data:' + e);
+      });
+    } else {
+      console.log('Audio didn\'t load successfully; error code:' + request.statusText);
+    }
+  }
+  request.send();
+}
+
+var tracks = document.getElementsByClassName('track');
+
+for (var i = 0, len = tracks.length; i < len; i++) {
+  tracks[i].addEventListener('click', function(e){
+
+    playTrack(this.href);
+    e.preventDefault();
+  });
+}
+ +
+

Note : Vous pouvez essayer notre démo multipiste API Web Audio 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.

+ +

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 .
    2. +
  2. where (offset) (où) : la partie de l'audio qui doit commencer à être jouée.
    3. +
  3. how long (combien de temps) : la durée pendant laquelle elle doit être jouée.
    4. +
+ +

stop() prend un paramètre facultatif - when - qui est le délai avant l'arrêt.
+
+ Si le second paramètre de start () — the offset (le décalage) — est nul, nous commençons à jouer dès le début l'audio donné ; ce que nous faisons en premier. Nous stockons ensuite le {{domxref ("AudioContext.currentTime")}} — le décalage de la première lecture de la pièce, soustrayons celle des temps actuels pour calculer l'heure réelle, et utilisons cela pour synchroniser nos pistes.
+
+ 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.

+
+ +

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.

+ +

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 :

+ +
if (offset == 0) {
+  source.start();
+  offset = context.currentTime;
+} else {
+  var relativeTime = context.currentTime - offset;
+  var beats = relativeTime / tempo;
+  var remainder = beats - Math.floor(beats);
+  var delay = tempo - (remainder*tempo);
+  source.start(context.currentTime+delay, relativeTime+delay);
+}
+ +
+

Note : Ici, vous pouvez essayer notre code calculateur d'attente , sur JSFiddle (synchronisé à la mesure).

+
+ +
+

Note : Si le premier paramètre est 0 ou inférieur au contexte currentTime, la musique commence immédiatement.

+
+ +

Audio positionnel

+ +

L'audio positionnel peut être une technique importante pour faire de l'audio un élément clé d'une expérience de jeu immersive. L'API Web Audio permet non seulement de positionner un certain nombre de sources audio dans un espace tridimensionnel, mais également d'appliquer des filtres qui rendent cet audio plus réaliste.

+ +

En bref, en utilisant les capacités positionnelles de l'API Web Audio, nous pouvons relier d'autres informations sur le monde du jeu pour le joueur.

+ +

Nous pouvons relier :

+ + + +

Ceci est particulièrement utile dans un environnement tridimensionnel rendu en utilisant WebGL, 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 (Bases de la spacialisation de l'API Web Audio) pour plus de détails.

+
+ +

See Also

+ + diff --git a/files/fr/games/techniques/index.html b/files/fr/games/techniques/index.html deleted file mode 100644 index 12534a0449..0000000000 --- a/files/fr/games/techniques/index.html +++ /dev/null @@ -1,31 +0,0 @@ ---- -title: Techniques pour le développement de jeux vidéo -slug: Games/Techniques -tags: - - Guide - - JavaScript - - Jeux -translation_of: Games/Techniques ---- -
{{GamesSidebar}}
- -

{{IncludeSubnav("/fr/docs/Jeux")}}

- -

Cette page liste un ensemble de techniques utiles à toute personne qui voudrait développer un jeu vidéo à l'aide des technologies du web.

- -
-
Utiliser des scripts asynchrones pour asm.js
-
Principalement pour la création de jeux de moyenne ou de grande taille, les scripts asynchrones sont une technique essentielle dont il faut tirer avantage, ainsi le JavaScript de votre jeux pourra être compilé hors du thread principal et mis en cache pour la future exécution du jeux, résultant en une amélioration significative des performances pour vos utilisateurs. Cet article vous explique comment.
-
Optimiser les performances au démarrage
-
Comment vous assurez que votre jeu se lancera rapidement, en douceur et sans avoir l’air de bloquer le navigateur ou le périphérique de l’utilisateur.
-
Utiliser les canaux de données pair-à-pair WebRTC
-
En plus de prendre en charge les communications audio et vidéo, WebRTC permet de mettre en place des canaux de données pair-à-pair pour échanger activement des données texte ou binaires entre deux joueurs. Cet article explique ce que cela vous apporte et montre comment utiliser les bibliothèques qui rendent cela facile.
-
Animations efficaces pour les jeux web
-
Cet article couvre les techniques et les conseils pour créer des animations efficaces pour les jeux web, avec une tendance vers la prise en charge des appareils bas de gamme comme des téléphones mobiles. Nous aborderons les transitions CSS et les animations CSS, et les boucles JavaScript utilisant {{ domxref("window.requestAnimationFrame") }}.
-
Audio pour les jeux web
-
L'audio est une partie importante de tout jeu - il ajoute des commentaires et de l'atmosphère. L'audio basé sur le Web arrive à maturité rapidement, mais il y a encore beaucoup de différences de navigateurs à négocier. Cet article fournit un guide détaillé sur la mise en œuvre de l'audio pour les jeux Web, en examinant ce qui fonctionne actuellement sur un éventail aussi large que possible de platesformes.
-
Détection de collisions en 2D
-
Une introduction aux techniques de détection de collisions pour les jeux en deux dimensions.
-
Carrelage  
-
Les carreaux sont une technique très populaire dans les jeux 2D pour construire le monde du jeu. Ces articles fournissent une introduction du carrelage (map 2D) et expliquent comment les implémenter avec l'API Canvas.
-
diff --git a/files/fr/games/techniques/index.md b/files/fr/games/techniques/index.md new file mode 100644 index 0000000000..12534a0449 --- /dev/null +++ b/files/fr/games/techniques/index.md @@ -0,0 +1,31 @@ +--- +title: Techniques pour le développement de jeux vidéo +slug: Games/Techniques +tags: + - Guide + - JavaScript + - Jeux +translation_of: Games/Techniques +--- +
{{GamesSidebar}}
+ +

{{IncludeSubnav("/fr/docs/Jeux")}}

+ +

Cette page liste un ensemble de techniques utiles à toute personne qui voudrait développer un jeu vidéo à l'aide des technologies du web.

+ +
+
Utiliser des scripts asynchrones pour asm.js
+
Principalement pour la création de jeux de moyenne ou de grande taille, les scripts asynchrones sont une technique essentielle dont il faut tirer avantage, ainsi le JavaScript de votre jeux pourra être compilé hors du thread principal et mis en cache pour la future exécution du jeux, résultant en une amélioration significative des performances pour vos utilisateurs. Cet article vous explique comment.
+
Optimiser les performances au démarrage
+
Comment vous assurez que votre jeu se lancera rapidement, en douceur et sans avoir l’air de bloquer le navigateur ou le périphérique de l’utilisateur.
+
Utiliser les canaux de données pair-à-pair WebRTC
+
En plus de prendre en charge les communications audio et vidéo, WebRTC permet de mettre en place des canaux de données pair-à-pair pour échanger activement des données texte ou binaires entre deux joueurs. Cet article explique ce que cela vous apporte et montre comment utiliser les bibliothèques qui rendent cela facile.
+
Animations efficaces pour les jeux web
+
Cet article couvre les techniques et les conseils pour créer des animations efficaces pour les jeux web, avec une tendance vers la prise en charge des appareils bas de gamme comme des téléphones mobiles. Nous aborderons les transitions CSS et les animations CSS, et les boucles JavaScript utilisant {{ domxref("window.requestAnimationFrame") }}.
+
Audio pour les jeux web
+
L'audio est une partie importante de tout jeu - il ajoute des commentaires et de l'atmosphère. L'audio basé sur le Web arrive à maturité rapidement, mais il y a encore beaucoup de différences de navigateurs à négocier. Cet article fournit un guide détaillé sur la mise en œuvre de l'audio pour les jeux Web, en examinant ce qui fonctionne actuellement sur un éventail aussi large que possible de platesformes.
+
Détection de collisions en 2D
+
Une introduction aux techniques de détection de collisions pour les jeux en deux dimensions.
+
Carrelage  
+
Les carreaux sont une technique très populaire dans les jeux 2D pour construire le monde du jeu. Ces articles fournissent une introduction du carrelage (map 2D) et expliquent comment les implémenter avec l'API Canvas.
+
diff --git a/files/fr/games/tools/asm.js/index.html b/files/fr/games/tools/asm.js/index.html deleted file mode 100644 index 7dd8150bfb..0000000000 --- a/files/fr/games/tools/asm.js/index.html +++ /dev/null @@ -1,24 +0,0 @@ ---- -title: asm.js -slug: Games/Tools/asm.js -translation_of: Games/Tools/asm.js ---- -
{{GamesSidebar}}
{{IncludeSubnav("/fr/docs/Games")}}
- -

Asm.js Asm.js est une spécification définissant un sous-ensemble de JavaScript hautement optimisé. Cet article examine exactement ce qui est permis dans le sous-ensemble asm.js, quelles améliorations il confère, où et comment vous pouvez l'utiliser, et d'autres ressources et exemples.

- -

Qu'est ce que asm.js, exactement?

- -

 

- -

C'est un sous-ensemble très petit et strict de JavaScript qui ne permet que des choses comme `while`,` if`, les nombres, les fonctions nommées de haut niveau et d'autres constructions simples. Cela n'autorise pas les objets, les chaînes, les fermetures, et tout ce qui nécessite une allocation de tas. Le code Asm.js ressemble à C de plusieurs façons, mais il reste toujours un JavaScript valide dans tous les moteurs actuels. Il pousse les moteurs JS à optimiser ce type de code et donne aux compilateurs comme Emascript une définition claire de ce type de code à générer. Nous allons montrer à quoi ressemble le code asm.js et expliquer comment il aide et comment vous pouvez l'utiliser.

- -

Ce sous-ensemble de JavaScript est déjà très optimisé dans de nombreux moteurs JavaScript utilisant des techniques de compilation Just-In-Time (JIT). Cependant, en définissant une norme explicite, nous pouvons travailler sur l'optimisation de ce type de code encore plus et obtenir autant de performance que possible. Il est plus facile de collaborer sur plusieurs moteurs JS car il est facile de parler et de comparer. L'idée est que ce type de code devrait fonctionner très rapidement dans chaque moteur, et si ce n'est pas le cas, c'est un bug et il existe une spécification claire pour laquelle les moteurs devraient optimiser.

- -

Il permet également aux personnes d'écrire des compilateurs qui souhaitent générer un code performant sur le Web. Ils peuvent consulter la spécification asm.js et savoir qu'ils fonctionneront rapidement s'ils adhèrent aux modèles asm.js. Emscripten,  du C / C ++ au compilateur JavaScript, émet le code asm.js pour le faire fonctionner avec des performances proches natives sur plusieurs navigateurs.

- -

En outre, si un moteur choisit de reconnaître spécialement le code asm.js, il existe encore plus d'optimisations qui peuvent être réalisées. Firefox est le seul navigateur à le faire maintenant.

- -

Résumé du langage asm.js

- -

Asm.js est un langage de programmation intermédiaire. Asm.js a un taux de performance très prévisible car il est limité à un sous-ensemble de JavaScript extrêmement restreint qui ne fournit que des entiers, des flotteurs, des arithmétique, des appels de fonction et des accès à la pile strictement typés. Les caractéristiques de performance sont plus proches du code natif que celui du JavaScript standard. L'utilisation d'un sous-ensemble de JavaScript asm.js est déjà prise en charge par les principaux navigateurs Web. Comme asm.js s'exécute dans un navigateur, cela dépend fortement du navigateur et du matériel.

diff --git a/files/fr/games/tools/asm.js/index.md b/files/fr/games/tools/asm.js/index.md new file mode 100644 index 0000000000..7dd8150bfb --- /dev/null +++ b/files/fr/games/tools/asm.js/index.md @@ -0,0 +1,24 @@ +--- +title: asm.js +slug: Games/Tools/asm.js +translation_of: Games/Tools/asm.js +--- +
{{GamesSidebar}}
{{IncludeSubnav("/fr/docs/Games")}}
+ +

Asm.js Asm.js est une spécification définissant un sous-ensemble de JavaScript hautement optimisé. Cet article examine exactement ce qui est permis dans le sous-ensemble asm.js, quelles améliorations il confère, où et comment vous pouvez l'utiliser, et d'autres ressources et exemples.

+ +

Qu'est ce que asm.js, exactement?

+ +

 

+ +

C'est un sous-ensemble très petit et strict de JavaScript qui ne permet que des choses comme `while`,` if`, les nombres, les fonctions nommées de haut niveau et d'autres constructions simples. Cela n'autorise pas les objets, les chaînes, les fermetures, et tout ce qui nécessite une allocation de tas. Le code Asm.js ressemble à C de plusieurs façons, mais il reste toujours un JavaScript valide dans tous les moteurs actuels. Il pousse les moteurs JS à optimiser ce type de code et donne aux compilateurs comme Emascript une définition claire de ce type de code à générer. Nous allons montrer à quoi ressemble le code asm.js et expliquer comment il aide et comment vous pouvez l'utiliser.

+ +

Ce sous-ensemble de JavaScript est déjà très optimisé dans de nombreux moteurs JavaScript utilisant des techniques de compilation Just-In-Time (JIT). Cependant, en définissant une norme explicite, nous pouvons travailler sur l'optimisation de ce type de code encore plus et obtenir autant de performance que possible. Il est plus facile de collaborer sur plusieurs moteurs JS car il est facile de parler et de comparer. L'idée est que ce type de code devrait fonctionner très rapidement dans chaque moteur, et si ce n'est pas le cas, c'est un bug et il existe une spécification claire pour laquelle les moteurs devraient optimiser.

+ +

Il permet également aux personnes d'écrire des compilateurs qui souhaitent générer un code performant sur le Web. Ils peuvent consulter la spécification asm.js et savoir qu'ils fonctionneront rapidement s'ils adhèrent aux modèles asm.js. Emscripten,  du C / C ++ au compilateur JavaScript, émet le code asm.js pour le faire fonctionner avec des performances proches natives sur plusieurs navigateurs.

+ +

En outre, si un moteur choisit de reconnaître spécialement le code asm.js, il existe encore plus d'optimisations qui peuvent être réalisées. Firefox est le seul navigateur à le faire maintenant.

+ +

Résumé du langage asm.js

+ +

Asm.js est un langage de programmation intermédiaire. Asm.js a un taux de performance très prévisible car il est limité à un sous-ensemble de JavaScript extrêmement restreint qui ne fournit que des entiers, des flotteurs, des arithmétique, des appels de fonction et des accès à la pile strictement typés. Les caractéristiques de performance sont plus proches du code natif que celui du JavaScript standard. L'utilisation d'un sous-ensemble de JavaScript asm.js est déjà prise en charge par les principaux navigateurs Web. Comme asm.js s'exécute dans un navigateur, cela dépend fortement du navigateur et du matériel.

diff --git a/files/fr/games/tools/index.html b/files/fr/games/tools/index.html deleted file mode 100644 index b40a0a1cc3..0000000000 --- a/files/fr/games/tools/index.html +++ /dev/null @@ -1,39 +0,0 @@ ---- -title: Tools for game development -slug: Games/Tools -tags: - - Games - - Gecko - - Guide - - JavaScript - - TopicStub -translation_of: Games/Tools ---- -
{{GamesSidebar}}
- -
{{IncludeSubnav("/fr/docs/Games")}}
- -

Sur cette page, vous trouverez des liens vers nos articles sur les outils de développement de jeux, qui visent à terme à couvrir les frameworks, les compilateurs et les outils de  débogage.

- -
-
asm.js
-
asm.js est un sous-ensemble très limité du langage JavaScript, qui peut être grandement optimisé et exécuté dans un moteur de compilation à l'avance (AOT) pour des performances beaucoup plus rapides que vos performances JavaScript typiques. C'est, bien sûr, idéal pour les jeux.
-
Emscripten
-
-

Un compilateur LLVM vers JavaScript; avec Emscripten, vous pouvez compiler C ++ et d'autres langages qui peuvent compiler en bytecode LLVM en JavaScript haute performance. C'est un excellent outil pour porter des applications sur le Web! Il existe un tutoriel uitle Emscripten disponible sur le wiki. Notez que nous visons à couvrir Emscripten dans sa propre section de MDN.

-
-
Gecko profiler
-
L'extension de profileur Gecko vous permet de profiler votre code pour vous aider à déterminer où se trouvent vos problèmes de performances afin que vous puissiez faire fonctionner votre jeu à une vitesse maximale.
-
Moteurs de jeu et outils
-
Une liste de moteurs, modèles et technologies utiles aux développeurs de jeux.
-
Shumway
-
Shumway est un moteur de rendu pour Adobe Flash entièrement construit en JavaScript, WebGL, etc., comblant le fossé entre Flash et les standards Web. Cet article explique comment utiliser Shumway et comment apporter des correctifs et des bogues au projet.
-
Chaîne d'outils pour développer et déboguer des jeux
-
En quoi cela diffère-t-il du débogage normal des applications Web? Quels outils spécialisés sont disponibles? Une grande partie de cela va être couverte par Will dans les outils, mais ici, nous devrions fournir une sorte de tutoriel pratique sur la chaîne d'outils pour le débogage de jeux, avec des liens vers les éléments de Will : -
    -
  • Présentation des outils de base
    • -
  • Éditeur de Shader
    • -
  • Outils de performance (toujours en production, estimé début 2014)
    • -
-
-
diff --git a/files/fr/games/tools/index.md b/files/fr/games/tools/index.md new file mode 100644 index 0000000000..b40a0a1cc3 --- /dev/null +++ b/files/fr/games/tools/index.md @@ -0,0 +1,39 @@ +--- +title: Tools for game development +slug: Games/Tools +tags: + - Games + - Gecko + - Guide + - JavaScript + - TopicStub +translation_of: Games/Tools +--- +
{{GamesSidebar}}
+ +
{{IncludeSubnav("/fr/docs/Games")}}
+ +

Sur cette page, vous trouverez des liens vers nos articles sur les outils de développement de jeux, qui visent à terme à couvrir les frameworks, les compilateurs et les outils de  débogage.

+ +
+
asm.js
+
asm.js est un sous-ensemble très limité du langage JavaScript, qui peut être grandement optimisé et exécuté dans un moteur de compilation à l'avance (AOT) pour des performances beaucoup plus rapides que vos performances JavaScript typiques. C'est, bien sûr, idéal pour les jeux.
+
Emscripten
+
+

Un compilateur LLVM vers JavaScript; avec Emscripten, vous pouvez compiler C ++ et d'autres langages qui peuvent compiler en bytecode LLVM en JavaScript haute performance. C'est un excellent outil pour porter des applications sur le Web! Il existe un tutoriel uitle Emscripten disponible sur le wiki. Notez que nous visons à couvrir Emscripten dans sa propre section de MDN.

+
+
Gecko profiler
+
L'extension de profileur Gecko vous permet de profiler votre code pour vous aider à déterminer où se trouvent vos problèmes de performances afin que vous puissiez faire fonctionner votre jeu à une vitesse maximale.
+
Moteurs de jeu et outils
+
Une liste de moteurs, modèles et technologies utiles aux développeurs de jeux.
+
Shumway
+
Shumway est un moteur de rendu pour Adobe Flash entièrement construit en JavaScript, WebGL, etc., comblant le fossé entre Flash et les standards Web. Cet article explique comment utiliser Shumway et comment apporter des correctifs et des bogues au projet.
+
Chaîne d'outils pour développer et déboguer des jeux
+
En quoi cela diffère-t-il du débogage normal des applications Web? Quels outils spécialisés sont disponibles? Une grande partie de cela va être couverte par Will dans les outils, mais ici, nous devrions fournir une sorte de tutoriel pratique sur la chaîne d'outils pour le débogage de jeux, avec des liens vers les éléments de Will : +
    +
  • Présentation des outils de base
    • +
  • Éditeur de Shader
    • +
  • Outils de performance (toujours en production, estimé début 2014)
    • +
+
+
diff --git a/files/fr/games/tutorials/2d_breakout_game_phaser/index.html b/files/fr/games/tutorials/2d_breakout_game_phaser/index.html deleted file mode 100644 index 78680ebc8a..0000000000 --- a/files/fr/games/tutorials/2d_breakout_game_phaser/index.html +++ /dev/null @@ -1,62 +0,0 @@ ---- -title: 2D breakout game using Phaser -slug: Games/Tutorials/2D_breakout_game_Phaser -translation_of: Games/Tutorials/2D_breakout_game_Phaser -original_slug: Games/Workflows/2D_breakout_game_Phaser ---- -
{{GamesSidebar}}
- -
{{IncludeSubnav("/fr/docs/Games")}}
- -

{{Next("Games/Workflows/2D_Breakout_game_Phaser/Initialize_the_framework")}}

- -

Dans ce tutoriel étape par étape, nous créons un simple jeu mobile MDN Breakout écrit en JavaScript, en utilisant le framework Phaser.

- -

Chaque étape a des échantillons modifiables, disponibles pour jouer avec, de sorte que vous pouvez voir à quoi devraient ressembler les étapes intermédiaires. Vous apprendrez les bases de l'utilisation du framework Phaser pour implémenter les mécanismes fondamentaux du jeu comme le rendu et le mouvement des images, la détection des collisions, les mécanismes de contrôle, les fonctions d'aide spécifiques aux cadres, les animations et les interpolations, les états gagnants et perdants.

- - - -

Pour tirer le meilleur parti de cette série d'articles, vous devez déjà avoir des connaissances de base ou intermédiaires en JavaScript. Après avoir parcouru ce tutoriel, vous devriez être capable de construire vos propres jeux Web simples avec Phaser.

- -

- -

Détails de la leçon

- -

Toutes les leçons - et les différentes versions du jeu MDN Breakout game que nous construisons ensemble - sont disponibles sur GitHub :

- -
    -
  1. Initialiser le cadre
    2. -
  2. Mise à l'échelle
    3. -
  3. Charger les actifs et les imprimer à l'écran
    4. -
  4. Déplacer le ballon
    5. -
  5. Physique
    6. -
  6. Rebondir sur les murs
    7. -
  7. Pagaie et commandes du joueur
    8. -
  8. Fin de la partie
    9. -
  9. Construisez le champ de briques
    10. -
  10. Détection de collision
    11. -
  11. Le score
    12. -
  12. Gagnez la partie
    13. -
  13. Extra vies
    14. -
  14. Animations et préadolescents
    15. -
  15. Boutons
    16. -
  16. Mode de jeu aléatoire
    17. -
- -

Comme note sur les parcours d'apprentissage — en commençant par le JavaScript pur est le meilleur moyen d'acquérir une solide connaissance du développement de jeux en ligne. Si vous n'êtes pas déjà familier avec le développement de jeux en JavaScript pur, nous vous suggérons de travailler d'abord avec l'homologue de cette série, 2D breakout game using pure 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 basé sur ce tutoriel si vous voulez donner une conférence sur le développement d'un jeu avec Phaser.

-
- -

Prochaines étapes

- -

Ok, commençons ! Aller à la première partie de la série — Initialize the framework.

- -

{{Next("Games/Workflows/2D_Breakout_game_Phaser/Initialize_the_framework")}}

diff --git a/files/fr/games/tutorials/2d_breakout_game_phaser/index.md b/files/fr/games/tutorials/2d_breakout_game_phaser/index.md new file mode 100644 index 0000000000..78680ebc8a --- /dev/null +++ b/files/fr/games/tutorials/2d_breakout_game_phaser/index.md @@ -0,0 +1,62 @@ +--- +title: 2D breakout game using Phaser +slug: Games/Tutorials/2D_breakout_game_Phaser +translation_of: Games/Tutorials/2D_breakout_game_Phaser +original_slug: Games/Workflows/2D_breakout_game_Phaser +--- +
{{GamesSidebar}}
+ +
{{IncludeSubnav("/fr/docs/Games")}}
+ +

{{Next("Games/Workflows/2D_Breakout_game_Phaser/Initialize_the_framework")}}

+ +

Dans ce tutoriel étape par étape, nous créons un simple jeu mobile MDN Breakout écrit en JavaScript, en utilisant le framework Phaser.

+ +

Chaque étape a des échantillons modifiables, disponibles pour jouer avec, de sorte que vous pouvez voir à quoi devraient ressembler les étapes intermédiaires. Vous apprendrez les bases de l'utilisation du framework Phaser pour implémenter les mécanismes fondamentaux du jeu comme le rendu et le mouvement des images, la détection des collisions, les mécanismes de contrôle, les fonctions d'aide spécifiques aux cadres, les animations et les interpolations, les états gagnants et perdants.

+ + + +

Pour tirer le meilleur parti de cette série d'articles, vous devez déjà avoir des connaissances de base ou intermédiaires en JavaScript. Après avoir parcouru ce tutoriel, vous devriez être capable de construire vos propres jeux Web simples avec Phaser.

+ +

+ +

Détails de la leçon

+ +

Toutes les leçons - et les différentes versions du jeu MDN Breakout game que nous construisons ensemble - sont disponibles sur GitHub :

+ +
    +
  1. Initialiser le cadre
    2. +
  2. Mise à l'échelle
    3. +
  3. Charger les actifs et les imprimer à l'écran
    4. +
  4. Déplacer le ballon
    5. +
  5. Physique
    6. +
  6. Rebondir sur les murs
    7. +
  7. Pagaie et commandes du joueur
    8. +
  8. Fin de la partie
    9. +
  9. Construisez le champ de briques
    10. +
  10. Détection de collision
    11. +
  11. Le score
    12. +
  12. Gagnez la partie
    13. +
  13. Extra vies
    14. +
  14. Animations et préadolescents
    15. +
  15. Boutons
    16. +
  16. Mode de jeu aléatoire
    17. +
+ +

Comme note sur les parcours d'apprentissage — en commençant par le JavaScript pur est le meilleur moyen d'acquérir une solide connaissance du développement de jeux en ligne. Si vous n'êtes pas déjà familier avec le développement de jeux en JavaScript pur, nous vous suggérons de travailler d'abord avec l'homologue de cette série, 2D breakout game using pure 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 basé sur ce tutoriel si vous voulez donner une conférence sur le développement d'un jeu avec Phaser.

+
+ +

Prochaines étapes

+ +

Ok, commençons ! Aller à la première partie de la série — Initialize the framework.

+ +

{{Next("Games/Workflows/2D_Breakout_game_Phaser/Initialize_the_framework")}}

diff --git a/files/fr/games/tutorials/2d_breakout_game_pure_javascript/bounce_off_the_walls/index.html b/files/fr/games/tutorials/2d_breakout_game_pure_javascript/bounce_off_the_walls/index.html deleted file mode 100644 index ba76f92846..0000000000 --- a/files/fr/games/tutorials/2d_breakout_game_pure_javascript/bounce_off_the_walls/index.html +++ /dev/null @@ -1,109 +0,0 @@ ---- -title: Faire rebondir la balle sur les murs -slug: Games/Tutorials/2D_Breakout_game_pure_JavaScript/Bounce_off_the_walls -tags: - - Animation - - Canvas - - Débutant - - Exemple - - JavaScript - - Jeux - - Tuto - - Tutoriel - - detection - - graphique -translation_of: Games/Tutorials/2D_Breakout_game_pure_JavaScript/Bounce_off_the_walls -original_slug: >- - Games/Workflows/2D_Breakout_game_pure_JavaScript/Faire_rebondir_la_balle_sur_les_murs ---- -
{{GamesSidebar}}
- -
{{IncludeSubnav("/fr/docs/Games")}}
- -

{{PreviousNext("Games/Workflows/2D_Breakout_game_pure_JavaScript/Move_the_ball", "Games/Workflows/2D_Breakout_game_pure_JavaScript/Paddle_et_contr%C3%B4le_clavier")}}

- -

C'est la 3e étape sur 10 de ce tutoriel Gamedev Canvas. Vous pouvez retrouver le code source de cette leçon sur Gamedev-Canvas-workshop/lesson3.html.

- -

C'est agréable de voir notre balle bouger, mais elle disparaît rapidement de l'écran, ce qui limite le plaisir que nous pouvons avoir avec elle ! Pour y pallier, nous allons mettre en place une détection de collision très simple (qui sera expliquée plus tard en détail) pour faire rebondir la balle sur les quatre bords de la toile.

- -

Détection des collisions

- -

Pour détecter la collision, nous vérifierons si la balle touche (entre en collision avec) le mur et, si c'est le cas, nous modifierons la direction de son mouvement en conséquence.
-
- Pour faciliter les calculs, nous allons définir une variable appelée ballRadius qui contiendra le rayon du cercle dessiné et sera utilisée pour les calculs. Ajoutez cette variable à votre code, quelque part en dessous des déclarations de variables existantes :
-  

- -
var ballRadius = 10;
- -

Mettez maintenant à jour la ligne qui dessine la balle à l'intérieur de la fonction drawBall() :

- -
ctx.arc(x, y, ballRadius, 0, Math.PI*2);
- -

Rebondir en haut et en bas

- -

Il y a 4 murs en tout mais nous allons d'abord nous pencher sur le mur du haut. Nous devons, à chaque rafraichissement du canvas, regarder si la balle touche le bord du haut. Si c'est le cas, alors nous devons inverser la direction de la balle pour créer un effet de limite de zone de jeu. Il ne faut surtout pas oublier que le point d'origine est en haut à gauche ! Nous pouvons donc écrire :

- -
if(y + dy < 0) {
-    dy = -dy;
-}
- -

Si la valeur y de la position de la balle est inférieure à zéro, changez la direction du mouvement sur l'axe y en le rendant égal à son inverse. Si la balle se déplaçait vers le haut à une vitesse de 2 pixels par image, elle se déplacera maintenant "vers le haut" à une vitesse de -2 pixels, ce qui équivaut en fait à se déplacer vers le bas à une vitesse de 2 pixels par image.
-
- Le code ci-dessus traite du rebondissement de la balle sur le bord supérieur, alors traitons maintenant le bord inférieur :

- -
if(y + dy > canvas.height) {
-    dy = -dy;
-}
- -

Si la position en y de la balle est supérieure à  la hauteur du canvas (soit 480 pixels dans cette leçon) on inverse encore la vitesse de la balle.

- -

On peut rassembler les deux conditions en une grâce au "ou" qui s'écrit || en JavaScript :

- -
if(y + dy > canvas.height || y + dy < 0) {
-    dy = -dy;
-}
- -

Si une des deux conditions est vérifiée, alors la vitesse est inversée. Essayez de créer votre propre code pour la gauche et la droite avant de passer à la prochaine sous-partie. Vous verrez que le principe est le même.

- -

Rebondir à gauche et à droite

- -

Nous avons couvert les bords supérieur et inférieur, alors pensons à ceux de gauche et de droite. C'est très similaire en fait, il suffit de répéter les instructions pour x au lieu de y :

- -
if(x + dx > canvas.width || x + dx < 0) {
-    dx = -dx;
-}
-
-if(y + dy > canvas.height || y + dy < 0) {
-    dy = -dy;
-}
- -

À ce stade, vous devez insérer le bloc de code ci-dessus dans la fonction draw(), juste avant l'accolade de fermeture.

- -

La balle disparaît toujours!

- -

Testez votre code à ce stade, et vous serez impressionné — nous avons maintenant une balle qui rebondit sur les quatre bords de la toile ! Mais nous avons un autre problème — lorsque la balle frappe un mur, elle s'y enfonce légèrement avant de changer de direction :

- -

- -

C'est parce que nous calculons le point de collision entre le mur et le centre de la balle, alors que nous devrions le faire pour sa circonférence. La balle devrait rebondir juste après avoir touché le mur, et non pas lorsqu'elle est déjà à mi-chemin dans le mur, alors ajustons un peu nos déclarations pour inclure cela. Mettez à jour le dernier code que vous avez ajouté :

- -
if(x + dx > canvas.width-ballRadius || x + dx < ballRadius) {
-    dx = -dx;
-}
-if(y + dy > canvas.height-ballRadius || y + dy < ballRadius) {
-    dy = -dy;
-}
- -

Lorsque la distance entre le centre de la balle et le bord du mur est exactement la même que le rayon de la balle, cela change la direction du mouvement. Soustraire le rayon de la largeur d'un bord et l'ajouter à l'autre nous donne l'impression d'une détection de collision correcte — la balle rebondit sur les murs comme elle devrait le faire.

- -

Comparez votre code

- -

Vérifions encore une fois le code fini pour cette partie par rapport à ce que vous avez, et jouons une partie :

- -

{{JSFiddleEmbed("https://jsfiddle.net/end3r/redj37dc/","","395")}}

- -

Exercice: essayez de changer la couleur de la balle à chaque fois que celle-ci tape un mur.

- -

Dans le prochain chapitre

- -

Nous sommes maintenant arrivés au stade où notre balle se déplace et reste sur le plateau de jeu. Dans le quatrième chapitre, nous examinerons la mise en place d'une raquette contrôlable - voir Raquette et contrôle au clavier. {PreviousNext("Games/Workflows/2D_Breakout_game_pure_JavaScript/Move_the_ball", "Games/Workflows/2D_Breakout_game_pure_JavaScript/Paddle_et_contr%C3%B4le_clavier")}}

diff --git a/files/fr/games/tutorials/2d_breakout_game_pure_javascript/bounce_off_the_walls/index.md b/files/fr/games/tutorials/2d_breakout_game_pure_javascript/bounce_off_the_walls/index.md new file mode 100644 index 0000000000..ba76f92846 --- /dev/null +++ b/files/fr/games/tutorials/2d_breakout_game_pure_javascript/bounce_off_the_walls/index.md @@ -0,0 +1,109 @@ +--- +title: Faire rebondir la balle sur les murs +slug: Games/Tutorials/2D_Breakout_game_pure_JavaScript/Bounce_off_the_walls +tags: + - Animation + - Canvas + - Débutant + - Exemple + - JavaScript + - Jeux + - Tuto + - Tutoriel + - detection + - graphique +translation_of: Games/Tutorials/2D_Breakout_game_pure_JavaScript/Bounce_off_the_walls +original_slug: >- + Games/Workflows/2D_Breakout_game_pure_JavaScript/Faire_rebondir_la_balle_sur_les_murs +--- +
{{GamesSidebar}}
+ +
{{IncludeSubnav("/fr/docs/Games")}}
+ +

{{PreviousNext("Games/Workflows/2D_Breakout_game_pure_JavaScript/Move_the_ball", "Games/Workflows/2D_Breakout_game_pure_JavaScript/Paddle_et_contr%C3%B4le_clavier")}}

+ +

C'est la 3e étape sur 10 de ce tutoriel Gamedev Canvas. Vous pouvez retrouver le code source de cette leçon sur Gamedev-Canvas-workshop/lesson3.html.

+ +

C'est agréable de voir notre balle bouger, mais elle disparaît rapidement de l'écran, ce qui limite le plaisir que nous pouvons avoir avec elle ! Pour y pallier, nous allons mettre en place une détection de collision très simple (qui sera expliquée plus tard en détail) pour faire rebondir la balle sur les quatre bords de la toile.

+ +

Détection des collisions

+ +

Pour détecter la collision, nous vérifierons si la balle touche (entre en collision avec) le mur et, si c'est le cas, nous modifierons la direction de son mouvement en conséquence.
+
+ Pour faciliter les calculs, nous allons définir une variable appelée ballRadius qui contiendra le rayon du cercle dessiné et sera utilisée pour les calculs. Ajoutez cette variable à votre code, quelque part en dessous des déclarations de variables existantes :
+  

+ +
var ballRadius = 10;
+ +

Mettez maintenant à jour la ligne qui dessine la balle à l'intérieur de la fonction drawBall() :

+ +
ctx.arc(x, y, ballRadius, 0, Math.PI*2);
+ +

Rebondir en haut et en bas

+ +

Il y a 4 murs en tout mais nous allons d'abord nous pencher sur le mur du haut. Nous devons, à chaque rafraichissement du canvas, regarder si la balle touche le bord du haut. Si c'est le cas, alors nous devons inverser la direction de la balle pour créer un effet de limite de zone de jeu. Il ne faut surtout pas oublier que le point d'origine est en haut à gauche ! Nous pouvons donc écrire :

+ +
if(y + dy < 0) {
+    dy = -dy;
+}
+ +

Si la valeur y de la position de la balle est inférieure à zéro, changez la direction du mouvement sur l'axe y en le rendant égal à son inverse. Si la balle se déplaçait vers le haut à une vitesse de 2 pixels par image, elle se déplacera maintenant "vers le haut" à une vitesse de -2 pixels, ce qui équivaut en fait à se déplacer vers le bas à une vitesse de 2 pixels par image.
+
+ Le code ci-dessus traite du rebondissement de la balle sur le bord supérieur, alors traitons maintenant le bord inférieur :

+ +
if(y + dy > canvas.height) {
+    dy = -dy;
+}
+ +

Si la position en y de la balle est supérieure à  la hauteur du canvas (soit 480 pixels dans cette leçon) on inverse encore la vitesse de la balle.

+ +

On peut rassembler les deux conditions en une grâce au "ou" qui s'écrit || en JavaScript :

+ +
if(y + dy > canvas.height || y + dy < 0) {
+    dy = -dy;
+}
+ +

Si une des deux conditions est vérifiée, alors la vitesse est inversée. Essayez de créer votre propre code pour la gauche et la droite avant de passer à la prochaine sous-partie. Vous verrez que le principe est le même.

+ +

Rebondir à gauche et à droite

+ +

Nous avons couvert les bords supérieur et inférieur, alors pensons à ceux de gauche et de droite. C'est très similaire en fait, il suffit de répéter les instructions pour x au lieu de y :

+ +
if(x + dx > canvas.width || x + dx < 0) {
+    dx = -dx;
+}
+
+if(y + dy > canvas.height || y + dy < 0) {
+    dy = -dy;
+}
+ +

À ce stade, vous devez insérer le bloc de code ci-dessus dans la fonction draw(), juste avant l'accolade de fermeture.

+ +

La balle disparaît toujours!

+ +

Testez votre code à ce stade, et vous serez impressionné — nous avons maintenant une balle qui rebondit sur les quatre bords de la toile ! Mais nous avons un autre problème — lorsque la balle frappe un mur, elle s'y enfonce légèrement avant de changer de direction :

+ +

+ +

C'est parce que nous calculons le point de collision entre le mur et le centre de la balle, alors que nous devrions le faire pour sa circonférence. La balle devrait rebondir juste après avoir touché le mur, et non pas lorsqu'elle est déjà à mi-chemin dans le mur, alors ajustons un peu nos déclarations pour inclure cela. Mettez à jour le dernier code que vous avez ajouté :

+ +
if(x + dx > canvas.width-ballRadius || x + dx < ballRadius) {
+    dx = -dx;
+}
+if(y + dy > canvas.height-ballRadius || y + dy < ballRadius) {
+    dy = -dy;
+}
+ +

Lorsque la distance entre le centre de la balle et le bord du mur est exactement la même que le rayon de la balle, cela change la direction du mouvement. Soustraire le rayon de la largeur d'un bord et l'ajouter à l'autre nous donne l'impression d'une détection de collision correcte — la balle rebondit sur les murs comme elle devrait le faire.

+ +

Comparez votre code

+ +

Vérifions encore une fois le code fini pour cette partie par rapport à ce que vous avez, et jouons une partie :

+ +

{{JSFiddleEmbed("https://jsfiddle.net/end3r/redj37dc/","","395")}}

+ +

Exercice: essayez de changer la couleur de la balle à chaque fois que celle-ci tape un mur.

+ +

Dans le prochain chapitre

+ +

Nous sommes maintenant arrivés au stade où notre balle se déplace et reste sur le plateau de jeu. Dans le quatrième chapitre, nous examinerons la mise en place d'une raquette contrôlable - voir Raquette et contrôle au clavier. {PreviousNext("Games/Workflows/2D_Breakout_game_pure_JavaScript/Move_the_ball", "Games/Workflows/2D_Breakout_game_pure_JavaScript/Paddle_et_contr%C3%B4le_clavier")}}

diff --git a/files/fr/games/tutorials/2d_breakout_game_pure_javascript/build_the_brick_field/index.html b/files/fr/games/tutorials/2d_breakout_game_pure_javascript/build_the_brick_field/index.html deleted file mode 100644 index 7814fecefa..0000000000 --- a/files/fr/games/tutorials/2d_breakout_game_pure_javascript/build_the_brick_field/index.html +++ /dev/null @@ -1,115 +0,0 @@ ---- -title: Créer les briques -slug: Games/Tutorials/2D_Breakout_game_pure_JavaScript/Build_the_brick_field -tags: - - Canvas - - Casse-Brique - - Débutant - - JavaScript - - Jeu - - Tutoriel - - graphique -translation_of: Games/Tutorials/2D_Breakout_game_pure_JavaScript/Build_the_brick_field -original_slug: Games/Workflows/2D_Breakout_game_pure_JavaScript/Build_the_brick_field ---- -
{{GamesSidebar}}
- -
{{IncludeSubnav("/fr/docs/Games")}}
- -

{{PreviousNext("Games/Workflows/2D_Breakout_game_pure_JavaScript/Game_over", "Games/Workflows/2D_Breakout_game_pure_JavaScript/detection_colisions")}}

- -

Il s'agit de la 6ème étape sur 10 du Gamedev Canvas tutorial. Vous pouvez trouver le code source après avoir complété cette leçon à : Gamedev-Canvas-workshop/lesson6.html.

- -

Après avoir modifié la mécanique du Gameplay, nous sommes maintenant en mesure de perdre. Et ça c'est top car on a enfin l'impression de jouer à un vrai jeu. Cependant, ça devient vite ennuyeux si la balle ne fait que rebondir sur la raquette. Ce dont a vraiment besoin un jeu de casse-brique c'est des briques à détruire avec la balle. Et c'est ce que nous allons faire maintenant.

- -

Mettre en place les variables "Brique"

- -

Le principal objectif de cette leçon est d'avoir quelques lignes de code pour afficher les briques, en utilisant une boucle imbriquée qui va parcourir un tableau à deux dimensions. Cependant nous avons besoin de définir quelques variables pour stocker des informations décrivant les briques, telles que leur largeur, leur hauteur, les colonnes et les lignes, etc. Ajoutez les lignes suivantes dans votre code, sous les variables préalablement déclarées.

- -
var brickRowCount = 3;
-var brickColumnCount = 5;
-var brickWidth = 75;
-var brickHeight = 20;
-var brickPadding = 10;
-var brickOffsetTop = 30;
-var brickOffsetLeft = 30;
- -

Ici nous avons défini dans l'ordre le nombre de lignes et de colonnes de briques, mais également une hauteur, une largeur et un espacement (padding) entre les briques pour qu'elles ne se touchent pas entre elles et qu'elles ne commencent pas a être tracées sur le bord du canevas.

- -

Nous allons placer nos briques dans un tableau à deux dimensions. Il contiendra les colonnes de briques (c), qui à leur tour contiendront les lignes de briques (r) qui chacune contiendront un objet défini par une position x et y pour afficher chaque brique sur l'écran.
- Ajoutez le code suivant juste en-dessous des variables :

- -
var bricks = [];
-for(var c=0; c<brickColumnCount; c++) {
-    bricks[c] = [];
-    for(var r=0; r<brickRowCount; r++) {
-        bricks[c][r] = { x: 0, y: 0 };
-    }
-}
- -

Le code ci-dessus va parcourir les lignes et les colonnes et créer de nouvelles briques. REMARQUE : les objets briques seront également utilisés plus tard afin de détecter les collisions.

- -

Logique de dessin des briques

- -

Maintenant créons une fonction pour parcourir toutes les briques dans le tableau et les dessiner sur l'écran. Notre code pourrait ressembler à ça :

- -
function drawBricks() {
-    for(var c=0; c<brickColumnCount; c++) {
-        for(var r=0; r<brickRowCount; r++) {
-            bricks[c][r].x = 0;
-            bricks[c][r].y = 0;
-            ctx.beginPath();
-            ctx.rect(0, 0, brickWidth, brickHeight);
-            ctx.fillStyle = "#0095DD";
-            ctx.fill();
-            ctx.closePath();
-        }
-    }
-}
- -

Une nouvelle fois, nous parcourons les colonnes et les lignes pour attribuer une position x et y à chaque brique, et nous dessinons les briques — de taille : brickWidth x brickHeight  — sur le canevas, pour chaque itération de la boucle. Le problème est que nous les affichons toutes au même endroit, aux coordonnées (0,0). Ce dont nous avons besoin d'inclure ce sont quelques calculs qui vont définir la position x et y de chaque brique à chaque passage dans la boucle :

- -
var brickX = (c*(brickWidth+brickPadding))+brickOffsetLeft;
-var brickY = (r*(brickHeight+brickPadding))+brickOffsetTop;
- -

Chaque position brickX est déterminée par brickWidth + brickPadding, multiplié par le nombre de colonnes, c, plus brickOffsetLeft; la logique pour brickY est identique excepté qu'on utilise pour les ligne les valeurs r,brickHeight et brickOffsetTop. Maintenant chaque brique peut être dessinée à la bonne place - en lignes et colonnes, avec un espacement entre les briques, avec un espace par rapport à la gauche et au haut du contour du canvas.

- -

La version finale de la fonction drawBricks(), après avoir assigné les valeurs brickX et brickY comme coordonnées, plutot que (0,0) à chaque fois, va ressembler à ceci  — ajouter la fonction ci-dessous après drawPaddle() :

- -
function drawBricks() {
-    for(var c=0; c<brickColumnCount; c++) {
-        for(var r=0; r<brickRowCount; r++) {
-            var brickX = (c*(brickWidth+brickPadding))+brickOffsetLeft;
-            var brickY = (r*(brickHeight+brickPadding))+brickOffsetTop;
-            bricks[c][r].x = brickX;
-            bricks[c][r].y = brickY;
-            ctx.beginPath();
-            ctx.rect(brickX, brickY, brickWidth, brickHeight);
-            ctx.fillStyle = "#0095DD";
-            ctx.fill();
-            ctx.closePath();
-        }
-    }
-}
- -

Afficher les briques

- -

La dernière chose à faire dans cette leçon est d'ajouter un appel à drawBricks() quelque part dans la fonction draw(), préférablement au début, entre le nettoyage du canevas et le dessin de la balle. Ajoutez la ligne suivante juste en dessous de drawBall() :

- -
drawBricks();
-
- -

Comparez votre code

- -

À ce stade, le jeu a gagné un peu en intérêt :

- -

{{JSFiddleEmbed("https://jsfiddle.net/yumetodo/t1zqmzLp/","","395")}}

- -

Exercice : essayez de changer le nombre de briques dans une colonne ou dans une ligne ou bien leur position.

- -

Prochaines étapes

- -

Nous avons donc maintenant des briques !  
- Mais la balle n'a toujours aucune interaction avec elles. Nous allons donc changer ça dans le chapitre sept : Détection des collisions 

- -

{{PreviousNext("Games/Workflows/2D_Breakout_game_pure_JavaScript/Game_over", "Games/Workflows/2D_Breakout_game_pure_JavaScript/detection_colisions")}}

diff --git a/files/fr/games/tutorials/2d_breakout_game_pure_javascript/build_the_brick_field/index.md b/files/fr/games/tutorials/2d_breakout_game_pure_javascript/build_the_brick_field/index.md new file mode 100644 index 0000000000..7814fecefa --- /dev/null +++ b/files/fr/games/tutorials/2d_breakout_game_pure_javascript/build_the_brick_field/index.md @@ -0,0 +1,115 @@ +--- +title: Créer les briques +slug: Games/Tutorials/2D_Breakout_game_pure_JavaScript/Build_the_brick_field +tags: + - Canvas + - Casse-Brique + - Débutant + - JavaScript + - Jeu + - Tutoriel + - graphique +translation_of: Games/Tutorials/2D_Breakout_game_pure_JavaScript/Build_the_brick_field +original_slug: Games/Workflows/2D_Breakout_game_pure_JavaScript/Build_the_brick_field +--- +
{{GamesSidebar}}
+ +
{{IncludeSubnav("/fr/docs/Games")}}
+ +

{{PreviousNext("Games/Workflows/2D_Breakout_game_pure_JavaScript/Game_over", "Games/Workflows/2D_Breakout_game_pure_JavaScript/detection_colisions")}}

+ +

Il s'agit de la 6ème étape sur 10 du Gamedev Canvas tutorial. Vous pouvez trouver le code source après avoir complété cette leçon à : Gamedev-Canvas-workshop/lesson6.html.

+ +

Après avoir modifié la mécanique du Gameplay, nous sommes maintenant en mesure de perdre. Et ça c'est top car on a enfin l'impression de jouer à un vrai jeu. Cependant, ça devient vite ennuyeux si la balle ne fait que rebondir sur la raquette. Ce dont a vraiment besoin un jeu de casse-brique c'est des briques à détruire avec la balle. Et c'est ce que nous allons faire maintenant.

+ +

Mettre en place les variables "Brique"

+ +

Le principal objectif de cette leçon est d'avoir quelques lignes de code pour afficher les briques, en utilisant une boucle imbriquée qui va parcourir un tableau à deux dimensions. Cependant nous avons besoin de définir quelques variables pour stocker des informations décrivant les briques, telles que leur largeur, leur hauteur, les colonnes et les lignes, etc. Ajoutez les lignes suivantes dans votre code, sous les variables préalablement déclarées.

+ +
var brickRowCount = 3;
+var brickColumnCount = 5;
+var brickWidth = 75;
+var brickHeight = 20;
+var brickPadding = 10;
+var brickOffsetTop = 30;
+var brickOffsetLeft = 30;
+ +

Ici nous avons défini dans l'ordre le nombre de lignes et de colonnes de briques, mais également une hauteur, une largeur et un espacement (padding) entre les briques pour qu'elles ne se touchent pas entre elles et qu'elles ne commencent pas a être tracées sur le bord du canevas.

+ +

Nous allons placer nos briques dans un tableau à deux dimensions. Il contiendra les colonnes de briques (c), qui à leur tour contiendront les lignes de briques (r) qui chacune contiendront un objet défini par une position x et y pour afficher chaque brique sur l'écran.
+ Ajoutez le code suivant juste en-dessous des variables :

+ +
var bricks = [];
+for(var c=0; c<brickColumnCount; c++) {
+    bricks[c] = [];
+    for(var r=0; r<brickRowCount; r++) {
+        bricks[c][r] = { x: 0, y: 0 };
+    }
+}
+ +

Le code ci-dessus va parcourir les lignes et les colonnes et créer de nouvelles briques. REMARQUE : les objets briques seront également utilisés plus tard afin de détecter les collisions.

+ +

Logique de dessin des briques

+ +

Maintenant créons une fonction pour parcourir toutes les briques dans le tableau et les dessiner sur l'écran. Notre code pourrait ressembler à ça :

+ +
function drawBricks() {
+    for(var c=0; c<brickColumnCount; c++) {
+        for(var r=0; r<brickRowCount; r++) {
+            bricks[c][r].x = 0;
+            bricks[c][r].y = 0;
+            ctx.beginPath();
+            ctx.rect(0, 0, brickWidth, brickHeight);
+            ctx.fillStyle = "#0095DD";
+            ctx.fill();
+            ctx.closePath();
+        }
+    }
+}
+ +

Une nouvelle fois, nous parcourons les colonnes et les lignes pour attribuer une position x et y à chaque brique, et nous dessinons les briques — de taille : brickWidth x brickHeight  — sur le canevas, pour chaque itération de la boucle. Le problème est que nous les affichons toutes au même endroit, aux coordonnées (0,0). Ce dont nous avons besoin d'inclure ce sont quelques calculs qui vont définir la position x et y de chaque brique à chaque passage dans la boucle :

+ +
var brickX = (c*(brickWidth+brickPadding))+brickOffsetLeft;
+var brickY = (r*(brickHeight+brickPadding))+brickOffsetTop;
+ +

Chaque position brickX est déterminée par brickWidth + brickPadding, multiplié par le nombre de colonnes, c, plus brickOffsetLeft; la logique pour brickY est identique excepté qu'on utilise pour les ligne les valeurs r,brickHeight et brickOffsetTop. Maintenant chaque brique peut être dessinée à la bonne place - en lignes et colonnes, avec un espacement entre les briques, avec un espace par rapport à la gauche et au haut du contour du canvas.

+ +

La version finale de la fonction drawBricks(), après avoir assigné les valeurs brickX et brickY comme coordonnées, plutot que (0,0) à chaque fois, va ressembler à ceci  — ajouter la fonction ci-dessous après drawPaddle() :

+ +
function drawBricks() {
+    for(var c=0; c<brickColumnCount; c++) {
+        for(var r=0; r<brickRowCount; r++) {
+            var brickX = (c*(brickWidth+brickPadding))+brickOffsetLeft;
+            var brickY = (r*(brickHeight+brickPadding))+brickOffsetTop;
+            bricks[c][r].x = brickX;
+            bricks[c][r].y = brickY;
+            ctx.beginPath();
+            ctx.rect(brickX, brickY, brickWidth, brickHeight);
+            ctx.fillStyle = "#0095DD";
+            ctx.fill();
+            ctx.closePath();
+        }
+    }
+}
+ +

Afficher les briques

+ +

La dernière chose à faire dans cette leçon est d'ajouter un appel à drawBricks() quelque part dans la fonction draw(), préférablement au début, entre le nettoyage du canevas et le dessin de la balle. Ajoutez la ligne suivante juste en dessous de drawBall() :

+ +
drawBricks();
+
+ +

Comparez votre code

+ +

À ce stade, le jeu a gagné un peu en intérêt :

+ +

{{JSFiddleEmbed("https://jsfiddle.net/yumetodo/t1zqmzLp/","","395")}}

+ +

Exercice : essayez de changer le nombre de briques dans une colonne ou dans une ligne ou bien leur position.

+ +

Prochaines étapes

+ +

Nous avons donc maintenant des briques !  
+ Mais la balle n'a toujours aucune interaction avec elles. Nous allons donc changer ça dans le chapitre sept : Détection des collisions 

+ +

{{PreviousNext("Games/Workflows/2D_Breakout_game_pure_JavaScript/Game_over", "Games/Workflows/2D_Breakout_game_pure_JavaScript/detection_colisions")}}

diff --git a/files/fr/games/tutorials/2d_breakout_game_pure_javascript/collision_detection/index.html b/files/fr/games/tutorials/2d_breakout_game_pure_javascript/collision_detection/index.html deleted file mode 100644 index f5f8302b6a..0000000000 --- a/files/fr/games/tutorials/2d_breakout_game_pure_javascript/collision_detection/index.html +++ /dev/null @@ -1,133 +0,0 @@ ---- -title: Détection de collisions -slug: Games/Tutorials/2D_Breakout_game_pure_JavaScript/Collision_detection -tags: - - Canvas - - JavaScript - - Jeu - - collision - - detection - - totoriel -translation_of: Games/Tutorials/2D_Breakout_game_pure_JavaScript/Collision_detection -original_slug: Games/Workflows/2D_Breakout_game_pure_JavaScript/detection_colisions ---- -
{{GamesSidebar}}
- -
{{IncludeSubnav("/fr/docs/Games")}}
- -

{{PreviousNext("Games/Workflows/2D_Breakout_game_pure_JavaScript/Build_the_brick_field", "Games/Workflows/2D_Breakout_game_pure_JavaScript/Track_the_score_and_win")}}

- -

Il s'agit de la 7ème étape sur 10 du Gamedev Canvas tutorial. Vous pouvez trouver le code source tel qu'il devrait être après avoir complété cette leçon à : Gamedev-Canvas-workshop/lesson7.html.

- -

Les briques apparaissent à l'écran, mais le jeu n'est toujours pas intéressant car la balle les traverse. Nous devons ajouter une détection des collisions afin qu’elle puisse rebondir sur les briques et les casser.

- -

C'est notre décision, bien sûr, de mettre ça en œuvre, mais il peut être difficile de calculer si la balle touche le rectangle ou non, car il n'y a pas de fonction d'aide dans Canvas pour cela. Dans l'intérêt de ce tutoriel, nous le ferons de la manière la plus simple possible. Nous vérifierons si le centre de la balle entre en collision avec l'une des briques données. Cela ne donnera pas toujours un résultat parfait, et il existe des moyens beaucoup plus sophistiqués de détecter des collisions, mais cela fonctionnera assez bien pour vous apprendre les concepts de base.

- -

Une fonction de détection de collision

- -


- Pour commencer, nous voulons créer une fonction de détection de collision qui va parcourir toutes les briques et comparer la position de chaque brique avec les coordonnées de la balle lorsque chaque image est dessinée. Pour une meilleure lisibilité du code, nous allons définir la variable b pour stocker l’objet brique dans la boucle de la détection de collision:

- -
function collisionDetection() {
-    for(var c=0; c<brickColumnCount; c++) {
-        for(var r=0; r<brickRowCount; r++) {
-            var b = bricks[c][r];
-            // calculs
-        }
-    }
-}
- -

Si le centre de la balle se trouve à l'intérieur des coordonnées d'une de nos briques, nous changerons la direction de la balle. Pour que le centre de la balle soit à l'intérieur de la brique, les quatre affirmations suivantes doivent être vraies :

- - - -

Écrivons cela sous forme de code:

- -
function collisionDetection() {
-    for(var c=0; c<brickColumnCount; c++) {
-        for(var r=0; r<brickRowCount; r++) {
-            var b = bricks[c][r];
-            if(x > b.x && x < b.x+brickWidth && y > b.y && y < b.y+brickHeight) {
-                dy = -dy;
-            }
-        }
-    }
-}
- -

Ajoutez le bloc ci-dessus à votre code, sous la fonction keyUpHandler() .

- -

Faire disparaître les briques après qu'elles aient été touchées

- -

Le code ci-dessus fonctionnera comme vous le souhaitez et la balle changera de direction. Le problème est que les briques restent là où elles sont. Nous devons trouver un moyen de nous débarrasser de celles que nous avons déjà touchées avec la balle. Nous pouvons le faire en ajoutant un paramètre supplémentaire pour indiquer si nous voulons ou non afficher chaque brique à l’écran. Dans la partie du code où nous initialisons les briques, ajoutons une propriété status à chaque brique. Mettez à jour la partie suivante du code comme indiqué par la ligne en évidence:

- -
var bricks = [];
-for(var c=0; c<brickColumnCount; c++) {
-    bricks[c] = [];
-    for(var r=0; r<brickRowCount; r++) {
-        bricks[c][r] = { x: 0, y: 0, status: 1 };
-    }
-}
- -

Nous vérifierons ensuite la valeur de la propriété status de chaque brique dans la fonction drawBricks() avant de la dessiner. Si status vaut 1, dessinez-la, mais s'il vaut 0, la balle a été touchée et nous ne voulons pas la voir sur l'écran. Mettez à jour votre fonction drawBricks() comme suit:

- -
function drawBricks() {
-    for(var c=0; c<brickColumnCount; c++) {
-        for(var r=0; r<brickRowCount; r++) {
-            if(bricks[c][r].status == 1) {
-                var brickX = (c*(brickWidth+brickPadding))+brickOffsetLeft;
-                var brickY = (r*(brickHeight+brickPadding))+brickOffsetTop;
-                bricks[c][r].x = brickX;
-                bricks[c][r].y = brickY;
-                ctx.beginPath();
-                ctx.rect(brickX, brickY, brickWidth, brickHeight);
-                ctx.fillStyle = "#0095DD";
-                ctx.fill();
-                ctx.closePath();
-            }
-        }
-    }
-}
- -

Suivi et mise à jour de l'état dans la fonction de détection de collision

- -

Nous devons maintenant impliquer la propriété de status de brique dans la fonction collisionDetection(): si la brique est active (son statut est 1), nous vérifierons si une collision a lieu ; Si une collision se produit, nous allons définir l'état de la brique donnée sur 0 afin qu'elle ne soit pas affichée à l'écran. Mettez à jour votre fonction collisionDetection() comme indiqué ci-dessous:

- -
function collisionDetection() {
-    for(var c=0; c<brickColumnCount; c++) {
-        for(var r=0; r<brickRowCount; r++) {
-            var b = bricks[c][r];
-            if(b.status == 1) {
-                if(x > b.x && x < b.x+brickWidth && y > b.y && y < b.y+brickHeight) {
-                    dy = -dy;
-                    b.status = 0;
-                }
-            }
-        }
-    }
-}
- -

Activer notre détection de collision

- -

La dernière chose à faire est d’ajouter un appel à la fonction collisionDetection () à notre fonction draw() principale. Ajoutez la ligne suivante à la fonction draw (), juste en dessous de l'appel drawPaddle():

- -
collisionDetection();
-
- -

Comparez votre code

- -

La détection de collision de la balle est maintenant vérifiée sur chaque image, avec chaque brique. Maintenant, nous pouvons détruire des briques ! : -

- -

{{JSFiddleEmbed("https://jsfiddle.net/yumetodo/mkwtxgc3/242/","","395")}}

- -

Exercice: changez la couleur de la balle lorsqu'elle frappe une brique.

- -

Prochaine étape

- -

Nous ne sommes plus très loin de la fin ;  poursuivons ! Dans le huitième chapitre, nous verrons comment Track the score and win.

- -

{{PreviousNext("Games/Workflows/2D_Breakout_game_pure_JavaScript/Build_the_brick_field", "Games/Workflows/2D_Breakout_game_pure_JavaScript/Track_the_score_and_win")}}

diff --git a/files/fr/games/tutorials/2d_breakout_game_pure_javascript/collision_detection/index.md b/files/fr/games/tutorials/2d_breakout_game_pure_javascript/collision_detection/index.md new file mode 100644 index 0000000000..f5f8302b6a --- /dev/null +++ b/files/fr/games/tutorials/2d_breakout_game_pure_javascript/collision_detection/index.md @@ -0,0 +1,133 @@ +--- +title: Détection de collisions +slug: Games/Tutorials/2D_Breakout_game_pure_JavaScript/Collision_detection +tags: + - Canvas + - JavaScript + - Jeu + - collision + - detection + - totoriel +translation_of: Games/Tutorials/2D_Breakout_game_pure_JavaScript/Collision_detection +original_slug: Games/Workflows/2D_Breakout_game_pure_JavaScript/detection_colisions +--- +
{{GamesSidebar}}
+ +
{{IncludeSubnav("/fr/docs/Games")}}
+ +

{{PreviousNext("Games/Workflows/2D_Breakout_game_pure_JavaScript/Build_the_brick_field", "Games/Workflows/2D_Breakout_game_pure_JavaScript/Track_the_score_and_win")}}

+ +

Il s'agit de la 7ème étape sur 10 du Gamedev Canvas tutorial. Vous pouvez trouver le code source tel qu'il devrait être après avoir complété cette leçon à : Gamedev-Canvas-workshop/lesson7.html.

+ +

Les briques apparaissent à l'écran, mais le jeu n'est toujours pas intéressant car la balle les traverse. Nous devons ajouter une détection des collisions afin qu’elle puisse rebondir sur les briques et les casser.

+ +

C'est notre décision, bien sûr, de mettre ça en œuvre, mais il peut être difficile de calculer si la balle touche le rectangle ou non, car il n'y a pas de fonction d'aide dans Canvas pour cela. Dans l'intérêt de ce tutoriel, nous le ferons de la manière la plus simple possible. Nous vérifierons si le centre de la balle entre en collision avec l'une des briques données. Cela ne donnera pas toujours un résultat parfait, et il existe des moyens beaucoup plus sophistiqués de détecter des collisions, mais cela fonctionnera assez bien pour vous apprendre les concepts de base.

+ +

Une fonction de détection de collision

+ +


+ Pour commencer, nous voulons créer une fonction de détection de collision qui va parcourir toutes les briques et comparer la position de chaque brique avec les coordonnées de la balle lorsque chaque image est dessinée. Pour une meilleure lisibilité du code, nous allons définir la variable b pour stocker l’objet brique dans la boucle de la détection de collision:

+ +
function collisionDetection() {
+    for(var c=0; c<brickColumnCount; c++) {
+        for(var r=0; r<brickRowCount; r++) {
+            var b = bricks[c][r];
+            // calculs
+        }
+    }
+}
+ +

Si le centre de la balle se trouve à l'intérieur des coordonnées d'une de nos briques, nous changerons la direction de la balle. Pour que le centre de la balle soit à l'intérieur de la brique, les quatre affirmations suivantes doivent être vraies :

+ + + +

Écrivons cela sous forme de code:

+ +
function collisionDetection() {
+    for(var c=0; c<brickColumnCount; c++) {
+        for(var r=0; r<brickRowCount; r++) {
+            var b = bricks[c][r];
+            if(x > b.x && x < b.x+brickWidth && y > b.y && y < b.y+brickHeight) {
+                dy = -dy;
+            }
+        }
+    }
+}
+ +

Ajoutez le bloc ci-dessus à votre code, sous la fonction keyUpHandler() .

+ +

Faire disparaître les briques après qu'elles aient été touchées

+ +

Le code ci-dessus fonctionnera comme vous le souhaitez et la balle changera de direction. Le problème est que les briques restent là où elles sont. Nous devons trouver un moyen de nous débarrasser de celles que nous avons déjà touchées avec la balle. Nous pouvons le faire en ajoutant un paramètre supplémentaire pour indiquer si nous voulons ou non afficher chaque brique à l’écran. Dans la partie du code où nous initialisons les briques, ajoutons une propriété status à chaque brique. Mettez à jour la partie suivante du code comme indiqué par la ligne en évidence:

+ +
var bricks = [];
+for(var c=0; c<brickColumnCount; c++) {
+    bricks[c] = [];
+    for(var r=0; r<brickRowCount; r++) {
+        bricks[c][r] = { x: 0, y: 0, status: 1 };
+    }
+}
+ +

Nous vérifierons ensuite la valeur de la propriété status de chaque brique dans la fonction drawBricks() avant de la dessiner. Si status vaut 1, dessinez-la, mais s'il vaut 0, la balle a été touchée et nous ne voulons pas la voir sur l'écran. Mettez à jour votre fonction drawBricks() comme suit:

+ +
function drawBricks() {
+    for(var c=0; c<brickColumnCount; c++) {
+        for(var r=0; r<brickRowCount; r++) {
+            if(bricks[c][r].status == 1) {
+                var brickX = (c*(brickWidth+brickPadding))+brickOffsetLeft;
+                var brickY = (r*(brickHeight+brickPadding))+brickOffsetTop;
+                bricks[c][r].x = brickX;
+                bricks[c][r].y = brickY;
+                ctx.beginPath();
+                ctx.rect(brickX, brickY, brickWidth, brickHeight);
+                ctx.fillStyle = "#0095DD";
+                ctx.fill();
+                ctx.closePath();
+            }
+        }
+    }
+}
+ +

Suivi et mise à jour de l'état dans la fonction de détection de collision

+ +

Nous devons maintenant impliquer la propriété de status de brique dans la fonction collisionDetection(): si la brique est active (son statut est 1), nous vérifierons si une collision a lieu ; Si une collision se produit, nous allons définir l'état de la brique donnée sur 0 afin qu'elle ne soit pas affichée à l'écran. Mettez à jour votre fonction collisionDetection() comme indiqué ci-dessous:

+ +
function collisionDetection() {
+    for(var c=0; c<brickColumnCount; c++) {
+        for(var r=0; r<brickRowCount; r++) {
+            var b = bricks[c][r];
+            if(b.status == 1) {
+                if(x > b.x && x < b.x+brickWidth && y > b.y && y < b.y+brickHeight) {
+                    dy = -dy;
+                    b.status = 0;
+                }
+            }
+        }
+    }
+}
+ +

Activer notre détection de collision

+ +

La dernière chose à faire est d’ajouter un appel à la fonction collisionDetection () à notre fonction draw() principale. Ajoutez la ligne suivante à la fonction draw (), juste en dessous de l'appel drawPaddle():

+ +
collisionDetection();
+
+ +

Comparez votre code

+ +

La détection de collision de la balle est maintenant vérifiée sur chaque image, avec chaque brique. Maintenant, nous pouvons détruire des briques ! : -

+ +

{{JSFiddleEmbed("https://jsfiddle.net/yumetodo/mkwtxgc3/242/","","395")}}

+ +

Exercice: changez la couleur de la balle lorsqu'elle frappe une brique.

+ +

Prochaine étape

+ +

Nous ne sommes plus très loin de la fin ;  poursuivons ! Dans le huitième chapitre, nous verrons comment Track the score and win.

+ +

{{PreviousNext("Games/Workflows/2D_Breakout_game_pure_JavaScript/Build_the_brick_field", "Games/Workflows/2D_Breakout_game_pure_JavaScript/Track_the_score_and_win")}}

diff --git a/files/fr/games/tutorials/2d_breakout_game_pure_javascript/create_the_canvas_and_draw_on_it/index.html b/files/fr/games/tutorials/2d_breakout_game_pure_javascript/create_the_canvas_and_draw_on_it/index.html deleted file mode 100644 index ff39e2bf9d..0000000000 --- a/files/fr/games/tutorials/2d_breakout_game_pure_javascript/create_the_canvas_and_draw_on_it/index.html +++ /dev/null @@ -1,115 +0,0 @@ ---- -title: Créer l'élément Canvas et l'afficher -slug: >- - Games/Tutorials/2D_Breakout_game_pure_JavaScript/Create_the_Canvas_and_draw_on_it -tags: - - 2D - - Canvas - - Débutant - - HTML - - JavaScript - - Jeux - - Tutoriel -translation_of: >- - Games/Tutorials/2D_Breakout_game_pure_JavaScript/Create_the_Canvas_and_draw_on_it -original_slug: >- - Games/Workflows/2D_Breakout_game_pure_JavaScript/creer_element_canvas_et_afficher ---- -
{{GamesSidebar}}
- -
{{IncludeSubnav("/fr/docs/Jeux")}}
- -

{{PreviousNext("Games/Workflows/2D_Breakout_game_pure_JavaScript", "Games/Workflows/2D_Breakout_game_pure_JavaScript/Move_the_ball")}}

- -

C'est la 1re étape sur 10 de ce tutoriel Gamedev Canvas. Vous pouvez retrouver le code source de cette leçon sur Gamedev-Canvas-workshop/lesson1.html.

- -

Avant d'écrire les fonctionnalités de notre jeu, nous devons créer une structure où le jeu sera rendu. C'est possible en utilisant HTML et l'élément {{htmlelement("canvas")}}.

- -

La page HTML du jeu

- -

La structure de la page HTML est vraiment simple, car tout le jeu sera contenu dans l'élément {{htmlelement("canvas")}}. Avec votre éditeur de texte préféré, créez un nouveau fichier HTML, sauvegardez-le sous le nom index.html, et ajoutez-y le code suivant :

- -
<!DOCTYPE html>
-<html>
-<head>
-    <meta charset="utf-8" />
-    <title>Gamedev Canvas Workshop</title>
-    <style>
-    	* { padding: 0; margin: 0; }
-    	canvas { background: #eee; display: block; margin: 0 auto; }
-    </style>
-</head>
-<body>
-
-<canvas id="myCanvas" width="480" height="320"></canvas>
-
-<script>
-	// JavaScript code goes here
-</script>
-
-</body>
-</html>
- -

Dans l'en-tête, nous avons défini l'encodage des caractères (charset), le titre  {{htmlelement("title")}} et quelques règles CSS très simples. Le corps contient les éléments {{htmlelement("canvas")}} et {{htmlelement("script")}}. L'élément {{htmlelement("canvas")}} contiendra le rendu du jeu et l'élément {{htmlelement("script")}} l'emplacement du code JavaScript pour contrôler le jeu. L'élément {{htmlelement("canvas")}} a un identifiant nommé myCanvas qui permettra de le retrouver facilement en JavaScript, et possède des dimensions de 480 pixels de longueur et 320 pixels de hauteur. Tout le code JavaScript que nous allons écrire dans ce tutoriel sera contenu entre la balise ouvrante <script> et la balise fermante </script>.

- -

Les bases de Canvas

- -

Pour utiliser l'élément {{htmlelement("canvas")}}, pour le rendu graphique de notre jeu, nous devons d'abord en donner la référence à JavaScript. Ajoutez le code après la balise ouvrante <script>.

- -
var canvas = document.getElementById("myCanvas");
-var ctx = canvas.getContext("2d");
- -

Ici nous avons enregistré la référence à l'élément {{htmlelement("canvas")}} dans une variable nommée canvas. Ensuite, nous créons la variable ctx pour stocker le contexte de rendu 2D — l'outil réel que nous pouvons utiliser pour peindre sur Canvas.

- -

Voyons un exemple de code qui imprime un carré rouge sur le canevas. Ajoutez ceci en dessous de vos lignes précédentes de JavaScript, puis chargez votre index.html dans un navigateur pour l'essayer.

- -
ctx.beginPath();
-ctx.rect(20, 40, 50, 50);
-ctx.fillStyle = "#FF0000";
-ctx.fill();
-ctx.closePath();
- -

Toutes les instructions sont entre les méthodes  {{domxref("CanvasRenderingContext2D.beginPath()","beginPath()")}} et {{domxref("CanvasRenderingContext2D.closePath()","closePath()")}} . Nous définissons un rectangle en utilisant {{domxref("CanvasRenderingContext2D.rect()","rect()")}} : les deux premières valeurs spécifient les coordonnées du coin supérieur gauche du rectangle tandis que les deux suivantes spécifient la largeur et la hauteur du rectangle. Dans notre cas, le rectangle est peint à 20 pixels du côté gauche de l'écran et à 40 pixels du haut, et a une largeur de 50 pixels et une hauteur de 50 pixels, ce qui en fait un carré parfait. La propriété {{domxref("CanvasRenderingContext2D.fillStyle","fillStyle")}} stocke une couleur qui sera utilisée par la méthode {{domxref("CanvasRenderingContext2D.fill()","fill()")}} pour peindre le carré en rouge.

- -

Nous ne sommes pas limités aux rectangles, voici un code pour imprimer un cercle vert. Essayez d'ajouter ceci au bas de votre JavaScript, puis sauvegardez et rafraîchissez :

- -
ctx.beginPath();
-ctx.arc(240, 160, 20, 0, Math.PI*2, false);
-ctx.fillStyle = "green";
-ctx.fill();
-ctx.closePath();
- -

Comme nous pouvons le voir, nous utilisons à nouveau les méthodes {{domxref("CanvasRenderingContext2D.beginPath()","beginPath()")}} et {{domxref("CanvasRenderingContext2D.closePath()","closePath()")}} . Entre elles, la partie la plus importante du code ci-dessus est la méthode {{domxref("CanvasRenderingContext2D.arc()","arc()")}} . Elle comporte six paramètres :

- - - -

La propriété {{domxref("CanvasRenderingContext2D.fillStyle","fillStyle")}} semble différente par rapport à l'exemple précédent. C'est parce que, tout comme avec CSS, la couleur peut être spécifiée sous la forme d'une valeur hexadécimale, d'un mot-clé, de la fonction rgba () (RVBA) ou de toute autre méthode disponible pour les couleurs.

- -

Au lieu d'utiliser {{domxref("CanvasRenderingContext2D.fillStyle","fillStyle")}} et de remplir les formes avec des couleurs, nous pouvons utiliser {{domxref("CanvasRenderingContext2D.stroke()","stroke()")}} pour ne colorer que le contour exterieur. Essayez d'ajouter ce code à votre JavaScript aussi :

- -
ctx.beginPath();
-ctx.rect(160, 10, 100, 40);
-ctx.strokeStyle = "rgba(0, 0, 255, 0.5)";
-ctx.stroke();
-ctx.closePath();
- -

Le code ci-dessus affiche un rectangle vide avec des traits bleus. Grâce au canal alpha de la fonction rgba (), la couleur bleue est semi transparente.

- -

Comparez votre code

- -

Voici tout le code source de cette première leçon, fonctionnant avec JSFiddle :

- -

{{JSFiddleEmbed("https://jsfiddle.net/end3r/x62h15e2/","","370")}}

- -

Exercice : essayez de changer la taille et la couleur des formes géométriques.

- -

Prochaines étapes

- -

Maintenant, nous avons mis en place le code HTML de base et avons appris un peu sur Canvas, passons au deuxième chapitre et étudions comment Déplacer une balle sur notre jeu.

- -

{{PreviousNext("Games/Workflows/2D_Breakout_game_pure_JavaScript", "Games/Workflows/2D_Breakout_game_pure_JavaScript/Move_the_ball")}}

diff --git a/files/fr/games/tutorials/2d_breakout_game_pure_javascript/create_the_canvas_and_draw_on_it/index.md b/files/fr/games/tutorials/2d_breakout_game_pure_javascript/create_the_canvas_and_draw_on_it/index.md new file mode 100644 index 0000000000..ff39e2bf9d --- /dev/null +++ b/files/fr/games/tutorials/2d_breakout_game_pure_javascript/create_the_canvas_and_draw_on_it/index.md @@ -0,0 +1,115 @@ +--- +title: Créer l'élément Canvas et l'afficher +slug: >- + Games/Tutorials/2D_Breakout_game_pure_JavaScript/Create_the_Canvas_and_draw_on_it +tags: + - 2D + - Canvas + - Débutant + - HTML + - JavaScript + - Jeux + - Tutoriel +translation_of: >- + Games/Tutorials/2D_Breakout_game_pure_JavaScript/Create_the_Canvas_and_draw_on_it +original_slug: >- + Games/Workflows/2D_Breakout_game_pure_JavaScript/creer_element_canvas_et_afficher +--- +
{{GamesSidebar}}
+ +
{{IncludeSubnav("/fr/docs/Jeux")}}
+ +

{{PreviousNext("Games/Workflows/2D_Breakout_game_pure_JavaScript", "Games/Workflows/2D_Breakout_game_pure_JavaScript/Move_the_ball")}}

+ +

C'est la 1re étape sur 10 de ce tutoriel Gamedev Canvas. Vous pouvez retrouver le code source de cette leçon sur Gamedev-Canvas-workshop/lesson1.html.

+ +

Avant d'écrire les fonctionnalités de notre jeu, nous devons créer une structure où le jeu sera rendu. C'est possible en utilisant HTML et l'élément {{htmlelement("canvas")}}.

+ +

La page HTML du jeu

+ +

La structure de la page HTML est vraiment simple, car tout le jeu sera contenu dans l'élément {{htmlelement("canvas")}}. Avec votre éditeur de texte préféré, créez un nouveau fichier HTML, sauvegardez-le sous le nom index.html, et ajoutez-y le code suivant :

+ +
<!DOCTYPE html>
+<html>
+<head>
+    <meta charset="utf-8" />
+    <title>Gamedev Canvas Workshop</title>
+    <style>
+    	* { padding: 0; margin: 0; }
+    	canvas { background: #eee; display: block; margin: 0 auto; }
+    </style>
+</head>
+<body>
+
+<canvas id="myCanvas" width="480" height="320"></canvas>
+
+<script>
+	// JavaScript code goes here
+</script>
+
+</body>
+</html>
+ +

Dans l'en-tête, nous avons défini l'encodage des caractères (charset), le titre  {{htmlelement("title")}} et quelques règles CSS très simples. Le corps contient les éléments {{htmlelement("canvas")}} et {{htmlelement("script")}}. L'élément {{htmlelement("canvas")}} contiendra le rendu du jeu et l'élément {{htmlelement("script")}} l'emplacement du code JavaScript pour contrôler le jeu. L'élément {{htmlelement("canvas")}} a un identifiant nommé myCanvas qui permettra de le retrouver facilement en JavaScript, et possède des dimensions de 480 pixels de longueur et 320 pixels de hauteur. Tout le code JavaScript que nous allons écrire dans ce tutoriel sera contenu entre la balise ouvrante <script> et la balise fermante </script>.

+ +

Les bases de Canvas

+ +

Pour utiliser l'élément {{htmlelement("canvas")}}, pour le rendu graphique de notre jeu, nous devons d'abord en donner la référence à JavaScript. Ajoutez le code après la balise ouvrante <script>.

+ +
var canvas = document.getElementById("myCanvas");
+var ctx = canvas.getContext("2d");
+ +

Ici nous avons enregistré la référence à l'élément {{htmlelement("canvas")}} dans une variable nommée canvas. Ensuite, nous créons la variable ctx pour stocker le contexte de rendu 2D — l'outil réel que nous pouvons utiliser pour peindre sur Canvas.

+ +

Voyons un exemple de code qui imprime un carré rouge sur le canevas. Ajoutez ceci en dessous de vos lignes précédentes de JavaScript, puis chargez votre index.html dans un navigateur pour l'essayer.

+ +
ctx.beginPath();
+ctx.rect(20, 40, 50, 50);
+ctx.fillStyle = "#FF0000";
+ctx.fill();
+ctx.closePath();
+ +

Toutes les instructions sont entre les méthodes  {{domxref("CanvasRenderingContext2D.beginPath()","beginPath()")}} et {{domxref("CanvasRenderingContext2D.closePath()","closePath()")}} . Nous définissons un rectangle en utilisant {{domxref("CanvasRenderingContext2D.rect()","rect()")}} : les deux premières valeurs spécifient les coordonnées du coin supérieur gauche du rectangle tandis que les deux suivantes spécifient la largeur et la hauteur du rectangle. Dans notre cas, le rectangle est peint à 20 pixels du côté gauche de l'écran et à 40 pixels du haut, et a une largeur de 50 pixels et une hauteur de 50 pixels, ce qui en fait un carré parfait. La propriété {{domxref("CanvasRenderingContext2D.fillStyle","fillStyle")}} stocke une couleur qui sera utilisée par la méthode {{domxref("CanvasRenderingContext2D.fill()","fill()")}} pour peindre le carré en rouge.

+ +

Nous ne sommes pas limités aux rectangles, voici un code pour imprimer un cercle vert. Essayez d'ajouter ceci au bas de votre JavaScript, puis sauvegardez et rafraîchissez :

+ +
ctx.beginPath();
+ctx.arc(240, 160, 20, 0, Math.PI*2, false);
+ctx.fillStyle = "green";
+ctx.fill();
+ctx.closePath();
+ +

Comme nous pouvons le voir, nous utilisons à nouveau les méthodes {{domxref("CanvasRenderingContext2D.beginPath()","beginPath()")}} et {{domxref("CanvasRenderingContext2D.closePath()","closePath()")}} . Entre elles, la partie la plus importante du code ci-dessus est la méthode {{domxref("CanvasRenderingContext2D.arc()","arc()")}} . Elle comporte six paramètres :

+ + + +

La propriété {{domxref("CanvasRenderingContext2D.fillStyle","fillStyle")}} semble différente par rapport à l'exemple précédent. C'est parce que, tout comme avec CSS, la couleur peut être spécifiée sous la forme d'une valeur hexadécimale, d'un mot-clé, de la fonction rgba () (RVBA) ou de toute autre méthode disponible pour les couleurs.

+ +

Au lieu d'utiliser {{domxref("CanvasRenderingContext2D.fillStyle","fillStyle")}} et de remplir les formes avec des couleurs, nous pouvons utiliser {{domxref("CanvasRenderingContext2D.stroke()","stroke()")}} pour ne colorer que le contour exterieur. Essayez d'ajouter ce code à votre JavaScript aussi :

+ +
ctx.beginPath();
+ctx.rect(160, 10, 100, 40);
+ctx.strokeStyle = "rgba(0, 0, 255, 0.5)";
+ctx.stroke();
+ctx.closePath();
+ +

Le code ci-dessus affiche un rectangle vide avec des traits bleus. Grâce au canal alpha de la fonction rgba (), la couleur bleue est semi transparente.

+ +

Comparez votre code

+ +

Voici tout le code source de cette première leçon, fonctionnant avec JSFiddle :

+ +

{{JSFiddleEmbed("https://jsfiddle.net/end3r/x62h15e2/","","370")}}

+ +

Exercice : essayez de changer la taille et la couleur des formes géométriques.

+ +

Prochaines étapes

+ +

Maintenant, nous avons mis en place le code HTML de base et avons appris un peu sur Canvas, passons au deuxième chapitre et étudions comment Déplacer une balle sur notre jeu.

+ +

{{PreviousNext("Games/Workflows/2D_Breakout_game_pure_JavaScript", "Games/Workflows/2D_Breakout_game_pure_JavaScript/Move_the_ball")}}

diff --git a/files/fr/games/tutorials/2d_breakout_game_pure_javascript/finishing_up/index.html b/files/fr/games/tutorials/2d_breakout_game_pure_javascript/finishing_up/index.html deleted file mode 100644 index db9da728f2..0000000000 --- a/files/fr/games/tutorials/2d_breakout_game_pure_javascript/finishing_up/index.html +++ /dev/null @@ -1,107 +0,0 @@ ---- -title: Finitions -slug: Games/Tutorials/2D_Breakout_game_pure_JavaScript/Finishing_up -tags: - - Canevas - - Débutant - - JavaScript - - Jeux - - Tutoriel - - requestAnimationFrame - - vies -translation_of: Games/Tutorials/2D_Breakout_game_pure_JavaScript/Finishing_up -original_slug: Games/Workflows/2D_Breakout_game_pure_JavaScript/finitions ---- -
{{GamesSidebar}}
- -
{{IncludeSubnav("/fr/docs/Games")}}
- -

{{Previous("Games/Workflows/2D_Breakout_game_pure_JavaScript/Mouse_controls")}}

- -

C'est la dernière étape de ce tutoriel Gamedev Canvas. Vous pouvez trouver le code source tel qu'il devrait être après avoir terminé cette leçon à l'adresse Gamedev-Canvas-workshop/lesson10.html.

- -

Il y a toujours des améliorations possibles pour tous les jeux que nous créons. Par exemple, nous pouvons offrir plus d'une vie au joueur. Il peut faire une ou deux erreurs et être encore capable de terminer le jeu. Nous pourrions également améliorer le rendu visuel du jeu.

- -

Donner des vies au joueur

- -

Mettre en œuvre des vies est assez simple. Ajoutons d'abord une variable pour stocker le nombre de vies à l'endroit où nous avons déclaré nos autres variables :

- -
var lives = 3;
- -

L'affichage du compteur de vie est similaire à celui du compteur de points — ajoutez la fonction suivante à votre code, sous la fonction drawScore() :

- -
function drawLives() {
-    ctx.font = "16px Arial";
-    ctx.fillStyle = "#0095DD";
-    ctx.fillText("Lives: "+lives, canvas.width-65, 20);
-}
- -

Au lieu de mettre immédiatement fin au jeu, nous allons réduire le nombre de vies jusqu'à ce qu'il n'y en ait plus. Nous pouvons également réinitialiser les positions du ballon et de la raquette lorsque le joueur commence sa prochaine vie. Ainsi, dans la fonction draw(), remplacez les trois lignes suivantes :

- -
alert("GAME OVER");
-document.location.reload();
-clearInterval(interval); // Needed for Chrome to end game
- - - -

Nous pouvons ainsi y ajouter une logique un peu plus complexe, comme indiqué ci-dessous :

- -
lives--;
-if(!lives) {
-    alert("GAME OVER");
-    document.location.reload();
-    clearInterval(interval); // Needed for Chrome to end game
-}
-else {
-    x = canvas.width/2;
-    y = canvas.height-30;
-    dx = 2;
-    dy = -2;
-    paddleX = (canvas.width-paddleWidth)/2;
-}
- -

Maintenant, quand la balle frappe le bord inférieur de l'écran, nous soustrayons une vie de la variable lives. S'il n'y a plus de vies, la partie est perdue ; s'il reste encore des vies, alors la position de la balle et la raquette sont remises à zéro, ainsi que le mouvement de la balle.

- -

Afficher le compteur de vies

- -

Maintenant, vous devez ajouter un appel à drawLives() dans la fonction draw() et l'ajouter sous l'appel drawScore().

- -
drawLives();
-
- -

Améliorer le rendu avec requestAnimationFrame()

- -

Maintenant, travaillons sur quelque chose qui n'est pas lié à la mécanique du jeu, mais à la façon dont il est rendu. {{domxref("window.requestAnimationFrame", "requestAnimationFrame")}} aide le navigateur à rendre le jeu mieux que la cadence fixe que nous avons actuellement mise en place en utilisant {{domxref("windowTimers.setInterval()", "setInterval()")}}. Remplacez la ligne suivante :

- -
var interval = setInterval(draw, 10);
- -

avec simplement :

- -
draw();
- -

et supprimez chaque occurence de :

- -
clearInterval(interval); // Needed for Chrome to end game
-
- -

Ensuite, tout en bas de la fonction draw() (juste avant l'accolade de fermeture), ajoutez la ligne suivante, ce qui fait que la fonction draw() s'appelle encore et encore :

- -
requestAnimationFrame(draw);
- -

La fonction draw() est maintenant exécutée indéfiniment dans une boucle requestAnimationFrame(), mais au lieu de la cadence fixe de 10 millisecondes, nous redonnons le contrôle de la cadence au navigateur. Il synchronisera la cadence en conséquence et ne n'acutalisera l'affichage que lorsque cela sera nécessaire. Cela permet d'obtenir une boucle d'animation plus efficace et plus fluide que l'ancienne méthode setInterval().

- -

Comparez votre code your code

- -

C'est tout — la version finale du jeu est prête et prête à être lancée !

- -

{{JSFiddleEmbed("https://jsfiddle.net/raymondjplante/dfh2tpu1/","","395")}}

- -

Exercice: changer le nombre de vies et l'angle de rebond de la balle sur la raquette.

- -

Game over - pour l'instant !

- -

Vous avez terminé toutes les leçons - félicitations ! À ce stade, vous devriez maintenant connaître les bases de la manipulation des Canevas et la logique des jeux simples en 2D. C'est maintenant le bon moment pour apprendre quelques frameworks et continuer le développement du jeu. Vous pouvez découvrir le pendant de cette série, le casse-brique 2D utilisant Phaser ou le tutoriel Cyber Orb construit avec Phaser. Vous pouvez également consulter la section Jeux sur MDN pour vous inspirer et approfondir vos connaissances.

- -

Vous pouvez également revenir à la page d'accueil de cette série de tutoriels. Amusez-vous bien à coder !

- -

{{Previous("Games/Workflows/2D_Breakout_game_pure_JavaScript/Mouse_controls")}}

diff --git a/files/fr/games/tutorials/2d_breakout_game_pure_javascript/finishing_up/index.md b/files/fr/games/tutorials/2d_breakout_game_pure_javascript/finishing_up/index.md new file mode 100644 index 0000000000..db9da728f2 --- /dev/null +++ b/files/fr/games/tutorials/2d_breakout_game_pure_javascript/finishing_up/index.md @@ -0,0 +1,107 @@ +--- +title: Finitions +slug: Games/Tutorials/2D_Breakout_game_pure_JavaScript/Finishing_up +tags: + - Canevas + - Débutant + - JavaScript + - Jeux + - Tutoriel + - requestAnimationFrame + - vies +translation_of: Games/Tutorials/2D_Breakout_game_pure_JavaScript/Finishing_up +original_slug: Games/Workflows/2D_Breakout_game_pure_JavaScript/finitions +--- +
{{GamesSidebar}}
+ +
{{IncludeSubnav("/fr/docs/Games")}}
+ +

{{Previous("Games/Workflows/2D_Breakout_game_pure_JavaScript/Mouse_controls")}}

+ +

C'est la dernière étape de ce tutoriel Gamedev Canvas. Vous pouvez trouver le code source tel qu'il devrait être après avoir terminé cette leçon à l'adresse Gamedev-Canvas-workshop/lesson10.html.

+ +

Il y a toujours des améliorations possibles pour tous les jeux que nous créons. Par exemple, nous pouvons offrir plus d'une vie au joueur. Il peut faire une ou deux erreurs et être encore capable de terminer le jeu. Nous pourrions également améliorer le rendu visuel du jeu.

+ +

Donner des vies au joueur

+ +

Mettre en œuvre des vies est assez simple. Ajoutons d'abord une variable pour stocker le nombre de vies à l'endroit où nous avons déclaré nos autres variables :

+ +
var lives = 3;
+ +

L'affichage du compteur de vie est similaire à celui du compteur de points — ajoutez la fonction suivante à votre code, sous la fonction drawScore() :

+ +
function drawLives() {
+    ctx.font = "16px Arial";
+    ctx.fillStyle = "#0095DD";
+    ctx.fillText("Lives: "+lives, canvas.width-65, 20);
+}
+ +

Au lieu de mettre immédiatement fin au jeu, nous allons réduire le nombre de vies jusqu'à ce qu'il n'y en ait plus. Nous pouvons également réinitialiser les positions du ballon et de la raquette lorsque le joueur commence sa prochaine vie. Ainsi, dans la fonction draw(), remplacez les trois lignes suivantes :

+ +
alert("GAME OVER");
+document.location.reload();
+clearInterval(interval); // Needed for Chrome to end game
+ + + +

Nous pouvons ainsi y ajouter une logique un peu plus complexe, comme indiqué ci-dessous :

+ +
lives--;
+if(!lives) {
+    alert("GAME OVER");
+    document.location.reload();
+    clearInterval(interval); // Needed for Chrome to end game
+}
+else {
+    x = canvas.width/2;
+    y = canvas.height-30;
+    dx = 2;
+    dy = -2;
+    paddleX = (canvas.width-paddleWidth)/2;
+}
+ +

Maintenant, quand la balle frappe le bord inférieur de l'écran, nous soustrayons une vie de la variable lives. S'il n'y a plus de vies, la partie est perdue ; s'il reste encore des vies, alors la position de la balle et la raquette sont remises à zéro, ainsi que le mouvement de la balle.

+ +

Afficher le compteur de vies

+ +

Maintenant, vous devez ajouter un appel à drawLives() dans la fonction draw() et l'ajouter sous l'appel drawScore().

+ +
drawLives();
+
+ +

Améliorer le rendu avec requestAnimationFrame()

+ +

Maintenant, travaillons sur quelque chose qui n'est pas lié à la mécanique du jeu, mais à la façon dont il est rendu. {{domxref("window.requestAnimationFrame", "requestAnimationFrame")}} aide le navigateur à rendre le jeu mieux que la cadence fixe que nous avons actuellement mise en place en utilisant {{domxref("windowTimers.setInterval()", "setInterval()")}}. Remplacez la ligne suivante :

+ +
var interval = setInterval(draw, 10);
+ +

avec simplement :

+ +
draw();
+ +

et supprimez chaque occurence de :

+ +
clearInterval(interval); // Needed for Chrome to end game
+
+ +

Ensuite, tout en bas de la fonction draw() (juste avant l'accolade de fermeture), ajoutez la ligne suivante, ce qui fait que la fonction draw() s'appelle encore et encore :

+ +
requestAnimationFrame(draw);
+ +

La fonction draw() est maintenant exécutée indéfiniment dans une boucle requestAnimationFrame(), mais au lieu de la cadence fixe de 10 millisecondes, nous redonnons le contrôle de la cadence au navigateur. Il synchronisera la cadence en conséquence et ne n'acutalisera l'affichage que lorsque cela sera nécessaire. Cela permet d'obtenir une boucle d'animation plus efficace et plus fluide que l'ancienne méthode setInterval().

+ +

Comparez votre code your code

+ +

C'est tout — la version finale du jeu est prête et prête à être lancée !

+ +

{{JSFiddleEmbed("https://jsfiddle.net/raymondjplante/dfh2tpu1/","","395")}}

+ +

Exercice: changer le nombre de vies et l'angle de rebond de la balle sur la raquette.

+ +

Game over - pour l'instant !

+ +

Vous avez terminé toutes les leçons - félicitations ! À ce stade, vous devriez maintenant connaître les bases de la manipulation des Canevas et la logique des jeux simples en 2D. C'est maintenant le bon moment pour apprendre quelques frameworks et continuer le développement du jeu. Vous pouvez découvrir le pendant de cette série, le casse-brique 2D utilisant Phaser ou le tutoriel Cyber Orb construit avec Phaser. Vous pouvez également consulter la section Jeux sur MDN pour vous inspirer et approfondir vos connaissances.

+ +

Vous pouvez également revenir à la page d'accueil de cette série de tutoriels. Amusez-vous bien à coder !

+ +

{{Previous("Games/Workflows/2D_Breakout_game_pure_JavaScript/Mouse_controls")}}

diff --git a/files/fr/games/tutorials/2d_breakout_game_pure_javascript/game_over/index.html b/files/fr/games/tutorials/2d_breakout_game_pure_javascript/game_over/index.html deleted file mode 100644 index 44cf0953f4..0000000000 --- a/files/fr/games/tutorials/2d_breakout_game_pure_javascript/game_over/index.html +++ /dev/null @@ -1,94 +0,0 @@ ---- -title: Fin de partie -slug: Games/Tutorials/2D_Breakout_game_pure_JavaScript/Game_over -tags: - - Canvas - - Débutant - - Fin de partie - - JavaScript - - Jeux - - Tutoriel - - game over -translation_of: Games/Tutorials/2D_Breakout_game_pure_JavaScript/Game_over -original_slug: Games/Workflows/2D_Breakout_game_pure_JavaScript/Game_over ---- -
{{GamesSidebar}}
- -
{{IncludeSubnav("/fr/docs/Games")}}
- -

{{PreviousNext("Games/Workflows/2D_Breakout_game_pure_JavaScript/Paddle_et_contr%C3%B4le_clavier", "Games/Workflows/2D_Breakout_game_pure_JavaScript/Build_the_brick_field")}}

- -

Voici la 5ème étape sur 10 du Gamedev Canvas tutorial. Vous pouvez trouver le code source comme il devrait être après avoir terminé cette leçon sur Gamedev-Canvas-workshop/lesson5.html.

- -

C'est sympa de regarder la balle rebondir contre les murs et de pouvoir bouger la raquette, mais à part ça, le jeu ne fait rien, il n'y a pas de progression ni de but final. Il serait bien, du point de vue du gameplay, de pouvoir perdre. La façon de perdre dans le casse briques est simple. Si vous loupez la balle avec le paddle et la laissez atteindre le bas de l'écran, la partie est terminée.

- -

Intégrer une fin de partie

- -

Essayons d'intégrer une fin de partie dans le jeu . Voyons une partie du code de la troisième leçon, où nous faisions rebondir la balle contre les murs :

- -
if(x + dx > canvas.width-ballRadius || x + dx < ballRadius) {
-    dx = -dx;
-}
-
-if(y + dy > canvas.height-ballRadius || y + dy < ballRadius) {
-    dy = -dy;
-}
- -

Au lieu de permettre à la balle de rebondir sur les quatre murs, nous n'en autoriserons que trois désormais — gauche, haut et droite. Toucher le mur du bas mettra fin à la partie.

- -

Nous allons  donc modifier le second bloc if (qui gère le déplacement sur l'axe vertical, y) en y ajoutant un else if qui déclenchera un Game Over si la balle entre en collision avec le mur du bas. Pour l'instant nous allons rester simple, afficher un message d'alerte et redémarrer le jeu en rechargeant la page.

- -

Tout d'abord remplacer l'appel initial à setInterval()

- -
setInterval(draw, 10);
-
- -

par 

- -
var interval = setInterval(draw, 10);
-
- - - -

Puis remplacez la seconde instruction if par le code suivant:

- -
if(y + dy < ballRadius) {
-    dy = -dy;
-} else if(y + dy > canvas.height-ballRadius) {
-    alert("GAME OVER");
-    document.location.reload();
-    clearInterval(interval); // Needed for Chrome to end game
-}
- -

Faire rebondir la balle sur la raquette

- -

La dernière chose à faire dans cette leçon est de créer une sorte de détection de collision entre la raquette et la balle, de sorte qu'elle puisse rebondir et revenir dans la zone de jeu. La chose la plus facile à faire est de vérifier si le centre de la balle se  trouve entre les bords droit et gauche du paddle. Mettez à jour le dernier bout de code que vous venez de modifier, comme-ci dessous :

- -
if(y + dy < ballRadius) {
-    dy = -dy;
-} else if(y + dy > canvas.height-ballRadius) {
-    if(x > paddleX && x < paddleX + paddleWidth) {
-        dy = -dy;
-    }
-    else {
-        alert("GAME OVER");
-        document.location.reload();
-        clearInterval(interval);
-    }
-}
- -

Si la balle entre en collision avec le mur du bas, nous devons vérifier si elle touche la raquette. Si c'est le cas, la balle rebondit et revient dans la zone de jeu. Sinon, le jeu est terminé comme avant.

- -

Comparez votre code

- -

Voici le code fonctionnel avec lesquel vous pouvez comparer le vôtre :

- -

{{JSFiddleEmbed("https://jsfiddle.net/end3r/z4zy79fo/","","395")}}

- -

Exercice: Faites en sorte que la balle accélère quand elle touche la raquette.

- -

Prochaine étape

- -

Nous avons déja bien avancé et notre jeu est devenu plus intéressant depuis que vous pouvez perdre ! Mais il manque encore quelque chose. Rendons-nous au sixième chapitre — Créer le champs de briques — et créons quelques briques que la balle pourra détruire.

- -

{{PreviousNext("Games/Workflows/2D_Breakout_game_pure_JavaScript/Paddle_et_contr%C3%B4le_clavier", "Games/Workflows/2D_Breakout_game_pure_JavaScript/Build_the_brick_field")}}

diff --git a/files/fr/games/tutorials/2d_breakout_game_pure_javascript/game_over/index.md b/files/fr/games/tutorials/2d_breakout_game_pure_javascript/game_over/index.md new file mode 100644 index 0000000000..44cf0953f4 --- /dev/null +++ b/files/fr/games/tutorials/2d_breakout_game_pure_javascript/game_over/index.md @@ -0,0 +1,94 @@ +--- +title: Fin de partie +slug: Games/Tutorials/2D_Breakout_game_pure_JavaScript/Game_over +tags: + - Canvas + - Débutant + - Fin de partie + - JavaScript + - Jeux + - Tutoriel + - game over +translation_of: Games/Tutorials/2D_Breakout_game_pure_JavaScript/Game_over +original_slug: Games/Workflows/2D_Breakout_game_pure_JavaScript/Game_over +--- +
{{GamesSidebar}}
+ +
{{IncludeSubnav("/fr/docs/Games")}}
+ +

{{PreviousNext("Games/Workflows/2D_Breakout_game_pure_JavaScript/Paddle_et_contr%C3%B4le_clavier", "Games/Workflows/2D_Breakout_game_pure_JavaScript/Build_the_brick_field")}}

+ +

Voici la 5ème étape sur 10 du Gamedev Canvas tutorial. Vous pouvez trouver le code source comme il devrait être après avoir terminé cette leçon sur Gamedev-Canvas-workshop/lesson5.html.

+ +

C'est sympa de regarder la balle rebondir contre les murs et de pouvoir bouger la raquette, mais à part ça, le jeu ne fait rien, il n'y a pas de progression ni de but final. Il serait bien, du point de vue du gameplay, de pouvoir perdre. La façon de perdre dans le casse briques est simple. Si vous loupez la balle avec le paddle et la laissez atteindre le bas de l'écran, la partie est terminée.

+ +

Intégrer une fin de partie

+ +

Essayons d'intégrer une fin de partie dans le jeu . Voyons une partie du code de la troisième leçon, où nous faisions rebondir la balle contre les murs :

+ +
if(x + dx > canvas.width-ballRadius || x + dx < ballRadius) {
+    dx = -dx;
+}
+
+if(y + dy > canvas.height-ballRadius || y + dy < ballRadius) {
+    dy = -dy;
+}
+ +

Au lieu de permettre à la balle de rebondir sur les quatre murs, nous n'en autoriserons que trois désormais — gauche, haut et droite. Toucher le mur du bas mettra fin à la partie.

+ +

Nous allons  donc modifier le second bloc if (qui gère le déplacement sur l'axe vertical, y) en y ajoutant un else if qui déclenchera un Game Over si la balle entre en collision avec le mur du bas. Pour l'instant nous allons rester simple, afficher un message d'alerte et redémarrer le jeu en rechargeant la page.

+ +

Tout d'abord remplacer l'appel initial à setInterval()

+ +
setInterval(draw, 10);
+
+ +

par 

+ +
var interval = setInterval(draw, 10);
+
+ + + +

Puis remplacez la seconde instruction if par le code suivant:

+ +
if(y + dy < ballRadius) {
+    dy = -dy;
+} else if(y + dy > canvas.height-ballRadius) {
+    alert("GAME OVER");
+    document.location.reload();
+    clearInterval(interval); // Needed for Chrome to end game
+}
+ +

Faire rebondir la balle sur la raquette

+ +

La dernière chose à faire dans cette leçon est de créer une sorte de détection de collision entre la raquette et la balle, de sorte qu'elle puisse rebondir et revenir dans la zone de jeu. La chose la plus facile à faire est de vérifier si le centre de la balle se  trouve entre les bords droit et gauche du paddle. Mettez à jour le dernier bout de code que vous venez de modifier, comme-ci dessous :

+ +
if(y + dy < ballRadius) {
+    dy = -dy;
+} else if(y + dy > canvas.height-ballRadius) {
+    if(x > paddleX && x < paddleX + paddleWidth) {
+        dy = -dy;
+    }
+    else {
+        alert("GAME OVER");
+        document.location.reload();
+        clearInterval(interval);
+    }
+}
+ +

Si la balle entre en collision avec le mur du bas, nous devons vérifier si elle touche la raquette. Si c'est le cas, la balle rebondit et revient dans la zone de jeu. Sinon, le jeu est terminé comme avant.

+ +

Comparez votre code

+ +

Voici le code fonctionnel avec lesquel vous pouvez comparer le vôtre :

+ +

{{JSFiddleEmbed("https://jsfiddle.net/end3r/z4zy79fo/","","395")}}

+ +

Exercice: Faites en sorte que la balle accélère quand elle touche la raquette.

+ +

Prochaine étape

+ +

Nous avons déja bien avancé et notre jeu est devenu plus intéressant depuis que vous pouvez perdre ! Mais il manque encore quelque chose. Rendons-nous au sixième chapitre — Créer le champs de briques — et créons quelques briques que la balle pourra détruire.

+ +

{{PreviousNext("Games/Workflows/2D_Breakout_game_pure_JavaScript/Paddle_et_contr%C3%B4le_clavier", "Games/Workflows/2D_Breakout_game_pure_JavaScript/Build_the_brick_field")}}

diff --git a/files/fr/games/tutorials/2d_breakout_game_pure_javascript/index.html b/files/fr/games/tutorials/2d_breakout_game_pure_javascript/index.html deleted file mode 100644 index cc9fed3143..0000000000 --- a/files/fr/games/tutorials/2d_breakout_game_pure_javascript/index.html +++ /dev/null @@ -1,59 +0,0 @@ ---- -title: Jeu de casse-briques 2D en pur JavaScript -slug: Games/Tutorials/2D_Breakout_game_pure_JavaScript -tags: - - 2D - - Canvas - - Débutant - - JavaScript - - Jeux - - Tutoriel -translation_of: Games/Tutorials/2D_Breakout_game_pure_JavaScript -original_slug: Games/Workflows/2D_Breakout_game_pure_JavaScript ---- -
{{GamesSidebar}}
- -
{{IncludeSubnav("/fr/docs/Jeux")}}
- -

{{Next("Games/Workflows/2D_Breakout_game_pure_JavaScript/creer_element_canvas_et_afficher")}}

- -

Dans ce tutoriel, nous allons créer pas à pas un jeu de casse-briques MDN, créé entièrement avec JavaScript et sans framework, et rendu avec la balise HTML5 {{htmlelement("canvas")}}.

- -

Chaque étape est modifiable en direct, et disponible en test pour que vous puissiez voir ce à quoi les étapes intermédiaires devraient ressembler. Vous apprendrez les bases d'utilisations de l'élément {{htmlelement("canvas")}} pour implémenter des mécaniques de base du jeu vidéo, comme charger et déplacer des images, les détections de collisions, les mécanismes de contrôle, et les conditions de victoire/défaite.

- -

Pour comprendre la plupart des articles de ce tutoriel, vous devez déjà avoir un niveau basique ou intermédiaire en JavaScript. À la fin de ce tutoriel, vous serez capable de créer vos propres jeux Web.

- -

- -

Détail de la leçon

- -

Toutes les leçons — et les différentes versions de ce jeu de casse-brique MDN que nous allons créer ensemble — sont disponibles sur GitHub :

- -
    -
  1. Créer l'élément canvas et dessiner dessus
    2. -
  2. Déplacer la balle
    3. -
  3. Rebondir sur les murs
    4. -
  4. Contrôles clavier
    5. -
  5. Jeu terminé
    6. -
  6. Construire le mur de briques
    7. -
  7. Détection des collisions
    8. -
  8. Afficher le score et gagner
    9. -
  9. Contrôles souris
    10. -
  10. Finir
    11. -
- -

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.

-
- -
-

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 basé sur ce tutoriel si vous voulez faire une présentation sur le développement de jeux en général .

-
- -

Prochaines étapes

- -

Ok, c'est parti ! Rendez-vous au premier chapitre pour commencer — Créer l'élément canvas et dessiner dessus

- -

{{Next("Games/Workflows/2D_Breakout_game_pure_JavaScript/creer_element_canvas_et_afficher")}} 

diff --git a/files/fr/games/tutorials/2d_breakout_game_pure_javascript/index.md b/files/fr/games/tutorials/2d_breakout_game_pure_javascript/index.md new file mode 100644 index 0000000000..cc9fed3143 --- /dev/null +++ b/files/fr/games/tutorials/2d_breakout_game_pure_javascript/index.md @@ -0,0 +1,59 @@ +--- +title: Jeu de casse-briques 2D en pur JavaScript +slug: Games/Tutorials/2D_Breakout_game_pure_JavaScript +tags: + - 2D + - Canvas + - Débutant + - JavaScript + - Jeux + - Tutoriel +translation_of: Games/Tutorials/2D_Breakout_game_pure_JavaScript +original_slug: Games/Workflows/2D_Breakout_game_pure_JavaScript +--- +
{{GamesSidebar}}
+ +
{{IncludeSubnav("/fr/docs/Jeux")}}
+ +

{{Next("Games/Workflows/2D_Breakout_game_pure_JavaScript/creer_element_canvas_et_afficher")}}

+ +

Dans ce tutoriel, nous allons créer pas à pas un jeu de casse-briques MDN, créé entièrement avec JavaScript et sans framework, et rendu avec la balise HTML5 {{htmlelement("canvas")}}.

+ +

Chaque étape est modifiable en direct, et disponible en test pour que vous puissiez voir ce à quoi les étapes intermédiaires devraient ressembler. Vous apprendrez les bases d'utilisations de l'élément {{htmlelement("canvas")}} pour implémenter des mécaniques de base du jeu vidéo, comme charger et déplacer des images, les détections de collisions, les mécanismes de contrôle, et les conditions de victoire/défaite.

+ +

Pour comprendre la plupart des articles de ce tutoriel, vous devez déjà avoir un niveau basique ou intermédiaire en JavaScript. À la fin de ce tutoriel, vous serez capable de créer vos propres jeux Web.

+ +

+ +

Détail de la leçon

+ +

Toutes les leçons — et les différentes versions de ce jeu de casse-brique MDN que nous allons créer ensemble — sont disponibles sur GitHub :

+ +
    +
  1. Créer l'élément canvas et dessiner dessus
    2. +
  2. Déplacer la balle
    3. +
  3. Rebondir sur les murs
    4. +
  4. Contrôles clavier
    5. +
  5. Jeu terminé
    6. +
  6. Construire le mur de briques
    7. +
  7. Détection des collisions
    8. +
  8. Afficher le score et gagner
    9. +
  9. Contrôles souris
    10. +
  10. Finir
    11. +
+ +

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.

+
+ +
+

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 basé sur ce tutoriel si vous voulez faire une présentation sur le développement de jeux en général .

+
+ +

Prochaines étapes

+ +

Ok, c'est parti ! Rendez-vous au premier chapitre pour commencer — Créer l'élément canvas et dessiner dessus

+ +

{{Next("Games/Workflows/2D_Breakout_game_pure_JavaScript/creer_element_canvas_et_afficher")}} 

diff --git a/files/fr/games/tutorials/2d_breakout_game_pure_javascript/mouse_controls/index.html b/files/fr/games/tutorials/2d_breakout_game_pure_javascript/mouse_controls/index.html deleted file mode 100644 index 9220f1a557..0000000000 --- a/files/fr/games/tutorials/2d_breakout_game_pure_javascript/mouse_controls/index.html +++ /dev/null @@ -1,58 +0,0 @@ ---- -title: Contrôle à la souris -slug: Games/Tutorials/2D_Breakout_game_pure_JavaScript/Mouse_controls -tags: - - Canevas - - Contrôles - - Débutant - - JavaScript - - Jeux - - Souris - - Tutoriel -translation_of: Games/Tutorials/2D_Breakout_game_pure_JavaScript/Mouse_controls -original_slug: Games/Workflows/2D_Breakout_game_pure_JavaScript/Mouse_controls ---- -
{{GamesSidebar}}
- -
{{IncludeSubnav("/fr/docs/Games")}}
- -

{{PreviousNext("Games/Workflows/2D_Breakout_game_pure_JavaScript/Track_the_score_and_win", "Games/Workflows/2D_Breakout_game_pure_JavaScript/finitions")}}

- -

C'est la 9e étape sur 10 de ce tutoriel Gamedev Canvas. Vous pouvez trouver le code source tel qu'il devrait être après avoir terminé cette leçon à l'adresse Gamedev-Canvas-workshop/lesson9.html.

- -

Le jeu lui-même est en fait terminé, alors travaillons à le peaufiner. Nous avons déjà ajouté des commandes au clavier, mais nous pourrions facilement ajouter des commandes à la souris.

- -

Détecter les mouvements de la souris

- -

Il est encore plus facile de détecter les mouvements de la souris que les pressions sur les touches : il suffit d'écouter l'évènement {{event("mousemove")}}. Ajouter la ligne suivante au même endroit que les autres écouteurs d'événement, juste en dessous de l'évènement keyup :

- -
document.addEventListener("mousemove", mouseMoveHandler, false);
- -

Lier le mouvement de la raquette au mouvement de la souris

- -

Nous pouvons mettre à jour la position de la raquette en fonction des coordonnées du pointeur — c'est exactement ce que fera la fonction de manipulation suivante. Ajoutez la fonction ci-dessous à votre code, sous la dernière ligne que vous avez ajoutée :

- -
function mouseMoveHandler(e) {
-    var relativeX = e.clientX - canvas.offsetLeft;
-    if(relativeX > 0 && relativeX < canvas.width) {
-        paddleX = relativeX - paddleWidth/2;
-    }
-}
- -

Dans cette fonction, nous calculons d'abord une valeur relativeX, qui est égale à la position horizontale de la souris dans la fenêtre de visualisation (e.clientX) moins la distance entre le bord gauche de la toile et le bord gauche de la fenêtre de visualisation (canvas.offsetLeft) — en fait, cette valeur est égale à la distance entre le bord gauche du canevas et le pointeur de la souris. Si la position relative du pointeur X est supérieure à zéro et inférieure à la largeur du canevas, le pointeur se trouve dans les limites du canevas, et la position paddleX (ancrée sur le bord gauche de la palette) est fixée à la valeur relativeX moins la moitié de la largeur de la palette, de sorte que le mouvement sera en fait relatif au milieu de la raquette.

- -

La raquette suivra désormais la position du curseur de la souris, mais comme nous limitons le mouvement à la taille du canevas, elle ne disparaîtra pas complètement d'un côté ou de l'autre.

- -

Comparez votre code

- -

Voici le code final du chapitre, à vous de vérifier et de le tester pour voir si il y a des différences.

- -

{{JSFiddleEmbed("https://jsfiddle.net/raymondjplante/vt7y5hcp/","","395")}}

- -

Exercice : ajustez les limites du mouvement de la raquette, de sorte que la raquette entière soit visible sur les deux bords du canevas au lieu de seulement la moitié.

- -

Prochaine étape

- -

Maintenant que nous avons un jeu complet, nous allons terminer notre série de leçons avec quelques petites retouches supplémentaires — Finitions.

- -

{{PreviousNext("Games/Workflows/2D_Breakout_game_pure_JavaScript/Track_the_score_and_win", "Games/Workflows/2D_Breakout_game_pure_JavaScript/finitions")}}

diff --git a/files/fr/games/tutorials/2d_breakout_game_pure_javascript/mouse_controls/index.md b/files/fr/games/tutorials/2d_breakout_game_pure_javascript/mouse_controls/index.md new file mode 100644 index 0000000000..9220f1a557 --- /dev/null +++ b/files/fr/games/tutorials/2d_breakout_game_pure_javascript/mouse_controls/index.md @@ -0,0 +1,58 @@ +--- +title: Contrôle à la souris +slug: Games/Tutorials/2D_Breakout_game_pure_JavaScript/Mouse_controls +tags: + - Canevas + - Contrôles + - Débutant + - JavaScript + - Jeux + - Souris + - Tutoriel +translation_of: Games/Tutorials/2D_Breakout_game_pure_JavaScript/Mouse_controls +original_slug: Games/Workflows/2D_Breakout_game_pure_JavaScript/Mouse_controls +--- +
{{GamesSidebar}}
+ +
{{IncludeSubnav("/fr/docs/Games")}}
+ +

{{PreviousNext("Games/Workflows/2D_Breakout_game_pure_JavaScript/Track_the_score_and_win", "Games/Workflows/2D_Breakout_game_pure_JavaScript/finitions")}}

+ +

C'est la 9e étape sur 10 de ce tutoriel Gamedev Canvas. Vous pouvez trouver le code source tel qu'il devrait être après avoir terminé cette leçon à l'adresse Gamedev-Canvas-workshop/lesson9.html.

+ +

Le jeu lui-même est en fait terminé, alors travaillons à le peaufiner. Nous avons déjà ajouté des commandes au clavier, mais nous pourrions facilement ajouter des commandes à la souris.

+ +

Détecter les mouvements de la souris

+ +

Il est encore plus facile de détecter les mouvements de la souris que les pressions sur les touches : il suffit d'écouter l'évènement {{event("mousemove")}}. Ajouter la ligne suivante au même endroit que les autres écouteurs d'événement, juste en dessous de l'évènement keyup :

+ +
document.addEventListener("mousemove", mouseMoveHandler, false);
+ +

Lier le mouvement de la raquette au mouvement de la souris

+ +

Nous pouvons mettre à jour la position de la raquette en fonction des coordonnées du pointeur — c'est exactement ce que fera la fonction de manipulation suivante. Ajoutez la fonction ci-dessous à votre code, sous la dernière ligne que vous avez ajoutée :

+ +
function mouseMoveHandler(e) {
+    var relativeX = e.clientX - canvas.offsetLeft;
+    if(relativeX > 0 && relativeX < canvas.width) {
+        paddleX = relativeX - paddleWidth/2;
+    }
+}
+ +

Dans cette fonction, nous calculons d'abord une valeur relativeX, qui est égale à la position horizontale de la souris dans la fenêtre de visualisation (e.clientX) moins la distance entre le bord gauche de la toile et le bord gauche de la fenêtre de visualisation (canvas.offsetLeft) — en fait, cette valeur est égale à la distance entre le bord gauche du canevas et le pointeur de la souris. Si la position relative du pointeur X est supérieure à zéro et inférieure à la largeur du canevas, le pointeur se trouve dans les limites du canevas, et la position paddleX (ancrée sur le bord gauche de la palette) est fixée à la valeur relativeX moins la moitié de la largeur de la palette, de sorte que le mouvement sera en fait relatif au milieu de la raquette.

+ +

La raquette suivra désormais la position du curseur de la souris, mais comme nous limitons le mouvement à la taille du canevas, elle ne disparaîtra pas complètement d'un côté ou de l'autre.

+ +

Comparez votre code

+ +

Voici le code final du chapitre, à vous de vérifier et de le tester pour voir si il y a des différences.

+ +

{{JSFiddleEmbed("https://jsfiddle.net/raymondjplante/vt7y5hcp/","","395")}}

+ +

Exercice : ajustez les limites du mouvement de la raquette, de sorte que la raquette entière soit visible sur les deux bords du canevas au lieu de seulement la moitié.

+ +

Prochaine étape

+ +

Maintenant que nous avons un jeu complet, nous allons terminer notre série de leçons avec quelques petites retouches supplémentaires — Finitions.

+ +

{{PreviousNext("Games/Workflows/2D_Breakout_game_pure_JavaScript/Track_the_score_and_win", "Games/Workflows/2D_Breakout_game_pure_JavaScript/finitions")}}

diff --git a/files/fr/games/tutorials/2d_breakout_game_pure_javascript/move_the_ball/index.html b/files/fr/games/tutorials/2d_breakout_game_pure_javascript/move_the_ball/index.html deleted file mode 100644 index 31b96ea7d8..0000000000 --- a/files/fr/games/tutorials/2d_breakout_game_pure_javascript/move_the_ball/index.html +++ /dev/null @@ -1,143 +0,0 @@ ---- -title: Déplacer la balle -slug: Games/Tutorials/2D_Breakout_game_pure_JavaScript/Move_the_ball -tags: - - 2D - - Boucle - - Canevas - - Débutant - - JavaScript - - Mouvement - - Tutoriel -translation_of: Games/Tutorials/2D_Breakout_game_pure_JavaScript/Move_the_ball -original_slug: Games/Workflows/2D_Breakout_game_pure_JavaScript/Move_the_ball ---- -
{{GamesSidebar}}
- -
{{IncludeSubnav("/fr/docs/Games")}}
- -

{{PreviousNext("Games/Workflows/2D_Breakout_game_pure_JavaScript/creer_element_canvas_et_afficher", "Games/Workflows/2D_Breakout_game_pure_JavaScript/Faire_rebondir_la_balle_sur_les_murs")}}

- -

Voici la deuxième étape de ce tutoriel. Vous pouvez retrouver le code source de cette leçon sur Gamedev-Canvas-workshop/lesson2.html.

- -

Nous avons vu dans l'article précédent comment dessiner une balle, maintenant déplaçons là. Techniquement, nous afficherons la balle sur l'écran, puis nous l'effacerons et ensuite nous la repeindrons dans une position légèrement différente et ceci à chaque image afin de donner l'impression d'un mouvement (tout comme le fonctionnement du mouvement dans les films).

- -

Définir une boucle de dessin

- -

Afin que le dessin soit mis à jour sur le canevas à chaque image, nous allons définir une fonction draw() qui sera exécutée en continu et qui utilisera des variables pour les positions des sprites, etc. Pour qu'une fonction s'exécute de façon répétée avec JavaScript, on pourra utiliser les méthodes {{domxref("WindowTimers.setInterval()", "setInterval()")}} ou {{domxref("window.requestAnimationFrame()", "requestAnimationFrame()")}}.

- -

Supprimez tout le JavaScript que vous avez actuellement dans votre HTML à l'exception des deux premières lignes puis ajoutez ce qui suit en dessous de ces lignes. La fonction draw() sera exécutée toutes les 10 millisecondes (environ) grâce à setInterval :

- -
function draw() {
-  // le code pour dessiner
-}
-setInterval(draw, 10);
- -

Grâce à la nature infinie de setInterval, la fonction draw() sera appelée toutes les 10 millisecondes, sans arrêt jusqu'à ce que nous y mettions un terme. Maintenant, dessinons la balle — ajoutons le code ci-dessous à notre fonction draw() :

- -
ctx.beginPath();
-ctx.arc(50, 50, 10, 0, Math.PI*2);
-ctx.fillStyle = "#0095DD";
-ctx.fill();
-ctx.closePath();
-
- -

Essayez votre code mis à jour maintenant, la balle devrait être repeinte sur chaque image.

- -

Déplacer la balle

- -

Pour le moment, vous ne voyez pas la balle "repeinte" car elle ne bouge pas. Améliorons tout ça. Pour commencer, au lieu d'une position bloquée à (50,50), nous allons définir un point de départ en bas et au milieu du canevas grâce aux variables x et y que nous utiliserons pour définir la position où le cercle est dessiné.

- -

Ajoutez d'abord les deux lignes suivantes au-dessus de votre fonction draw() pour définir x et y :

- -
var x = canvas.width/2;
-var y = canvas.height-30;
-
- -

Ensuite, mettez à jour la fonction draw() afin d'utiliser les variables x et y dans la méthode {{domxref("CanvasRenderingContext2D.arc()","arc()")}} , comme indiqué dans la ligne mise en évidence ci-dessous :

- -
function draw() {
-  ctx.beginPath();
-  ctx.arc(x, y, 10, 0, Math.PI*2);
-  ctx.fillStyle = "#0095DD";
-  ctx.fill();
-  ctx.closePath();
-}
-
- -

Nous voici à la partie importante : nous voulons ajouter une valeur à x et y après que chaque image ait été dessinée afin de faire croire que la balle bouge. On définit ces valeurs comme dx et dy avec comme valeurs respectives 2 et -2. Ajoutez le code après la déclaration des variables x et y :

- -
var dx = 2;
-var dy = -2;
-
- -

La dernière chose à faire est de mettre à jour x et y avec nos variables dx et  dy sur chaque image, de sorte que la balle sera peinte dans la nouvelle position à chaque nouvelle image. Ajoutez les deux nouvelles lignes, indiquées ci-dessous, à votre fonction draw() :

- -
function draw() {
-  ctx.beginPath();
-  ctx.arc(x, y, 10, 0, Math.PI*2);
-  ctx.fillStyle = "#0095DD";
-  ctx.fill();
-  ctx.closePath();
-  x += dx;
-  y += dy;
-}
- -

Enregistrez à nouveau votre code et essayez-le dans votre navigateur. Vous devriez avoir le résultat suivant : ça fonctionne mais on a une trainée laissée par la balle derrière elle :

- -

- -

Effacer le canevas avant chaque image (frame)

- -

La balle laisse une trace parce que qu'une nouveau cercle est dessiné sur chaque frame sans qu'on enlève le précédent. Pas d'inquiétude, il existe un moyen d'effacer le contenu du canevas : {{domxref("CanvasRenderingContext2D.clearRect()","clearRect()")}}. Cette méthode prend en compte quatre paramètres: les coordonnées x et y du coin supérieur gauche d'un rectangle et les coordonnées x et y du coin inférieur droit d'un rectangle. Toute la zone couverte par ce rectangle sera effacée.

- -

Ajoutez la nouvelle ligne en surbrillance ci-dessous à la fonction draw() :

- -
function draw() {
-  ctx.clearRect(0, 0, canvas.width, canvas.height);
-  ctx.beginPath();
-  ctx.arc(x, y, 10, 0, Math.PI*2);
-  ctx.fillStyle = "#0095DD";
-  ctx.fill();
-  ctx.closePath();
-  x += dx;
-  y += dy;
-}
-
- -

Enregistrez votre code et essayez à nouveau. Cette fois, vous verrez la balle se déplacer sans laisser de trace. Toutes les 10 millisecondes, le canvas est effacé, la balle est dessinée sur une position donnée et les valeurs x et y sont mises à jour pour l'image suivante (en anglais, on parle de "frame").

- -

Nettoyer notre code

- -

Dans les prochains articles, nous allons ajouter de plus en plus de d'instructions à la fonction draw(). Mieux vaut donc la garder aussi simple et propre que possible. Commençons par déplacer le code s'occupant de dessiner de la balle vers une fonction séparée.

- -

Remplacez la fonction draw() existante par les deux fonctions suivantes :

- -
function drawBall() {
-  ctx.beginPath();
-  ctx.arc(x, y, 10, 0, Math.PI*2);
-  ctx.fillStyle = "#0095DD";
-  ctx.fill();
-  ctx.closePath();
-}
-
-function draw() {
-  ctx.clearRect(0, 0, canvas.width, canvas.height);
-  drawBall();
-  x += dx;
-  y += dy;
-}
- -

Comparez votre code

- -

Vous pouvez vérifier le code de cet article avec la démo qui suit et jouer avec pour mieux comprendre comment il fonctionne :

- -

{{JSFiddleEmbed("https://jsfiddle.net/end3r/3x5foxb1/","","395")}}

- -

Exercice : Essayez de changer la vitesse de la balle en mouvement ou la direction dans laquelle elle se déplace.

- -

Prochaines étapes

- -

Nous avons dessiné nottre balle et elle se déplace mais elle ne cesse de disparaître du bord de notre canevas. Dans le troisième chapitre, nous verrons comment faire rebondir la balle contre les bords.

- -

{{PreviousNext("Games/Workflows/2D_Breakout_game_pure_JavaScript/creer_element_canvas_et_afficher", "Games/Workflows/2D_Breakout_game_pure_JavaScript/Faire_rebondir_la_balle_sur_les_murs")}}

diff --git a/files/fr/games/tutorials/2d_breakout_game_pure_javascript/move_the_ball/index.md b/files/fr/games/tutorials/2d_breakout_game_pure_javascript/move_the_ball/index.md new file mode 100644 index 0000000000..31b96ea7d8 --- /dev/null +++ b/files/fr/games/tutorials/2d_breakout_game_pure_javascript/move_the_ball/index.md @@ -0,0 +1,143 @@ +--- +title: Déplacer la balle +slug: Games/Tutorials/2D_Breakout_game_pure_JavaScript/Move_the_ball +tags: + - 2D + - Boucle + - Canevas + - Débutant + - JavaScript + - Mouvement + - Tutoriel +translation_of: Games/Tutorials/2D_Breakout_game_pure_JavaScript/Move_the_ball +original_slug: Games/Workflows/2D_Breakout_game_pure_JavaScript/Move_the_ball +--- +
{{GamesSidebar}}
+ +
{{IncludeSubnav("/fr/docs/Games")}}
+ +

{{PreviousNext("Games/Workflows/2D_Breakout_game_pure_JavaScript/creer_element_canvas_et_afficher", "Games/Workflows/2D_Breakout_game_pure_JavaScript/Faire_rebondir_la_balle_sur_les_murs")}}

+ +

Voici la deuxième étape de ce tutoriel. Vous pouvez retrouver le code source de cette leçon sur Gamedev-Canvas-workshop/lesson2.html.

+ +

Nous avons vu dans l'article précédent comment dessiner une balle, maintenant déplaçons là. Techniquement, nous afficherons la balle sur l'écran, puis nous l'effacerons et ensuite nous la repeindrons dans une position légèrement différente et ceci à chaque image afin de donner l'impression d'un mouvement (tout comme le fonctionnement du mouvement dans les films).

+ +

Définir une boucle de dessin

+ +

Afin que le dessin soit mis à jour sur le canevas à chaque image, nous allons définir une fonction draw() qui sera exécutée en continu et qui utilisera des variables pour les positions des sprites, etc. Pour qu'une fonction s'exécute de façon répétée avec JavaScript, on pourra utiliser les méthodes {{domxref("WindowTimers.setInterval()", "setInterval()")}} ou {{domxref("window.requestAnimationFrame()", "requestAnimationFrame()")}}.

+ +

Supprimez tout le JavaScript que vous avez actuellement dans votre HTML à l'exception des deux premières lignes puis ajoutez ce qui suit en dessous de ces lignes. La fonction draw() sera exécutée toutes les 10 millisecondes (environ) grâce à setInterval :

+ +
function draw() {
+  // le code pour dessiner
+}
+setInterval(draw, 10);
+ +

Grâce à la nature infinie de setInterval, la fonction draw() sera appelée toutes les 10 millisecondes, sans arrêt jusqu'à ce que nous y mettions un terme. Maintenant, dessinons la balle — ajoutons le code ci-dessous à notre fonction draw() :

+ +
ctx.beginPath();
+ctx.arc(50, 50, 10, 0, Math.PI*2);
+ctx.fillStyle = "#0095DD";
+ctx.fill();
+ctx.closePath();
+
+ +

Essayez votre code mis à jour maintenant, la balle devrait être repeinte sur chaque image.

+ +

Déplacer la balle

+ +

Pour le moment, vous ne voyez pas la balle "repeinte" car elle ne bouge pas. Améliorons tout ça. Pour commencer, au lieu d'une position bloquée à (50,50), nous allons définir un point de départ en bas et au milieu du canevas grâce aux variables x et y que nous utiliserons pour définir la position où le cercle est dessiné.

+ +

Ajoutez d'abord les deux lignes suivantes au-dessus de votre fonction draw() pour définir x et y :

+ +
var x = canvas.width/2;
+var y = canvas.height-30;
+
+ +

Ensuite, mettez à jour la fonction draw() afin d'utiliser les variables x et y dans la méthode {{domxref("CanvasRenderingContext2D.arc()","arc()")}} , comme indiqué dans la ligne mise en évidence ci-dessous :

+ +
function draw() {
+  ctx.beginPath();
+  ctx.arc(x, y, 10, 0, Math.PI*2);
+  ctx.fillStyle = "#0095DD";
+  ctx.fill();
+  ctx.closePath();
+}
+
+ +

Nous voici à la partie importante : nous voulons ajouter une valeur à x et y après que chaque image ait été dessinée afin de faire croire que la balle bouge. On définit ces valeurs comme dx et dy avec comme valeurs respectives 2 et -2. Ajoutez le code après la déclaration des variables x et y :

+ +
var dx = 2;
+var dy = -2;
+
+ +

La dernière chose à faire est de mettre à jour x et y avec nos variables dx et  dy sur chaque image, de sorte que la balle sera peinte dans la nouvelle position à chaque nouvelle image. Ajoutez les deux nouvelles lignes, indiquées ci-dessous, à votre fonction draw() :

+ +
function draw() {
+  ctx.beginPath();
+  ctx.arc(x, y, 10, 0, Math.PI*2);
+  ctx.fillStyle = "#0095DD";
+  ctx.fill();
+  ctx.closePath();
+  x += dx;
+  y += dy;
+}
+ +

Enregistrez à nouveau votre code et essayez-le dans votre navigateur. Vous devriez avoir le résultat suivant : ça fonctionne mais on a une trainée laissée par la balle derrière elle :

+ +

+ +

Effacer le canevas avant chaque image (frame)

+ +

La balle laisse une trace parce que qu'une nouveau cercle est dessiné sur chaque frame sans qu'on enlève le précédent. Pas d'inquiétude, il existe un moyen d'effacer le contenu du canevas : {{domxref("CanvasRenderingContext2D.clearRect()","clearRect()")}}. Cette méthode prend en compte quatre paramètres: les coordonnées x et y du coin supérieur gauche d'un rectangle et les coordonnées x et y du coin inférieur droit d'un rectangle. Toute la zone couverte par ce rectangle sera effacée.

+ +

Ajoutez la nouvelle ligne en surbrillance ci-dessous à la fonction draw() :

+ +
function draw() {
+  ctx.clearRect(0, 0, canvas.width, canvas.height);
+  ctx.beginPath();
+  ctx.arc(x, y, 10, 0, Math.PI*2);
+  ctx.fillStyle = "#0095DD";
+  ctx.fill();
+  ctx.closePath();
+  x += dx;
+  y += dy;
+}
+
+ +

Enregistrez votre code et essayez à nouveau. Cette fois, vous verrez la balle se déplacer sans laisser de trace. Toutes les 10 millisecondes, le canvas est effacé, la balle est dessinée sur une position donnée et les valeurs x et y sont mises à jour pour l'image suivante (en anglais, on parle de "frame").

+ +

Nettoyer notre code

+ +

Dans les prochains articles, nous allons ajouter de plus en plus de d'instructions à la fonction draw(). Mieux vaut donc la garder aussi simple et propre que possible. Commençons par déplacer le code s'occupant de dessiner de la balle vers une fonction séparée.

+ +

Remplacez la fonction draw() existante par les deux fonctions suivantes :

+ +
function drawBall() {
+  ctx.beginPath();
+  ctx.arc(x, y, 10, 0, Math.PI*2);
+  ctx.fillStyle = "#0095DD";
+  ctx.fill();
+  ctx.closePath();
+}
+
+function draw() {
+  ctx.clearRect(0, 0, canvas.width, canvas.height);
+  drawBall();
+  x += dx;
+  y += dy;
+}
+ +

Comparez votre code

+ +

Vous pouvez vérifier le code de cet article avec la démo qui suit et jouer avec pour mieux comprendre comment il fonctionne :

+ +

{{JSFiddleEmbed("https://jsfiddle.net/end3r/3x5foxb1/","","395")}}

+ +

Exercice : Essayez de changer la vitesse de la balle en mouvement ou la direction dans laquelle elle se déplace.

+ +

Prochaines étapes

+ +

Nous avons dessiné nottre balle et elle se déplace mais elle ne cesse de disparaître du bord de notre canevas. Dans le troisième chapitre, nous verrons comment faire rebondir la balle contre les bords.

+ +

{{PreviousNext("Games/Workflows/2D_Breakout_game_pure_JavaScript/creer_element_canvas_et_afficher", "Games/Workflows/2D_Breakout_game_pure_JavaScript/Faire_rebondir_la_balle_sur_les_murs")}}

diff --git a/files/fr/games/tutorials/2d_breakout_game_pure_javascript/paddle_and_keyboard_controls/index.html b/files/fr/games/tutorials/2d_breakout_game_pure_javascript/paddle_and_keyboard_controls/index.html deleted file mode 100644 index 27c2478019..0000000000 --- a/files/fr/games/tutorials/2d_breakout_game_pure_javascript/paddle_and_keyboard_controls/index.html +++ /dev/null @@ -1,138 +0,0 @@ ---- -title: Raquette et contrôle clavier -slug: Games/Tutorials/2D_Breakout_game_pure_JavaScript/Paddle_and_keyboard_controls -tags: - - Canvas - - Clavier - - Débutant - - JavaScript - - Jeux - - Tuto - - Tutoriel - - contrôle clavier - - graphique -translation_of: Games/Tutorials/2D_Breakout_game_pure_JavaScript/Paddle_and_keyboard_controls -original_slug: Games/Workflows/2D_Breakout_game_pure_JavaScript/Paddle_et_contrôle_clavier ---- -
{{GamesSidebar}}
- -
{{IncludeSubnav("/fr/docs/Games")}}
- -

{{PreviousNext("Games/Workflows/2D_Breakout_game_pure_JavaScript/Faire_rebondir_la_balle_sur_les_murs", "Games/Workflows/2D_Breakout_game_pure_JavaScript/Game_over")}}

- -

C'est la 4e étape sur 10 de ce tutoriel Gamedev Canvas. Vous pouvez retrouver le code source de cette leçon sur Gamedev-Canvas-workshop/lesson4.html.

- -

La balle rebondit librement partout et vous pourriez la regarder indéfiniment... Mais il n'y a pas d'interaction avec le joueur. Ce n'est pas un jeu si vous ne pouvez pas le contrôler ! Nous allons donc ajouter une interaction avec le joueur : une raquette contrôlable.

- -

Créer une raquette pour frapper la balle

- -

Il nous faut donc une raquette pour frapper la balle. Définissons quelques variables pour cela. Ajoutez les variables suivantes en haut de votre code, près de vos autres variables :

- -
var paddleHeight = 10;
-var paddleWidth = 75;
-var paddleX = (canvas.width-paddleWidth)/2;
- -

Ici, nous définissons la hauteur et la largeur de la raquette et son point de départ sur l'axe des x pour l'utiliser dans les calculs plus loin dans le code. Créons une fonction qui dessinera la raquette sur l'écran. Ajoutez ce qui suit juste en dessous de votre fonction drawBall() :

- -
function drawPaddle() {
-    ctx.beginPath();
-    ctx.rect(paddleX, canvas.height-paddleHeight, paddleWidth, paddleHeight);
-    ctx.fillStyle = "#0095DD";
-    ctx.fill();
-    ctx.closePath();
-}
- -

Permettre à l'utilisateur de contrôler la raquette

- -

Nous pouvons dessiner la raquette où nous voulons, mais elle doit répondre aux actions de l'utilisateur. Il est temps de mettre en place certaines commandes au clavier. Nous aurons besoin de ce qui suit :
-  

- - - -

L'état des touches peut être mémorisé dans des variables booléennes comme dans l'exemple ci-dessous. Ajoutez ces lignes près de vos variables :

- -
var rightPressed = false;
-var leftPressed = false;
- -

La valeur par défaut pour les deux est fausse car au début, car les touches ne sont pas enfoncés. Pour être informé des appuis sur les touches, nous allons mettre en place deux écouteurs d'événements. Ajoutez les lignes suivantes juste au-dessus de la ligne setInterval() au bas de votre JavaScript :

- -
document.addEventListener("keydown", keyDownHandler, false);
-document.addEventListener("keyup", keyUpHandler, false);
- -

Lorsque l'événement keydown est déclenché par l'appui d'une des touches de votre clavier (lorsqu'elles sont enfoncées), la fonction keyDownHandler() est exécutée. Le même principe est vrai pour le deuxième écouteur : les événements keyup activent la fonction keyUpHandler() (lorsque les touches cessent d'être enfoncées). Ajoutez ces lignes à votre code, sous les lignes addEventListener() :

- -
function keyDownHandler(e) {
-    if(e.key == "Right" || e.key == "ArrowRight") {
-        rightPressed = true;
-    }
-    else if(e.key == "Left" || e.key == "ArrowLeft") {
-        leftPressed = true;
-    }
-}
-
-function keyUpHandler(e) {
-    if(e.key == "Right" || e.key == "ArrowRight") {
-        rightPressed = false;
-    }
-    else if(e.key == "Left" || e.key == "ArrowLeft") {
-        leftPressed = false;
-    }
-}
- -

Quand on presse une touche du clavier, l'information est stockée dans une variable. La variable concernée est mis sur true. Quand la touche est relachée, la variable revient à  false.

- -

Les deux fonctions prennent un événement comme paramètre, représenté par la variable e. De là, vous pouvez obtenir des informations utiles : la propriété key contient les informations sur la touche qui a été enfoncée.  La plupart des navigateurs utilisent ArrowRight et ArrowLeft pour les touches de flèche gauche/droite, mais nous devons également tester Right and Left pour prendre en charge les navigateurs IE/Edge. Si la touche gauche est enfoncé, la variable leftPressed est mise à true, et lorsqu'elle est relâchée, la variable leftPressed est mise à false. Le même principe s'applique à la touche droite et à la variable RightPressed.

- -

La logique du déplacement de la raquette

- -

Nous avons maintenant mis en place les variables pour stocker les informations sur les touches pressées, les écouteurs d'événements et les fonctions associées. Ensuite, nous allons entrer dans le code pour utiliser tout ce que nous venons de configurer et pour déplacer la palette à l'écran. Dans la fonction draw(), nous vérifierons si les touches gauche ou droite sont pressées lors du rendu de chaque image. Notre code pourrait ressembler à ceci :

- -
if(rightPressed) {
-    paddleX += 7;
-}
-else if(leftPressed) {
-    paddleX -= 7;
-}
- -

Si la touche gauche est enfoncée, la raquette se déplacera de sept pixels vers la gauche, et si la droite est enfoncé, la raquette se déplacera de sept pixels vers la droite. Cela fonctionne actuellement, mais la raquette disparaît du bord du canevas si nous maintenons l'une ou l'autre des touches trop longtemps enfoncée. Nous pourrions améliorer cela et déplacer la raquette uniquement dans les limites du canevas en changeant le code comme ceci :

- -
if(rightPressed) {
-    paddleX += 7;
-    if (paddleX + paddleWidth > canvas.width){
-        paddleX = canvas.width - paddleWidth;
-    }
-}
-else if(leftPressed) {
-    paddleX -= 7;
-    if (paddleX < 0){
-        paddleX = 0;
-    }
-}
- -

La position de paddleX que nous utilisons variera entre 0 sur le côté gauche du canevas et canvas.width-paddleWidth sur le côté droit, ce qui fonctionnera exactement comme nous le souhaitons.
-
- Ajoutez le bloc de code ci-dessus dans la fonction draw() en bas, juste au-dessus de l'accolade de fermeture.
-
- Il ne reste plus qu'à appeler la fonction drawPaddle() depuis la fonction draw(), pour l'afficher réellement à l'écran. Ajoutez la ligne suivante à l'intérieur de votre fonction draw(), juste en dessous de la ligne qui appelle drawBall() :

- -
drawPaddle();
-
- -

Comparez votre code

- -

Voici le code de référence auquel vous pouvez comparer le vôtre :

- -

{{JSFiddleEmbed("https://jsfiddle.net/end3r/tgn3zscj/","","395")}}

- -

Exercice: faites aller la raquette plus vite ou plus lentement, ou changez sa taille.

- -

Dans le prochain chapitre

- -

Maintenant, nous avons quelque chose qui ressemble à un jeu. Le seul problème, c'est que vous pouvez continuer à frapper la balle avec la raquette indéfiniment. Tout cela va changer dans le cinquième chapitre, Game over, lorsque nous commencerons à ajouter un état de fin de partie pour notre jeu.

- -

{{PreviousNext("Games/Workflows/2D_Breakout_game_pure_JavaScript/Faire_rebondir_la_balle_sur_les_murs", "Games/Workflows/2D_Breakout_game_pure_JavaScript/Game_over")}}

diff --git a/files/fr/games/tutorials/2d_breakout_game_pure_javascript/paddle_and_keyboard_controls/index.md b/files/fr/games/tutorials/2d_breakout_game_pure_javascript/paddle_and_keyboard_controls/index.md new file mode 100644 index 0000000000..27c2478019 --- /dev/null +++ b/files/fr/games/tutorials/2d_breakout_game_pure_javascript/paddle_and_keyboard_controls/index.md @@ -0,0 +1,138 @@ +--- +title: Raquette et contrôle clavier +slug: Games/Tutorials/2D_Breakout_game_pure_JavaScript/Paddle_and_keyboard_controls +tags: + - Canvas + - Clavier + - Débutant + - JavaScript + - Jeux + - Tuto + - Tutoriel + - contrôle clavier + - graphique +translation_of: Games/Tutorials/2D_Breakout_game_pure_JavaScript/Paddle_and_keyboard_controls +original_slug: Games/Workflows/2D_Breakout_game_pure_JavaScript/Paddle_et_contrôle_clavier +--- +
{{GamesSidebar}}
+ +
{{IncludeSubnav("/fr/docs/Games")}}
+ +

{{PreviousNext("Games/Workflows/2D_Breakout_game_pure_JavaScript/Faire_rebondir_la_balle_sur_les_murs", "Games/Workflows/2D_Breakout_game_pure_JavaScript/Game_over")}}

+ +

C'est la 4e étape sur 10 de ce tutoriel Gamedev Canvas. Vous pouvez retrouver le code source de cette leçon sur Gamedev-Canvas-workshop/lesson4.html.

+ +

La balle rebondit librement partout et vous pourriez la regarder indéfiniment... Mais il n'y a pas d'interaction avec le joueur. Ce n'est pas un jeu si vous ne pouvez pas le contrôler ! Nous allons donc ajouter une interaction avec le joueur : une raquette contrôlable.

+ +

Créer une raquette pour frapper la balle

+ +

Il nous faut donc une raquette pour frapper la balle. Définissons quelques variables pour cela. Ajoutez les variables suivantes en haut de votre code, près de vos autres variables :

+ +
var paddleHeight = 10;
+var paddleWidth = 75;
+var paddleX = (canvas.width-paddleWidth)/2;
+ +

Ici, nous définissons la hauteur et la largeur de la raquette et son point de départ sur l'axe des x pour l'utiliser dans les calculs plus loin dans le code. Créons une fonction qui dessinera la raquette sur l'écran. Ajoutez ce qui suit juste en dessous de votre fonction drawBall() :

+ +
function drawPaddle() {
+    ctx.beginPath();
+    ctx.rect(paddleX, canvas.height-paddleHeight, paddleWidth, paddleHeight);
+    ctx.fillStyle = "#0095DD";
+    ctx.fill();
+    ctx.closePath();
+}
+ +

Permettre à l'utilisateur de contrôler la raquette

+ +

Nous pouvons dessiner la raquette où nous voulons, mais elle doit répondre aux actions de l'utilisateur. Il est temps de mettre en place certaines commandes au clavier. Nous aurons besoin de ce qui suit :
+  

+ + + +

L'état des touches peut être mémorisé dans des variables booléennes comme dans l'exemple ci-dessous. Ajoutez ces lignes près de vos variables :

+ +
var rightPressed = false;
+var leftPressed = false;
+ +

La valeur par défaut pour les deux est fausse car au début, car les touches ne sont pas enfoncés. Pour être informé des appuis sur les touches, nous allons mettre en place deux écouteurs d'événements. Ajoutez les lignes suivantes juste au-dessus de la ligne setInterval() au bas de votre JavaScript :

+ +
document.addEventListener("keydown", keyDownHandler, false);
+document.addEventListener("keyup", keyUpHandler, false);
+ +

Lorsque l'événement keydown est déclenché par l'appui d'une des touches de votre clavier (lorsqu'elles sont enfoncées), la fonction keyDownHandler() est exécutée. Le même principe est vrai pour le deuxième écouteur : les événements keyup activent la fonction keyUpHandler() (lorsque les touches cessent d'être enfoncées). Ajoutez ces lignes à votre code, sous les lignes addEventListener() :

+ +
function keyDownHandler(e) {
+    if(e.key == "Right" || e.key == "ArrowRight") {
+        rightPressed = true;
+    }
+    else if(e.key == "Left" || e.key == "ArrowLeft") {
+        leftPressed = true;
+    }
+}
+
+function keyUpHandler(e) {
+    if(e.key == "Right" || e.key == "ArrowRight") {
+        rightPressed = false;
+    }
+    else if(e.key == "Left" || e.key == "ArrowLeft") {
+        leftPressed = false;
+    }
+}
+ +

Quand on presse une touche du clavier, l'information est stockée dans une variable. La variable concernée est mis sur true. Quand la touche est relachée, la variable revient à  false.

+ +

Les deux fonctions prennent un événement comme paramètre, représenté par la variable e. De là, vous pouvez obtenir des informations utiles : la propriété key contient les informations sur la touche qui a été enfoncée.  La plupart des navigateurs utilisent ArrowRight et ArrowLeft pour les touches de flèche gauche/droite, mais nous devons également tester Right and Left pour prendre en charge les navigateurs IE/Edge. Si la touche gauche est enfoncé, la variable leftPressed est mise à true, et lorsqu'elle est relâchée, la variable leftPressed est mise à false. Le même principe s'applique à la touche droite et à la variable RightPressed.

+ +

La logique du déplacement de la raquette

+ +

Nous avons maintenant mis en place les variables pour stocker les informations sur les touches pressées, les écouteurs d'événements et les fonctions associées. Ensuite, nous allons entrer dans le code pour utiliser tout ce que nous venons de configurer et pour déplacer la palette à l'écran. Dans la fonction draw(), nous vérifierons si les touches gauche ou droite sont pressées lors du rendu de chaque image. Notre code pourrait ressembler à ceci :

+ +
if(rightPressed) {
+    paddleX += 7;
+}
+else if(leftPressed) {
+    paddleX -= 7;
+}
+ +

Si la touche gauche est enfoncée, la raquette se déplacera de sept pixels vers la gauche, et si la droite est enfoncé, la raquette se déplacera de sept pixels vers la droite. Cela fonctionne actuellement, mais la raquette disparaît du bord du canevas si nous maintenons l'une ou l'autre des touches trop longtemps enfoncée. Nous pourrions améliorer cela et déplacer la raquette uniquement dans les limites du canevas en changeant le code comme ceci :

+ +
if(rightPressed) {
+    paddleX += 7;
+    if (paddleX + paddleWidth > canvas.width){
+        paddleX = canvas.width - paddleWidth;
+    }
+}
+else if(leftPressed) {
+    paddleX -= 7;
+    if (paddleX < 0){
+        paddleX = 0;
+    }
+}
+ +

La position de paddleX que nous utilisons variera entre 0 sur le côté gauche du canevas et canvas.width-paddleWidth sur le côté droit, ce qui fonctionnera exactement comme nous le souhaitons.
+
+ Ajoutez le bloc de code ci-dessus dans la fonction draw() en bas, juste au-dessus de l'accolade de fermeture.
+
+ Il ne reste plus qu'à appeler la fonction drawPaddle() depuis la fonction draw(), pour l'afficher réellement à l'écran. Ajoutez la ligne suivante à l'intérieur de votre fonction draw(), juste en dessous de la ligne qui appelle drawBall() :

+ +
drawPaddle();
+
+ +

Comparez votre code

+ +

Voici le code de référence auquel vous pouvez comparer le vôtre :

+ +

{{JSFiddleEmbed("https://jsfiddle.net/end3r/tgn3zscj/","","395")}}

+ +

Exercice: faites aller la raquette plus vite ou plus lentement, ou changez sa taille.

+ +

Dans le prochain chapitre

+ +

Maintenant, nous avons quelque chose qui ressemble à un jeu. Le seul problème, c'est que vous pouvez continuer à frapper la balle avec la raquette indéfiniment. Tout cela va changer dans le cinquième chapitre, Game over, lorsque nous commencerons à ajouter un état de fin de partie pour notre jeu.

+ +

{{PreviousNext("Games/Workflows/2D_Breakout_game_pure_JavaScript/Faire_rebondir_la_balle_sur_les_murs", "Games/Workflows/2D_Breakout_game_pure_JavaScript/Game_over")}}

diff --git a/files/fr/games/tutorials/2d_breakout_game_pure_javascript/track_the_score_and_win/index.html b/files/fr/games/tutorials/2d_breakout_game_pure_javascript/track_the_score_and_win/index.html deleted file mode 100644 index 55ed6a8aa3..0000000000 --- a/files/fr/games/tutorials/2d_breakout_game_pure_javascript/track_the_score_and_win/index.html +++ /dev/null @@ -1,92 +0,0 @@ ---- -title: Suivre le score et gagner -slug: Games/Tutorials/2D_Breakout_game_pure_JavaScript/Track_the_score_and_win -translation_of: Games/Tutorials/2D_Breakout_game_pure_JavaScript/Track_the_score_and_win -original_slug: Games/Workflows/2D_Breakout_game_pure_JavaScript/Track_the_score_and_win ---- -
{{GamesSidebar}}
- -
{{IncludeSubnav("/fr/docs/Games")}}
- -

{{PreviousNext("Games/Workflows/2D_Breakout_game_pure_JavaScript/detection_colisions", "Games/Workflows/2D_Breakout_game_pure_JavaScript/Mouse_controls")}}

- -

Ceci est la 8e étape de ce tutoriel Gamedev Canvas. Vous pouvez trouver le code source tel qu'il devrait être après avoir terminé cette leçon à : Gamedev-Canvas-workshop/lesson8.html.

- -

Détruire les briques est vraiment cool, mais pour être encore meilleur le jeu pourrait attribuer des points pour chaque brique touchée et compter le score total.

- -

Calculer le score

- -

Si vous pouvez voir votre score durant le jeu, vous pourrez impressioner vos amis. Vous avez besoin d'une variable pour stocker le score. Ajoutez ce qui suit dans votre JavaScript après le reste de vos variables : 

- -
var score = 0;
- -

Vous avez aussi besoin d'une fonction drawScore(), pour créer et mettre à jour l'affichage du score. Ajoutez ce qui suit après la fonction de détection de collision collisionDetection():

- -
function drawScore() {
-    ctx.font = "16px Arial";
-    ctx.fillStyle = "#0095DD";
-    ctx.fillText("Score: "+score, 8, 20);
-}
- -

Dessiner du texte sur un canvas revient à dessiner une forme. La définition de la police est identique à celle en CSS — vous pouvez définir la taille et le type avec la méthode   {{domxref("CanvasRenderingContext2D.font","font()")}}. Puis utilisez {{domxref("CanvasRenderingContext2D.fillStyle()","fillStyle()")}} pour définir la couleur de la police et {{domxref("CanvasRenderingContext2D.fillText","fillText()")}} pour définir la position du texte sur le canevas. Le premier paramètre est le texte lui-même — le code ci-dessus indique le nombre actuel de points — et les deux derniers paramètres sont les coordonnées où le texte est placé sur le canevas.

- -

Pour attribuer le score à chaque collision avec une brique, ajoutez une ligne à la fonction collisionDetection() afin d'incrémenter la valeur de la variable score à chaque détection d'une collision. Ajoutez à votre code la ligne mise en évidence ci-dessous :

- -
function collisionDetection() {
-    for(var c=0; c<brickColumnCount; c++) {
-        for(var r=0; r<brickRowCount; r++) {
-            var b = bricks[c][r];
-            if(b.status == 1) {
-                if(x > b.x && x < b.x+brickWidth && y > b.y && y < b.y+brickHeight) {
-                    dy = -dy;
-                    b.status = 0;
-                    score++;
-                }
-            }
-        }
-    }
-}
- -

Appelez la fonction drawScore() dans la fonction draw() pour garder le score à jour à chaque nouvelle frame — ajoutez la ligne suivante dans la fonction draw(), en dessous de l'appel à drawPaddle() :

- -
drawScore();
- -

Ajoutez un message de victoire lorsque toutes les briques ont été détruites

- -

Le comptage des points fonctionne bien, mais vous ne les compterez pas indéfiniment. Alors qu'en est-il du score lorsque toutes les briques ont été détruites ? Après tout c'est l'objectif principal du jeu. Vous devez donc afficher un message de victoire si toutes les briques ont été détruites. Ajoutez la section mise en évidence dans votre fonction collisionDetection():

- -
function collisionDetection() {
-    for(var c=0; c<brickColumnCount; c++) {
-        for(var r=0; r<brickRowCount; r++) {
-            var b = bricks[c][r];
-            if(b.status == 1) {
-                if(x > b.x && x < b.x+brickWidth && y > b.y && y < b.y+brickHeight) {
-                    dy = -dy;
-                    b.status = 0;
-                    score++;
-                    if(score == brickRowCount*brickColumnCount) {
-                        alert("C'est gagné, Bravo!");
-                        document.location.reload();
-                        clearInterval(interval); // Needed for Chrome to end game
-                    }
-                }
-            }
-        }
-    }
-}
- -

Grâce à ça, les utilisateurs peuvent réellement gagner le jeu. La fonction document.location.reload() recharge la page et redémarre le jeu au clic sur le bouton d'alerte.

- -

Comparez votre code

- -

Le code réalisé fonctionne et ressemble à cela, au cas où vous voudriez le comparer avec le vôtre : 

- -

{{JSFiddleEmbed("https://jsfiddle.net/raymondjplante/b3z2Lpu9/","","395")}}

- -

Exercice: Ajoutez plus de points par brique touchée et indiquez le nombre de points gagnés dans la boîte d'alerte de fin de partie.

- -

Prochaine étape

- -

Le jeu est plutôt réussi à ce stade. Dans la prochaine leçon, vous le rendrez plus attraynt en ajoutant le contrôle à la souris.

- -

{{PreviousNext("Games/Workflows/2D_Breakout_game_pure_JavaScript/detection_colisions", "Games/Workflows/2D_Breakout_game_pure_JavaScript/Mouse_controls")}}

diff --git a/files/fr/games/tutorials/2d_breakout_game_pure_javascript/track_the_score_and_win/index.md b/files/fr/games/tutorials/2d_breakout_game_pure_javascript/track_the_score_and_win/index.md new file mode 100644 index 0000000000..55ed6a8aa3 --- /dev/null +++ b/files/fr/games/tutorials/2d_breakout_game_pure_javascript/track_the_score_and_win/index.md @@ -0,0 +1,92 @@ +--- +title: Suivre le score et gagner +slug: Games/Tutorials/2D_Breakout_game_pure_JavaScript/Track_the_score_and_win +translation_of: Games/Tutorials/2D_Breakout_game_pure_JavaScript/Track_the_score_and_win +original_slug: Games/Workflows/2D_Breakout_game_pure_JavaScript/Track_the_score_and_win +--- +
{{GamesSidebar}}
+ +
{{IncludeSubnav("/fr/docs/Games")}}
+ +

{{PreviousNext("Games/Workflows/2D_Breakout_game_pure_JavaScript/detection_colisions", "Games/Workflows/2D_Breakout_game_pure_JavaScript/Mouse_controls")}}

+ +

Ceci est la 8e étape de ce tutoriel Gamedev Canvas. Vous pouvez trouver le code source tel qu'il devrait être après avoir terminé cette leçon à : Gamedev-Canvas-workshop/lesson8.html.

+ +

Détruire les briques est vraiment cool, mais pour être encore meilleur le jeu pourrait attribuer des points pour chaque brique touchée et compter le score total.

+ +

Calculer le score

+ +

Si vous pouvez voir votre score durant le jeu, vous pourrez impressioner vos amis. Vous avez besoin d'une variable pour stocker le score. Ajoutez ce qui suit dans votre JavaScript après le reste de vos variables : 

+ +
var score = 0;
+ +

Vous avez aussi besoin d'une fonction drawScore(), pour créer et mettre à jour l'affichage du score. Ajoutez ce qui suit après la fonction de détection de collision collisionDetection():

+ +
function drawScore() {
+    ctx.font = "16px Arial";
+    ctx.fillStyle = "#0095DD";
+    ctx.fillText("Score: "+score, 8, 20);
+}
+ +

Dessiner du texte sur un canvas revient à dessiner une forme. La définition de la police est identique à celle en CSS — vous pouvez définir la taille et le type avec la méthode   {{domxref("CanvasRenderingContext2D.font","font()")}}. Puis utilisez {{domxref("CanvasRenderingContext2D.fillStyle()","fillStyle()")}} pour définir la couleur de la police et {{domxref("CanvasRenderingContext2D.fillText","fillText()")}} pour définir la position du texte sur le canevas. Le premier paramètre est le texte lui-même — le code ci-dessus indique le nombre actuel de points — et les deux derniers paramètres sont les coordonnées où le texte est placé sur le canevas.

+ +

Pour attribuer le score à chaque collision avec une brique, ajoutez une ligne à la fonction collisionDetection() afin d'incrémenter la valeur de la variable score à chaque détection d'une collision. Ajoutez à votre code la ligne mise en évidence ci-dessous :

+ +
function collisionDetection() {
+    for(var c=0; c<brickColumnCount; c++) {
+        for(var r=0; r<brickRowCount; r++) {
+            var b = bricks[c][r];
+            if(b.status == 1) {
+                if(x > b.x && x < b.x+brickWidth && y > b.y && y < b.y+brickHeight) {
+                    dy = -dy;
+                    b.status = 0;
+                    score++;
+                }
+            }
+        }
+    }
+}
+ +

Appelez la fonction drawScore() dans la fonction draw() pour garder le score à jour à chaque nouvelle frame — ajoutez la ligne suivante dans la fonction draw(), en dessous de l'appel à drawPaddle() :

+ +
drawScore();
+ +

Ajoutez un message de victoire lorsque toutes les briques ont été détruites

+ +

Le comptage des points fonctionne bien, mais vous ne les compterez pas indéfiniment. Alors qu'en est-il du score lorsque toutes les briques ont été détruites ? Après tout c'est l'objectif principal du jeu. Vous devez donc afficher un message de victoire si toutes les briques ont été détruites. Ajoutez la section mise en évidence dans votre fonction collisionDetection():

+ +
function collisionDetection() {
+    for(var c=0; c<brickColumnCount; c++) {
+        for(var r=0; r<brickRowCount; r++) {
+            var b = bricks[c][r];
+            if(b.status == 1) {
+                if(x > b.x && x < b.x+brickWidth && y > b.y && y < b.y+brickHeight) {
+                    dy = -dy;
+                    b.status = 0;
+                    score++;
+                    if(score == brickRowCount*brickColumnCount) {
+                        alert("C'est gagné, Bravo!");
+                        document.location.reload();
+                        clearInterval(interval); // Needed for Chrome to end game
+                    }
+                }
+            }
+        }
+    }
+}
+ +

Grâce à ça, les utilisateurs peuvent réellement gagner le jeu. La fonction document.location.reload() recharge la page et redémarre le jeu au clic sur le bouton d'alerte.

+ +

Comparez votre code

+ +

Le code réalisé fonctionne et ressemble à cela, au cas où vous voudriez le comparer avec le vôtre : 

+ +

{{JSFiddleEmbed("https://jsfiddle.net/raymondjplante/b3z2Lpu9/","","395")}}

+ +

Exercice: Ajoutez plus de points par brique touchée et indiquez le nombre de points gagnés dans la boîte d'alerte de fin de partie.

+ +

Prochaine étape

+ +

Le jeu est plutôt réussi à ce stade. Dans la prochaine leçon, vous le rendrez plus attraynt en ajoutant le contrôle à la souris.

+ +

{{PreviousNext("Games/Workflows/2D_Breakout_game_pure_JavaScript/detection_colisions", "Games/Workflows/2D_Breakout_game_pure_JavaScript/Mouse_controls")}}

diff --git a/files/fr/games/tutorials/html5_gamedev_phaser_device_orientation/index.html b/files/fr/games/tutorials/html5_gamedev_phaser_device_orientation/index.html deleted file mode 100644 index 50ed7d56f1..0000000000 --- a/files/fr/games/tutorials/html5_gamedev_phaser_device_orientation/index.html +++ /dev/null @@ -1,444 +0,0 @@ ---- -title: Jeu 2D avec l'API Device orientation -slug: Games/Tutorials/HTML5_Gamedev_Phaser_Device_Orientation -translation_of: Games/Tutorials/HTML5_Gamedev_Phaser_Device_Orientation -original_slug: Games/Workflows/HTML5_Gamedev_Phaser_Device_Orientation_FR ---- -
{{GamesSidebar}}

{{IncludeSubnav("/fr/docs/Jeux")}}  

- -

Dans ce tutoriel, nous allons passer par le processus de construction d'un jeu mobile HTML5 qui utilise les API  Device Orientation  et Vibration   pour améliorer le "gameplay" et est construit avec le "framework" Phaser . La connaissance JavaScript de base est recommandée pour tirer le meilleur parti de ce tutoriel.

- -

Exemple de jeu

- -

A la fin de ce tutoriel, vous aurez une démo entièrement fonctionnelle du jeu : Cyber Orb. Il ressemblera à quelque chose comme cela :

- -

- -

Le framework Phaser

- -

Phaser est un framework pour créer des jeux mobiles et PC en utilisant les technologies HTML5. Malgré son manque de maturité, la communauté est assez active, et il évolue rapidement.  Les sources sont sur Github, lisez y la documentation de base, jetez un œil aux exemples. Le framework Phaser offre un ensemble d'outils qui permettent d'accélérer le développement et aident à mettre en oeuvre les tâches courantes nécessaires au développement d'un  jeu.

- -

Mise en place du projet

- -

Vous pouvez voir le code d'exemple du projet sur GitHub. La structure n'est pas compliquée : le point de départ est le fichier index.html où nous initialisons le framework, mettons en place le {{htmlelement("canvas")}} et jouons au jeu.

- -

- -

Vous pouvez l'ouvir avec votre navigateur préféré pour essayer le jeu. Il y a aussi trois dossiers :

- - - -

Mettre en place le canevas

- -

Nous voulons un rendu de notre jeu sur un canevas, mais nous ne le ferons pas manuellement - cela sera pris en charge par le framework. Disons-le : notre point de départ est le fichier index.html avec le contenu suivant. Vous pouvez créer vous-même si vous voulez suivre :

- -
<!DOCTYPE html>
-<html>
-<head>
-    <meta charset="utf-8" />
-    <title>Cyber Orb demo</title>
-    <style> body { margin: 0; background: #333; } </style>
-    <script src="src/phaser-arcade-physics.2.2.2.min.js"></script>
-    <script src="src/Boot.js"></script>
-    <script src="src/Preloader.js"></script>
-    <script src="src/MainMenu.js"></script>
-    <script src="src/Howto.js"></script>
-    <script src="src/Game.js"></script>
-</head>
-<body>
-<script>
-(function() {
-    var game = new Phaser.Game(320, 480, Phaser.CANVAS, 'game');
-    game.state.add('Boot', Ball.Boot);
-    game.state.add('Preloader', Ball.Preloader);
-    game.state.add('MainMenu', Ball.MainMenu);
-    game.state.add('Howto', Ball.Howto);
-    game.state.add('Game', Ball.Game);
-    game.state.start('Boot');
-})();
-</script>
-</body>
-</html>
- -

Ça ressemble à une simple page de site HTML avec des éléments basiques dans la balise <head> (en-tête) : police de caractères, titre, CSS et inclusion des fichiers Javascript. Le <body> (corps) contient l'initialisation du framework et la définition des états du jeu.

- -
var game = new Phaser.Game(320, 480, Phaser.CANVAS, 'game');
- -

La ligne ci-dessus va initialiser l'instance de Phaser - les arguments sont la largeur et la hauteur du canevas, la méthode de rendu (nous utilisons CANVAS, mais il y a aussi les options WEBGL et AUTO disponibles) et l'ID optionnel du conteneur DOM dans lequel nous voulons placer le canevas. Si rien n'est spécifié dans ce dernier argument, ou si l'élément n'est pas trouvé, le canvas sera ajouté à la balise <body>. Sans le framework, pour ajouter l'élément canvas à la page, il faudrait écrire quelque chose comme ça dans la balise <body>:

- -
<canvas id='game' width='320' height='480'></canvas>
- -

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 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 :

- -
game.state.add('Boot', Ball.Boot);
- -

La première valeur est le nom de l'état et la seconde est l'objet que nous voulons lui assigner. La méthode start démarre l'état donné et le rend actif. Voyons ce que les états sont en réalité. 

- -

Gestion des états du jeu

- -

Les états du jeu dans Phaser sont différentes phases du jeu. Dans notre cas, ils sont chargés depuis des fichiers Javascript pour mieux les maintenir par la suite. Dans ce jeu nous avons les états : Boot (démarrage), Preloader (préchargement), MainMenu (menu principal),  Howto (comment jouer) et Game (jeu). Boot s'occupe d'initialiser quelques paramètres, Preloader charge tous les graphismes et les sons, MainMenu est le menu avec le bouton start, Howto affiche les instructions "comment jouer" et Game, est l'état qui permet de  jouer. Passons rapidement au contenu de ces états.

- -

Boot.js (démarrage)

- -

L'état Boot est le premier du jeu.

- -
var Ball = {
-    _WIDTH: 320,
-    _HEIGHT: 480
-};
-Ball.Boot = function(game) {};
-Ball.Boot.prototype = {
-    preload: function() {
-        this.load.image('preloaderBg', 'img/loading-bg.png');
-        this.load.image('preloaderBar', 'img/loading-bar.png');
-    },
-    create: function() {
-        this.game.scale.scaleMode = Phaser.ScaleManager.SHOW_ALL;
-        this.game.scale.pageAlignHorizontally = true;
-        this.game.scale.pageAlignVertically = true;
-        this.game.state.start('Preloader');
-    }
-};
- -

Le principal objet "Ball"  est défini et nous ajoutons deux variables appelées _WIDTH et _HEIGHT qui sont la largeur et la hauteur du caneva du jeu — elles nous aideront à positionner les éléments à l'écran. Nous chargeons d'abord deux images qui seront utilisées plus tard dans l'état Preload (préchargement) pour montrer la progression du chargement de tous les autres éléments. La fonction create contient une configuration de base : nous configurons la mise à l'échelle et l'alignement du canevas et passons à l'état Preload lorsque tout est prêt.

- -

Preloader.js (préchargement)

- -

L'état Preloader prend soin de charger tous les éléments :

- -
Ball.Preloader = function(game) {};
-Ball.Preloader.prototype = {
-    preload: function() {
-        this.preloadBg = this.add.sprite((Ball._WIDTH-297)*0.5, (Ball._HEIGHT-145)*0.5, 'preloaderBg');
-        this.preloadBar = this.add.sprite((Ball._WIDTH-158)*0.5, (Ball._HEIGHT-50)*0.5, 'preloaderBar');
-        this.load.setPreloadSprite(this.preloadBar);
-
-        this.load.image('ball', 'img/ball.png');
-        // ...
-        this.load.spritesheet('button-start', 'img/button-start.png', 146, 51);
-        // ...
-        this.load.audio('audio-bounce', ['audio/bounce.ogg', 'audio/bounce.mp3', 'audio/bounce.m4a']);
-    },
-    create: function() {
-        this.game.state.start('MainMenu');
-    }
-};
- -

Il y a des images uniques, des feuilles de "sprites" et des fichiers audio chargés par le "framework". Dans cet état, la preloadBar (barre du préchargement) affiche la progression à l'écran. Cette progression des éléments chargés est visualisée par le framework avec l'utilisation d'une image. Avec chaque élément chargé, vous pouvez voir plus de l'image preloadBar: de 0% à 100%, mis à jour sur chaque image. Une fois que tous les éléments sont chargés, l'état MainMenu est lancé.

- - - -

L'état MainMenu montre le menu principal du jeu, sur lequel vous pouvez lancer le jeu en cliquant sur le bouton.

- -
Ball.MainMenu = function(game) {};
-Ball.MainMenu.prototype = {
-    create: function() {
-        this.add.sprite(0, 0, 'screen-mainmenu');
-        this.gameTitle = this.add.sprite(Ball._WIDTH*0.5, 40, 'title');
-        this.gameTitle.anchor.set(0.5,0);
-        this.startButton = this.add.button(Ball._WIDTH*0.5, 200, 'button-start', this.startGame, this, 2, 0, 1);
-        this.startButton.anchor.set(0.5,0);
-        this.startButton.input.useHandCursor = true;
-    },
-    startGame: function() {
-        this.game.state.start('Howto');
-    }
-};
- -

Pour créer un nouveau bouton, il y a la méthode add.button avec la liste suivante d'arguments facultatifs :

- - - -

Anchor.set configure le point d'ancrage du bouton sur lequel tous les calculs de la position sont appliqués. Dans notre cas, il est ancré à mi-chemin du bord gauche et au début du bord supérieur, de sorte qu'il peut être facilement centré horizontalement sur l'écran sans avoir besoin de connaître sa largeur.

- -

Lorsque le bouton de démarrage est enfoncé, au lieu de sauter directement dans l'action, le jeu affichera l'écran avec les informations sur la façon de jouer.

- -

Howto.js (comment jouer)

- -
Ball.Howto = function(game) {
-};
-Ball.Howto.prototype = {
-    create: function() {
-        this.buttonContinue = this.add.button(0, 0, 'screen-howtoplay', this.startGame, this);
-    },
-    startGame: function() {
-        this.game.state.start('Game');
-    }
-};
- -

L'état Howto affiche les instructions du jeu à l'écran avant de commencer le jeu. Après avoir cliqué sur l'écran, le jeu réel est lancé.

- -

Game.js (jeu)

- -

L'état game à partir du fichier Game.js est le lieu où toute la magie opère. Toute l'initialisation est dans la fonction create () (lancée une fois au début du jeu). Après cela, certaines fonctionnalités nécessiteront d'autres codes à contrôler — nous écrirons nos propres fonctions pour gérer des tâches plus complexes. En particulier, notez  la fonction update () exécutée à chaque frame, qui met à jour des choses telles que la position de la balle.

- -
Ball.Game = function(game) {};
-Ball.Game.prototype = {
-    create: function() {},
-    initLevels: function() {},
-    showLevel: function(level) {},
-    updateCounter: function() {},
-    managePause: function() {},
-    manageAudio: function() {},
-    update: function() {},
-    wallCollision: function() {},
-    handleOrientation: function(e) {},
-    finishLevel: function() {}
-};
- -

Les fonctions create et update sont spécifiques au framework, tandis que d'autres seront nos créations :

- - - -

Ajout de la balle et de ses mécanismes de mouvement

- -

D'abord, dans la fonction create, initialisons l'objet 'ball' et assignons lui quelques propriétés :

- -
ball = this.add.sprite((320-22)/2, 450, 'ball');
-ball.anchor.setTo(0.5, 0.5);
-ball.body.bounce.setTo(0.3, 0.3);
-ball.body.setCircle(10, 11, 11);
-ball.body.linearDamping = 1;
- -

On ajoute un "sprite" à une place donnée sur l'écran en utilisant l'image 'ball'. On ajoute aussi le point de repère de tous les calculs physiques ( 'anchor' ) au milieu de la balle,  permettant au moteur physique d'arcade (qui gère toute la physique du mouvement de la balle) et en définissant la taille du corps pour la détection de collision . La propriété bounce est utilisée pour définir le rebondissement de la balle quand elle frappe les obstacles.

- -

Contrôle de la balle

- -

C'est déjà sympa d'avoir une balle prête à être lancée dans la zone de jeu, mais c'est aussi important de pouvoir le faire. Maintenant on va ajouter la possibilité de contrôler la balle avec le clavier sur les ordinateurs, et ensuite on ajoutera l'implémentation de l'API  Device Orientation ( gyroscope). Maintenant, concentrons-nous sur le clavier en ajoutant la ligne suivante pour la fonction create() :

- -
this.keys = this.game.input.keyboard.createCursorKeys();
- -

Comme vous pouvez le voir, Phaser a une fonction spéciale  createCursorKeys() qui nous donnera un objet avec des gestionnaires d'événements pour les quatre touches fléchées : haut, bas, gauche et droite. 

- -

Ensuite, nous allons ajouter le code suivant dans la fonction update (), il sera lancé à chaque "frame". L'objet this.keys sera vérifié aux pressions de touche du joueur, la balle réagira donc en conséquence :

- -
if(this.keys.left.isDown) {
-    this.ball.body.velocity.x -= this.movementForce;
-}
-else if(this.keys.right.isDown) {
-    this.ball.body.velocity.x += this.movementForce;
-}
-if(this.keys.up.isDown) {
-    this.ball.body.velocity.y -= this.movementForce;
-}
-else if(this.keys.down.isDown) {
-    this.ball.body.velocity.y += this.movementForce;
-}
- -

De cette manière on peut vérifier quelle touche est pressée à un moment donné et appliquer une force définie à la balle, ce qui a pour effet d'augmenter sa vélocité dans la bonne direction.

- -

Implémentation de l'API Device Orientation (gyroscopique)

- -

La particularité du jeu est qu'il utilise l'API gyroscopique sur les mobiles. Grâce à elle, vous pouvez jouer au jeu en inclinant l'appareil dans la direction où vous voulez que la balle aille. Voilà le code de la fonction  create() qui l'implémente :

- -
window.addEventListener("deviceorientation", this.handleOrientation, true);
- -

L'ajout d'un évènement "listener" à l'évenement "deviceorientation" et la modification de la fonction handleOrientationressembleront à ceci :

- -
handleOrientation: function(e) {
-    var x = e.gamma;
-    var y = e.beta;
-    Ball._player.body.velocity.x += x;
-    Ball._player.body.velocity.y += y;
-}
- -

Plus l'appareil est incliné, plus la force appliquée à la balle et sa vélocité sont importantes.

- -

- -
-

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. 

-
- -

Ajout du trou

- -

L'objectif principal du jeu est de déplacer la balle du point de départ vers le point d'arrivée, qui est dans notre cas, un trou dans le sol. L'implémentation ressemble beaucoup à celle de la création de la balle et est ajoutée dans la fonction create() de l'état Game :

- -
this.hole = this.add.sprite(Ball._WIDTH*0.5, 90, 'hole');
-this.physics.enable(this.hole, Phaser.Physics.ARCADE);
-this.hole.anchor.set(0.5);
-this.hole.body.setSize(2, 2);
- -

La seule différence est que 'hole.body' est mis à immovable(fixe), il ne bougera donc pas quand la balle le touchera et la collision sera alors calculée ( ce point sera approfondit plus loin dans cet article ).

- -

Création du mur du labyrinthe

- -

Pour rendre le jeu plus difficile et plus intéressant, nous allons ajouter des obstacles entre la balle et la sortie. Nous pourrions utiliser un éditeur de niveau, mais pour ce tutoriel, créons quelque chose par nous-mêmes.

- -

Pour conserver les informations du bloc, nous utiliserons un tableau de données de niveau : pour chaque bloc, nous stockons les positions absolues supérieure et gauche en pixels (x et y) et le type du bloc - horizontal ou vertical (t avec le 'w 'valeur signifiant largeur et' h 'signifiant hauteur). Ensuite, pour charger le niveau, nous allons analyser les données et afficher les blocs spécifiques à ce niveau. Dans la fonction initLevels, nous avons :

- -
this.levelData = [
-    [
-        { x: 96, y: 224, t: 'w' }
-    ],
-    [
-        { x: 72, y: 320, t: 'w' },
-        { x: 200, y: 320, t: 'h' },
-        { x: 72, y: 150, t: 'w' }
-    ],
-    // ...
-];
- -

Chaque élément de tableau contient une collection de blocs avec une position x et y et une valeur t pour chacun. Après levelData, mais toujours dans la fonction initLevels, nous ajoutons les blocs dans un tableau de la boucle for en utilisant certaines des méthodes spécifiques au framework :

- -
for(var i=0; i<this.maxLevels; i++) {
-    var newLevel = this.add.group();
-    newLevel.enableBody = true;
-    newLevel.physicsBodyType = Phaser.Physics.ARCADE;
-    for(var e=0; e<this.levelData[i].length; e++) {
-        var item = this.levelData[i][e];
-        newLevel.create(item.x, item.y, 'element-'+item.t);
-    }
-    newLevel.setAll('body.immovable', true);
-    newLevel.visible = false;
-    this.levels.push(newLevel);
-}
- -

Tout d'abord, add.group () est utilisé pour créer un nouveau groupe d'éléments. Ensuite, le type de corps ARCADE est défini pour ce groupe pour activer les calculs physiques. La méthode newLevel.create crée de nouveaux éléments dans le groupe avec les positions de départ haut et gauche et sa propre image. Si vous ne souhaitez pas parcourir à nouveau la liste des éléments pour ajouter explicitement une propriété à chacun d'eux, vous pouvez utiliser setAll sur un groupe pour l'appliquer à tous les éléments de ce groupe.
-
- Les objets sont stockés dans le tableau this.levels, qui est ,par défaut, invisible. Pour charger des niveaux spécifiques, nous nous assurons que les niveaux précédents sont cachés et affichent le niveau actuel :

- -
showLevel: function(level) {
-    var lvl = level | this.level;
-    if(this.levels[lvl-2]) {
-        this.levels[lvl-2].visible = false;
-    }
-    this.levels[lvl-1].visible = true;
-}
- -

Grâce à cela, le jeu donne au joueur un défi : il doit maintenant rouler la balle à travers l'aire de jeu et la guider dans le labyrinthe construit à partir des blocs. C'est juste un exemple de chargement des niveaux, et il n'y a que 5, juste pour présenter l'idée, mais vous pouvez travailler à l'étendre par vous-même.

- -

Détection de collision

- -

À ce stade, nous avons la balle qui est contrôlée par le joueur, le trou à atteindre et les obstacles qui bloquent la route. Il y a un problème cependant : notre jeu n'a pas encore de détection de collision, donc il ne se passe rien quand la balle frappe les blocs, elle passe juste à travers. Réparons-le ! Les bonnes nouvelles sont que le cadre se chargera de calculer la détection de collision, il suffit de spécifier les objets en collision dans la fonction update () :

- -
this.physics.arcade.collide(this.ball, this.borderGroup, this.wallCollision, null, this);
-this.physics.arcade.collide(this.ball, this.levels[this.level-1], this.wallCollision, null, this);
- -

Cela dira à la structure d'exécuter la fonction wallCollision lorsque la balle frappe l'un des murs. Nous pouvons utiliser la fonction wallCollision pour ajouter toutes les fonctionnalités que nous voulons comme jouer le son du rebondissement et implémenter l'API Vibration.

- -

Ajout de son

- -

Parmi les éléments préchargés, il y avait une piste audio (dans différents formats pour la compatibilité avec les navigateurs), que nous pouvons utiliser maintenant. Il doit d'abord être défini dans la fonction create () :

- -
this.bounceSound = this.game.add.audio('audio-bounce');
- -

Si l'état de l'audio est true (vrai) (les sons du jeu sont activés), nous pouvons le jouer dans la fonction wallCollision:

- -
if(this.audioStatus) {
-    this.bounceSound.play();
-}
- -

C'est tout - charger et jouer les sons est facile avec Phaser.

- -

Implementing the Vibration API

- -

Lorsque la détection de collision fonctionne comme prévu, ajoutons quelques effets spéciaux avec l'aide de l'API Vibration.

- -

- -

La meilleure façon de l'utiliser dans notre cas est de faire vibrer le téléphone chaque fois que la balle frappe les murs, à l'intérieur de la fonction wallCollision :

- -
if("vibrate" in window.navigator) {
-    window.navigator.vibrate(100);
-}
- -

Si la méthode vibrate est prise en charge par le navigateur et disponible dans l'objet window.navigator, faites vibrer le téléphone pendant 100 millisecondes. C'est tout !

- -

Ajout du temps écoulé

- -

Pour améliorer la rejouabilité et donner aux joueurs l'option de rivaliser les uns avec les autres, nous pouvons introduire le temps écoulé. Grâce à cela, le joueur peut jouer les niveaux encore et encore en essayant d'améliorer son score. Pour implémenter cela dans le jeu, nous devons créer une variable pour stocker le nombre réel de secondes écoulées depuis le début du jeu et le montrer au joueur dans le jeu. Définissons d'abord la variable :

- -
this.timer = 0; // time elapsed in the current level
-this.totalTimer = 0; // time elapsed in the whole game
- -

Ensuite, juste après, nous pouvons initialiser les objets texte nécessaires à l'affichage de cette information pour l'utilisateur:

- -
this.timerText = this.game.add.text(15, 15, "Time: "+this.timer, this.fontBig);
-this.totalTimeText = this.game.add.text(120, 30, "Total time: "+this.totalTimer, this.fontSmall);
- -

Nous définissons les positions supérieure et gauche du texte, le contenu qui sera affiché et le style appliqué au texte. Nous l'avons imprimé à l'écran, mais il serait bon de mettre à jour les valeurs toutes les secondes :

- -
this.time.events.loop(Phaser.Timer.SECOND, this.updateCounter, this);
- -

Cette boucle, également dans la fonction create , exécutera la fonction updateCounter à chaque seconde du début du jeu afin que nous puissions appliquer les modifications en conséquence. Voici à quoi ressemble la fonction updateCounter complète :

- -
updateCounter: function() {
-    this.timer++;
-    this.timerText.setText("Time: "+this.timer);
-    this.totalTimeText.setText("Total time: "+(this.totalTimer+this.timer));
-},
- -

Comme vous pouvez le voir, nous incrémentons la variable this.timer et mettons à jour le contenu des objets texte avec les valeurs actuelles à chaque itération, de sorte que le joueur voit le temps écoulé.

- -

Finition du niveau et du jeu

- -

La balle tourne sur l'écran, le minutage fonctionne et nous avons le trou créé que nous devons atteindre. Maintenant, mettons en place la possibilité de finir le niveau ! La ligne suivante de la fonction update () ajoute un écouteur qui se déclenche lorsque la balle arrive au trou.

- -
this.physics.arcade.overlap(this.ball, this.hole, this.finishLevel, null, this);
- -

Cela fonctionne de la même manière que la méthode collide expliquée précédemment. Lorsque la balle chevauche le trou (au lieu de collision), la fonction finishLevel est exécutée :

- -
finishLevel: function() {
-    if(this.level >= this.maxLevels) {
-        this.totalTimer += this.timer;
-        alert('Congratulations, game completed!\nTotal time of play: '+this.totalTimer+' seconds!');
-        this.game.state.start('MainMenu');
-    }
-    else {
-        alert('Congratulations, level '+this.level+' completed!');
-        this.totalTimer += this.timer;
-        this.timer = 0;
-        this.level++;
-        this.timerText.setText("Time: "+this.timer);
-        this.totalTimeText.setText("Total time: "+this.totalTimer);
-        this.levelText.setText("Level: "+this.level+" / "+this.maxLevels);
-        this.ball.body.x = this.ballStartPos.x;
-        this.ball.body.y = this.ballStartPos.y;
-        this.ball.body.velocity.x = 0;
-        this.ball.body.velocity.y = 0;
-        this.showLevel();
-    }
-},
- -

Si le niveau actuel est égal au nombre maximum de niveaux (dans ce cas, 5), le jeu est terminé - vous recevrez un message de félicitations avec le nombre de secondes écoulées pendant toute la partie et un clique sur un bouton vous ramène au menu principal.

- -

Si le niveau actuel est inférieur à 5, toutes les variables nécessaires sont réinitialisées et le niveau suivant est chargé.

- -

Idées pour de nouvelles fonctionnalités

- -

Ceci est simplement une démonstration de travail d'un jeu qui pourrait avoir beaucoup de fonctionnalités supplémentaires. Nous pouvons par exemple ajouter des "power-ups" à collecter en cours de route qui feront rouler notre balle plus rapidement, arrêter le chronomètre pendant quelques secondes ou donner à la balle des pouvoirs spéciaux pour traverser les obstacles. Il y a aussi de la place pour les pièges qui ralentiront la balle ou rendront le but plus difficile à atteindre. Vous pouvez créer plus de niveaux de difficulté croissante. Vous pouvez même mettre en œuvre des trophées, des classements et des médailles pour différentes actions du jeu. Il y a des possibilités infinies - elles ne dépendent que de votre imagination.

- -

Résumé

- -

J'espère que ce tutoriel vous aidera à plonger dans le développement de jeux en 2D et vous inspirera pour créer des jeux géniaux par vous-même. Vous pouvez jouer au jeu de démonstration Cyber Orb et consulter son code source sur GitHub.

- -

HTML5 nous donne des outils bruts, les frameworks construits au-dessus deviennent plus rapides et meilleurs, alors c'est un bon moment pour le développement de jeux web. Dans ce tutoriel, nous avons utilisé Phaser, mais il existe un certain nombre d' autres frameworks qui méritent d'être considérés aussi, comme ImpactJS, Construct 2 ou PlayCanvas — cela dépend de vos préférences, de vos compétences en codage (ou de leur absence), de l'échelle du projet, des exigences et d'autres aspects. Vous devriez les regarder tous et décider lequel convient le mieux à vos besoins.

diff --git a/files/fr/games/tutorials/html5_gamedev_phaser_device_orientation/index.md b/files/fr/games/tutorials/html5_gamedev_phaser_device_orientation/index.md new file mode 100644 index 0000000000..50ed7d56f1 --- /dev/null +++ b/files/fr/games/tutorials/html5_gamedev_phaser_device_orientation/index.md @@ -0,0 +1,444 @@ +--- +title: Jeu 2D avec l'API Device orientation +slug: Games/Tutorials/HTML5_Gamedev_Phaser_Device_Orientation +translation_of: Games/Tutorials/HTML5_Gamedev_Phaser_Device_Orientation +original_slug: Games/Workflows/HTML5_Gamedev_Phaser_Device_Orientation_FR +--- +
{{GamesSidebar}}

{{IncludeSubnav("/fr/docs/Jeux")}}  

+ +

Dans ce tutoriel, nous allons passer par le processus de construction d'un jeu mobile HTML5 qui utilise les API  Device Orientation  et Vibration   pour améliorer le "gameplay" et est construit avec le "framework" Phaser . La connaissance JavaScript de base est recommandée pour tirer le meilleur parti de ce tutoriel.

+ +

Exemple de jeu

+ +

A la fin de ce tutoriel, vous aurez une démo entièrement fonctionnelle du jeu : Cyber Orb. Il ressemblera à quelque chose comme cela :

+ +

+ +

Le framework Phaser

+ +

Phaser est un framework pour créer des jeux mobiles et PC en utilisant les technologies HTML5. Malgré son manque de maturité, la communauté est assez active, et il évolue rapidement.  Les sources sont sur Github, lisez y la documentation de base, jetez un œil aux exemples. Le framework Phaser offre un ensemble d'outils qui permettent d'accélérer le développement et aident à mettre en oeuvre les tâches courantes nécessaires au développement d'un  jeu.

+ +

Mise en place du projet

+ +

Vous pouvez voir le code d'exemple du projet sur GitHub. La structure n'est pas compliquée : le point de départ est le fichier index.html où nous initialisons le framework, mettons en place le {{htmlelement("canvas")}} et jouons au jeu.

+ +

+ +

Vous pouvez l'ouvir avec votre navigateur préféré pour essayer le jeu. Il y a aussi trois dossiers :

+ + + +

Mettre en place le canevas

+ +

Nous voulons un rendu de notre jeu sur un canevas, mais nous ne le ferons pas manuellement - cela sera pris en charge par le framework. Disons-le : notre point de départ est le fichier index.html avec le contenu suivant. Vous pouvez créer vous-même si vous voulez suivre :

+ +
<!DOCTYPE html>
+<html>
+<head>
+    <meta charset="utf-8" />
+    <title>Cyber Orb demo</title>
+    <style> body { margin: 0; background: #333; } </style>
+    <script src="src/phaser-arcade-physics.2.2.2.min.js"></script>
+    <script src="src/Boot.js"></script>
+    <script src="src/Preloader.js"></script>
+    <script src="src/MainMenu.js"></script>
+    <script src="src/Howto.js"></script>
+    <script src="src/Game.js"></script>
+</head>
+<body>
+<script>
+(function() {
+    var game = new Phaser.Game(320, 480, Phaser.CANVAS, 'game');
+    game.state.add('Boot', Ball.Boot);
+    game.state.add('Preloader', Ball.Preloader);
+    game.state.add('MainMenu', Ball.MainMenu);
+    game.state.add('Howto', Ball.Howto);
+    game.state.add('Game', Ball.Game);
+    game.state.start('Boot');
+})();
+</script>
+</body>
+</html>
+ +

Ça ressemble à une simple page de site HTML avec des éléments basiques dans la balise <head> (en-tête) : police de caractères, titre, CSS et inclusion des fichiers Javascript. Le <body> (corps) contient l'initialisation du framework et la définition des états du jeu.

+ +
var game = new Phaser.Game(320, 480, Phaser.CANVAS, 'game');
+ +

La ligne ci-dessus va initialiser l'instance de Phaser - les arguments sont la largeur et la hauteur du canevas, la méthode de rendu (nous utilisons CANVAS, mais il y a aussi les options WEBGL et AUTO disponibles) et l'ID optionnel du conteneur DOM dans lequel nous voulons placer le canevas. Si rien n'est spécifié dans ce dernier argument, ou si l'élément n'est pas trouvé, le canvas sera ajouté à la balise <body>. Sans le framework, pour ajouter l'élément canvas à la page, il faudrait écrire quelque chose comme ça dans la balise <body>:

+ +
<canvas id='game' width='320' height='480'></canvas>
+ +

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 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 :

+ +
game.state.add('Boot', Ball.Boot);
+ +

La première valeur est le nom de l'état et la seconde est l'objet que nous voulons lui assigner. La méthode start démarre l'état donné et le rend actif. Voyons ce que les états sont en réalité. 

+ +

Gestion des états du jeu

+ +

Les états du jeu dans Phaser sont différentes phases du jeu. Dans notre cas, ils sont chargés depuis des fichiers Javascript pour mieux les maintenir par la suite. Dans ce jeu nous avons les états : Boot (démarrage), Preloader (préchargement), MainMenu (menu principal),  Howto (comment jouer) et Game (jeu). Boot s'occupe d'initialiser quelques paramètres, Preloader charge tous les graphismes et les sons, MainMenu est le menu avec le bouton start, Howto affiche les instructions "comment jouer" et Game, est l'état qui permet de  jouer. Passons rapidement au contenu de ces états.

+ +

Boot.js (démarrage)

+ +

L'état Boot est le premier du jeu.

+ +
var Ball = {
+    _WIDTH: 320,
+    _HEIGHT: 480
+};
+Ball.Boot = function(game) {};
+Ball.Boot.prototype = {
+    preload: function() {
+        this.load.image('preloaderBg', 'img/loading-bg.png');
+        this.load.image('preloaderBar', 'img/loading-bar.png');
+    },
+    create: function() {
+        this.game.scale.scaleMode = Phaser.ScaleManager.SHOW_ALL;
+        this.game.scale.pageAlignHorizontally = true;
+        this.game.scale.pageAlignVertically = true;
+        this.game.state.start('Preloader');
+    }
+};
+ +

Le principal objet "Ball"  est défini et nous ajoutons deux variables appelées _WIDTH et _HEIGHT qui sont la largeur et la hauteur du caneva du jeu — elles nous aideront à positionner les éléments à l'écran. Nous chargeons d'abord deux images qui seront utilisées plus tard dans l'état Preload (préchargement) pour montrer la progression du chargement de tous les autres éléments. La fonction create contient une configuration de base : nous configurons la mise à l'échelle et l'alignement du canevas et passons à l'état Preload lorsque tout est prêt.

+ +

Preloader.js (préchargement)

+ +

L'état Preloader prend soin de charger tous les éléments :

+ +
Ball.Preloader = function(game) {};
+Ball.Preloader.prototype = {
+    preload: function() {
+        this.preloadBg = this.add.sprite((Ball._WIDTH-297)*0.5, (Ball._HEIGHT-145)*0.5, 'preloaderBg');
+        this.preloadBar = this.add.sprite((Ball._WIDTH-158)*0.5, (Ball._HEIGHT-50)*0.5, 'preloaderBar');
+        this.load.setPreloadSprite(this.preloadBar);
+
+        this.load.image('ball', 'img/ball.png');
+        // ...
+        this.load.spritesheet('button-start', 'img/button-start.png', 146, 51);
+        // ...
+        this.load.audio('audio-bounce', ['audio/bounce.ogg', 'audio/bounce.mp3', 'audio/bounce.m4a']);
+    },
+    create: function() {
+        this.game.state.start('MainMenu');
+    }
+};
+ +

Il y a des images uniques, des feuilles de "sprites" et des fichiers audio chargés par le "framework". Dans cet état, la preloadBar (barre du préchargement) affiche la progression à l'écran. Cette progression des éléments chargés est visualisée par le framework avec l'utilisation d'une image. Avec chaque élément chargé, vous pouvez voir plus de l'image preloadBar: de 0% à 100%, mis à jour sur chaque image. Une fois que tous les éléments sont chargés, l'état MainMenu est lancé.

+ + + +

L'état MainMenu montre le menu principal du jeu, sur lequel vous pouvez lancer le jeu en cliquant sur le bouton.

+ +
Ball.MainMenu = function(game) {};
+Ball.MainMenu.prototype = {
+    create: function() {
+        this.add.sprite(0, 0, 'screen-mainmenu');
+        this.gameTitle = this.add.sprite(Ball._WIDTH*0.5, 40, 'title');
+        this.gameTitle.anchor.set(0.5,0);
+        this.startButton = this.add.button(Ball._WIDTH*0.5, 200, 'button-start', this.startGame, this, 2, 0, 1);
+        this.startButton.anchor.set(0.5,0);
+        this.startButton.input.useHandCursor = true;
+    },
+    startGame: function() {
+        this.game.state.start('Howto');
+    }
+};
+ +

Pour créer un nouveau bouton, il y a la méthode add.button avec la liste suivante d'arguments facultatifs :

+ + + +

Anchor.set configure le point d'ancrage du bouton sur lequel tous les calculs de la position sont appliqués. Dans notre cas, il est ancré à mi-chemin du bord gauche et au début du bord supérieur, de sorte qu'il peut être facilement centré horizontalement sur l'écran sans avoir besoin de connaître sa largeur.

+ +

Lorsque le bouton de démarrage est enfoncé, au lieu de sauter directement dans l'action, le jeu affichera l'écran avec les informations sur la façon de jouer.

+ +

Howto.js (comment jouer)

+ +
Ball.Howto = function(game) {
+};
+Ball.Howto.prototype = {
+    create: function() {
+        this.buttonContinue = this.add.button(0, 0, 'screen-howtoplay', this.startGame, this);
+    },
+    startGame: function() {
+        this.game.state.start('Game');
+    }
+};
+ +

L'état Howto affiche les instructions du jeu à l'écran avant de commencer le jeu. Après avoir cliqué sur l'écran, le jeu réel est lancé.

+ +

Game.js (jeu)

+ +

L'état game à partir du fichier Game.js est le lieu où toute la magie opère. Toute l'initialisation est dans la fonction create () (lancée une fois au début du jeu). Après cela, certaines fonctionnalités nécessiteront d'autres codes à contrôler — nous écrirons nos propres fonctions pour gérer des tâches plus complexes. En particulier, notez  la fonction update () exécutée à chaque frame, qui met à jour des choses telles que la position de la balle.

+ +
Ball.Game = function(game) {};
+Ball.Game.prototype = {
+    create: function() {},
+    initLevels: function() {},
+    showLevel: function(level) {},
+    updateCounter: function() {},
+    managePause: function() {},
+    manageAudio: function() {},
+    update: function() {},
+    wallCollision: function() {},
+    handleOrientation: function(e) {},
+    finishLevel: function() {}
+};
+ +

Les fonctions create et update sont spécifiques au framework, tandis que d'autres seront nos créations :

+ + + +

Ajout de la balle et de ses mécanismes de mouvement

+ +

D'abord, dans la fonction create, initialisons l'objet 'ball' et assignons lui quelques propriétés :

+ +
ball = this.add.sprite((320-22)/2, 450, 'ball');
+ball.anchor.setTo(0.5, 0.5);
+ball.body.bounce.setTo(0.3, 0.3);
+ball.body.setCircle(10, 11, 11);
+ball.body.linearDamping = 1;
+ +

On ajoute un "sprite" à une place donnée sur l'écran en utilisant l'image 'ball'. On ajoute aussi le point de repère de tous les calculs physiques ( 'anchor' ) au milieu de la balle,  permettant au moteur physique d'arcade (qui gère toute la physique du mouvement de la balle) et en définissant la taille du corps pour la détection de collision . La propriété bounce est utilisée pour définir le rebondissement de la balle quand elle frappe les obstacles.

+ +

Contrôle de la balle

+ +

C'est déjà sympa d'avoir une balle prête à être lancée dans la zone de jeu, mais c'est aussi important de pouvoir le faire. Maintenant on va ajouter la possibilité de contrôler la balle avec le clavier sur les ordinateurs, et ensuite on ajoutera l'implémentation de l'API  Device Orientation ( gyroscope). Maintenant, concentrons-nous sur le clavier en ajoutant la ligne suivante pour la fonction create() :

+ +
this.keys = this.game.input.keyboard.createCursorKeys();
+ +

Comme vous pouvez le voir, Phaser a une fonction spéciale  createCursorKeys() qui nous donnera un objet avec des gestionnaires d'événements pour les quatre touches fléchées : haut, bas, gauche et droite. 

+ +

Ensuite, nous allons ajouter le code suivant dans la fonction update (), il sera lancé à chaque "frame". L'objet this.keys sera vérifié aux pressions de touche du joueur, la balle réagira donc en conséquence :

+ +
if(this.keys.left.isDown) {
+    this.ball.body.velocity.x -= this.movementForce;
+}
+else if(this.keys.right.isDown) {
+    this.ball.body.velocity.x += this.movementForce;
+}
+if(this.keys.up.isDown) {
+    this.ball.body.velocity.y -= this.movementForce;
+}
+else if(this.keys.down.isDown) {
+    this.ball.body.velocity.y += this.movementForce;
+}
+ +

De cette manière on peut vérifier quelle touche est pressée à un moment donné et appliquer une force définie à la balle, ce qui a pour effet d'augmenter sa vélocité dans la bonne direction.

+ +

Implémentation de l'API Device Orientation (gyroscopique)

+ +

La particularité du jeu est qu'il utilise l'API gyroscopique sur les mobiles. Grâce à elle, vous pouvez jouer au jeu en inclinant l'appareil dans la direction où vous voulez que la balle aille. Voilà le code de la fonction  create() qui l'implémente :

+ +
window.addEventListener("deviceorientation", this.handleOrientation, true);
+ +

L'ajout d'un évènement "listener" à l'évenement "deviceorientation" et la modification de la fonction handleOrientationressembleront à ceci :

+ +
handleOrientation: function(e) {
+    var x = e.gamma;
+    var y = e.beta;
+    Ball._player.body.velocity.x += x;
+    Ball._player.body.velocity.y += y;
+}
+ +

Plus l'appareil est incliné, plus la force appliquée à la balle et sa vélocité sont importantes.

+ +

+ +
+

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. 

+
+ +

Ajout du trou

+ +

L'objectif principal du jeu est de déplacer la balle du point de départ vers le point d'arrivée, qui est dans notre cas, un trou dans le sol. L'implémentation ressemble beaucoup à celle de la création de la balle et est ajoutée dans la fonction create() de l'état Game :

+ +
this.hole = this.add.sprite(Ball._WIDTH*0.5, 90, 'hole');
+this.physics.enable(this.hole, Phaser.Physics.ARCADE);
+this.hole.anchor.set(0.5);
+this.hole.body.setSize(2, 2);
+ +

La seule différence est que 'hole.body' est mis à immovable(fixe), il ne bougera donc pas quand la balle le touchera et la collision sera alors calculée ( ce point sera approfondit plus loin dans cet article ).

+ +

Création du mur du labyrinthe

+ +

Pour rendre le jeu plus difficile et plus intéressant, nous allons ajouter des obstacles entre la balle et la sortie. Nous pourrions utiliser un éditeur de niveau, mais pour ce tutoriel, créons quelque chose par nous-mêmes.

+ +

Pour conserver les informations du bloc, nous utiliserons un tableau de données de niveau : pour chaque bloc, nous stockons les positions absolues supérieure et gauche en pixels (x et y) et le type du bloc - horizontal ou vertical (t avec le 'w 'valeur signifiant largeur et' h 'signifiant hauteur). Ensuite, pour charger le niveau, nous allons analyser les données et afficher les blocs spécifiques à ce niveau. Dans la fonction initLevels, nous avons :

+ +
this.levelData = [
+    [
+        { x: 96, y: 224, t: 'w' }
+    ],
+    [
+        { x: 72, y: 320, t: 'w' },
+        { x: 200, y: 320, t: 'h' },
+        { x: 72, y: 150, t: 'w' }
+    ],
+    // ...
+];
+ +

Chaque élément de tableau contient une collection de blocs avec une position x et y et une valeur t pour chacun. Après levelData, mais toujours dans la fonction initLevels, nous ajoutons les blocs dans un tableau de la boucle for en utilisant certaines des méthodes spécifiques au framework :

+ +
for(var i=0; i<this.maxLevels; i++) {
+    var newLevel = this.add.group();
+    newLevel.enableBody = true;
+    newLevel.physicsBodyType = Phaser.Physics.ARCADE;
+    for(var e=0; e<this.levelData[i].length; e++) {
+        var item = this.levelData[i][e];
+        newLevel.create(item.x, item.y, 'element-'+item.t);
+    }
+    newLevel.setAll('body.immovable', true);
+    newLevel.visible = false;
+    this.levels.push(newLevel);
+}
+ +

Tout d'abord, add.group () est utilisé pour créer un nouveau groupe d'éléments. Ensuite, le type de corps ARCADE est défini pour ce groupe pour activer les calculs physiques. La méthode newLevel.create crée de nouveaux éléments dans le groupe avec les positions de départ haut et gauche et sa propre image. Si vous ne souhaitez pas parcourir à nouveau la liste des éléments pour ajouter explicitement une propriété à chacun d'eux, vous pouvez utiliser setAll sur un groupe pour l'appliquer à tous les éléments de ce groupe.
+
+ Les objets sont stockés dans le tableau this.levels, qui est ,par défaut, invisible. Pour charger des niveaux spécifiques, nous nous assurons que les niveaux précédents sont cachés et affichent le niveau actuel :

+ +
showLevel: function(level) {
+    var lvl = level | this.level;
+    if(this.levels[lvl-2]) {
+        this.levels[lvl-2].visible = false;
+    }
+    this.levels[lvl-1].visible = true;
+}
+ +

Grâce à cela, le jeu donne au joueur un défi : il doit maintenant rouler la balle à travers l'aire de jeu et la guider dans le labyrinthe construit à partir des blocs. C'est juste un exemple de chargement des niveaux, et il n'y a que 5, juste pour présenter l'idée, mais vous pouvez travailler à l'étendre par vous-même.

+ +

Détection de collision

+ +

À ce stade, nous avons la balle qui est contrôlée par le joueur, le trou à atteindre et les obstacles qui bloquent la route. Il y a un problème cependant : notre jeu n'a pas encore de détection de collision, donc il ne se passe rien quand la balle frappe les blocs, elle passe juste à travers. Réparons-le ! Les bonnes nouvelles sont que le cadre se chargera de calculer la détection de collision, il suffit de spécifier les objets en collision dans la fonction update () :

+ +
this.physics.arcade.collide(this.ball, this.borderGroup, this.wallCollision, null, this);
+this.physics.arcade.collide(this.ball, this.levels[this.level-1], this.wallCollision, null, this);
+ +

Cela dira à la structure d'exécuter la fonction wallCollision lorsque la balle frappe l'un des murs. Nous pouvons utiliser la fonction wallCollision pour ajouter toutes les fonctionnalités que nous voulons comme jouer le son du rebondissement et implémenter l'API Vibration.

+ +

Ajout de son

+ +

Parmi les éléments préchargés, il y avait une piste audio (dans différents formats pour la compatibilité avec les navigateurs), que nous pouvons utiliser maintenant. Il doit d'abord être défini dans la fonction create () :

+ +
this.bounceSound = this.game.add.audio('audio-bounce');
+ +

Si l'état de l'audio est true (vrai) (les sons du jeu sont activés), nous pouvons le jouer dans la fonction wallCollision:

+ +
if(this.audioStatus) {
+    this.bounceSound.play();
+}
+ +

C'est tout - charger et jouer les sons est facile avec Phaser.

+ +

Implementing the Vibration API

+ +

Lorsque la détection de collision fonctionne comme prévu, ajoutons quelques effets spéciaux avec l'aide de l'API Vibration.

+ +

+ +

La meilleure façon de l'utiliser dans notre cas est de faire vibrer le téléphone chaque fois que la balle frappe les murs, à l'intérieur de la fonction wallCollision :

+ +
if("vibrate" in window.navigator) {
+    window.navigator.vibrate(100);
+}
+ +

Si la méthode vibrate est prise en charge par le navigateur et disponible dans l'objet window.navigator, faites vibrer le téléphone pendant 100 millisecondes. C'est tout !

+ +

Ajout du temps écoulé

+ +

Pour améliorer la rejouabilité et donner aux joueurs l'option de rivaliser les uns avec les autres, nous pouvons introduire le temps écoulé. Grâce à cela, le joueur peut jouer les niveaux encore et encore en essayant d'améliorer son score. Pour implémenter cela dans le jeu, nous devons créer une variable pour stocker le nombre réel de secondes écoulées depuis le début du jeu et le montrer au joueur dans le jeu. Définissons d'abord la variable :

+ +
this.timer = 0; // time elapsed in the current level
+this.totalTimer = 0; // time elapsed in the whole game
+ +

Ensuite, juste après, nous pouvons initialiser les objets texte nécessaires à l'affichage de cette information pour l'utilisateur:

+ +
this.timerText = this.game.add.text(15, 15, "Time: "+this.timer, this.fontBig);
+this.totalTimeText = this.game.add.text(120, 30, "Total time: "+this.totalTimer, this.fontSmall);
+ +

Nous définissons les positions supérieure et gauche du texte, le contenu qui sera affiché et le style appliqué au texte. Nous l'avons imprimé à l'écran, mais il serait bon de mettre à jour les valeurs toutes les secondes :

+ +
this.time.events.loop(Phaser.Timer.SECOND, this.updateCounter, this);
+ +

Cette boucle, également dans la fonction create , exécutera la fonction updateCounter à chaque seconde du début du jeu afin que nous puissions appliquer les modifications en conséquence. Voici à quoi ressemble la fonction updateCounter complète :

+ +
updateCounter: function() {
+    this.timer++;
+    this.timerText.setText("Time: "+this.timer);
+    this.totalTimeText.setText("Total time: "+(this.totalTimer+this.timer));
+},
+ +

Comme vous pouvez le voir, nous incrémentons la variable this.timer et mettons à jour le contenu des objets texte avec les valeurs actuelles à chaque itération, de sorte que le joueur voit le temps écoulé.

+ +

Finition du niveau et du jeu

+ +

La balle tourne sur l'écran, le minutage fonctionne et nous avons le trou créé que nous devons atteindre. Maintenant, mettons en place la possibilité de finir le niveau ! La ligne suivante de la fonction update () ajoute un écouteur qui se déclenche lorsque la balle arrive au trou.

+ +
this.physics.arcade.overlap(this.ball, this.hole, this.finishLevel, null, this);
+ +

Cela fonctionne de la même manière que la méthode collide expliquée précédemment. Lorsque la balle chevauche le trou (au lieu de collision), la fonction finishLevel est exécutée :

+ +
finishLevel: function() {
+    if(this.level >= this.maxLevels) {
+        this.totalTimer += this.timer;
+        alert('Congratulations, game completed!\nTotal time of play: '+this.totalTimer+' seconds!');
+        this.game.state.start('MainMenu');
+    }
+    else {
+        alert('Congratulations, level '+this.level+' completed!');
+        this.totalTimer += this.timer;
+        this.timer = 0;
+        this.level++;
+        this.timerText.setText("Time: "+this.timer);
+        this.totalTimeText.setText("Total time: "+this.totalTimer);
+        this.levelText.setText("Level: "+this.level+" / "+this.maxLevels);
+        this.ball.body.x = this.ballStartPos.x;
+        this.ball.body.y = this.ballStartPos.y;
+        this.ball.body.velocity.x = 0;
+        this.ball.body.velocity.y = 0;
+        this.showLevel();
+    }
+},
+ +

Si le niveau actuel est égal au nombre maximum de niveaux (dans ce cas, 5), le jeu est terminé - vous recevrez un message de félicitations avec le nombre de secondes écoulées pendant toute la partie et un clique sur un bouton vous ramène au menu principal.

+ +

Si le niveau actuel est inférieur à 5, toutes les variables nécessaires sont réinitialisées et le niveau suivant est chargé.

+ +

Idées pour de nouvelles fonctionnalités

+ +

Ceci est simplement une démonstration de travail d'un jeu qui pourrait avoir beaucoup de fonctionnalités supplémentaires. Nous pouvons par exemple ajouter des "power-ups" à collecter en cours de route qui feront rouler notre balle plus rapidement, arrêter le chronomètre pendant quelques secondes ou donner à la balle des pouvoirs spéciaux pour traverser les obstacles. Il y a aussi de la place pour les pièges qui ralentiront la balle ou rendront le but plus difficile à atteindre. Vous pouvez créer plus de niveaux de difficulté croissante. Vous pouvez même mettre en œuvre des trophées, des classements et des médailles pour différentes actions du jeu. Il y a des possibilités infinies - elles ne dépendent que de votre imagination.

+ +

Résumé

+ +

J'espère que ce tutoriel vous aidera à plonger dans le développement de jeux en 2D et vous inspirera pour créer des jeux géniaux par vous-même. Vous pouvez jouer au jeu de démonstration Cyber Orb et consulter son code source sur GitHub.

+ +

HTML5 nous donne des outils bruts, les frameworks construits au-dessus deviennent plus rapides et meilleurs, alors c'est un bon moment pour le développement de jeux web. Dans ce tutoriel, nous avons utilisé Phaser, mais il existe un certain nombre d' autres frameworks qui méritent d'être considérés aussi, comme ImpactJS, Construct 2 ou PlayCanvas — cela dépend de vos préférences, de vos compétences en codage (ou de leur absence), de l'échelle du projet, des exigences et d'autres aspects. Vous devriez les regarder tous et décider lequel convient le mieux à vos besoins.

diff --git a/files/fr/games/tutorials/index.html b/files/fr/games/tutorials/index.html deleted file mode 100644 index cb07031e7a..0000000000 --- a/files/fr/games/tutorials/index.html +++ /dev/null @@ -1,29 +0,0 @@ ---- -title: Workflows for different game types -slug: Games/Tutorials -tags: - - Canvas - - JavaScript - - Jeux - - Web -translation_of: Games/Tutorials -original_slug: Games/Workflows ---- -
{{GamesSidebar}}

 

- -
{{IncludeSubnav("/fr/docs/Jeux")}}
- -

Cette page contient plusieurs séries de tutoriels qui mettent en évidence différentes démarches pour créer efficacement différents types de jeux Web.

- -
-
Jeu 2D avec du pur JavaScript
-
Dans ce tutoriel étape par étape, vous implémenterez un jeu en utilisant du pur JavaScript. En cours de route, vous apprendrez les bases de l'utilisation de l'élément {{htmlelement ("canvas")}} pour implémenter les mécanismes fondamentaux du jeu tels que le rendu et les images en mouvement, la détection de collision, les mécanismes de contrôle et les états gagnants et perdants.
-
Jeu 2D avec Phaser
-
Dans ce tutoriel étape par étape, vous implémenterez un jeu en utilisant le framework de jeu HTML5 Phaser . Cette idée ici est d'enseigner quelques-uns des fondamentaux (et des avantages) de travailler avec des cadres (frameworks), avec les mécanismes de jeu.
-
Jeu 2D avec API Device orientation
-
Ce tutoriel montre comment créer un jeu de labyrinthe en 2D en utilisant HTML5, en intégrant des principes fondamentaux tels que la détection de collision et le placement de "sprites" sur un {{htmlelement ("canvas")}}. Il s'agit d'un jeu mobile qui utilise les API Device Orientation et Vibration, pour améliorer le gameplay, et est construit en utilisant le framework Phaser .
-
Jeu de plateforme 2D avec Phaser
-
Cette série de tutoriels montre comment créer un jeu de plateforme simple à l'aide de Phaser , couvrant les fondamentaux tels que les "sprites", les collisions, la physique, les objets de collection et plus encore.
-
- -

 

diff --git a/files/fr/games/tutorials/index.md b/files/fr/games/tutorials/index.md new file mode 100644 index 0000000000..cb07031e7a --- /dev/null +++ b/files/fr/games/tutorials/index.md @@ -0,0 +1,29 @@ +--- +title: Workflows for different game types +slug: Games/Tutorials +tags: + - Canvas + - JavaScript + - Jeux + - Web +translation_of: Games/Tutorials +original_slug: Games/Workflows +--- +
{{GamesSidebar}}

 

+ +
{{IncludeSubnav("/fr/docs/Jeux")}}
+ +

Cette page contient plusieurs séries de tutoriels qui mettent en évidence différentes démarches pour créer efficacement différents types de jeux Web.

+ +
+
Jeu 2D avec du pur JavaScript
+
Dans ce tutoriel étape par étape, vous implémenterez un jeu en utilisant du pur JavaScript. En cours de route, vous apprendrez les bases de l'utilisation de l'élément {{htmlelement ("canvas")}} pour implémenter les mécanismes fondamentaux du jeu tels que le rendu et les images en mouvement, la détection de collision, les mécanismes de contrôle et les états gagnants et perdants.
+
Jeu 2D avec Phaser
+
Dans ce tutoriel étape par étape, vous implémenterez un jeu en utilisant le framework de jeu HTML5 Phaser . Cette idée ici est d'enseigner quelques-uns des fondamentaux (et des avantages) de travailler avec des cadres (frameworks), avec les mécanismes de jeu.
+
Jeu 2D avec API Device orientation
+
Ce tutoriel montre comment créer un jeu de labyrinthe en 2D en utilisant HTML5, en intégrant des principes fondamentaux tels que la détection de collision et le placement de "sprites" sur un {{htmlelement ("canvas")}}. Il s'agit d'un jeu mobile qui utilise les API Device Orientation et Vibration, pour améliorer le gameplay, et est construit en utilisant le framework Phaser .
+
Jeu de plateforme 2D avec Phaser
+
Cette série de tutoriels montre comment créer un jeu de plateforme simple à l'aide de Phaser , couvrant les fondamentaux tels que les "sprites", les collisions, la physique, les objets de collection et plus encore.
+
+ +

 

-- cgit v1.2.3-54-g00ecf