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

Next in the series Game programming with Godot I will guide you about tilemap and tileset and use them instead of moving surfaces. So what are Tilemap and Tileset?

• Tilemap: tilemap is a grid of tiles brick used to create maps for the game. Or in general Tilemap used for design level yours or can be understood as design sence your house, trap, clouds…
• Tilesets: is the tilemap library. If you don't understand, you can understand as follows. Tileset is the source of supply brick give tilemap your.

Below is an image of tilemap & tileset:

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

Download Link

(Backup)

How to create Tilemaps and Tilesets

First, download the asset and put it in the project folder:

Then you create a new sent for yourself by clicking plus next to the tab World

And make yourself one node, 2D or Black nodes are fine, don't use User or 3D. Oh and don't save it

Open section tileset out and throw it in sence.

If you zoom in and see a blurry image, do the following:

Click in import tab next to sense

Select 2D pixels then press Reimport that's it

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

You can save it anywhere, but remember to give it a name .tres behind

Close the sent you just finished.

LIVE World create Node new name is Tilemap

Then drag the section Tile set Just finished going to the Right Place of Tilemap (as shown below)

And yes

Next, click Tile set

Click on the red circle, the place you just dragged tileset go there.

Then select the one with the image by clicking on it

And you will see a tileset right before your eyes

And the pixel is 32 so it's a bit big. Now I'll adjust it to 16×16 in the following way:

Click on the yellow box, which is generally inside the yellow box when it appears tileseteditor tab okay.

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

And you can see that the tileset fits very well into the box

Please click here New Atlas and circle as shown in the photo

That is used to create a group of tilesets

And we continue to create until we run out. Once finished, click New Altas to make something new.

And I'm done:

Click Tilemap

Notice it appears tile set which we just circled

But you may see some that don't have pictures.

Complete Tilemap design

To change your photo, do the following:

Go back to the old part and choose 1 Atlas

Select item Icon

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

However, when done, your tileset is still not there Collsion so now we have to create it.

Select Collsion

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

Okay like this

Then click another box

And keep doing it until it's done

For cells with horizontal diagonal shapes, 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 will not work

To round, do the following:

Turn it off as shown in the photo

And do

Just click to connect the dots

Now let's complete it

I'm done:

Now the next thing is level design

Press tile map to return

Delete Node wall Go

Edit pixels become again 16

When you try to place tilesets Go down and you'll see it inverse ratio with sence right?

So how to fix it is simply to resize it tileset by clicking on Box Cell in the right tab

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

Your next task is to design it:

Looks pretty good, not too bad

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

DeathGM!