[Lập trình Game] Lesson 3: Tilemap and Tileset to create Map Game

Next in the series Game programming with Godot I will teach you about tilemap and tileset and use it instead of moving surface. So what are Tilemaps and Tilesets?

• Tilemap: tilemap is a grid of brick used to create the map (map) for the game. Or in general Tilemap used for design level yours or can be understood as design sense your house, traps, clouds…
• Tilesets: is the library of tilemap. If you don’t understand, you can understand as follows. Tileset is the power supply brick for tilemap your.

Here is a picture of tilemap & tileset:

You can download assets that Anonyviet has provided here, you can either use the self-created version or download it online.

Download Link

(Backup)

How to create Tilemaps and Tilesets

First you download the asset and put it in the folder where the project is saved:

Then you create yourself a new sense by clicking plus next to tab World

And make yourself one node, 2D or Black Node All is fine, can’t use User or 3D. Oh and don’t save it

Open section tileset out and toss it in sense.

Zoom up if you see a blurry image, do the following:

Click import tab next to sense

Select 2D pixels then press Reimport it’s done

Next, click on sence in the left corner of the screen, down to the section Convert to and choose tileset:

You can save it for yourself anywhere but remember to name it .tres behind you

Close the sense you just finished.

LIVE World create Node new name is Tilemap

Then drag the part Tile sets just finished go to the right place of Tilemap (as shown below)

And okay

Next, click on Tile sets

Click on the red circle, the new place tileset in there.

Then select the one with the picture by clicking on it

And you will see 1 tileset right in front of you

And the pixel it is is 32 so it’s a bit big now I will adjust it down to 16×16 by the following way:

Click on the yellow box in general, inside the yellow box, click when it appears tileseteditor tab is to be.

Look to the right, Adjust Step x 32, y 32 > x 16, y 16

And you can see that the tileset fits the tile very well

You click New Atlas and zoning like the photo

That is used to create a group of tileset

And we continue to create until we run out, after zoning, press New Altas to make a new one.

And I’m done:

Click Tilemap

Notice it shows up tile set that we just circled

But you can see some that don’t have pictures.

Complete Tilemap Design

To change the image, do the following:

Go back to the old part choose 1 Atlas

Select item Icon

And click any in that frame, it can be used to classify tileset

However, when done, but your tileset is still not available Collsion So now you have to create it.

Select Collsion

Select a box and then press the blue square above, near the trash can and next to the arrow

Okay like this

Then click on another box

And keep doing it until it’s done

For the squares that have a cross-section, do the following:

Select the one next to the square

Click to select 2 corners as shown, if you try to click in another direction to round like the picture, it won’t work

To round, do the following:

Turn off the one like the picture

And do

Please click to connect the points

Let’s finish it now

I’m done:

Now the next thing is level design

Press tile map to come back

Remove Node wall Go

Correction pixels become 16

When you try to place tilesets down will see it inverse ratio with sense right

So how to fix the solution just resize the tileset by clicking O Cell on the right tab

Change 64×64 wall 16×16 = with the size we created.

Your next task is to design it:

Looks good not too bad

That’s it, creating the map in the game with tilemap and tileset. In the next episode, I will guide you to create characters ^^. Bye

DeathGM!