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:

Mettre à jour et afficher un score

Nous allons utiliser une variable pour mettre à jour et se souvenir du score du joueur. Les variables sont utiles pour se souvenir de tout type d'information. Il y a les variables de scène (les plus utilisés), les variables globales (des variables partagé entre toutes les scènes du jeux) et les variables d'objets (qui sont spécifique à chaque instances d'un objet. Elles sont aussi très utile, et nous allons les utiliser pour créer un enemi plus tard).
Ajoutez une action au dernier évènement que nous avons créé.

Choisir l'action Variables > Value of a variable. Cette action sera utilisé pour ajouter 100 à la variable Score, donc remplissez le paramètre comme ci-dessous:

Remarquez que vous n'avez pas à déclarer les variables avant de les utiliser: Si vous utilisez une nom de variable qui n'existe pas, GDevelop créera la variable pour vous. Vous pouvez aussi déclarer et même définir n'importe quelle variable: Pour cela, cliquez sur le bouton à coter du premier paramétré pour ouvrir la liste des variables de scène déclarés.

L'évènement devrait maintenant ressembler à :

Pour afficher la variable, nous avons besoin d'un objet texte affichant le score. Sur la scène, ajoutez un nouvel objet. Cette fois, choisissez Text quand on vous demande le type de l'objet.

Modifier l'objet et changez sa couleur pour que le texte soit noir et la font assez grosse :

Une fois fait, appelez l'objet ScoreText:

Puis, dans les évènements, ajoutez un nouveau évènement vide. Ajoutez à son action Modify the text, dans la catégorie “Text object”. Entrez le nom de l'objet ( ScoreText ) comme premier paramètre, puis = en deuxième paramètre, puis entre le texte à afficher comme dernier paramètre: Nous voulons afficher “Score:” suivie de la valeur de la variable Score.
Pour cela, nous pouvons écrire l'expression Variable(Score) pour avoir la valeur de la variable. Toutefois, c'est un nombre, et nous devons le convertir en texte en utilisant la fonction ToString. En fin, l'expression et le texte doivent être concaténés en utilisant le +, comme ci-desssous.

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

Il y a beaucoup de fonctions disponible: il suffit de cliquer sur le bouton à coter du paramètre pour avoir un éditeur affichant tous ce que vous pouvez utiliser.
Votre évènement devrais ressembler à :

Si vous prévisualiser le jeux, vous allez remarquer que votre score est mis à jour quand vous prenez une pièce, et afficher dans l'objet texte. Toutefois, nous voulons que le score soit toujours visible.
Pour cela, retournez à l'éditeur de scène. Nous allons ajouter un calque (layer) et ajouter le texte à ce calque. Vous pouvez considérer les calques comme étant des calques transparents où les objets sont affichés: en ajoutant un objet à un calque différent, nous nous assurons qu'il sera toujours afficher, tant qu'on ne déplace pas la caméra de cette calque.

Cliquer sur Layers' editor dans la barre d'outils pour l'afficher :

Dans l'éditeur de calque, ajouter un nouveau calque:

Puis sélectionner le nouveau calque, et mettez le devant le calque de base:

Double cliquez sur le nouveau calque pour le renommer (appelez le GUI par exemple).
Finalement, faite un clique droit sur l'objet texte dans la scène, et déplacer le sur le calque GUI:

Maintenant, le texte sera toujours afficher. Assurez vous qu'il est positionner correctement dans la fenêtre. Vous pouvez utilisez la barre d’outils pour centrer la camera sur la scène d'origine. (Cliquez sur le bouton Return to the initial position puis sur le bouton Mask pour afficher le masque montrant la taille de la fenêtre.

Ajout d'un ennemi

Finissons ce tutorial en ajoutant un ennemi qui va bouger sur les plateformes.
Dans l’éditeur de calque, assurez vous que le calque de base est sélectionné (sinon, les nouveaux objets seraient ajoutés sur le calque GUI et ne seront pas affichés au bon endroit).
Puis ajoutez ces trois objets :

Le premier, appelé Mauvais est l'objet représentant l'ennemi : il est composé d'une animation avec les images slimeWalk1.png et slimeWalk2.png.
Les deux autres objets seront utilisés comme des marqueurs pour s'assurer que l’ennemi ne quittera pas les plateformes. Mettez l’ennemi sur une plateforme, en s'assurant qu'il entre en collision avec un des marqueurs :

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