TileMap tutorial

Here's a quick and dirty tutorial about creating a tileset 2D. I'm using the platformer 2d material.

A tileset is a useful tool to create easily levels in platform games. The basic idea here is merely to create tiles plus some additional sub-nodes for collision detection on the tile.

Step 1 : Create a scene with a Node or Node2D as root. Save the scene as 'tileset_edit.xml' for instance.

Step 2 : Here we go for the first tile! Create a Sprite Node under the root node. Import the tileset texture (a png image) inside the Sprite. I uncheck the 'centered' option. This image is a 512 per 256 pixel png composed of tiles of size 64 by 64. We will use this single image to generate all the tiles will need for our game.

Step 3: Since the tile we are creating is only a small portion of the entire tileset image, I would recommend to use the Region option. Do not forget to set correctly the x,y,w,h parameters of the region rectangle 'Region rect' (leftmost, topmost coordinates, width and height). x and y are measured from the leftmost topmost corner. When selecting the Region option, you only see the region made from this box settings.

Step 4: Now it is important to add physical behavior to our tileset. Under the Sprite node let's create a StaticBody2D. This will say to the physical engine that this is a static tileset and update its physical behavior accordingly.

Step 5: Now its time to set a CollisionPolygon2D under the StaticBody2D! This will say to the physic engine that other bodies (kinematic or rigid bodies in fact) should not enter this zone. In the case of square tiles, I recommend to use the snap grid 'Use Snap'.

Here I configure the grid interval to 64 pixels 'Configure Snap'

Now you have to select the node picking tool (looks like a pen) and I click on the four corner of the square I want to create (the inner one in the pic, in red). You can see that the polygon is enclosed by a bounding box that probably triggers collision detection only when entered. I guess this is for performance optimization.

If your tile is a little bit more complex than a simple square, then it you can use as many points as you want to define the CollisionPolygon2D. But be aware: in that case you should select the option 'Segments' in the CollisionPolygon2D properties rather than 'Automatic', otherwise some collision might not be correctly resolved (I dont know why anyway, I presume it's for concave shapes).

Step 6: Here it is ! You have created your first tile! You should loop over steps 2 to 5 for the other tiles. Don't forget to set the correct region coordinates under the sprite properties so that the tile corresponds to what you really want. Since the static node is a child of the sprite node, you can also duplicate the first tile (CTRL+D) and only change the region of the sprite. In that case the StaticBody2d and CollisionPolygon2D will be translated accordingly to their parent (the sprite node). So if all tiles are squares, you can create the tilemap in a very few operations. As an example here is for the tile situated a (x,y)=(0,64)

Step 7: Once your tileset is finish, you have to export it before using it in your main scene. Scene>ConverTo>TileSet, let say 'tileset.xml' for instance. This is just a convenient file format for the tileset export, which is unrelated to the export of the tileset scene you have just created (the 'tileset_edit.xml')

Then in your main scene, create a TileMap Node and just load the tileset.xml inside the TileMap. When you do this, a refresh 'bug' force you to click on any other node (the root one for instance) and reclick on the tilemap node. Here you are you see your tiles on the left side of the canvas, ready to be place in your main scene !