Step by step tutorial for GDevelop

This tutorial will help you to begin to use GDevelop:
You will create a very simple game where enemy are going toward the player, who will be able to shot them so as to make them explode.

You can also read the other tutorial available for beginners here if you prefer creating a platformer game!

Note that you can read the Getting Started page so as to get an overview of the software: It explains the main concepts and describe the interface of GDevelop.

Download GDevelop

If you do not have GDevelop, download it from the official website : http://compilgames.net.
Always download GD from this page to be sure to have the latest version.
Install or extract GDevelop and launch it. The start page is displayed:

If you want, you can read this page to get a quick overview of the interface of GDevelop.

Create a new game

Click on New in the ribbon to create a new project:

A window offers you to choose the platform on which your game will be based, as well as some templates. Choose the Web platform and then click on Empty project:

Choose also a directory and a filename for your game, and press Ok to create the project.
A first scene is automatically create and opened for you the first time you create a game:

Get the images and resources needed for the tutorial

Before going further, we'll need some images for our game.
You can download them here : http://www.compilgames.net/dl/BeginnerTutorial2Images.zip.

Once you have downloaded this file, extract its content in the folder where you created the project.

Create the player turret

The player will be controlling a turret to shot on the enemies.
Make a right click on the center of gray scene in GDevelop and choose Add a new object. A window popups so as to choose the type of the object to create:

Choose the Sprite object and click on Ok. The editor of the object is then automatically opened:

The first thing to do is too add the turret image: Make a right click on the white area at the bottom of the window, and choose Add an image from a file:

Choose the turret image in the project folder, and click on Open: The image is added to the object.

You can then close the Sprite editor so as to go back to the scene editor. The object is displayed at the point where you made the right click:

You can move the object by keeping the left button of the mouse pressed on it.

By default, an object is called NewObject by GDevelop. To change this, select the object in the list in the right hand side of the window, and press F2. Enter then Turret as a new name and press Enter.

First events

We are going to create the events used to animate the whole game.
First, the turret must be turned toward the player mouse.

Go to the events editor by clicking on the events tab:

Then in the ribbon, click on Add an event to create a new event:

The event is created, with an empty list of condition ( on the left part ) and an empty list of actions ( on the right ). Put your cursor over the action list and choose Add an action in the context panel that appeared:

The first action will turn the turret toward the mouse: In the window, choose the action All objects > Angle > Rotate toward position.
When selected, the right part of the window show the name of the action as well as the parameters. Fill the first parameter by entering Turret ( You can also click on the button next to the parameter to get a list of the available objects ). For the next parameters, enter MouseX() and MouseY() so that the object turns toward the mouse position. When the game will be launched, these two expressions will be replaced by the position of the mouse.

MouseX() and MouseY() are only two of the several functions available when an expression is requested by a parameter.
Click on the button next to a parameter waiting for an expression to open the Expression editor which will be display lists with all the available functions.

Click on Ok. The action is added to the event.
As there is not any condition, the action will be repeated each time the screen is refreshed ( About 60 times per seconds ). The turret will thus be always oriented toward the mouse.

You can launch a preview of the game: Just go back to the scene editor ( Click on the Scene tab next to the Events tab ) and then, in the ribbon, click on Preview.

GDevelop will launch your default browser and open your game:

Shooting bullets with the turret

The player must be able to shoot some bullets on the enemies.
First, we need a Bullet object: In the objects list on the right, make a right click on an object and choose Add an object. Choose a Sprite object as before and name the object Bullet ( Right click on the object > Rename ).

Then, make a double click on the object to edit it. Add an image to the object: Right click on the white area on the bottom, choose Add an image from a file and choose the bullet image in the project folder.

Close the window. You will notice that the object does not appear on the scene as we added it thanks to the list.

Go to the events tab, and add a new event ( When you're in the events tab, choose Add an event in the ribbon ) and then a new action.
The first action will be a Create a new object action, which is available in the All objects > Objects category.

The first parameter must be Bullet, as we want to create a bullet object.
The other parameters are the position of the turret: Enter Turret.X() and Turret.Y() in the 2nd and 3rd parameters.

Click on Ok to finalize the action.
Then add another action after this first action ( Do not create another event! ). This time, choose the action called All objects > Displacement > Add a force ( Angle ).
GDevelop provide a built-in forces system allowing to easily move the objects. This action will be used to move the bullet toward the mouse when fired. As the first parameter, enter Bullet so that GDevelop will move the bullet just created in the last action. Enter then Turret.Direction() in the 2nd parameter to use the turret direction. For the 3rd parameter, enter 400 so that the bullet will move with a speed of 400 pixels per seconds. Finally, enter 1 in the last parameter so that the bullet will keep moving after the moment it was created.

Our two actions must be launched only when the player is firing ( i.e: Pressing the left button of the mouse ).
To do that, add a condition to the event ( Put the cursor over the empty condition list of the events we're creating, and choose Add a condition ):

Choose the condition Mouse > A button is pressed. Write Left in the parameter ( or click on the button on the right of the parameter to display an helper ) and close the window by clicking on Ok.
The condition is now added to the event.

If you preview the game now, you'll see that we have two problems: The bullet are fired too fast, and the appear at the object's origin, which is not very realistic.

To address the first issue, we're going to use a timer: Add a condition to the last event we've created. Choose the condition Timers > Timer's value and enter 0.25 in the first parameter, 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! ).

Then, add an action Timer > Reset a timer in the same event, with “FireRate” as parameter ( 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. Make a double click on the Turret object in the objects list to edit the object. Then, in the toolbar in the top part of the window, click on the second tool to open a window containing the list of the points available for the object: By default, there is only the origin and the center of the object.

Add a point by clicking on the + in the toolbar of the Points window. Name the new point Canon. When it is created and renamed, make sure it is selected in the list ( Simply make a click on it ) and then click on the image to change its position:

You can now close the window. We must now tell to GDevelop to create the bullets at the position of the point:
In the events editor, put the cursor on the Turret.X() parameter and make a click: A text field will be shown. Use it to replace the parameter by Turret.PointX(Canon) and click anywhere to close the text field. Modify also the Turret.Y() parameter to replace it by Turret.PointY(Canon) :

You can now preview the game ( Go to the scene editor by clicking on the Scene tab, and click on Preview in the ribbon ).

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 ( Double click on it in the list ) and add to it two images: tank2fr1.png and tank2fr2.png. Then, make a right click on Animation 0 in the list of animations on the left part of the window, and change the time between the images: Set it to 0.05 for example. Check also Loop the animation to ensure that the animation is repeated:

Close the editor when you're done.

Stop! Save time!

Before going further, remember to save frequently: In the ribbon, click on File and then on Save:

Ok, go back to the game

Let's go back to the game. We want to create enemies going toward the turret: Go to the event editor and add a new event.
The creation of an enemy must happen each 1 seconds for example: Add a condition Timer > Value of a timer. Enter 1 in the first parameter and “EnemyCreation” for the name of the timer. Add then in the same event an action to reset the timer ( Action Timer > Reset a timer with “EnemyCreation” as parameter ):

We can then add another action to create an Enemy object: Add an action All objects > Objects > Create an object. Enter Enemy in the first parameter. For the second parameter, the X position of the new object to be created, enter Random(800): This will return a random number between 0 and 800, so that the created enemy 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.

For now, the enemies are created but are not moving. Add another event without any condition. Add then an action: We want the enemy to move toward the player. Choose the action All objects > Displacement > Move an object toward another. For the first parameter, enter Enemy, and Turret for the second parameter. Enter a length of 150 for the force, and a damping of 0, as the force will be continuously applied.

Thanks to the last event, enemy will be moving. One last thing is to make sure that enemies are oriented toward the turret: Add a second action called All objects > Angle > Rotate toward position. Enter Enemy as first parameter. Then, we want the Enemy to turn toward the position of the Turret, so set Turret.X() and Turret.Y() respectively in the next two parameters. These two expressions returns the X and Y position of the Turret. We can improve this action by setting Turret.X(Centre) and Turret.Y(Centre) instead so as to turn the Enemy towards the centre position of the Turret.

Here is what you should have:

If you launch a preview, you will see that enemies are created and are moving. If it doesn't work, double check your events: Check that the timer's name is correct and is the same in the condition and in the action. Also check that the last parameter of the action used to move the enemies is 0.

Adding explosions

It's time to add explosions ^_^ Let's first create the explosion object: Add a new Sprite object called Explosion:

Edit it, and add to it all the images called Explosion_something. When you add the image, just select them all:

When the images are added, change the time between the images ( Right click on Animation 0 to display the options of the animation ).

Set a time of 0.01 for the explosion. You can preview the explosion by clicking on the Preview button in the toolbar at the top of the editor.

The explosion object is now ready. Close the editor and go back to the events editor.
We want enemies to explode when a bullet is hitting them. Add a new event.

Add then a condition: Choose the condition All objects > Collision > Collision. Enter Bullet and Enemy in the parameters.

When the condition is done, add an action to create an object Explosion. For the position, enter Enemy.X() and Enemy.Y() to create the explosion at the tank position.
Add another action called All objects > Objects > Delete an object. As parameter, enter Enemy so that the tank will be destroyed.

You can now preview the game:

You may have noticed that explosions objects are not destroyed when their animation is over! This can be a problem as they stay on the scene, making the game less efficient. We must always clean our garbage: Add a new event. Add a condition Sprite > Animation > Animation is over. Enter Explosion as parameter: The condition will be true when an explosion's animation will be over. Add an action to the event to then destroy the Explosion object:

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 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. Name it GameOver.

Edit it ( Double click on it in the objects list ) and modify the text. Also click on Choose the font and select the font that was in the resource archive that you extracted in the project folder. Finally, you can increase a bit the size of the text:

When you're done, click on Ok to close the editor of the object. Go to the scene editor and put the text on the scene: Just drag it from the objects list to the scene ( Put the cursor hover the object in the list, make a left click and keep pressing the left button of the mouse, then move the cursor to the scene and release the button to put the object ).

For now, the object is always displayed. Go to the events editor and add a new event. Add a condition Scene > At the beginning of the scene and an action All objects > Visibility > Hide an object, with GameOver as parameter. Thus, the text will be hidden when the game will be launched.

To display the text when the turret is destroyed, add another event. Add a condition All objects > Objects > Number of objects. Enter Turret as the first parameter, then = in the second parameter and 0 for the third: The condition will be fulfilled when the number of turret of the scene will reach 0, that is to say when the player will be destroyed.

Add then an action to show the GameOver object ( All objects > Visibility > Show an object ).
Here are all the events created so far:

It would be also interesting to add a small delay before showing the GameOver text: Add an action to reset the timer called “GameOver” in the event where the turret is destroyed.
Then add a condition to the last event to compare if the “GameOver” timer has reached 0.5 seconds for example:

Finally, an interesting effect is to stop the game when the Game Over is displayed. Add one more action to the last event: Choose the Timers and time > Time scale action and enter 0 as parameter to pause the game.

Here are all the events:

You can preview the game and see that the text is displayed and the game is stopped when the turret is destroyed:

Deleting the bullets going out of the screen

Remember that we always must destroy our garbage so as to prevent the game to be flooded with tons of objects doing nothing except slowing down the whole thing. That's why we take care of deleting the explosions when the animations is over. But what about the bullets? When they go outside of the screen, they still exists and the computer must update them each time the screen is refreshed: This can become a performance bottleneck.

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: An behavior is used to add a specific behavior to an object. Here, we are going to use a behavior that will automatically destroy the object when it goes outside the screen.

Make a right click on the object in the object list and choose Other properties:

A grid with properties is shown. At the bottom of the grid, you can see the behaviors of the objects: There is nothing for now. Click on Add:

A list of the available behaviors is displayed: Choose the Destroy when outside screen behavior:

That's all: You can now see that the behavior is added to the object:

And when a bullet object will be outside the screen, it will be destroyed.

Adding a background

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

Add a Sprite object called background. Edit it and add to it the background image. Then, drag it from the objects list to the scene:

The background is displayed above the other objects :-( To change this, double click on it to display it properties. You can also make a right click on it and choose Properties:

Simply change its Z order: Enter a negative number to ensure that the other objects ( which have a positive Z order ) will be displayed after the background. ( Objects with a greater Z order are displayed below the other objects. By default, the Z order of an object is simply 0 ).
Also change the position of the object to set its X and Y coordinates to 0:

You can now test your game with a nice background:

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 in this archive. You can try it online: http://www.compilgames.net/games/EnhancedTutorial

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