using_tilesets.rst 29 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666
  1. .. _doc_using_tilesets:
  2. Using TileSets
  3. ==============
  4. Introduction
  5. ------------
  6. A tilemap is a grid of tiles used to create a game's layout. There are several
  7. benefits to using :ref:`TileMap <class_TileMap>` nodes to design your levels.
  8. First, they let you draw a layout by "painting" tiles onto a grid,
  9. which is much faster than placing individual :ref:`Sprite2D
  10. <class_Sprite2D>` nodes one by one. Second, they allow for larger levels
  11. because they are optimized for drawing large numbers of tiles.
  12. Finally, they allow you to add greater functionality to your tiles with
  13. collision, occlusion, and navigation shapes.
  14. To use tilemaps, you will need to create a TileSet first. A TileSet is a
  15. collection of tiles that can be placed in a TileMap node. After creating a
  16. TileSet, you will be able to place them :ref:`using the TileMap editor
  17. <doc_using_tilemaps>`.
  18. To follow this guide, you will need an image containing your tiles where every
  19. tile has the same size (large objects can be split into several tiles). This
  20. image is called a *tilesheet*. Tiles do not have to be square: they can be
  21. rectangular, hexagonal, or isometric (pseudo-3D perspective).
  22. Creating a new TileSet
  23. ----------------------
  24. .. _doc_creating_tilesets_using_tilesheet:
  25. Using a tilesheet
  26. ^^^^^^^^^^^^^^^^^
  27. This demonstration will use the following tiles taken from
  28. `Kenney's "Abstract Platformer" pack <https://kenney.nl/assets/abstract-platformer>`__.
  29. We'll use this particular *tilesheet* from the set:
  30. .. figure:: img/using_tilesets_kenney_abstract_platformer_tile_sheet.webp
  31. :align: center
  32. :alt: Tilesheet example with 64×64 tiles
  33. Tilesheet with 64×64 tiles. Credit: `Kenney <https://kenney.nl/assets/abstract-platformer>`__
  34. Create a new **TileMap** node, then select it and create a new TileSet resource in the inspector:
  35. .. figure:: img/using_tilesets_create_new_tileset.webp
  36. :align: center
  37. :alt: Creating a new TileSet resource within the TileMap node
  38. Creating a new TileSet resource within the TileMap node
  39. After creating the TileSet resource, click the value to unfold it in the
  40. inspector. The default tile shape is Square, but you can also choose Isometric,
  41. Half-Offset Square or Hexagon (depending on the shape of your tile images). If
  42. using a tile shape other than Square, you may also need to adjust the **Tile
  43. Layout** and **Tile Offset Axis** properties. Lastly, enabling the
  44. **Rendering > UV Clipping** property may be useful if you wish tiles to be clipped
  45. by their tile coordinates. This ensures tiles cannot draw outside their allocated
  46. area on the tilesheet.
  47. Set the tile size to 64×64 in the inspector to match the example tilesheet:
  48. .. figure:: img/using_tilesets_specify_size_then_edit.webp
  49. :align: center
  50. :alt: Setting the tile size to 64×64 to match the example tilesheet
  51. Setting the tile size to 64×64 to match the example tilesheet
  52. If relying on automatic tiles creation (like we're about to do here), you must
  53. set the tile size **before** creating the *atlas*. The atlas will
  54. determine which tiles from the tilesheet can be added to a TileMap node
  55. (as not every part of the image may be a valid tile).
  56. Open the **TileSet** panel at the bottom of the editor, then click the "+" icon
  57. in the bottom-left corner to add a new atlas:
  58. .. figure:: img/using_tilesets_create_new_atlas.webp
  59. :align: center
  60. :alt: Creating a new atlas in a TileSet resource using the bottom panel
  61. Creating a new atlas in a TileSet resource using the bottom panel
  62. After creating an atlas, you must assign a tilesheet texture to it.
  63. This can be done by choosing it on the left column of the bottom panel, then
  64. clicking the value of the **Texture** property and choosing **Quick Load** (or **Load**).
  65. Specify the path to the image file using the file dialog that appears.
  66. .. figure:: img/using_tilesets_load_tilesheet.webp
  67. :align: center
  68. :alt: Loading a tilesheet image in the newly created TileSet atlas
  69. Loading a tilesheet image in the newly created TileSet atlas
  70. After specifying a valid image, you will be asked whether to create tiles
  71. automatically. Answer **Yes**:
  72. .. figure:: img/using_tilesets_create_tiles_automatically.webp
  73. :align: center
  74. :alt: Automatically creating tiles based on tilesheet image content
  75. Automatically creating tiles based on tilesheet image content
  76. This will automatically create tiles according to the tile size you specified
  77. earlier in the TileSet resource. This greatly speeds up initial tile setup.
  78. .. note::
  79. When using automatic tile generation based on image contents, parts of the
  80. tilesheet that are *fully* transparent will not have tiles generated.
  81. If there are tiles from the tilesheet you do not wish to be present in atlas,
  82. choose the Eraser tool at the top of the tileset preview, then click the tiles
  83. you wish to remove:
  84. .. figure:: img/using_tilesets_eraser_tool.webp
  85. :align: center
  86. :alt: Using the Eraser tool to remove unwanted tiles from the TileSet atlas
  87. Using the Eraser tool to remove unwanted tiles from the TileSet atlas
  88. You can also right-click a tile and choose **Delete**, as an alternative to the
  89. Eraser tool.
  90. .. tip::
  91. Like in the 2D and TileMap editors, you can pan across the TileSet panel using
  92. the middle or right mouse buttons, and zoom using the mouse wheel or buttons in
  93. the top-left corner.
  94. If you wish to source tiles from several tilesheet images for a single TileSet,
  95. create additional atlases and assign textures to each of them before continuing.
  96. It is also possible to use one image per tile this way (although using
  97. tilesheets is recommended for better usability).
  98. You can adjust properties for the atlas in the middle column:
  99. .. figure:: img/using_tilesets_properties.webp
  100. :align: center
  101. :alt: Adjusting TileSet atlas properties in the dedicated inspector (part of the TileSet panel)
  102. Adjusting TileSet atlas properties in the dedicated inspector (part of the TileSet panel)
  103. The following properties can be adjusted on the atlas:
  104. - **ID:** The identifier (unique within this TileSet), used for sorting.
  105. - **Name:** The human-readable name for the atlas. Use a descriptive name
  106. here for organizational purposes (such as "terrain", "decoration", etc).
  107. - **Margins:** The margins on the image's edges that should not be selectable as
  108. tiles (in pixels). Increasing this can be useful if you download a tilesheet
  109. image that has margins on the edges (e.g. for attribution).
  110. - **Separation:** The separation between each tile on the atlas in pixels.
  111. Increasing this can be useful if the tilesheet image you're using contains
  112. guides (such as outlines between every tile).
  113. - **Texture Region Size:** The size of each tile on the atlas in pixels. In most
  114. cases, this should match the tile size defined in the TileMap property
  115. (although this is not strictly necessary).
  116. - **Use Texture Padding:** If checked, adds a 1-pixel transparent edge around
  117. each tile to prevent texture bleeding when filtering is enabled.
  118. It's recommended to leave this enabled unless you're running into rendering issues
  119. due to texture padding.
  120. Note that changing texture margin, separation and region size may cause tiles to
  121. be lost (as some of them would be located outside the atlas image's
  122. coordinates). To regenerate tiles automatically from the tilesheet, use the
  123. three vertical dots menu button at the top of the TileSet editor and choose
  124. **Create Tiles in Non-Transparent Texture Regions**:
  125. .. figure:: img/using_tilesets_recreate_tiles_automatically.webp
  126. :align: center
  127. :alt: Recreating tiles automatically after changing atlas properties
  128. Recreating tiles automatically after changing atlas properties
  129. Using a collection of scenes
  130. ^^^^^^^^^^^^^^^^^^^^^^^^^^^^
  131. Since Godot 4.0, you can place actual *scenes* as tiles. This allows you to use
  132. any collection of nodes as a tile. For example, you could use scene tiles to
  133. place gameplay elements, such as shops the player may be able to interact with.
  134. You could also use scene tiles to place AudioStreamPlayer2Ds (for ambient
  135. sounds), particle effects, and more.
  136. .. warning::
  137. Scene tiles come with a greater performance overhead compared to atlases, as
  138. every scene is instanced individually for every placed tile.
  139. It's recommended to use only scene tiles when necessary. To draw sprites in a
  140. tile without any kind of advanced manipulation,
  141. :ref:`use atlases instead <doc_creating_tilesets_using_tilesheet>`.
  142. For this example, we'll create a scene containing a CPUParticles2D root node.
  143. Save this scene to a scene file (separate from the scene containing the
  144. TileMap), then switch to the scene containing the TileMap node. Open the TileSet
  145. editor, and create a new **Scenes Collection** in the left column:
  146. .. figure:: img/using_tilesets_creating_scene_collection.webp
  147. :align: center
  148. :alt: Creating a scenes collection in the TileSet editor
  149. Creating a scenes collection in the TileSet editor
  150. After creating a scenes collection, you can enter a descriptive name for the
  151. scenes collection in the middle column if you wish. Select this scenes
  152. collection then create a new scene slot:
  153. .. figure:: img/using_tilesets_scene_collection_create_scene_tile.webp
  154. :align: center
  155. :alt: Creating a scene tile after selecting the scenes collection in the TileSet editor
  156. Creating a scene tile after selecting the scenes collection in the TileSet editor
  157. Select this scene slot in the right column, then use **Quick Load** (or
  158. **Load**) to load the scene file containing the particles:
  159. .. figure:: img/using_tilesets_adding_scene_tile.webp
  160. :align: center
  161. :alt: Creating a scene slot, then loading a scene file into it in the TileSet editor
  162. Creating a scene slot, then loading a scene file into it in the TileSet editor
  163. You now have a scene tile in your TileSet. Once you switch to the TileMap
  164. editor, you'll be able to select it from the scenes collection and paint it like
  165. any other tile.
  166. Merging several atlases into a single atlas
  167. -------------------------------------------
  168. Using multiple atlases within a single TileSet resource can sometimes be useful,
  169. but it can also be cumbersome in certain situations (especially if you're using
  170. one image per tile). Godot allows you to merge several atlases into a single
  171. atlas for easier organization.
  172. To do so, you must have more than one atlas created in the TileSet resource.
  173. Use the "three vertical dots" menu button located at the bottom of the list of
  174. atlases, then choose **Open Atlas Merging Tool**:
  175. .. figure:: img/using_tilesets_open_atlas_merging_tool.webp
  176. :align: center
  177. :alt: Opening the atlas merging tool after creating multiple atlases
  178. Opening the atlas merging tool after creating multiple atlases
  179. This will open a dialog, in which you can select several atlases by holding
  180. :kbd:`Shift` or :kbd:`Ctrl` then clicking on multiple elements:
  181. .. figure:: img/using_tilesets_atlas_merging_tool_dialog.webp
  182. :align: center
  183. :alt: Using the atlas merging tool dialog
  184. Using the atlas merging tool dialog
  185. Choose **Merge** to merge the selected atlases into a single atlas image (which
  186. translates to a single atlas within the TileSet). The unmerged atlases will be
  187. removed within the TileSet, but *the original tilesheet images will be kept on
  188. the filesystem*. If you don't want the unmerged atlases to be removed from the
  189. TileSet resource, choose **Merge (Keep Original Atlases)** instead.
  190. .. tip::
  191. TileSet features a system of *tile proxies*. Tile proxies are a mapping
  192. table that allows notifying the TileMap using a given TileSet that a given
  193. set of tile identifiers should be replaced by another one.
  194. Tile proxies are automatically set up when merging different atlases, but
  195. they can also be set manually thanks to the **Manage Tile Proxies** dialog
  196. you can access using the "three vertical dots" menu mentioned above.
  197. Manually creating tile proxies may be useful when you changed an atlas ID or
  198. want to replace all tiles from an atlas by the ones from another atlas. Note
  199. that when editing a TileMap, you can replace all cells by their
  200. corresponding mapped value.
  201. Adding collision, navigation and occlusion to the TileSet
  202. ---------------------------------------------------------
  203. We've now successfully created a basic TileSet. We could start using in the
  204. TileMap node now, but it currently lacks any form of collision detection.
  205. This means the player and other objects could walk straight through the floor or
  206. walls.
  207. If you use :ref:`2D navigation <doc_navigation_overview_2d>`, you'll also need
  208. to define navigation polygons for tiles to generate a navigation mesh that
  209. agents can use for pathfinding.
  210. Lastly, if you use :ref:`doc_2d_lights_and_shadows` or GPUParticles2D, you may
  211. also want your TileSet to be able to cast shadows and collide with particles.
  212. This requires defining occluder polygons for "solid" tiles on the TileSet.
  213. To be able to define collision, navigation and occlusion shapes for each tile,
  214. you will need to create a physics, navigation or occlusion layer for the TileSet
  215. resource first. To do so, select the TileMap node, click the TileSet property
  216. value in the inspector to edit it then unfold **Physics Layers** and choose
  217. **Add Element**:
  218. .. figure:: img/using_tilesets_create_physics_layer.webp
  219. :align: center
  220. :alt: Creating a physics layer in the TileSet resource inspector (within the TileMap node)
  221. Creating a physics layer in the TileSet resource inspector (within the TileMap node)
  222. If you also need navigation support, now is a good time to create a navigation layer:
  223. .. figure:: img/using_tilesets_create_navigation_layer.webp
  224. :align: center
  225. :alt: Creating a navigation layer in the TileSet resource inspector (within the TileMap node)
  226. Creating a navigation layer in the TileSet resource inspector (within the TileMap node)
  227. If you need support for light polygon occluders, now is a good time to create an occlusion layer:
  228. .. figure:: img/using_tilesets_create_occlusion_layer.webp
  229. :align: center
  230. :alt: Creating an occlusion layer in the TileSet resource inspector (within the TileMap node)
  231. Creating an occlusion layer in the TileSet resource inspector (within the TileMap node)
  232. .. note::
  233. Future steps in this tutorial are tailored to creating collision polygons,
  234. but the procedure for navigation and occlusion is very similar.
  235. Their respective polygon editors behave in the same way, so these steps are
  236. not repeated for brevity.
  237. The only caveat is that the tile's occlusion polygon property is part of a
  238. **Rendering** subsection in the atlas inspector. Make sure to unfold this
  239. section so you can edit the polygon.
  240. After creating a physics layer, you have access to the **Physics Layer** section
  241. in the TileSet atlas inspector:
  242. .. figure:: img/using_tilesets_selecting_collision_editor.webp
  243. :align: center
  244. :alt: Opening the collision editor while in Select mode
  245. Opening the collision editor while in Select mode
  246. You can quickly create a rectangle collision shape by pressing :kbd:`F` while
  247. the TileSet editor is focused. If the keyboard shortcut doesn't work, try
  248. clicking in the empty area around the polygon editor to focus it:
  249. .. figure:: img/using_tilesets_using_default_rectangle_collision.webp
  250. :align: center
  251. :alt: Using default rectangle collision shape by pressing :kbd:`F`
  252. Using default rectangle collision shape by pressing :kbd:`F`
  253. In this tile collision editor, you have access to all the 2D polygon editing tools:
  254. - Use the toolbar above the polygon to toggle between creating a new polygon,
  255. editing an existing polygon and removing points on the polygon. The "three vertical dots"
  256. menu button offers additional options, such as rotating and flipping the polygon.
  257. - Create new points by clicking and dragging a line between two points.
  258. - Remove a point by right-clicking it (or using the Remove tool described above
  259. and left-clicking).
  260. - Pan in the editor by middle-clicking or right-clicking. (Right-click panning
  261. can only be used in areas where there is no point nearby.)
  262. You can use the default rectangle shape to quickly create a triangle-shaped
  263. collision shape by removing one of the points:
  264. .. figure:: img/using_tilesets_creating_triangle_collision.webp
  265. :align: center
  266. :alt: Creating a triangle collision shape by right-clicking one of the corners to remove it
  267. Creating a triangle collision shape by right-clicking one of the corners to remove it
  268. You can also use the rectangle as a base for more complex shapes by adding more points:
  269. .. figure:: img/using_tilesets_drawing_custom_collision.webp
  270. :align: center
  271. :alt: Drawing a custom collision for a complex tile shape
  272. Drawing a custom collision for a complex tile shape
  273. .. tip::
  274. If you have a large tileset, specifying the collision for each tile
  275. individually could take a lot of time. This is especially true as TileMaps
  276. tend to have many tiles with common collision patterns (such as solid blocks
  277. or 45-degree slopes). To apply a similar collision shape to several tiles
  278. quickly, use functionality to
  279. :ref:`assign properties to multiple tiles at once <doc_using_tilemaps_assigning_properties_to_multiple_tiles>`.
  280. Assigning custom metadata to the TileSet's tiles
  281. ------------------------------------------------
  282. You can assign custom data on a per-tile basis using *custom data layers*.
  283. This can be useful to store information specific to your game, such as the damage
  284. that a tile should deal when the player touches it, or whether a tile can be
  285. destroyed using a weapon.
  286. The data is associated with the tile in the TileSet: all instances of the placed
  287. tile will use the same custom data. If you need to create a variant of a tile
  288. that has different custom data, this can be done by :ref:`creating an
  289. alternative tile <doc_using_tilesets_creating_alternative_tiles>` and changing
  290. the custom data for the alternative tile only.
  291. .. figure:: img/using_tilesets_create_custom_data_layer.webp
  292. :align: center
  293. :alt: Creating a custom data layer in the TileSet resource inspector (within the TileMap node)
  294. Creating a custom data layer in the TileSet resource inspector (within the TileMap node)
  295. .. figure:: img/using_tilesets_custom_data_layers_example.webp
  296. :align: center
  297. :alt: Example of configured custom data layers with game-specific properties
  298. Example of configured custom data layers with game-specific properties
  299. You can reorder custom data without breaking existing metadata: the TileSet
  300. editor will update automatically after reordering custom data properties.
  301. Note that in the editor, property names do not appear (only their index, which
  302. matches the order in which they are defined). For example, with the custom data
  303. layers example shown above, we're assigning a tile to have the
  304. ``damage_per_second`` metadata set to ``25`` and the ``destructible`` metadata
  305. to ``false``:
  306. .. figure:: img/using_tilesets_edit_custom_data.webp
  307. :align: center
  308. :alt: Editing custom data in the TileSet editor while in Select mode
  309. Editing custom data in the TileSet editor while in Select mode
  310. :ref:`Tile property painting <doc_using_tilemaps_using_tile_property_painting>`
  311. can also be used for custom data:
  312. .. figure:: img/using_tilesets_edit_custom_data.webp
  313. :align: center
  314. :alt: Assigning custom data in the TileSet editor using tile property painting
  315. Assigning custom data in the TileSet editor using tile property painting
  316. .. _doc_using_tilesets_creating_terrain_sets:
  317. Creating terrain sets (autotiling)
  318. ----------------------------------
  319. .. note::
  320. This functionality was implemented in a different form as *autotiling* in Godot 3.x.
  321. Terrains are essentially a more powerful replacement of autotiles. Unlike
  322. autotiles, terrains can support transitions from one terrain to another, as
  323. a tile may define several terrains at once.
  324. Unlike before, where autotiles were a specific kind of tiles, terrains are
  325. only a set of properties assigned to atlas tiles. These properties are then
  326. used by a dedicated TileMap painting mode that selects tiles featuring
  327. terrain data in a smart way. This means any terrain tile can be either
  328. painted as terrain or as a single tile, like any other.
  329. A "polished" tileset generally features variations that you should use on
  330. corners or edges of platforms, floors, etc. While these can be placed manually,
  331. this quickly becomes tedious. Handling this situation with procedurally
  332. generated levels can also be difficult and require a lot of code.
  333. Godot offers *terrains* to perform this kind of tile connections automatically.
  334. This allows you to have the "correct" tile variants automatically used.
  335. Terrains are grouped into terrain sets. Each terrain set is assigned a mode from
  336. **Match Corners and Sides**, **Match Corners** and **Match sides**. They define how
  337. terrains are matched to each other in a terrain set.
  338. .. note::
  339. The above modes correspond to the previous bitmask modes autotiles used in
  340. Godot 3.x: 2×2, 3×3 or 3×3 minimal. This is also similar to what
  341. the `Tiled <https://www.mapeditor.org/>`__ editor features.
  342. Select the TileMap node, go to the inspector and create a new terrain set within the TileSet *resource*:
  343. .. figure:: img/using_tilesets_create_terrain_set.webp
  344. :align: center
  345. :alt: Creating a terrain set in the TileSet resource inspector (within the TileMap node)
  346. Creating a terrain set in the TileSet resource inspector (within the TileMap node)
  347. After creating a terrain set, you **must** create one or more terrains *within* the terrain set:
  348. .. figure:: img/using_tilesets_create_terrain.webp
  349. :align: center
  350. :alt: Creating a terrain within the terrain set
  351. Creating a terrain within the terrain set
  352. In the TileSet editor, switch to Select mode and click a tile. In the middle
  353. column, unfold the **Terrains** section then assign a terrain set ID and a
  354. terrain ID for the tile. ``-1`` means "no terrain set" or "no terrain", which
  355. means you must set **Terrain Set** to ``0`` or greater before you can set
  356. **Terrain** to ``0`` or greater.
  357. .. note::
  358. Terrain set IDs and terrain IDs are independent from each other. They also
  359. start from ``0``, not ``1``.
  360. .. figure:: img/using_tilesets_configure_terrain_on_tile.webp
  361. :align: center
  362. :alt: Configuring terrain on a single tile in the TileSet editor's Select mode
  363. Configuring terrain on a single tile in the TileSet editor's Select mode
  364. After doing so, you can now configure the **Terrain Peering Bits** section which
  365. becomes visible in the middle column. The peering bits determine which tile will
  366. be placed depending on neighboring tiles. ``-1`` is a special value which refers
  367. to empty space.
  368. For example, if a tile has all its bits set to ``0`` or greater, it will only
  369. appear if *all* 8 neighboring tiles are using a tile with the same terrain ID.
  370. If a tile has its bits set to ``0`` or greater,
  371. but the top-left, top and top-right bits are set to ``-1``, it will only appear
  372. if there is empty space on top of it (including diagonally).
  373. .. figure:: img/using_tilesets_configure_terrain_peering_bits.webp
  374. :align: center
  375. :alt: Configuring terrain peering bits on a single tile in the TileSet editor's Select mode
  376. Configuring terrain peering bits on a single tile in the TileSet editor's Select mode
  377. An example configuration for a full tilesheet may look as follows:
  378. .. figure:: img/using_tilesets_terrain_example_tilesheet.webp
  379. :align: center
  380. :alt: Example full tilesheet for a sidescrolling game
  381. Example full tilesheet for a sidescrolling game
  382. .. figure:: img/using_tilesets_terrain_example_tilesheet_configuration.webp
  383. :align: center
  384. :alt: Example full tilesheet for a sidescrolling game with terrain peering bits visible
  385. Example full tilesheet for a sidescrolling game with terrain peering bits visible
  386. .. _doc_using_tilemaps_assigning_properties_to_multiple_tiles:
  387. Assigning properties to multiple tiles at once
  388. ----------------------------------------------
  389. There are two ways to assign properties to multiple tiles at once.
  390. Depending on your use cases, one method may be faster than the other:
  391. Using multiple tile selection
  392. ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
  393. If you wish to configure various properties on several times at once,
  394. choose the **Select** mode at the top of the TileSet editor:
  395. After doing this, you can select multiple tiles on the right column by holding
  396. :kbd:`Shift` then clicking on tiles. You can also perform rectangle selection by
  397. holding down the left mouse button then dragging the mouse. Lastly, you can
  398. deselect tiles that were already selected (without affecting the rest of the
  399. selection) by holding :kbd:`Shift` then clicking on a selected tile.
  400. You can then assign properties using the inspector in the middle column of the
  401. TileSet editor. Only properties that you change here will be applied to all
  402. selected tiles. Like in the editor's inspector, properties that differ on
  403. selected tiles will remain different until you edit them.
  404. With numerical and color properties, you will also see a preview of the
  405. property's value on all tiles in the atlas after editing a property:
  406. .. figure:: img/using_tilesets_select_and_set_tile_properties.webp
  407. :align: center
  408. :alt: Selecting multiple tiles using the Select mode, then applying properties
  409. Selecting multiple tiles using the Select mode, then applying properties
  410. .. _doc_using_tilemaps_using_tile_property_painting:
  411. Using tile property painting
  412. ^^^^^^^^^^^^^^^^^^^^^^^^^^^^
  413. If you wish to apply a single property to several tiles at once,
  414. you can use the *property painting* mode for this purpose.
  415. Configure a property to be painted in the middle column, then
  416. click on tiles (or hold down the left mouse button) in the right column
  417. to "paint" properties onto tiles.
  418. .. figure:: img/using_tilesets_paint_tile_properties.webp
  419. :align: center
  420. :alt: Painting tile properties using the TileSet editor
  421. Painting tile properties using the TileSet editor
  422. Tile property painting is especially useful with properties that are
  423. time-consuming to set manually, such as collision shapes:
  424. .. figure:: img/using_tilesets_paint_tile_properties_collision.webp
  425. :align: center
  426. :alt: Painting a collision polygon, then left-clicking tiles to apply it
  427. Painting a collision polygon, then left-clicking tiles to apply it
  428. .. _doc_using_tilesets_creating_alternative_tiles:
  429. Creating alternative tiles
  430. --------------------------
  431. Sometimes, you want to use a single tile image (found only once within the
  432. atlas), but configured in different ways. For example, you may want to use the
  433. same tile image, but rotated, flipped, or modulated with a different color. This
  434. can be done using *alternative tiles*.
  435. To create an alternative tile, right-click a base tile in the atlas displayed by
  436. the TileSet editor, then choose **Create an Alternative Tile**:
  437. .. figure:: img/using_tilesets_create_alternative_tile.webp
  438. :align: center
  439. :alt: Creating an alternative tile by right-clicking a base tile in the TileSet editor
  440. Creating an alternative tile by right-clicking a base tile in the TileSet editor
  441. If currently in Select mode, the alternative tile will already be selected
  442. for editing. If not currently in Select mode, you can still create alternative
  443. tiles, but you will need to switch to Select mode and select the alternative
  444. tile to edit it.
  445. If you don't see the alternative tile, pan over to the right of the atlas image,
  446. as alternative tiles always appear on the right of base tiles of a given atlas
  447. in the TileSet editor:
  448. .. figure:: img/using_tilesets_configure_alternative_tile.webp
  449. :align: center
  450. :alt: Configuring an alternative tile after clicking it in the TileSet editor
  451. Configuring an alternative tile after clicking it in the TileSet editor
  452. After selecting an alternative tile, you can change any properties using the
  453. middle column like you would on a base tile. However, the list of exposed
  454. properties is different compared to base tiles:
  455. - **Alternative ID:** The unique numerical identifier for this alternative tile.
  456. Changing it will break existing TileMaps, so be careful! This ID also controls
  457. the sorting in the list of alternative tiles displayed in the editor.
  458. - **Rendering > Flip H:** If ``true``, the tile is horizontally flipped.
  459. - **Rendering > Flip V:** If ``true``, the tile is vertically flipped.
  460. - **Rendering > Transpose:** If ``true``, the tile is rotated 90 degrees
  461. counter-clockwise. Combine this with **Flip H** and/or **Flip V** to perform
  462. 180-degree or 270-degree rotation.
  463. - **Rendering > Texture Origin:** The origin to use for drawing the tile. This
  464. can be used to visually offset the tile compared to the base tile.
  465. - **Rendering > Modulate:** The color multiplier to use when rendering the tile.
  466. - **Rendering > Material:** The material to use for this tile. This can be used
  467. to apply a different blend mode or custom shaders to a single tile.
  468. - **Z Index:** The sorting order for this tile. Higher values will make the tile
  469. render in front of others on the same layer.
  470. - **Y Sort Origin:** The vertical offset to use for tile sorting based on its Y
  471. coordinate (in pixels). This allows using layers as if they were on different
  472. height for top-down games. Adjusting this can help alleviate issues with
  473. sorting certain tiles. Only effective if **Y Sort Enabled** is ``true`` on
  474. the TileMap layer the tile is placed on.
  475. You can create an additional alternative tile variant by clicking the large "+"
  476. icon next to the alternative tile. This is equivalent to selecting the base tile
  477. and right-clicking it to choose **Create an Alternative Tile** again.
  478. .. note::
  479. When creating an alternative tile, none of the properties from the base tile
  480. are inherited. You must set properties again on the alternative tile if you
  481. wish those to be identical on the base tile and the alternative tile.