[Tạo 2D Platformer Game với Godot] Part 2: Level Design

In this part 2 we will initially design the level for the game and then in the following articles we will start creating characters, AI, other modes.

Tileset

About tileset you can understand it is a source of images so you can design the level you want.

Tileset will be the provider and Tilemap will be the user

Download Tileset

First, you need to download yourself a tileset and here I have it ready: Swamp 2D Tileset z

you download and open up then go to tiles -> tileset.png then copy.

After copying you to the game folder create a new folder called Assets (this is where we store the assets for the game).

In the filesystem you will see the result we just did.

Tilemap

Next you create for yourself 1 Node2D is the root node (renamed Map) and create 1 more node is tilemap.

Select the Tilemap node, then on the Inspector tab, click Empty in the Tileset line -> select NewTileset, then the Empty box will become a Tileset and you click on that Tileset.

It will show Tileset tab

Then you drag Tileset.png inside the Tileset tab

As above is successful.

Here, I will guide you to make Autotile, and for singles, please refer to the previous articles.

You click on New AutoTile.

Then click the button on the image to display the grid.

Grid was displayed.

Then drag and select the grid as shown above.

Then you click on Bitmask so we can create bitmask.

As for why do this, please review the article on creating Autotile with Godot, I have very detailed instructions in designing levels like this.

Then you paint the bitmask like this.

In the Inspector panel, change the autotile bit to 3×3 (minimal).

Then go out and click on the tilemap – in the inspector panel find Cell, click down and find the Size to adjust it to match the size of the tileset. In the Tileset I gave above, its size is 32×32.

You click on the tilemap and on the right side you will see the tileset we just created.

Then you can start designing the way you want.

If the image is blurry, select tileset.png then go to the import tab -> multiply in the preset -> select 2D pixels -> click reimport.