GDevelop is free and open source 2D Game Development tool. It’s and easy to learn and easy to use game development software. Anyone can start building games with zero programming knowledge. GDevelop provides a easy and understandable expression builder to program a game. You can develop a whole 2D HTML5 games using GDevelop.

Starting from today, we are going to share how-to guides to learn game development with GDevelop. As the beginners tutorial, we are going to create 2D Platformer game. In this beginner tutorial, we hope to cover main concepts of GDevelop for you to understand how to develop 2D HTML5 games.

First of all, download and install GDevelop in your computer. It’s completely free. After installing GDevelop, launch the application. You will see a welcome page as shown in the image below.

We are using a free game assets pack found here. It’s also an awesome free assets pack for platformer game. There are lots of assets in the pack. However we refined the assets in it and select few of them which we use for this tutorial and create a minified version of the pack which you can download from here. Extract the assets files. Now we are ready to begin game development.

Now click Create a New Project button. From the Create a New Game popup window click Empty Game. (You will need to scroll down to find this option.)

This will launch an empty game project and your screen will look something similar to the screenshot in figure 1. To begin, we need to create our first scene. Scenes are different screens in your game. Home screen, game screen, game over screen etc are all scenes. We add all our game graphics to those scenes. So to start, let’s create our first scene. In the project manager panel (the panel in the left side) click + button next to Click to add a scene (Under Scenes). This will add a “NewScene” to your project. To make things more clear and precise, let’s give this scene a proper name. Click 3 dots next to “NewScene” and select Rename. Set the name of the scene to “Level 1” and hit Enter. (You can rename scenes later too. But I recommend do it in the beginning. Try to give meaningful names. This will be useful when your game grows with many scenes). Now click on “Level 1” scene.

Figure 1

You will be able to see a screen similar to the screenshot above. Here there are two tabs with the name “Level 1”. First one is the Scene Editor or game interface which users will see. Second one is, as it says, the Event Editor for the scene. This is where we include all our game logic or where we program the game. Each and every scene has its own Event Editor.

Now let’s import our first game asset to the scene. Click + button next to Add new object in the object panel. (This is the panel located in the right side). This will open Add a new Object popup window. Select Sprite. (Sprites can be players, enemies, items etc. These objects can be animated). This will open another popup where you can insert a game object.


First give a name to that object. This name should be meaningful, because we are using this name when we are programing the game. In this case we’ll name it “Bob”. Well it’s our player. Now click ADD AN ANIMATION + button. You will see a popup something like this.

Now click on ADD + button. Sprites can be animated. So you can add one or more images to sprite. And a sprite can have several animations. In here we are going to add the “Idle” animation for the sprite. In the Choose an image window, navigate to downloaded assets folder. Go to Player > Idle and select all the images. Click Open to add all the images. Click Loop to enable it and rename the animation to “idle” (Optional). Now you should see something just like this;

Now click APPLY to add the object in to the scene. You can see the object we created is added to Objects Panel on the right.

Step 4

Let’s add the player to the scene. It’s very simple. Drag and drop the object “Bob” to the canvas (gray color area in the middle. This is the canvas.) Now you will be able to see your player object in the canvas. This is how we add objects to the scene. After adding the object to the scene, you can drag it and place it in a desired location.

It’s time to create a platform for our player to land on. For that let’s add some platform objects. Click + button in the object panel as you did for player object. This time we are going to select Tiled Sprite. This will open a popup little bit similar to sprite object. Here we can only use one image. Tiled Sprites can not be animated. First we’ll name this object. Set object name to “GrassTile” (Note: you can’t use space when naming a game object. Only alphanumeric characters and underscores are allowed). Now click Select an Image, this will reveal a drop down. Click + Choose a new image to choose an image. Select “Grass.png” inside platform folder the assets pack. Set default width and height to 120px. Finally click apply to add the object to the project.

Now let’s create a platform for our player to land on. Drag and drop “GrassTile” object to the canvas. You can see there are three squares and a little circle appeared around the object when it is selected. Those are the handles you can use to resize and rotate the objects. Right square is used to scale horizontally while bottom square is used to scale vertically. Square in the bottom right corner is used to scale both horizontally and vertically. Circle is use to rotate the object.

Here we are going to resize the object horizontally. So hold the right handle and drag to resize the object. You can see when you resize the object, it creates tiles. If you did everything correctly, you will have a scene something similar to this;

Now we have created a very basic scene. So, let’s save our changes. You can use standard keyboard short cut to save the project (Ctrl+S) or got to File > Save.

In the next lesson we are going to add behavior to these objects and give some life to those objects.