Add step 01 in french.

Signed-off-by: Yoan Blanc <[email protected]>

Author: greut

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 2.6\. 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/layouts/guide_step_fr.pug

@@ -0,0 +1,10 @@
+extends default_fr.pug
+
+block extra
+    h2 Téléchargement
+    if download
+        p Êtes-vous bloqué? Jetez un œil
+            = ' '
+            a(href=relative(download), télécharger) au code source
+            = ' '
+            | de cette étape.