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

Tirs sur tanks – Tutoriel pour débutant

Ce tutoriel vous introduit à l’utilisation de GDevelop : vous allez créer un jeu très simple, avec des ennemis qui se déplacent vers le joueur, celui-ci pouvant tirer dessus afin qu'ils explosent au contact des missiles.

Pour obtenir une vue d'ensemble du logiciel, je recommande de commencer par lire la page Débuter.

Télécharger GDevelop

Si vous n'avez pas encore GDevelop, téléchargez-le sur le site officiel : gdevelop-app.com

Téléchargez toujours GDevelop à partir de cette page pour être sûr d'avoir la dernière version. Une fois que GDevelop est installé et lancé, la page de démarrage est affichée :

Télécharger les sources

Vous pouvez télécharger le projet terminé beginner-tutorial.zip afin de voir comment il est fait au cas où vous seriez bloqué ou ne comprendriez pas quelque chose.

Créer un nouveau projet

Cliquez sur Create a new project sur la page d'accueil.

Ensuite, vous avez le choix entre créer un nouveau projet à partir d'un modèle ou créer un projet vide.

Nous avons besoin d'un projet vide, mais avant de faire ce choix, nous devons définir un dossier en bas de la page dans lequel notre projet sera stocké.

Pour choisir un emplacement personnalisé, nous devons cliquer sur le bouton Choose folder et parcourir le système de fichiers de notre ordinateur pour trouver le dossier que nous voulons utiliser.

Une fois que vous avez sélectionné un dossier, cliquez sur l'option Empty game dans la liste.

Créer une nouvelle scène

La première chose que nous avons à faire est créer une nouvelle scène. Cliquez sur le bouton dans le gestionnaire de projet :

Ensuite, cliquez sur la nouvelle scène NewScene que nous venons de créer, afin d'ouvrir l'éditeur de scène.

Obtenir les images et ressources

Avant de continuer, nous avons besoin de quelques images pour notre jeu. Vous pouvez les télécharger ici : Télécharger les images

Une fois que vous avez téléchargé ce fichier, extrayez son contenu dans le dossier dans lequel vous avez créé le projet.

Créer la tourelle du joueur

Le joueur contrôlera une tourelle pour tirer sur les ennemis. Dans l'éditeur d'objets, cliquez sur le bouton pour ajouter un nouvel objet. Une fenêtre demande le type d'objet à créer :

Nous avons besoin d'un objet Sprite, donc choisissez ce type dans la liste. Ensuite, le panneau de propriétés de l'objet devrait apparaitre par défaut. Si ce n'est pas le cas, faites un clic droit sur le NewObject dans l'éditeur d'objets et sélectionnez Edit object dans le menu.

Ensuite, nous devons ajouter une animation à l'objet, donc cliquez sur le bouton correspondant dans la fenêtre de propriétés.

À présent, vous devriez voir les propriétés d'animation de l'objet.

Ensuite, nous devons ajouter l'image de la tourelle comme animation. Cliquez sur le gros bouton « plus » et sélectionnez l'image aaguntopdown.png dans le dossier du projet. L'image devrait dès lors être affichée dans la fenêtre.

Terminez en cliquant sur Apply pour enregistrer.

Ensuite, renommez l'objet si vous ne l'avez pas encore fait. Faites un clic droit sur l'objet tourelle dans l'éditeur d'objets, sélectionnez Rename dans le menu et entrez le nom turret, afin que nous puissions par la suite désigner l'objet par ce nom.

Ajouter la tourelle à la scène

Pour ajouter la tourelle à la scène, sélectionnez-la dans l'éditeur d'objets puis cliquez sur l'éditeur de scène. Cela devrait créer une tourelle dans la scène et nous permettre de la sélectionner, la déplacer et la pivoter.

Premiers évènements

Nous allons créer les évènements qui vont servir à animer l'ensemble du jeu. D'abord, la tourelle doit se tourner vers le pointeur de la souris.

Allez dans l'éditeur d'évènements en cliquant sur l'onglet des évènements :

Ensuite, en haut, cliquez sur le bouton 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 souris sur la liste d'actions et cliquez sur Add action :

La première action tournera la tourelle vers la souris : dans la fenêtre suivante, choisissez l'action Common action for all objects > Angle > Rotate toward position. La partie droite de la fenêtre montre alors le nom de l'action ainsi que les paramètres. Définissez la valeur du premier paramètre en cliquant sur le paramètre et en sélectionnant la tourelle parmi les objets disponibles. Pour les paramètres suivants, entrez MouseX() et MouseY() afin que l'objet se tourne vers la position de la souris. Lorsque le jeu sera lancé, ces deux expressions obtiendront les abscisse et ordonnée de la souris. Pour la vitesse angulaire, 0 signifie rotation instantanée et c'est ce que nous voulons ici. Si vous préférez que la tourelle se déplace lentement vers la position de la souris, vous pouvez entrer une petite valeur telle que 100.

Maintenant, les paramètres de cet évènement devraient ressembler à cela :

Nous avons utilisé comme valeurs des expressions pour obtenir l'abscisse et l'ordonnée de la souris. Vous pouvez trouver d'autres formules dans l'éditeur d'expressions en cliquant sur l'icône bleue à côté des champs de valeur :

En cliquant sur l'icône, vous pouvez fouiller toutes les expressions classées par catégories.

Pour enregistrer les changements, cliquez sur OK dans le coin en bas à droite de la page.

Nous pouvons lancer un aperçu en cliquant sur le bouton prévu à cet effet en haut.

Si nous le faisons correctement, notre tourelle devrait se tourner vers la position de la souris.

Tirer des missiles avec la tourelle

Le joueur doit pouvoir tirer des missiles sur les ennemis. Nous avons d'abord besoin d'un objet missile : dans la liste d'objets sur la droite, faites un clic droit sur l'objet tourelle et choisissez Add a new object ou bien cliquez sur le bouton pour ajouter un nouvel objet. Choisissez Sprite, puis ajoutez une animation et choisissez l'image bullet.png, puis nommez l'objet missile. Tout comme nous avons fait précédemment pour la tourelle.

Ensuite, nous voudrions créer les missiles lorsque le bouton gauche de la souris est enfoncé. Allez dans l'onglet des évènements, et ajoutez un nouvel évènement de la même façon que nous l'avons fait pour la tourelle. La première action sera une action Create a new object, disponible dans la catégorie Common actions for all objects > Objects. Sur le côté droit, le premier paramètre doit être le missile, puisque nous voulons créer un objet missible. Les autres paramètres sont la position de la tourelle : entrez turret.X() et turret.Y() comme valeurs des 2e et 3e paramètres.

Il n'est pas nécessaire de préciser un calque (Layer) puisque nous n'en avons qu'un seul dans notre jeu. Cliquez sur OK pour disposer l'action.

Ajoutez ensuite une autre action après cette première action. Ne créez pas un autre évènement, cliquez seulement sur Add action sous la première action ! Cette fois, choisissez l'action appelée Common action for all objects > Movement > Add a force (angle). GDevelop contient un système de forces intégré qui permet de déplacer les objets facilement. Cette action sera utilisée pour déplacer le missile vers la souris lorsqu'il est lancé. Comme premier paramètre, entrez bullet afin que GDevelop déplace le missile tout juste créé dans l'action précédente. Comme angle, nous allons utiliser la direction de la tourelle : entrez turret.Direction() comme valeur du 2e paramètre. Pour le 3e paramètre, entrez 400 afin que le missile se déplace avec une vitesse de 400 par seconde. Enfin, entrez 1 comme valeur du dernier paramètre, afin que la force soit appliquée au missile de façon constante et que le missile continue de se déplacer après son lancement.

Nos deux actions doivent être lancées uniquement lorsque le joueur tire (en enfonçant le bouton gauche de la souris). Pour ce faire, nous devons ajouter une condition à l'évènement : cliquez sur Add condition dans l'évènement.

Choisissez la condition Mouse and touch > Mouse button pressed or touch held. Sur le côté droit, cliquez sur Button to test parameter et choisissez Left dans la liste. Enfin, fermez la fenêtre en cliquant sur le bouton OK. La condition est alors ajoutée à l'évènement.

Si vous prévisualisez le jeu maintenant, vous verrez qu'il y a deux problèmes : les missiles sont tirés trop rapidement, et ils apparaissent à l'origine de la tourelle, ce qui n'est pas très réaliste.

To address the first issue, we're going to use a timer: Add a second condition to the last event we've created. Choose the condition Timers and time > Value of a timer On the right side, enter 0.25 in the first parameter which the elapsed time in seconds, and “firerate” in the second parameter, which is the name of the timer we're going to use ( Do not forget the quotes around the timer's name! ).

But we are not done yet, as we want to shoot bullets every 0.25 seconds, we need to reset the timer to start from 0 after rich 0.25. So let add an action Timers and time > Reset a timer just below our movement action in the same event. Enter “firerate” as parameter which is the name of our timer ( again, beware of the quotes! ). This pair of condition and action will ensure that the actions used to fire the bullet are repeated when at least 0.25 seconds is elapsed since the last bullet creation :

We must now ensure that the bullets are fired from the canon of the turret.

In order to do that, we are going to add a custom point to our turret object and create the bullets in position of that point. Let open the object properties by right clicking the turret object on the right side and select Edit object from the list. It brings up the window where we can add animations to our objects and we should see button called EDIT POINTS.

After clicking the button, we can see that our object currently has 2 points by default, the Origin point and the Centre point. We can not rename these points but we can change their default position if we need to. But what we are here for is to add one more point to the object.

Let click the add button (plus symbol) to add a custom point to our turret object. We immediately see the new point added to the list with the name Point and position 0,0. Let rename this point to Canon and set the X position to be 110 and the Y position to be 35

Now in the preview on the top we should see our custom point is located at the end of our canon Now we can close the window and apply the changes we made.

The only thing is left to do is to tell GDevelop to fire the bullets from the Canon point of the turret. So in our create bullet action we need to change turret.X() and turret.Y() expressions, to turret.PointX(Canon) and turret.PointY(Canon). We can change them by clicking the expressions inside the editor. Don't forget the capital C in Canon as the name of the points are case sensitive.

If we run the preview now, our bullets should be fired from the canon of the turret but you may notice the bullet is a bit offset at times. That is because the origin point of the bullet is at the top left corner. The same way we did with the Canon point for the turret, change the position of the Origin point of the bullet to be in the middle.

Creating enemies attacking the turret

First, we must create the objects used for the enemies: Add an object to the object list ( Right click on an existing object > Add an object. Choose a Sprite object as before. ). Name it enemy.

Edit the object (right click in the list and select Edit object from the list) next add an animation to the object and two images: tank2fr1.png and tank2fr2.png. Then, change the time between the images to 0.05 and change the animation to Loop to make the animation repeat.

Click Apply when you done.

Stop! Save time!

Before going any further, remember to save frequently: Click File and then Save to save your project.

Enemy AI

Let's go back to the game. We want the enemies moving toward the turret: Go to the event editor and add a new event. What we want to do is creating an enemy every second: Let add a condition Timers and time > Value of a timer. Enter 1 in the first parameter and “EnemyCreation” for the name of the timer. Don't forget the quotes when you enter the name of the timer.

Next let add the action to create an enemy object: Add an action Common action for all objects > Objects > Create an object. Select enemy in the first parameter. For the second parameter, the X position of the new object to be created, enter the expression Random(800): This will return a random number between 0 and 800, so that each enemy we create will have a different position when they are created. For the Y position, enter -50. This will create the enemy outside the screen, so that the player won't have the feeling that an enemy tank just appeared from nowhere.

Finally, let add the action to reset the timer ( Timers and time > Reset a timer with “EnemyCreation” as parameter ). Again, don't forget the quotes when you enter the name of the timer. At this point, our event should look like this:

If we run a preview now, probably we won't notice anything as the enemy is created outside the screen. Let move the enemies toward the player. Add another event without any condition and choose the action Common action for all objects > Movement > Add a force to move toward an object. On the right side, for the first parameter, select enemy, and select turret for the second parameter. Enter 150 pixels per second for speed, and damping is 0, as the force will be continuously applied.

Now if we run a preview we should see that our enemies are moving toward the turret, but you may notice that they don't actually rotate toward the turret so let do something about that. Let add a second action after the movement which is the Common action for all objects > Angle > Rotate toward position and for the first parameter on the right select enemy as we are rotating the enemy and for the X and Y position we are going to use an expression to get the Centre point of the turret and make the enemies rotate toward that point and the angular speed is 0 so it is going to rotate immediately. At this point our enemy event should look like this:

If we run the preview now, our enemies should move and rotate toward the turret.

Adding explosions

It time to destroy the tanks. The first thing we want to do is create an explosion in position of the tanks when they are collided with the bullet. So let add a new sprite object, name it explosion and add all the images to an animation beginning with Explosion_

After all the images are added to the animation, set the time between the images to 0.01 seconds.

Save it by clicking Apply.

Next, we want to create the explosion when the bullet is in collision with the enemy. Let add a new blank event and add the condition Common conditions for all objects > Collision > Collision And on the right side for the first parameter select bullet and the second parameter select enemy

When it done, let add an action to create the explosion object just the way we have created the bullets and the enemies before but for X and Y position let use the expression enemy.X() and enemy.Y() which is going to get the X and Y position of the enemy object that is in collision with the bullet.

Finally, add the action after creating the explosion Common actions for all objects > Object > Delete an object and on the right side for parameter select the object enemy as we want to delete the enemy. Add the same action again, to also delete the bullet right after the enemy is deleted. At this point our event should look like this

If we run a preview now, we should notice a few problems. Our explosion objects are not created exactly in the position of the enemy and once it created the explosion object remain in the scene. To solve the second problem, let delete the explosion object after the animations is finished. Add a new empty event and the condition Sprite > Animations and Images > Animation finished For the parameter on the right select the explosion object as we want to do something if the animation of the explosion object is finished. And what we want to do is delete the explosion object so next let add the action, delete the explosion object.

To solve the first problem we need to understand what is the cause of the problem. When we create the explosion object by using the expression enemy.X() and enemy.Y() we are creating the objects at the origin point of the enemy object which is the top left corner of the enemy and we also creating the explosions from their origin point which is the top left corner of the explosion object.

To solve the problem, what we need to do is, change the position of the Origin point of the explosion to be in the middle of the object. Let edit the explosion object by right clicking the explosion object and select Edit object from the list. In the next window, select EDIT POINTS. Next we want to change the X and Y position of the Origin point to 120 which is right in the middle of the image

Next, what we want to do, instead of creating the explosion object at the Origin point of the enemy, we want to create the object at the Centre point. So let change the expression in the create explosion action from enemy.X() to enemy.PointX(Centre) and form enemy.Y() to enemy.PointY(Centre)

If we run a preview now, our enemies should explode and it should also look right.

Adding more explosions and a Game Over

Until now, the player could not die. We want the player's turret to be destroyed when an enemy tank is hitting it. First, add a new event, and do as we did for the event used to destroy the enemies: Add a condition testing for a collision between a tank and the turret. Then create an explosion at the turret position. Finally, add an action to destroy the turret:

It would be also interesting to display a “Game Over” text when the turret is destroyed: Add an object to the object list. This time, choose a Text object and name it GameOver.

Edit the object by right clicking on the object and and select Edit object from the list. Let change the text to Game Over, the text color to red and the text size to 40. Next, we can set a custom font by simply entering the path of the font. Because in this case our font is located in the project folder we only need to enter the name of the font file:

Finally, let add the text object to our scene.

What we want to do next, is hide the text object and display it if there is no turret in the scene meaning the turret is destroyed. Let add a new blank event and add the condition Scene > At the beginning of the scene

This condition has no parameters because the only thing it does is execute the action only once at the beginning of the scene. Next, add the action to the same event Common Actions for all objects > Visibility > Hide For parameter select the GameOver object as we want to hide this object

Now what we want to do is show the text object if there is no turret in the scene Add a new empty event and add the condition Common conditions for all objects > Objects > Objects count

For the first parameter on the right side select the turret object, for sign of test select the equal sign and for value of test enter 0 as we want to test if the number of turret in the scene is 0.

And what we want to do is show the text GameOver if there is no turret in the scene, so add the action Common action for all objects > Visibility > Show and for parameter we want to select the GameOver object.

Finally, an interesting effect is to stop the game and display Game Over with a little delay. Add a second condition Timers and time > Value of a timer for time parameter enter 0.1 and for name parameter enter “GameOver”. Then, add a second action: Timers and time > Change time scale and enter 0 as parameter to stop the game and display the Game Over text after 0.1 seconds.

This is what all the events should look like at this point. You can preview the game and should see that once the turret is destroyed, with a little delay the Game Over text is displayed and the game is stopped.

Optimizing the game

When a bullet get outside the screen, we no longer need that bullet but we still apply movement to it and we are checking collision between the bullet and the tank. Every device has limited resources such as memory and processing power and we are wasting this valuable resources that we need to address otherwise our game may slow down, crash and become unplayable when it rich the limit of the device we are playing our game on. You want your game to be playable on as many devices as possible so you always need to optimize your game and one way to do that is to delete objects that no longer required in our game and this way limit the amount of memory and processing power used by the game.

We could add an event to destroy the bullets when they are too far from the turret, that is quite easy. But we can also use a behavior. A behavior in GDevelop is adds a certain behavior and feature to an object, in this case we are going to add the Destroy outside screen behavior to the bullets so they get destroyed outside the screen.

Make a right click on the object in the object list and choose Edit object from the list. In the next window on the top, click the Behaviors tab, this tab going to display all the behaviors we have added to our object. It is empty now.

Click on the add behavior button

Next select from the list the Destroy outside screen behavior

Next you are going to see the behavior is added to the list. Normally if the behavior has any parameters it is also display here so you can change it, but this behavior has no parameters as the only think it does is destroy the object when it outside the screen. Click Apply and we are done.

If you run the preview now, probably you won't notice any difference as the game is very simple and you most likely using a device with at least 2GB of RAM and a dual core CPU. So there is plenty of resources for our simple game but in case we would create hundreds and thousands of bullets that you are free to try you may notice a little slow down after a while without destroying them.

Add a background

One last thing to make the game good looking is to add a background.

Add a Sprite object, name it background and add the background.jpg image to the object. Next, you can add the object to the scene as usual and make sure it fills the entire scene. To make it easier, you can enable the grid using the button on the top and it should help with positioning the object. But you may notice the background object cover all the other objects, to solve this problem we need to change the Z-order of the object. While the background object is selected, on the left you should notice the object properties. In case you have closed this tab, you can re-open it using the button on the top. We can change all kind of properties here such as the position, angle and size of the object but what we are interested in is the Z-order. Change the value of the Z-order to a low number, in this case we need a negative number something like - 1. The reason for the negative value is that when we are creating the bullets, enemies and explosions we are creating them at Z-order 0 by default and so we need to position the background below 0 otherwise we won't see anything but the turret in our game. An other way to fix it is to tell GDevelop to position the tanks and explosions and bullets on a higher Z-order so we can position the background at 0 but it is something that you the developer need to decide for your self how you want to do it. Every problem can have number of different solutions.

And we are done. The game is complete and ready to be shared.

Add comments

So, our game is done and playable but what if you want to share the source with someone else? Let say you are working in a team and someone else would like to make modifications to the game. How that person know where to look for the events of enemies, bullets, the turret? Of course it may sound silly to you as most of the events in GDevelop are self explaining and our game is simple enough to see it through but imagine the situation you have a game made out of hundreds and thousands of events. This is where comments come in handy as we can leave reminders in our game for others and also for our self. Trust me, even though you are the one who made it, in a big complex game, even you won't remember where to find different things especially months later. So always use comments regardless how small or big your project is.

To add comments, you can simply click the add comment button on the top. After you should see a yellow box in the events editor, by clicking in the box you can start writing a comment

You can change the position of each event and comment by moving the mouse over the blue edge on the left and drag it up and down. Once you done it, you should have something like this:

Let's discover GDevelop by yourself

You can browse the other GDevelop 5 tutorials and read the Getting Started page.

There is also lots of examples and templates bundled with GDevelop and you can find more by visiting: gametemplates.itch.io

And you can also ask questions on the official forum