using_tilemaps.rst 7.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183
  1. .. _doc_using_tilemaps:
  2. Using tilemaps
  3. ~~~~~~~~~~~~~~
  4. Introduction
  5. ------------
  6. Tilemaps are a simple and quick way to make 2D game levels. Basically,
  7. you start with bunch of reference tiles (or pieces) that can be put on a
  8. grid, as many times each as desired - think of it like a map editor:
  9. .. image:: img/tilemap.png
  10. Collisions can also be added to the tiles, allowing for both 2D side
  11. scrolling and top down games.
  12. Making a tileset
  13. ----------------
  14. To begin, a tileset needs to be made. Here are some tiles for it.
  15. They are all in the same image for optimization reasons.
  16. There are so-called *texture packers* that will generate these spritesheets
  17. out of your separate texture files.
  18. Having them as separate images also works.
  19. .. image:: img/tileset.png
  20. Create a new project and move the above PNG image into the directory. Next
  21. go into the image's import settings and turn off ``Filter``, keeping it on will cause
  22. issues later. ``Mipmaps`` should already be disabled, if not, disable this too.
  23. We will be creating a :ref:`TileSet <class_TileSet>`
  24. resource. While this resource exports properties, it's pretty difficult
  25. to get complex data into it and maintain it. Here is what it would look like to
  26. manually edit the resource:
  27. .. image:: img/tileset_edit_resource.png
  28. There's enough properties to get by. With some effort, editing this
  29. way can work. But the easiest way to edit and maintain a tileset is exporting
  30. it from a specially-crafted scene!
  31. TileSet scene
  32. -------------
  33. Create a new scene with a regular Node or Node2D as root. For each tile you want to define,
  34. add a sprite node as a child. Since tiles here are 50x50, you should turn on the grid
  35. (``View -> Show Grid`` or ``G`` key) and enable snap (``Use Snap`` icon or ``S`` key).
  36. Moving tiles with the mouse might still be a inaccurate
  37. so use your arrow keys as well.
  38. If more than one tile is present in the source image, make sure to use
  39. the region property of the sprite to adjust which part of the texture is being
  40. used.
  41. Finally, make sure to name your sprite node correctly. This will ensure
  42. that, in subsequent edits to the tileset (for example, if added
  43. collision, changed the region, etc), the tile will still be **identified
  44. correctly and updated**. This name should be unique.
  45. Sounds like a lot of requirements, so here's a screenshot that shows
  46. where everything of relevance is:
  47. .. image:: img/tile_example.png
  48. Continue adding all the tiles, adjusting the offsets if needed (that is, if you have
  49. multiple tiles in a single source image). Again, *remember that their names must
  50. be unique*.
  51. .. image:: img/tile_example2.png
  52. Collision
  53. ---------
  54. To add collision to a tile, create a StaticBody2D child for each sprite.
  55. This is a static collision node. Then create a CollisionShape2D or
  56. CollisionPolygon as a child of the StaticBody2D. The CollisionPolygon is
  57. recommended because it is easier to edit.
  58. .. image:: img/tile_example3.png
  59. Finally, edit the polygon, this will give the tile a collision and fix
  60. the warning icon next to the CollisionPolygon node. **Remember to use snap!**
  61. Using snap will make sure collision polygons are aligned properly, allowing
  62. a character to walk seamlessly from tile to tile. Also **do not scale or move**
  63. the collision and/or collision polygon nodes. Leave them at offset 0,0, with
  64. scale 1,1 and rotation 0 with respect to the parent sprite.
  65. .. image:: img/tile_example4.png
  66. Keep adding collisions to the tiles until we are done. Note that BG is just
  67. a background, so it should not have a collision.
  68. .. image:: img/tile_example5.png
  69. OK! We're done! Remember to save this scene for future edit. Name it
  70. "tileset_edit.scn" or something like that.
  71. Exporting a TileSet
  72. -------------------
  73. With the scene created and opened in the editor, the next step will be to
  74. create a tileset. Use Scene > Convert To > Tile Set from the Scene Menu:
  75. .. image:: img/tileset_export.png
  76. Then choose a filename, like "mytiles.tres". Make sure the "Merge With
  77. Existing" option is toggled on. This way, every time the tileset
  78. resource file is overwritten, existing tiles are merged and updated
  79. (they are referenced by their unique name, so again, **name your tiles
  80. properly**).
  81. .. image:: img/tileset_merge.png
  82. Using the TileSet in a TileMap
  83. ------------------------------
  84. Create a new scene, using any node or node2d as root, and then create a
  85. :ref:`TileMap <class_TileMap>` as
  86. a child.
  87. .. image:: img/tilemap_scene.png
  88. Go to the TileSet property of this node and assign the one created in
  89. previous steps:
  90. .. image:: img/tileset_property.png
  91. Also set the cell size to '50', since that is the size used by the
  92. tiles. Quadrant size is a tuning value, which means that the engine will
  93. draw and cull the tilemap in blocks of 16x16 tiles. This value is
  94. usually fine and does not need to be changed, but can be used to fine tune
  95. performance in specific cases (if you know what you are doing).
  96. Painting your world
  97. -------------------
  98. With all set, make sure the TileMap node is selected. A red grid will
  99. appear on screen, allowing to paint on it with the selected tile on the
  100. left palette.
  101. .. image:: img/tile_example6.png
  102. To avoid accidentally moving and selecting the tilemap node (something
  103. common, given it's a huge node), it is recommended that you lock it,
  104. using the lock button:
  105. .. image:: img/tile_lock.png
  106. If you accidentally place a tile somewhere you don't want it to be, you
  107. can delete it with ``RMB`` while in the tilemap editor.
  108. You can also flip and rotate sprites in the TileMap editor (note:
  109. flipping the sprite in the TileSet will have no effect). Icons at the
  110. top right of the editor allow flipping and rotating of the currently
  111. selected sprite - you can also use the A and S keys to flip the sprite
  112. horizontally and vertically. With a brick pattern like this tutorial uses,
  113. flipping the sprites would create unpleasant discontinuities unless you're
  114. flipping an entire region of bricks. But for some kinds of tiles, flipping
  115. can be a convenient and space-saving feature.
  116. Offset and scaling artifacts
  117. ----------------------------
  118. When using a single texture for all the tiles, scaling the tileset (or
  119. even moving to a non pixel-aligned location) will most likely result in
  120. filtering artifacts like so:
  121. .. image:: img/tileset_filter.png
  122. This is unavoidable, as it is the way the hardware bilinear filter
  123. works. So, to avoid this situation, there are a few workarounds. Try the
  124. one that looks better for you:
  125. - Disable filtering and mipmaps for either the tileset texture or all tile textures if using separate images (see the :ref:`doc_import_images` asset pipeline tutorial).
  126. - Enable pixel snap (Set ``Project > Project Settings >
  127. Rendering > Quality > 2d > Use Pixel Snap`` to true, you can also search for ``Pixel Snap``).
  128. - Viewport Scaling can often help with shrinking the map (see the
  129. :ref:`doc_viewports` tutorial). Simply adding a camera, setting it to ``Current`` and playing around with it's ``Zoom`` may be a good starting point.
  130. - You can use a single, separate image for each tile. This will remove all artifacts but
  131. can be more cumbersome to implement and is less optimized.