HOW TO CREATE TILEMAPS FOR GDEVELOP
In this article / Video you will learn HOW TO CREATE TILEMAPS FOR GDEVELOP.
Those who follow our videos with some regularity, already know that we are mainly covering long series of videos to build complete games, but in the middle, we can cover specific elements with one time videos to explain a mechanic or a specific feature and how it can be implemented.
In this case, we are going to cover how to create Tilemaps in GDEVELOP BETA 105
This is something most of the developers using G DEVELOP were requesting for sometime now, and finally comes to life.
Using it can have some confusing elements that we thought could be the focus of a specific tutorial.
More specific information can be found:
Resources Used in the tutorial
For the this specific tutorial, we have used the following resources:
TILED map editor
Welcome to this new focused tutorial with free visual game engine G DEVELOP.
One of the problems that G DEVELOP had, and we used the past tense, because, in the last version of the engine, the requested feature to support tile maps has finally been introduced. We cannot yet create them in the tool, but with the help of TILED, the open-source tile map editor, we will be able to create a tile map and bring it into G DEVELOP.
There are several restrictions, that you can check on the release notes, but it is working, and in this video, we will teach you how to create a tilemap and import it in G DEVELOP. As a base, we will use the tileset from the Melee Tutorial.
Let’s jump into the action.
The first thing to take into account is that you have the right version of G DEVELOP, the G DEVELOP BETA 105 or 104, although with 104 you will have some bugs that have been fixed. If not, you will not have the Tilemap object.
Creating the tilemap object
Let’s create an empty project and then let’s create a new scene for our game.
Create a new Object, by clicking on the add sign on the object pane, or by right clicking on the canvas and choose option insert new object.
In the new dialog box, click on the button named SHOW EXPERIMENTAL OBJECTS.
At the bottom of the list, we will then be able to see the new tilemap object.
And it will prompt us to configure the new object.
We don´t have yet anything to import. So, if you haven´t yet downloaded TILED, do it, and we will continue from it.
Creating the tilemap with TILED map editor
TILED map editor
Ok. So, we are on the same ground now, and we have TILED opened in front of us.
Let’s click on the button new map.
We will be prompted with the configuration to be used with the new tilemap. Don’t touch any of the elements in the first section under MAP, as it would break the tilemap import.
We can configure the number of horizontal and vertical tiles, and the resolution in pixels of each of them.
If you have never used it, choose a small number for the tiles in the map, where it will be very difficult to fill.
In the width and height of the tile, you have to use the number of pixels that the tileset that you will be using has. In our case, it is 16 pixels by 16 pixels.
Once completed, click the save as button and choose the location of your disk where you want to save the map. At this stage, it doesn´t have to be in JSON format, so we can use TILED native format TMX.
Afterward, we will be presented with TILED interface.
This is not a TILED tutorial, so we are not going into detail over the interface, but if you want a tutorial specifically about TILED leave a comment with the request and we will try to make one if enough people are asking for it.
The first thing that we must do, is to import our tileset. We can see that in the right pane, there is a pane named TILESET with a button to create a new TILESET.
Click on it.
It will open a new dialog box, where you will be asked to choose and configure the tileset that you will be using. Be aware, that one of the restrictions in G DEVELOP, is that you can have only one tileset per tilemap object.
In the interface, give a name to the tileset, and then in the SOURCE field, click on the button Browse to choose and load the file. We are going to use the castle tileset used in the Melee tutorial.
Below, we can see again, the width and height in pixels, so be sure to use a tileset that has the same size as the ones that you have used for the tile map.
We can also configure the color that is to be used as transparent.
By default, the tileset is defined to be embedded in the tilemap. You can leave it like this as by default G DEVELOP accepts it.
Once finished, click ok to import the tileset.
We can see now the palette with the different tiles that we can use to paint our map.
In game development, naming is crucial, so let’s change the name of the first layer to be BACKGROUND.
Let’s select the bucket paint tool, and the black tile, and let’s paint the background layer in black.
Let’s create a new layer by clicking on the new Layer button. Rename it to game.
Change the tool to be the Stamp and start painting your level.
In TILED, when you have several versions of a tile, you can randomly choose one tile, from the tileset panel, to make the painting more natural.
You only need to choose all the tiles that you want to use, and then in the top bar, the RANDOM button.
Let’s add some props, like a barrel.
You can see that we have a problem. We are painting on the background, and the barrel has a transparent background that deletes the previous background.
To avoid this, we need to create a new layer in the middle of the Game and Background layers and place there the elements that we want the player to be in front of.
Once happy with the result, let’s export it.
Exporting the tilemap to GDEVELOP
Go to the FILE MENU and click on the EXPORT AS option.
In the dialog box, choose the option JSON and the path and name where you want to save your tilemap.
Once done, we can go back to G DEVELOP.
Importing the tilemap into GDEVELOP
So, we left G DEVELOP in the dialog box associated with the import of the tile maps.
In the ATLAS image, you need to choose the same file that you have used as a tileset in the TILED tile map editor.
In the Tile map JSON file, you need to select the file that we have just exported from the tool.
The last option, JSON TILESET is not necessary if you have chosen in the previous step the tileset to be embedded in the tile map. So, we can leave it in blank.
Click apply to finish the import process.
Drag the tile map object into the scene.
And you should see your map painted.
You can resize it to fit your game level size.
Let’s generate quickly a player by creating a red block with pixel and let’s add the platformer behavior.
Collisions and blocking out the tilemap in GDEVELOP
Even if we had created collision shapes in TILED, that information is not transferred to G DEVELOP, so to have our level able of interacting with the player, we need to block out the level with collision shapes.
So, let’s create a basic platform object with a green color to be easily spot.
Let’s place them correctly in the level.
Let’s go to the events, and let’s hide the platform block at the beginning of the scene.