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!
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
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:
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
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
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.
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.
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
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 >
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.Y() in the 2nd and 3rd parameters.
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
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
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
Edit the object ( Double click on it in the list ) and add to it two images:
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
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
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.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.Y(Centre) instead so as to turn the
Enemy towards the centre position of the
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.
It's time to add explosions
Let's first create the explosion object: Add a new
Sprite object called
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
Enemy in the parameters.
When the condition is done, add an action to create an object
Explosion. For the position, enter
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
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
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
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.
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
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
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