French translations (work in progress)

index.js

@@ -17,7 +17,7 @@ const prefixoid = require('metalsmith-prefixoid');
 const argv = require('minimist')(process.argv.slice(2));
 
 const DEFAULT_LOCALE = 'en';
-const LOCALES = ['en', 'es'];
+const LOCALES = ['en', 'es', 'fr'];
 
 metalsmith(__dirname)
     .source('src/content')
@@ -30,15 +30,23 @@ metalsmith(__dirname)
             pattern: 'platformer/*_es.md',
             sortBy: 'path'
         },
+        'platformer_fr': {
+            pattern: 'platformer/*_fr.md',
+            sortBy: 'path'
+        },
         'setup_en': {
             pattern: 'setup/*_en.md',
             sortBy: 'path'
         },
-        'bonus': {
-            pattern: 'bonus/*.md'
+        'setup_fr': {
+            pattern: 'setup/*_fr.md',
+            sortBy: 'path'
+        },
+        'bonus_en': {
+            pattern: 'bonus/*_en.md'
         },
         'coach_en' :{
-            pattern: 'coach-guide/*.md'
+            pattern: 'coach-guide/*_en.md'
         }
     }))
     .use(multiLanguage({
@@ -56,11 +64,17 @@ metalsmith(__dirname)
         }, {
             match: { collection: 'platformer_es' },
             pattern: ':locale/guias/plataformas/:slug'
+        }, {
+            match: { collection: 'platformer_fr' },
+            pattern: ':locale/guides/plateforme/:slug'
         }, {
             match: { collection: 'setup_en' },
             pattern: ':locale/guides/setup/:slug'
         }, {
-            match: { collection: 'bonus' },
+            match: { collection: 'setup_fr' },
+            pattern: ':locale/guides/installation/:slug'
+        }, {
+            match: { collection: 'bonus_en' },
             pattern: ':locale/bonus/:slug'
         }, {
             match: { collection: 'coach_en'},

src/content/index_fr.md

@@ -0,0 +1,21 @@
+---
+title: Page d'accueil
+permalink: false
+collection_base: platformer
+layout: default_fr.pug
+---
+
+Apprendre à créer des **jeux HTML5** avec JavaScript et Phaser !
+
+# Pour les étudiants
+
+1. [Installation sur votre machine](/fr/guides/installation/installation-sur-votre-machine)
+2. [Créer un jeu de type plateforme](/fr/guides/plateforme/demarrer/)
+
+Matériel bonus :
+
+- [Ressources](/fr/cadeaux/ressources/)
+
+# Pour les enseignants
+
+- [Guide de l'atelier](/fr/guides/enseignant/)

src/content/platformer/index_en.md

@@ -29,7 +29,7 @@ That said, if _you_ are familiar with this tools/concepts and want to use them i
 
 ## Important!
 
-This guide uses [Phaser version **2.6.2 "Kore Springs"**](http://phaser.io/docs/2.6.2/index). This version is what it's included in the project template provided in the next step.
+This guide uses [Phaser CE version **2.7.7**](https://photonstorm.github.io/phaser-ce/). This version is what it's included in the project template provided in the next step.
 
 It is possible that later on some changes in Phaser API in future versions might make this guide not 100% compatible with the latest Phaser version. We will try to keep this updated, though.
 

src/content/platformer/index_fr.md

@@ -0,0 +1,40 @@
+---
+title: Démarrer
+layout: guide_index_fr.pug
+collection_base: platformer
+author_twitter: ladybenko
+author_name: Belén "Benko" Albeza"
+---
+
+Nous allons créer un classique jeu de plateforme. Notre héros ou héroïne pourra courir, sauter sur des plateforme avec pour objectif de récolter une clé ouvrant la porte vers le niveau suivant. Des ennemis devront être évités, ou tués.
+
+[![Capture d'écran](/assets/platformer/platformer_screenshot.png)](/platformer/)
+
+Testez le jeu sur [la page suivante](/platformer/).
+
+Nous allons réaliser les différentes étapes:
+
+- **chargement** d'images, de ressources externes;
+- gestion des **états** du jeu;
+- afficher des **images** à l'écran;
+- réalisation des **_sprites_**;
+- lire les **actions** du joueur, de la joueuse depuis le clavier
+- utiliser le moteur physique pour déplacer les éléments et gérer les collision;
+- écrire du texte à l'aide d'une police de type bitmap;
+- jouer une musique de fond ainsi que des effets sonores
+
+Nous allons nous concentrer sur l'utilisation de l'interface offerte par [Phaser](http://phaser.io/). Le développement JavaScript moderne et avancé ne sera pas couvert.
+
+Cependant rien ne vous empêche de vous servir des concepts avancés que vous connaissez déjà.
+
+# Phaser
+
+Ce guide utilise Phaser CE 2.7.7\. Si d'aventure l'API de cette bibliothèque devait dans le futur, il est possible que les exemples fournis ne soient plus 100% corrects.
+
+# Rendons à César
+
+Les fichiers d'images et de sons, ils sont disponible dans le domaine public sous la licence CC0.
+
+- les images ont été créé par le fameux [Kenney](http://www.kenney.nl/);
+- les sons d'arrière-plan provient a été créé par [Rick Hoppmann](http://www.tinyworlds.org/);
+- et les effets sonores à l'aide de [bfxr](http://www.bfxr.net/).

src/content/platformer/step01_fr.md

@@ -0,0 +1,51 @@
+---
+title: Démarrer avec Phaser
+layout: guide_step_fr.pug
+download: /assets/platformer/steps/step01.js
+---
+
+# Tâches
+
+## Créer le squelette du projet
+
+1. Créer un répertoire pour votre jeu
+
+2. Télécharger et décompressez le [projet de base](/assets/platformer/start.zip). L'arborescence doit ressembler à celle-ci.
+
+  ```bash
+  jeu
+  ├── audio
+  ├── data
+  ├── images
+  ├── index.html
+  └── js
+  ```
+
+3. Lancer le serveur web local dans le répertoire racine (voir [install guide](/fr/guides/installation/) et consulter la page dans un navigateur.
+
+  Si vous utilisez l'éditeur _Brackets_, le module _Aperçu en direct_ est amplement suffisant.
+
+## Initialiser Phaser
+
+1. Notre jeu HTML5 va se servir de l'élément `<canvas>` pour dessiner. Phaser peut en créer un pour nous au démarrage. Il nous faut lui fournir l'élément conteneur ainsi que les dimensions de la zone de dessin (960✕600).
+
+  Pour ce faire, modifier `js/main.js` et y ajouter la portion suivante qui va initialiser Phaser.
+
+  ```javascript
+  window.onload = function () {
+     let game = new Phaser.Game(960, 600, Phaser.AUTO, 'game');
+  };
+  ```
+
+  `Phaser.AUTO` va tenter d'utiliser un contexte de type _WebGL_ plus performant qu'un simple canvas 2D.
+
+2. Rafraîchir le navigateur, un carré noir devrait apparaître.
+
+  ![Empy canvas on the screen](/assets/platformer/step00_check.png)
+
+# Vérifications
+
+Avant de passer à l'étape suivante, vérifiez que:
+
+- Vous pouvez accéder au fichier `index.html` depuis votre navigateur
+- et qu'un carré noir apparait dans la page.

src/content/platformer/step02_fr.md

@@ -0,0 +1,74 @@
+---
+title: La boucle principale
+layout: guide_step.pug
+download: /assets/platformer/steps/step02.js
+---
+
+Le cœur de tout jeu est composé d'une boucle. Au sein de cette boucle sont traités les évènements externes (souris ou clavier), la modification de l'état du jeu (`update`) puis le dessin (`render`).
+
+![The game loop](/assets/platformer/game_loop.png)
+
+Au sein de Phaser, la boucle principale est générée automatiquement via les états du jeu. Un état correspond àà un « écran » dans notre jeu. Par exemple, l'écran de chargement, le menu principal, un niveau, etc. Chaque état est divisé en différentes étapes. Les importantes étant les suivantes.
+
+![Game state](/assets/platformer/game_state.png)
+
+Les phases `update` (mise à jour) et `render` (affichage) sont **appelées** automatiquement à chaque frame, ainsi il ne nous est pas nécessaire de gérer le temps.
+
+Un état dans Phaser est un `Object` JavaScript possédant des méthodes spécifiques. Nous allons voir comment précharger et afficher une image de fond.
+
+# Tâches
+
+## Créer un état
+
+1. Comme prédédamment, modifier `js/index.js` pour y ajouter un état nommé `play`.
+
+  ```javascript
+  const PlayState = {};
+
+  window.onload = function () {
+      let game = new Phaser.Game(960, 600, Phaser.AUTO, 'game');
+      game.state.add('play', PlayState);
+      game.state.start('play');
+  };
+  ```
+
+## Charger et afficher une image
+
+1. Afin de **charger une image**, nous allons utiliser la phase `preload` de notre état. Dans cette phase, toutes les _assets_ (images, sons, etc.) vont être chargés.
+
+  Pour utiliser cette phase, il faut créer une méthode du même nom.
+
+  ```javascript
+  const PlayState = {};
+
+  PlayState.preload = function () {
+      this.game.load.image('background', 'images/background.png');
+  };
+  ```
+
+  Points importants :
+
+  1. Notre état possède une référence au jeu en cours via la propriété `game`.
+  2. Au chargement d'un asset, il est possible de lui donner un nom qui est réutilisé par la suite.
+
+2. Pour **afficher une image**, nous devons créer une instance de `Phaser.Image`. La méthode `game.add` s'occupe de créer ajouter l'image à notre univers. Ainsi, l'élément est dessiné automatiquement.
+
+  Ajouter la phase `create` à l'état du jeu.
+
+  ```javascript
+  PlayState.create = function () {
+      this.game.add.image(0, 0, 'background');
+  };
+  ```
+
+  `0, 0` correspondent aux coordonnées X et Y. En informatique, contrairement aux mathématiques, l'origine se trouve en haut à gauche, l'axe X va à droite et l'axe Y vers le bas.
+
+Votre page doit afficher un superbe fond d'écran bleuté.
+
+![A background, rendered](/assets/platformer/step01_check.png)
+
+# Vérifications
+
+- Un fond d'écran bleuté remplace le fond noir.
+
+Être capable d'afficher des images est la première étape vers la construction d'un jeu vidéo. Préparez-vous pour les étapes suivantes!

src/content/platformer/step03_fr.md

@@ -0,0 +1,98 @@
+---
+title: Création des plateformes
+layout: guide_step_fr.pug
+download: /assets/platformer/steps/step03.js
+---
+
+Un jeu de plateforme à besoin de... plateformes, juste? Il existe plusieurs techniques pour gérer des plateformes and la physique y relative. Dans cet atelier, nous allons considérer les plateformes comme des **sprites**, comme n'importe quel autre caractère dans le jeu.
+
+<small>Si c'est la méthode la plus simple, c'est loin d'être la plus efficace.</small>
+
+Une plateforme de taille 4×1 et 1×1 ressembleront à ceci.
+
+![4x1 grass platform](/assets/platformer/grass_4x1.png) ![1x1 grass platform](/assets/platformer/grass_1x1.png)
+
+Comme pour les images, il y a une méthode pour créer des _sprites_ (dans ce cas des `Phaser.Sprite`) et les ajouter automatiquement
+
+Comment séparer la logique du jeu, d'une carte et de notre jeu? L'idée est d'utiliser des fichiers **JSON** représentant chaque niveau. Le répertoire `data` en contient deux pour débuter.
+
+<small>Idéalement ces fichiers sont à générer à l'aide d'un éditeur <em>ad hoc</em>, tel que Tiled.</small>
+
+Si vous ouvrez un de ces fichiers, on peut y voir les plateformes stockées dans un tableau (`[]`).
+
+```javascript
+{
+    "platforms": [
+        {"image": "ground", "x": 0, "y": 546},
+        {"image": "grass:4x1", "x": 420, "y": 420}
+    ],
+    // ....
+}
+```
+
+# Tâches
+
+## Charger les données des niveaux
+
+1. Phaser considère les fichiers JSON comme un type d'asset, tel qu'une image. Nous devons donc précharger le fichier de manière similaire.
+
+  ```javascript
+  PlayState.preload = function () {
+    // ...
+    this.game.load.json('level:1', 'data/level01.json');
+  };
+  ```
+
+  Comme pour l'image, on donne un nom à l'élément pour pouvoir s'en reservir par la suite.
+
+2. À présent, pour pouvons y accéder dans l'étape `create`.
+
+  ```javascript
+  PlayState.create = function () {
+    //...
+    this.loadLevel(this.game.cache.getJSON('level:1'));
+  };
+
+  PlayState.loadLevel = function (data) {
+    console.log(data);
+  };
+  ```
+
+  `console.log()` va afficher le contenu du niveau dans la console du développeur qu'on peut afficher depuis la touche F12 du navigateur.
+
+## Dessiner les plateformes à l'aide de _sprites_
+
+1. Avant de créer les _sprites_, nous devons précharger toutes les images requises. Et ceci, va dans l'étape `preload`.
+
+  ```javascript
+  PlayState.preload = function () {
+    // ...
+    this.game.load.image('ground', 'images/ground.png');
+    this.game.load.image('grass:8x1', 'images/grass_8x1.png');
+    this.game.load.image('grass:6x1', 'images/grass_6x1.png');
+    this.game.load.image('grass:4x1', 'images/grass_4x1.png');
+    this.game.load.image('grass:2x1', 'images/grass_2x1.png');
+    this.game.load.image('grass:1x1', 'images/grass_1x1.png');
+  };
+  ```
+
+2. À présent, nous pouvons compléter la méthode de chargement du niveau `loadLevel` afin de dessiner les plateformes. Le tableau de plateformes se parcourse à l'aide d'un `forEach`. Le `this` tout seul est lié à comment JavaScript fonctionne en interne.
+
+  ```javascript
+  PlayState.loadLevel = function (data) {
+    data.platforms.forEach(this.spawnPlatform, this);
+  };
+
+  PlayState.spawnPlatform = function(platform) {
+    this.game.add.sprite(platform.x, platform.y, platform.image);
+  };
+  ```
+
+  Rafraîchir le navigateur va laisser apparaître les plateformes à l'écran.
+
+![Des plateformes](/assets/platformer/step02_check.png)
+
+# Vérifications
+
+- Vous pouvez voir les plateformes dessinées sur la fond d'écran;
+- Assurez-vous de bien utiliser `game.add.sprite` et non `game.add.image`.