FIXME This page is not fully translated, yet. Please help completing the translation.
(remove this paragraph once the translation is finished)

Comment créer un jeu de plateforme?

Ce tutoriel vous aidera à prendre en main GDevelop:
Vous allez créer un simple jeu de plateforme dans lequel le joueur peut sauter de plateforme en plateforme et collecter des pièces.

Vous pouvez également lire l'autre tutoriel pour débutant en suivant ce lien si vous préférez créer un jeu de tir!

Il est à noter que vous pouvez lire la Page de Prise en Main pour avoir un aperçu du logiciel : le concept et l'interface de GDevelop y sont expliqués.

Télécharger GDevelop

Si vous n'avez pas GDevelop, téléchargez-le depuis le site officiel :http://compilgames.net.
Téléchargez toujours GD depuis cette page afin de bénéficier de la toute dernière version.
Procédez à l'installation de Gdevelop et lancez l'application. La page de démarrage apparaît :

Si vous le souhaitez, vous pouvez lire cette page pour avoir un bref aperçu de l'interface de GDevelop.
Notez que le thème visuel de GDevelop peut être différent : vous pouvez choisir un thème en cliquant sur Fichier > Options, puis sélectionnez Apparence et enfin choisissez l'un des thèmes proposés.

Créer un nouveau Jeu

Cliquez sur Nouveau en haut à gauche pour créer un nouveau projet.
La fenêtre qui s'ouvre vous donne le choix de la plateforme sur laquelle le jeu sera basée, ainsi que quelques modèles. Choisissez Plateforme Web puis cliquez sur Projet vierge :

Choisissez également un répertoire et un nom de fichier pour votre jeu. Validez le tout en cliquant sur Créer le nouveau projet.
Une première scène est automatiquement créée et ouverte pour vous la première fois que vous créez un jeu.

Obtenir les images et ressources nécessaires au tutoriel

Avant d'aller plus loin, nous avons besoin de quelques images pour notre jeu.
Vous pouvez les télécharger ici : http://www.compilgames.net/dl/PlatformerTutorialResources.zip.

Une fois ces fichiers téléchargés, vous devez les extraire dans le même dossier que votre projet.

Créer l'objet Personnage

Le joueur va être amené à contrôler un personnage qui peut sauter et se déplacer sur des plateformes. Nous allons créer cet objet.
Faites un clic droit au centre de la scène de GDevelop et choisissez Insérer un nouvel objet. Une fenêtre s'ouvre alors pour que vous choisisseiez le type d'objet à créer : sélectionnez Sprite et cliquez sur OK.

L'éditeur de l'objet s'ouvre. Pour l'instant, l'objet n'a qu'une animation vide. La première chose à faire est d'ajouter une image à cette animation : faites un clic droit dans la zone blanche en bas de la fenêtre et choisissez Ajouter une image depuis un fichier :

Choisissez l'image nommée p1_stand dans le dossier puis cliquez sur Ouvrir : l'image est ajoutée à l'objet. Vous pouvez fermer l'éditeur et constater que l'objet apparaît sur la scène :

L'objet a été appelé NouvelObjet par défaut : pour le renommer, sélectionnez l'objet dans la liste à droite de la fenêtre, puis appuyez sur la touche F2. Tapez ensuite Playercomme nouveau nom et appuyez sur la touche Entrée.

Ajouter des plateformes

Créons maintenant un objet qui sera utilisé pour les plateformes :

Une fois encore, faites un clic droit sur la scène et choisissez Insérer un nouvel objet. Cette fois, choisissez le type d'objet Mosaïque :

Pour l'instant, votre sélection est grisée : quand vous cliquez sur OK, GDevelop vous demande si vous souhaitez activer l'extension pour votre projet. Cliquez sur Oui.

L'éditeur de l'objet s'ouvre : sur la gauche, il y a la banque d'images qui montre toutes les images utilisées par le projet. Tout d'abord, ajoutez une image à la liste en utilisant le bouton + de la barre d'outil (située en haut de la liste d'images) :

Choisissez l'image grassHalfMid.png. L'image est ajoutée à la liste : cliquez sur son nom dans la liste puis cliquez sur le bouton + en bas à droite de l'éditeur pour insérer automatiquement le nom de l'image dans la zone de texte :

Vous pouvez maintenant cliquer sur Ok pour fermer l'éditeur.
L'objet est ajouté sur la scène mais il est très petit : utilisez les poignées autour de l'image pour la redimensionner afin qu'elle ressemble à une plateforme :

Assurez-vous de placer la plateforme sous le personnage, ainsi celui-ci ne tombera pas en dehors de l'écran au lancement du jeu. Enfin, dans l'éditeur d'objet, renommer l'objet pour l'appeler Grass.

Ajouter des comportements aux objets

Les mouvements du personnage pourraient être créés en utilisant les événements de GDevelop, mais ce serait une tâche peu longue et difficile. Pour éviter cela, nous allons utiliser des comportements, ceux-ci nous permettant d'ajouter aux objets des comportements prédéfinis.

Double-cliquez sur l'objet Player sur la scène : cela vous montrera une grille contenant les propriétés de l'objet et, tout en bas, les comportements (ou automatismes) associés à l'objet. Cliquez sur Ajouter un automatisme :

Une liste de comportements apparaît. Pour cet objet, choisissez le comportement Objet se déplaçant puis cliquez sur Ok :

C'est tout : vous pouvez voir dans la grille de propriétés que le comportement a été ajouté de même que quelques paramètres concernant le déplacement de l'objet. Vous pouvez changer ces paramètres comme la vitesse de saut : fixez-la par exemple à 800 pour que le saut soit plus puissant.

Nous devons également paramétrer des objets pour qu'ils se comportent comme des plateformes, sinon le personnage tombera et passera au travers même si l'objet ressemble à une plateforme.

Cliquez sur l'objet plateforme sur la scène et, dans la grille de propriétés, choisissez Ajouter un automatisme :

Cette fois, choisissez le comportement Plateforme et cliquez sur Ok :

Il est à noter que les comportements sont appliqués à tous les objets portant le même nom sur la scène : si vous insérer une autre plateforme sur la scène (en faisant glisser l'objet depuis la liste d'objet jusqu'à la scène à l'aide d'un clic gauche prolongé), les autres objets plateformes auront les mêmes paramètres et donc les mêmes comportements : pas besoin de refaire les manipulations. Vous pouvez également cloner un objet directement sur la scène : clic gauche prolongé sur l'objet, pressez la touche Ctrl et déplacez l'objet (c'est le clone qui sera déplacé!).

Lancer un aperçu

Vous pouvez maintenant tester si les comportements fonctionnent :

Dans la barre de menu, sélectionnez Scène, choisissez Aperçu :

Votre navigateur favori s'ouvrira pour lancer votre jeu :
Vous pouvez déplacer votre personnage grâce aux flèches de votre clavier, et utiliser la touche Majuscule (Shift) pour sauter! Pour l'instant, l'objet n'a pas d'animation (l'image du personnage ne s'anime pas pour simuler la marche) : nous l'ajouteront plus tard.

Si l'objet ne bouge pas, assurez-vous d'avoir ajouté le bon comportement. Assurez-vous également que vous avez ajouté le comportement Plateforme à l'objet Grass, sinon le personnage tombera en dehors de l'écran.

Ajouter différentes plateformes

D'autres types d'objets peuvent être utilisés en tant que plateforme : ajoutez un nouvel objet avec un clic droit sur la scène et choisissez Insérer un nouvel objet.

Choisissez un objet Sprite, cliquez sur Ok et, dans l'éditeur, ajoutez l'image appelée Grass.png:

Fermez l'éditeur et renommez l'objet pour l'appeler Plateforme:

Puis ajoutez-lui le comportement Plateforme comme nous l'avons vu avant (double-cliquez sur l'objet sur la scène, ou sélectionnez-le dans la liste des objets. Puis choisissez Ajouter un automatisme et choisissez le comportement Plateforme.) Ces objets sont maintenant considérés comme des plateformes : vous pouvez en ajouter davantage sur la scène et lancer un aperçu pour essayer de sauter de plateforme en plateforme.

Avant d'aller plus loin, vous voudrez probablement changer la couleur de l'arrière plan de la scène : dans le gestionnaire de projets (tout à gauche de la fenêtre), faites un clic droit sur New Scene dans la liste et choisissez propriétés.

Vous pouvez maintenant modifier la couleur de l'arrière plan en cliquant sur le carré de couleur. Notez bien que nous ajouterons des objets d'arrière plan à la fin du tutoriel.

Stop ! Il est temps de sauvegarder !

Avant de continuer, souvenez-vous de sauvegarder régulièrement votre travail : dans la barre de menu, cliquez sur Fichier puis sur Enregistrer :

Modifier les animations du personnage

Pour le moment, le personnage affiche toujours la même image : en utilisant les événements, nous allons modifier ses animations en fonction des actions qu'il exécute (sauter, marcher vers la droite, marcher vers la gauche…)

Avant de faire cela, nous devons ajouter les animations appropriées à l'objet Player : faites un double-clic sur Player dans la liste des objets pour ouvrir l'éditeur.
En haut à gauche de la fenêtre, cliquez sur le + de la barre d'outils pour ajouter une animation :

Une animation nommée Animation 1 a été ajoutée à la liste : cliquez dessus pour la sélectionner. Elle est vide : dans la zone blanche en bas de la fenêtre, faites un clic droit et ajoutez l'image nommée p1_jumping.png:

Cette animation sera utilisée quand l'objet sera dans les airs.
Nous avons également besoin d'une animation pour quand l'objet sera en train de courir sur une plateforme : ajouter une nouvelle animation comme nous l'avons fait juste avant et, quand vous ajouterez des images, sélectionnez les 5 images p1_walk03.png, p1_walk04.png, … and p1_walk07.png.

Ces images seront affichées afin de créer l'animation. Nous avons besoin de paramétrer un peu cette animation : faites un clic droit sur Animation 2 dans la liste et cochez Boucler l'animation. En faisant le même clic droit, sélectionnez cette fois Temps entre chaque image et tapez 0.05 dans la fenêtre pour que l'animation se déroule plus vite qu'avec les options par défaut.
Vous devriez obtenir ceci dans l'éditeur :

Vous pouvez prévisualiser l'animation en cliquant sur le petit bouton “play” (flèche qui tourne) situé en haut à gauche de l'éditeur.
Fermez l'éditeur quand vous avez terminé.

Maintenant, nous avons besoin de changer l'animation affichée en fonction de ce que fait le personnage. Allez dans l'éditeur d'événements en cliquant sur Evenements juste à côté de l'onglet Scène :

Puis dans la barre de menu, cliquez sur Ajouter un évènement pour créer un nouvel événement :

L'événement est créé avec une liste (vide) de conditions sur la gauche et une liste (vide) d'actions sur la droite. Placez votre pointeur de souris sur la liste de conditions et choisissez Ajouter une condition dans le menu qui apparaît :

Dans l'événement, nous allons modifier l'animation associée au personnage lorsqu'il saute : Dans la liste des conditions, choisissez Automatisme Plateforme > Est en train de sauter. Puis, dans les paramètres (les 2 zones de texte à droite), entrez Player comme objet et PlatformerObject comme automatisme.

Cliquez sur Ok pour valider la condition.
Maintenant, ajoutez une action à cet événement :

Dans la liste des actions, choisissez Sprite > Animations et images > Changer l'animation. Entrez Player comme objet (zone de texte en haut à droite), puis = en second paramètre et 1 dans la dernière zone.
Cliquez sur Ok pour valider l'action : maintenant l'animation 1 sera lancée quand le personnage saute.

Créez un événement similaire mais avec la condition Player est en train de tomber (vous pouvez également faire un copier-coller de l'événement précédent puis double-cliquer sur la condition pour la modifier) :

Nous devons ensuite mettre en place l'animation 0 quand le personnage atterrit, et aussi lancer l'animation 2 quand le personnage commence à se déplacer.
Cela peut se faire en utilisant 2 événements : le premier vérifie si le personnage est sur le sol et bouge. Dans ce cas, l'animation 2 s'active. Le deuxième événement vérifie que le personnage est sur le sol et ne bouge pas. Dans ce cas, c'est l'animation 0 qui s'active. Ici, nous allons utiliser une fonction sympathique appelée Sous événement : comme nous utilisons 2 fois la même condition (vérifier que le personnage est sur le sol), nous pouvons ajouter cette condition en tant qu'événement, et ensuite ajouter des sous événements à cet événement : les sous événements sont activées uniquement si les conditions de leur “parent” sont remplies.

Ajoutez un événement avec la condition Player est sur le sol. Puis placez le pointeur de souris au-dessus de l'événement et choisissez Ajouter un sous événement : un sous événement vide est créé.

Dans ce sous événement vide, ajoutez la condition Player bouge. Ensuite, ajoutez l'action Faire =2 au numéro de l'animation de Player (Dans la liste des actions, choisissez Sprite > Animations et images > Changer l'animation. Entrez Player comme objet (zone de texte en haut à droite), puis = en second paramètre et 2 dans la dernière zone. Cliquez sur Ok pour valider l'action : maintenant l'animation 2 sera lancée quand le personnage bouge sur le sol.)
Cela doit donner le résultat suivant :

Ensuite, créez un 2ème sous événement. Cette fois, inversez la condition (en cochant la case) de manière à ce que la condition soit vraie quand le personnage ne bouge pas :

Changez également les paramètres pour que l'animation 0 soit mise en place (Dans la liste des actions, choisissez Sprite > Animations et images > Changer l'animation. Entrez Player comme objet (zone de texte en haut à droite), puis = en second paramètre et 0 dans la dernière zone. Cliquez sur Ok pour valider l'action : maintenant l'animation 0 sera lancée quand le personnage est immobile au sol.
Cela doit donner le résultat suivant :

Maintenant vous pouvez lancer un aperçu et voir les changements au niveau des animations du personnage :

Si quelque chose ne fonctionne pas, assurez-vous que les événements se présentent exactement comme sur les images d'illustrations montrées précédemment.
Vous pouvez voir que lorsque le personnage se dirige vers la gauche, son image n'est pas orientée dans la bonne direction. Heureusement, il existe une action qui peut être utilisée pour inverser l'orientation comme dans un miroir.

Retournez dans l'éditeur d'événements et ajoutez un nouvel événement : ajoutez une condition qui vérifie si la touche Left (Gauche) est appuyée (Sélectionnez Clavier > Une touche est appuyée).

Il est à noter que vous n'êtes pas obligé d'écrire Left : vous pouvez cliquer sur le petit bouton juste à côté de la zone de texte puis simplement appuyer sur la flèche Gauche du clavier. GDevelop complétera automatiquement la zone du paramètre.

Dans l'événement, ajoutez une action pour inverser l'image (Sélectionnez Sprite > Effets > Inversé horizontalement) :

Ajoutez ensuite un autre événement similaire, vérifiant la touche Right (la flèche Droite) est appuyée et qui remette le personnage dans son orientation initiale :

Centrer la caméra sur le personnage

Il existe plusieurs manières de bouger la caméra pour qu'elle suive le personnage. Pour l'instant, nous allons le faire très simplement en utilisant l'action Centrer la caméra sur un objet. Ajoutez simplement cette action dans un événement vide, sans condition:

Note : Vous pouvez lire ce fil du forum officiel si vous voulez vous informer sur la manière de limiter les mouvements de la caméra à la taille de la fenêtre.

Ajouter une plateforme 'Jump through' (pour sauter au travers)

Pour l'instant, toutes les plateformes sont en pierre solide mais nous pouvons aussi créer des plateformes 'Jump through' au travers desquelles on peut sauter (elles deviennent accessibles depuis le bas en sautant au travers) :
Créez un nouvel objet Sprite et ajoutez-lui l'image bridge.png :

Vous pouvez nommer cet objet “Jumpthru” par exemple:

Ensuite, ajoutez-lui le comportement “Plateforme” comme nous l'avons fait auparavant pour les autres plateformes. Une fois cela fait, changez le Type qui apparaît tout en bas de la grille de propriétés (en cliquant sur Platfeforme, un menu déroulant apparaît) en sélectionnant “Accessible depuis le bas”:

C'est tout! Vous pouvez maintenant lancer un aperçu : le personnage est capable de sauter au travers de ce type de plateformes.

Ajouter des pièces et un score

Et si on ajoutait des pièces à collecter dans ce niveau : Créez un nouvel objet appelé Pieces avec pour imagecoinGold.png. Vous pouvez mettre plusieurs de ces pièces dans le niveau : vous pouvez soit faire glisser l'objet à partir de la liste des objets, soit appuyer sur Ctrl puis faire glisser un objet qui est déjà sur la scène pour le cloner!

Maintenant, faisons disparaître les pièces quand le personnage les touche: Ajoutez un nouvel événement et ajoutez une condition pour la collision entre l'objet Piece et l'objet Player :

Puis ajoutez une action pour supprimer l'objet Piece (vous pouvez la trouver dans Tous les objets > Objets > Supprimer un objet). Notez bien que cette action ne sera déclenchée que pour les pièces qui remplissent la condition définie précédemment c'est-à-dire uniquement les pièces qui entrent en collision avec le personnage! Ce puissant mécanisme vous permet de lancer des actions seulement sur des objets qui répondent aux critères spécifiés par les conditions.

Nous pouvons aussi jouer un petit son quand une pièce est collectée. Ajoutez une autre action pour jouer le son coin.wav:

Update and display a score

We're going to use a variable to update and remember the score of the player. Variable are useful to remember all kind of information. There are scene variables ( The most used ones ), global variables ( variables that are shared between all scenes of the game ) and objects variables ( which are specific to each instance of an object. There are also very useful and we'll use one for creating an enemy later ).
Add an action in the latest event we've made:

Choose action Variables > Value of a variable. This action will be used to add 100 to the Score variable, so fill the parameter as shown here:

Note that you do not need to declare variables before using them: If you use a variable name that does not exist, GDevelop will create this variable for you. You can also declare and even set an initial value to any variable: To do this, click on the button next to the first parameter to open the list of all declared scene variables.

The event should now looks like this:

To display the variable, we need a text object displaying the score. On the scene, add a new object. This time, choose Text when asked for the type of the object:

Edit the object and change its color so that the text is black and the font is large enough:

When it's done, name this object ScoreText:

Then in the events, add a new blank event. Add to it action Modify the text, inside “Text object” category. Enter the name of the object ( ScoreText ) in the first parameter, then = in the second parameter, and enter the text to be displayed in the last parameter: We want to display “Score:” followed by the value of the Score variable.
To do this, we can write the expression Variable(Score) to get the value of the variable. However, this is a number and we must convert it to a text using ToString function. Finally, the expression and the text must be concatened using a +, like this:

“Score:”+ToString(Variable(Score))

There are a lot of functions available: Just click on the button next to the parameters to show an editor displaying everything that you could use.
Here is how your event should look like:

If you preview the game, you'll notice that the score is updated when you get a coin, and displayed in the text object. However, we want to make sure that the score is always visible.
To do this, go back to the scene editor. We're going to add a layer and put the text on this layer. You can consider layers as being transparent glasses where objects are displayed: By putting the object on a different layer, we'll ensure that it will be always displayed, as long as the camera of this layer is not moved.

Click on Layers' editor in the ribbon to display this editor:

In the layer editor, add a new layer:

Then, select the new layer and move it over the Base Layer:

You can double click on the New Layer so as to rename it ( Name it GUI for example ).
Finally, make a right click on the text object on the scene, and move it to the GUI layer:

Now, the text will be always displayed. Just make sure that it is correctly positioned on the window. You can use the ribbon to center the camera on the scene origin ( Click on Return to the initial position button and then click on Mask to display a mask showing the size of the window:

Add an enemy

Let's end this tutorial by adding an enemy that will be moving on platforms.
In the layers editor, make sure that the base layer is selected ( otherwise, the new objects could be added on the GUI layer, and won't be displayed at their right position ).
Then, add three these objects:

The first one called Bad is the object representing the enemy: It is composed of a animation looping between images slimeWalk1.png and slimeWalk2.png.
The two other objects will be used as markers to make sure that the enemy won't move out of platforms. Put the enemy on a platform. Make sure that it is colliding with one of the marker:

Creating the movement of the enemy

To move the enemy, we'll use the builtin actions allowing to move an object, and each enemy will remember the direction ( Left or Right ) of its movement using an object variable.

Add this event:

Unlike before, we're not changing here a scene variable but an object variable ( The action can be found in All Objects > Variables ). Whenever a Bad object will be colliding with a GoLeft object, its GoLeft variable will be set to 1. We'll add the event to move the enemy in a few moment.
For now, add another similar event to set the variable of the object to 0 if he is colliding with GoRight:

Now that the object is able to remember where he should go, we just have to compare the value of this variable and move the object:
Add an event checking if the variable of object Bad is equal to 0. Then, add an action adding to Bad a force with coordinates being 50 pixels on X axis and 0 on Y axis: Forces are a built-in mechanism allowing to easily move objects on the scene ( The action is available in All Objects > Displacement > Add a force to an object ). Here, the force will move the object to the right at the speed of 50 pixels per seconds:

Add a similar event to move the object to the left when variable GoLeft of Bad is equal to 1:

If you launch the preview, you should see that the enemy is now moving between the markers. If it does not work, check that the object is colliding with one of the marker at the beginning of the scene ( otherwise, it won't move at all! ). Also check that the events are correct.

The markers are visible when we're playing. To hide them, just add this event:

The condition is available inside Scene category, and is true only when the scene begins. The two actions, available in Objects > Visibility are useful to hide an object while making sure it is still on the scene.

Destroying the enemy when jumping on it

To finish this tutorial, the player should be able to destroy the enemy by jumping on it.
This can be done by adding an event with two conditions: The first condition checks if the player is colliding with an enemy. The second condition checks if the player is falling.
If these conditions are true, the enemy object colliding with the player is destroyed and we can even make the player jumping again to give the impression he is bouncing on the enemy:

We have already used the conditions and the first action. In last two actions are available inside the Platform behavior category.

Adding background objects

Adding some objects in the background is really easy: Just add some sprites with the images you wish and put them on the scene.

To make sure that the objects are displayed behind the player, select them in the scene editor and put a negative value as a Z Order: Any object with a greater Z Order value will be displayed in front of them.

Also make sure that these objects are on the Base layer ( The layer property should be empty ).

Enhance the game

That's all for this tutorial! You can download the game here if necessary, if you want to compare with your version or if something does not work.
A enhanced version of the game is also available as a template when you create a new game. You can try it online: http://www.compilgames.net/games/WebPlatformer

Let's discover GDevelop by yourself

You can browse the others tutorials or read the Getting started page.
There is also lots of examples bundled with GDevelop and templates available when you create a new game.

If you have any problem, you can send a message on the official forum.
If you have any remarks about the tutorial, do not hesitate to also send a message on the forum, or even fix the tutorial by yourself: you just have to create an account on the wiki 8-)