How to make a platformer game?
This tutorial will help you to begin to use GDevelop:
You will create a very simple platformer game where the player can jump on platforms and collect coins.
You can also read the other tutorial available for beginners here if you prefer creating a shooter 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.
Note that the visual theme of GDevelop can be different: You can choose a theme by clicking on File > Options, then choosing Appearance and finally picking one of the available theme.
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 created 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/PlatformerTutorialResources.zip.
Once you have downloaded this file, extract its content in the folder where you created the project.
Creating the player object
The player will be controlling a character that can jump and move on platforms. We're going to create this object.
Make a right click on the center of the gray scene in GDevelop and choose
Add a new object. A window pops up so as to choose the type of the object to create: Choose to create a
Sprite object and click on Ok.
The editor of the object is opened. For now, the object has only one empty animation. The first thing to do is too add an image for this animation: Make a right click on the white area at the bottom of the window, and choose
Add an image from a file:
Choose the image called
p1_stand in the project folder, and click on
Open: The image is added to the object. You can now close the editor, and see the object displayed on the scene:
The object was called
NewObject by default: To change this, select the object in the list in the right hand side of the window, and press
F2. Enter then
Player as a new name and press
Let's now create an object that will be used for platforms:
Again, make a right click on the scene and choose
Add an object. This time, choose the
Tiled sprite object type:
For now, it is grayed: When you click on Ok, GDevelop will ask you if you want to activate the extension containing this object for your project: Click on Yes.
The editor of the object is open: On the left, there is the resource manager showing all images used by the project. First, add an image to the list using the
+ button of the toolbar:
grassHalfMid.png image. The image is added to the list: Click on it in this list and then click on the button next to the text field at the bottom of the editor to automatically insert the image name:
You can now click on
Ok to close the editor.
The object is added on the scene but it is very tiny: Use the handles to resize so that is looks like a platform:
Be sure to put the platform under the player, so the player won't fall outside the screen when the game is launched.
Also, in the object's editor, rename the object so that it is called
Add behaviors to objects
The movement of the player could be created using the events of GDevelop, but it would be a quite long and difficult task to recreate a good platformer engine. To avoid this, we're going to use behaviors, which allow to add predefined behaviors to objects.
Make a double click on the player object on the scene: This will show a grid containing properties of the object and, at the bottom, the behaviors applied to the object. Click on
Add a behavior:
A list of available behaviors is displayed. For this object, choose the
Platformer object behavior, and click on Ok:
That's all: You can see in the property grid that the behavior is now displayed as well as some properties. You can change some properties like the jump speed: Set it for example to 800 so that the jump is more powerful.
We also need to mark objects being platforms as such, otherwise the player will fall even if it is colliding with objects that look like platforms.
Click on the platform object on the scene and in the property grid, choose again
Add a behavior:
This time, choose the
Platform behavior and click on Ok:
Note that behaviors are applied to all instances of the object put on the scene: If you insert another platform on the scene ( Just drag'n'drop the object from the list of objects to the scene. You can also press the
Ctrl key, then drag the platform to clone it! ), the others platforms object will also have the behavior: No need to add it again.
Start a preview
You can now test that the behavior are working:
In the Scene ribbon, choose
Your favorite browser will be opened and the game will be launched:
You can move the character with the arrows keys, and use Shift to jump! For now the object has no animations: We'll add it later.
If the object is not moving, be sure that you've added the proper behaviors. Be sure that you've added the
Platform behavior to the
Grass object, otherwise the player will fall outside the screen.
Add differents platforms
We can use more than one type of objects as platforms: Add a new object by right clicking on the scene and choosing
Add an object.
Choose a Sprite object, click on
Ok, and in the editor, add the image called
Close the editor, and rename the object so that it is called
Then, add to it the
Platform behavior just like we did before ( Double click on the object on the scene, or select it in the list of objects. Then, choose
Add a behavior and choose the
Platform behavior. )
These objects are now considered as platforms: You can add more of them on the scene and launch a preview to try jumping from platforms to platforms.
Before going any further, you may want to change the background color of the scene: In the project manager, make a right click on the scene being edited ( “New scene” ) and choose
You can then change the background color from the window that'll be shown. Note that we'll add background objects at the end of the tutorial.
Stop ! Save time !
Before going further, remember to save frequently: In the ribbon, click on
File and then on
Changing the animations of the player
For now, the player is always displaying the same image: Using the events, we're going to change its animation according to what he is doing.
Before doing this, we must add the appropriate animations to the Player object: Make a double click on it in the objects list to show the editor.
In the top left part of the window, click on the
+ in the toolbar to add an animation:
An animation called
Animation 1 is added to the list: Click on it to select it. It is empty: In the blank bottom part, make a right click and add the image called
This animation will be used when the object will be in the air.
We also need an animation for when the object will be running on a platform: Add another animation like we did, and, when adding images, select the 5 images
p1_walk04.png, … and
These images will be displayed so as to create the animation. We need to tweak a bit some options: Make a right click on
Animation 2 in the list and check
Loop the animation. Click then on
Time between frames and enter
0.05 in the window so that the animation is faster than when using default options.
You should have this in the editor:
You can preview the animation by clicking on the small “play” button in the toolbar loacted in the top middle part of the editor.
Close the editor when all animations are ok.
Now, we need to change the animation displayed by the object according to what the player do. Go to the events editor by clicking on
Events next to the
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 condition list and choose
Add a condition in the context panel that appeared:
In the event, we're going to check if the player is jumping so as to change its animation.
In the conditions list, choose
PlatformAutomatism > Is jumping. Then, in the parameter, enter
Player as object ( We want to check if the Player object is jumping ) and
PlatformerObject as behavior:
Click on Ok to validate the condition.
Now, add an action to the same event:
In the actions list, choose
Sprite > Animations and images > Change the animation. Enter
Player as object, then
= in the second parameter and
1 in the last one.
Click on Ok to validate the action: Now, animation 1 will be launched when the player is jumping.
Create a similar event but with
Player is falling as condition ( You can also make a copy-paste of the event and then double click on the condition to change it ):
Then, we have to set the animation 0 when the player reach the floor, and also launch animation 2 when the player start moving.
This could be done using two events: The first one checks if the player is on the ground and if he is moving. In this case, animation 2 is set. The second one checks if the player is on the ground and if he is not moving. In this case, animation 0 is set. Here, we're going to use a nice feature called
Sub events: As we're running twice the same condition ( To check if the player is on the ground ), we can insert this condition in an event, and then add sub events to this event: Sub events are only launched when the conditions of their “parent” are fulfilled.
Add an event with
Player is on the floor as condition. Then, put the cursor over the event and choose
Add a sub event: A blank sub event is added.
In this blank event, add the condition
Player is moving. Then, add an action
Do =2 to the current animation of player.
Then, create a second sub event. This time, invert the condition so that the condition is true when the player is not moving:
Also change the animation parameter so that animation 0 is set:
Now you can launch a preview and see animation being changed:
If something does not work, make sure your events looks exactly like the events shown above.
You can see that when the player go to the left, the sprite is not mirrored. Fortunately, there is an action that can be used to mirror sprites.
Go back to the events editor and add a new event: Add a condition checking if the
Left key is pressed.
Note that instead of writing
Left, you can click on the small button next to the parameter, and then simply press the left arrow of the keyboard. GDevelop will automatically fill the parameter.
In the event, add an action to flip the sprite:
Add then another similar event, checking if
Right is pressed and reverting the Player object to its initial orientation:
Center the camera on the player
There is more than one way to move the camera so it follows the player. For now, we're going to do it very simply using the action
Center the camera on an object. Just add this action in an blank event without any condition:
Note that you can read this thread of the official forum if you want information about how to limit the camera movement to the window size.
Add a 'Jump through' platform
For now, all of the platforms are rock solid, but we can also create platform you can also jump through them:
Create a new
Sprite object and add to it image
You can name this object “Jumpthru” for example:
Then, add to it the “Platform” behavior as we did before for the other platform. When it's done, change the Type property displayed in the properties grid, and set it to “Jump thru platform”:
That's all! Now you can launch a preview: The player will be able to jump through these kind of platforms.
Add coins and a score
Let's add some coins to collect in the level:
Create a new object called
coinGold.png as image. You can then put several coins in the level: You can either drag the object from the objects list to the scene, or press Ctrl and drag'n'drop an existing object to clone it!
Now, let's destroy the coin object when the player touch them: Add a new event and add an event testing for the collision between coins and the Player object:
Then, add an action to delete the Coin object ( You can find it in All object > Objects > Delete an object ). Note that this action will only be triggered for the Coin that have been “picked” by the conditions, that is to say, only the Coin that are in collisions with the player here! This powerful mechanism allows you to launch actions only on objects that matches the criteria specified by the conditions.
We can also play a small sound when a coin is collected. Add another action to play the
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:
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
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:
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.
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
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
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
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