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!

Note that you can read the Getting Started page so as to get an overview of the software: It explains the main concepts and describes 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.
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

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 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 Enter.

Adding platforms

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:

Choose the 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 Grass.

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 Preview:

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 Grass.png:

Close the editor, and rename the object so that it is called Platform:

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 Properties.

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 Save:

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 p1_jumping.png:

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 p1walk03.png, p1walk04.png, … and p1_walk07.png.

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 Scene 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 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 bridge.png :

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 Coin with 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 coin.wav sound:

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:

Choose action 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 ScoreText:

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:

"Score:"+ToString(Variable(Score))

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.

Click on 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 slimeWalk1.png and slimeWalk2.png.
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 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-)