123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655 |
- .. _doc_using_tilesets:
- Using TileSets
- ==============
- Introduction
- ------------
- A tilemap is a grid of tiles used to create a game's layout. There are several
- benefits to using :ref:`TileMapLayer <class_TileMapLayer>` nodes to design your
- levels. First, they let you draw a layout by "painting" tiles onto a grid,
- which is much faster than placing individual :ref:`Sprite2D
- <class_Sprite2D>` nodes one by one. Second, they allow for larger levels
- because they are optimized for drawing large numbers of tiles.
- Finally, they allow you to add greater functionality to your tiles with
- collision, occlusion, and navigation shapes.
- To use TileMapLayer nodes, you will need to create a TileSet first. A TileSet is a
- collection of tiles that can be placed in a TileMapLayer node. After creating a
- TileSet, you will be able to place them :ref:`using the TileMap editor
- <doc_using_tilemaps>`.
- To follow this guide, you will need an image containing your tiles where every
- tile has the same size (large objects can be split into several tiles). This
- image is called a *tilesheet*. Tiles do not have to be square: they can be
- rectangular, hexagonal, or isometric (pseudo-3D perspective).
- Creating a new TileSet
- ----------------------
- .. _doc_creating_tilesets_using_tilesheet:
- Using a tilesheet
- ^^^^^^^^^^^^^^^^^
- This demonstration will use the following tiles taken from
- `Kenney's "Abstract Platformer" pack <https://kenney.nl/assets/abstract-platformer>`__.
- We'll use this particular *tilesheet* from the set:
- .. figure:: img/using_tilesets_kenney_abstract_platformer_tile_sheet.webp
- :align: center
- :alt: Tilesheet example with 64×64 tiles
- Tilesheet with 64×64 tiles. Credit: `Kenney <https://kenney.nl/assets/abstract-platformer>`__
- Create a new **TileMapLayer** node, then select it and create a new TileSet resource in the inspector:
- .. figure:: img/using_tilesets_create_new_tileset.webp
- :align: center
- :alt: Creating a new TileSet resource within the TileMapLayer node
- Creating a new TileSet resource within the TileMapLayer node
- After creating the TileSet resource, click the value to unfold it in the
- inspector. The default tile shape is Square, but you can also choose Isometric,
- Half-Offset Square or Hexagon (depending on the shape of your tile images). If
- using a tile shape other than Square, you may also need to adjust the **Tile
- Layout** and **Tile Offset Axis** properties. Lastly, enabling the
- **Rendering > UV Clipping** property may be useful if you wish tiles to be clipped
- by their tile coordinates. This ensures tiles cannot draw outside their allocated
- area on the tilesheet.
- Set the tile size to 64×64 in the inspector to match the example tilesheet:
- .. figure:: img/using_tilesets_specify_size_then_edit.webp
- :align: center
- :alt: Setting the tile size to 64×64 to match the example tilesheet
- Setting the tile size to 64×64 to match the example tilesheet
- If relying on automatic tiles creation (like we're about to do here), you must
- set the tile size **before** creating the *atlas*. The atlas will
- determine which tiles from the tilesheet can be added to a TileMapLayer node
- (as not every part of the image may be a valid tile).
- Open the **TileSet** panel at the bottom of the editor, then click and drag the
- tilesheet image onto the panel. You will be asked whether to create tiles
- automatically. Answer **Yes**:
- .. figure:: img/using_tilesets_create_tiles_automatically.webp
- :align: center
- :alt: Automatically creating tiles based on tilesheet image content
- Automatically creating tiles based on tilesheet image content
- This will automatically create tiles according to the tile size you specified
- earlier in the TileSet resource. This greatly speeds up initial tile setup.
- .. note::
- When using automatic tile generation based on image contents, parts of the
- tilesheet that are *fully* transparent will not have tiles generated.
- If there are tiles from the tilesheet you do not wish to be present in atlas,
- choose the Eraser tool at the top of the tileset preview, then click the tiles
- you wish to remove:
- .. figure:: img/using_tilesets_eraser_tool.webp
- :align: center
- :alt: Using the Eraser tool to remove unwanted tiles from the TileSet atlas
- Using the Eraser tool to remove unwanted tiles from the TileSet atlas
- You can also right-click a tile and choose **Delete**, as an alternative to the
- Eraser tool.
- .. tip::
- Like in the 2D and TileMap editors, you can pan across the TileSet panel using
- the middle or right mouse buttons, and zoom using the mouse wheel or buttons in
- the top-left corner.
- If you wish to source tiles from several tilesheet images for a single TileSet,
- create additional atlases and assign textures to each of them before continuing.
- It is also possible to use one image per tile this way (although using
- tilesheets is recommended for better usability).
- You can adjust properties for the atlas in the middle column:
- .. figure:: img/using_tilesets_properties.webp
- :align: center
- :alt: Adjusting TileSet atlas properties in the dedicated inspector (part of the TileSet panel)
- Adjusting TileSet atlas properties in the dedicated inspector (part of the TileSet panel)
- The following properties can be adjusted on the atlas:
- - **ID:** The identifier (unique within this TileSet), used for sorting.
- - **Name:** The human-readable name for the atlas. Use a descriptive name
- here for organizational purposes (such as "terrain", "decoration", etc).
- - **Margins:** The margins on the image's edges that should not be selectable as
- tiles (in pixels). Increasing this can be useful if you download a tilesheet
- image that has margins on the edges (e.g. for attribution).
- - **Separation:** The separation between each tile on the atlas in pixels.
- Increasing this can be useful if the tilesheet image you're using contains
- guides (such as outlines between every tile).
- - **Texture Region Size:** The size of each tile on the atlas in pixels. In most
- cases, this should match the tile size defined in the TileMapLayer property
- (although this is not strictly necessary).
- - **Use Texture Padding:** If checked, adds a 1-pixel transparent edge around
- each tile to prevent texture bleeding when filtering is enabled.
- It's recommended to leave this enabled unless you're running into rendering issues
- due to texture padding.
- Note that changing texture margin, separation and region size may cause tiles to
- be lost (as some of them would be located outside the atlas image's
- coordinates). To regenerate tiles automatically from the tilesheet, use the
- three vertical dots menu button at the top of the TileSet editor and choose
- **Create Tiles in Non-Transparent Texture Regions**:
- .. figure:: img/using_tilesets_recreate_tiles_automatically.webp
- :align: center
- :alt: Recreating tiles automatically after changing atlas properties
- Recreating tiles automatically after changing atlas properties
- Using a collection of scenes
- ^^^^^^^^^^^^^^^^^^^^^^^^^^^^
- Since Godot 4.0, you can place actual *scenes* as tiles. This allows you to use
- any collection of nodes as a tile. For example, you could use scene tiles to
- place gameplay elements, such as shops the player may be able to interact with.
- You could also use scene tiles to place AudioStreamPlayer2Ds (for ambient
- sounds), particle effects, and more.
- .. warning::
- Scene tiles come with a greater performance overhead compared to atlases, as
- every scene is instanced individually for every placed tile.
- It's recommended to only use scene tiles when necessary. To draw sprites in a
- tile without any kind of advanced manipulation,
- :ref:`use atlases instead <doc_creating_tilesets_using_tilesheet>`.
- For this example, we'll create a scene containing a CPUParticles2D root node.
- Save this scene to a scene file (separate from the scene containing the
- TileMapLayer), then switch to the scene containing the TileMapLayer node. Open the TileSet
- editor, and create a new **Scenes Collection** in the left column:
- .. figure:: img/using_tilesets_creating_scene_collection.webp
- :align: center
- :alt: Creating a scenes collection in the TileSet editor
- Creating a scenes collection in the TileSet editor
- After creating a scenes collection, you can enter a descriptive name for the
- scenes collection in the middle column if you wish. Select this scenes
- collection then create a new scene slot:
- .. figure:: img/using_tilesets_scene_collection_create_scene_tile.webp
- :align: center
- :alt: Creating a scene tile after selecting the scenes collection in the TileSet editor
- Creating a scene tile after selecting the scenes collection in the TileSet editor
- Select this scene slot in the right column, then use **Quick Load** (or
- **Load**) to load the scene file containing the particles:
- .. figure:: img/using_tilesets_adding_scene_tile.webp
- :align: center
- :alt: Creating a scene slot, then loading a scene file into it in the TileSet editor
- Creating a scene slot, then loading a scene file into it in the TileSet editor
- You now have a scene tile in your TileSet. Once you switch to the TileMap
- editor, you'll be able to select it from the scenes collection and paint it like
- any other tile.
- Merging several atlases into a single atlas
- -------------------------------------------
- Using multiple atlases within a single TileSet resource can sometimes be useful,
- but it can also be cumbersome in certain situations (especially if you're using
- one image per tile). Godot allows you to merge several atlases into a single
- atlas for easier organization.
- To do so, you must have more than one atlas created in the TileSet resource.
- Use the "three vertical dots" menu button located at the bottom of the list of
- atlases, then choose **Open Atlas Merging Tool**:
- .. figure:: img/using_tilesets_open_atlas_merging_tool.webp
- :align: center
- :alt: Opening the atlas merging tool after creating multiple atlases
- Opening the atlas merging tool after creating multiple atlases
- This will open a dialog, in which you can select several atlases by holding
- :kbd:`Shift` or :kbd:`Ctrl` then clicking on multiple elements:
- .. figure:: img/using_tilesets_atlas_merging_tool_dialog.webp
- :align: center
- :alt: Using the atlas merging tool dialog
- Using the atlas merging tool dialog
- Choose **Merge** to merge the selected atlases into a single atlas image (which
- translates to a single atlas within the TileSet). The unmerged atlases will be
- removed within the TileSet, but *the original tilesheet images will be kept on
- the filesystem*. If you don't want the unmerged atlases to be removed from the
- TileSet resource, choose **Merge (Keep Original Atlases)** instead.
- .. tip::
- TileSet features a system of *tile proxies*. Tile proxies are a mapping
- table that allows notifying the TileMap using a given TileSet that a given
- set of tile identifiers should be replaced by another one.
- Tile proxies are automatically set up when merging different atlases, but
- they can also be set manually thanks to the **Manage Tile Proxies** dialog
- you can access using the "three vertical dots" menu mentioned above.
- Manually creating tile proxies may be useful when you changed an atlas ID or
- want to replace all tiles from an atlas by the ones from another atlas. Note
- that when editing a TileMap, you can replace all cells by their
- corresponding mapped value.
- Adding collision, navigation and occlusion to the TileSet
- ---------------------------------------------------------
- We've now successfully created a basic TileSet. We could start using it in the
- TileMapLayer node now, but it currently lacks any form of collision detection.
- This means the player and other objects could walk straight through the floor or
- walls.
- If you use :ref:`2D navigation <doc_navigation_overview_2d>`, you'll also need
- to define navigation polygons for tiles to generate a navigation mesh that
- agents can use for pathfinding.
- Lastly, if you use :ref:`doc_2d_lights_and_shadows` or GPUParticles2D, you may
- also want your TileSet to be able to cast shadows and collide with particles.
- This requires defining occluder polygons for "solid" tiles on the TileSet.
- To be able to define collision, navigation and occlusion shapes for each tile,
- you will need to create a physics, navigation or occlusion layer for the TileSet
- resource first. To do so, select the TileMapLayer node, click the TileSet property
- value in the inspector to edit it then unfold **Physics Layers** and choose
- **Add Element**:
- .. figure:: img/using_tilesets_create_physics_layer.webp
- :align: center
- :alt: Creating a physics layer in the TileSet resource inspector (within the TileMapLayer node)
- Creating a physics layer in the TileSet resource inspector (within the TileMapLayer node)
- If you also need navigation support, now is a good time to create a navigation layer:
- .. figure:: img/using_tilesets_create_navigation_layer.webp
- :align: center
- :alt: Creating a navigation layer in the TileSet resource inspector (within the TileMapLayer node)
- Creating a navigation layer in the TileSet resource inspector (within the TileMapLayer node)
- If you need support for light polygon occluders, now is a good time to create an occlusion layer:
- .. figure:: img/using_tilesets_create_occlusion_layer.webp
- :align: center
- :alt: Creating an occlusion layer in the TileSet resource inspector (within the TileMapLayer node)
- Creating an occlusion layer in the TileSet resource inspector (within the TileMapLayer node)
- .. note::
- Future steps in this tutorial are tailored to creating collision polygons,
- but the procedure for navigation and occlusion is very similar.
- Their respective polygon editors behave in the same way, so these steps are
- not repeated for brevity.
- The only caveat is that the tile's occlusion polygon property is part of a
- **Rendering** subsection in the atlas inspector. Make sure to unfold this
- section so you can edit the polygon.
- After creating a physics layer, you have access to the **Physics Layer** section
- in the TileSet atlas inspector:
- .. figure:: img/using_tilesets_selecting_collision_editor.webp
- :align: center
- :alt: Opening the collision editor while in Select mode
- Opening the collision editor while in Select mode
- You can quickly create a rectangle collision shape by pressing :kbd:`F` while
- the TileSet editor is focused. If the keyboard shortcut doesn't work, try
- clicking in the empty area around the polygon editor to focus it:
- .. figure:: img/using_tilesets_using_default_rectangle_collision.webp
- :align: center
- :alt: Using default rectangle collision shape by pressing :kbd:`F`
- Using default rectangle collision shape by pressing :kbd:`F`
- In this tile collision editor, you have access to all the 2D polygon editing tools:
- - Use the toolbar above the polygon to toggle between creating a new polygon,
- editing an existing polygon and removing points on the polygon. The "three vertical dots"
- menu button offers additional options, such as rotating and flipping the polygon.
- - Create new points by clicking and dragging a line between two points.
- - Remove a point by right-clicking it (or using the Remove tool described above
- and left-clicking).
- - Pan in the editor by middle-clicking or right-clicking. (Right-click panning
- can only be used in areas where there is no point nearby.)
- You can use the default rectangle shape to quickly create a triangle-shaped
- collision shape by removing one of the points:
- .. figure:: img/using_tilesets_creating_triangle_collision.webp
- :align: center
- :alt: Creating a triangle collision shape by right-clicking one of the corners to remove it
- Creating a triangle collision shape by right-clicking one of the corners to remove it
- You can also use the rectangle as a base for more complex shapes by adding more points:
- .. figure:: img/using_tilesets_drawing_custom_collision.webp
- :align: center
- :alt: Drawing a custom collision for a complex tile shape
- Drawing a custom collision for a complex tile shape
- .. tip::
- If you have a large tileset, specifying the collision for each tile
- individually could take a lot of time. This is especially true as TileMaps
- tend to have many tiles with common collision patterns (such as solid blocks
- or 45-degree slopes). To apply a similar collision shape to several tiles
- quickly, use functionality to
- :ref:`assign properties to multiple tiles at once <doc_using_tilemaps_assigning_properties_to_multiple_tiles>`.
- Assigning custom metadata to the TileSet's tiles
- ------------------------------------------------
- You can assign custom data on a per-tile basis using *custom data layers*.
- This can be useful to store information specific to your game, such as the damage
- that a tile should deal when the player touches it, or whether a tile can be
- destroyed using a weapon.
- The data is associated with the tile in the TileSet: all instances of the placed
- tile will use the same custom data. If you need to create a variant of a tile
- that has different custom data, this can be done by :ref:`creating an
- alternative tile <doc_using_tilesets_creating_alternative_tiles>` and changing
- the custom data for the alternative tile only.
- .. figure:: img/using_tilesets_create_custom_data_layer.webp
- :align: center
- :alt: Creating a custom data layer in the TileSet resource inspector (within the TileMapLayer node)
- Creating a custom data layer in the TileSet resource inspector (within the TileMapLayer node)
- .. figure:: img/using_tilesets_custom_data_layers_example.webp
- :align: center
- :alt: Example of configured custom data layers with game-specific properties
- Example of configured custom data layers with game-specific properties
- You can reorder custom data without breaking existing metadata: the TileSet
- editor will update automatically after reordering custom data properties.
- With the custom data layers example shown above, we're assigning a tile to have the
- ``damage_per_second`` metadata set to ``25`` and the ``destructible`` metadata
- to ``false``:
- .. figure:: img/using_tilesets_edit_custom_data.webp
- :align: center
- :alt: Editing custom data in the TileSet editor while in Select mode
- Editing custom data in the TileSet editor while in Select mode
- :ref:`Tile property painting <doc_using_tilemaps_using_tile_property_painting>`
- can also be used for custom data:
- .. figure:: img/using_tilesets_paint_custom_data.webp
- :align: center
- :alt: Assigning custom data in the TileSet editor using tile property painting
- Assigning custom data in the TileSet editor using tile property painting
- .. _doc_using_tilesets_creating_terrain_sets:
- Creating terrain sets (autotiling)
- ----------------------------------
- .. note::
- This functionality was implemented in a different form as *autotiling* in Godot 3.x.
- Terrains are essentially a more powerful replacement of autotiles. Unlike
- autotiles, terrains can support transitions from one terrain to another, as
- a tile may define several terrains at once.
- Unlike before, where autotiles were a specific kind of tiles, terrains are
- only a set of properties assigned to atlas tiles. These properties are then
- used by a dedicated TileMap painting mode that selects tiles featuring
- terrain data in a smart way. This means any terrain tile can be either
- painted as terrain or as a single tile, like any other.
- A "polished" tileset generally features variations that you should use on
- corners or edges of platforms, floors, etc. While these can be placed manually,
- this quickly becomes tedious. Handling this situation with procedurally
- generated levels can also be difficult and require a lot of code.
- Godot offers *terrains* to perform this kind of tile connection automatically.
- This allows you to have the "correct" tile variants automatically used.
- Terrains are grouped into terrain sets. Each terrain set is assigned a mode from
- **Match Corners and Sides**, **Match Corners** and **Match sides**. They define how
- terrains are matched to each other in a terrain set.
- .. note::
- The above modes correspond to the previous bitmask modes autotiles used in
- Godot 3.x: 2×2, 3×3 or 3×3 minimal. This is also similar to what
- the `Tiled <https://www.mapeditor.org/>`__ editor features.
- Select the TileMapLayer node, go to the inspector and create a new terrain set within the TileSet *resource*:
- .. figure:: img/using_tilesets_create_terrain_set.webp
- :align: center
- :alt: Creating a terrain set in the TileSet resource inspector (within the TileMapLayer node)
- Creating a terrain set in the TileSet resource inspector (within the TileMapLayer node)
- After creating a terrain set, you **must** create one or more terrains *within* the terrain set:
- .. figure:: img/using_tilesets_create_terrain.webp
- :align: center
- :alt: Creating a terrain within the terrain set
- Creating a terrain within the terrain set
- In the TileSet editor, switch to Select mode and click a tile. In the middle
- column, unfold the **Terrains** section then assign a terrain set ID and a
- terrain ID for the tile. ``-1`` means "no terrain set" or "no terrain", which
- means you must set **Terrain Set** to ``0`` or greater before you can set
- **Terrain** to ``0`` or greater.
- .. note::
- Terrain set IDs and terrain IDs are independent from each other. They also
- start from ``0``, not ``1``.
- .. figure:: img/using_tilesets_configure_terrain_on_tile.webp
- :align: center
- :alt: Configuring terrain on a single tile in the TileSet editor's Select mode
- Configuring terrain on a single tile in the TileSet editor's Select mode
- After doing so, you can now configure the **Terrain Peering Bits** section which
- becomes visible in the middle column. The peering bits determine which tile will
- be placed depending on neighboring tiles. ``-1`` is a special value which refers
- to empty space.
- For example, if a tile has all its bits set to ``0`` or greater, it will only
- appear if *all* 8 neighboring tiles are using a tile with the same terrain ID.
- If a tile has its bits set to ``0`` or greater,
- but the top-left, top and top-right bits are set to ``-1``, it will only appear
- if there is empty space on top of it (including diagonally).
- .. figure:: img/using_tilesets_configure_terrain_peering_bits.webp
- :align: center
- :alt: Configuring terrain peering bits on a single tile in the TileSet editor's Select mode
- Configuring terrain peering bits on a single tile in the TileSet editor's Select mode
- An example configuration for a full tilesheet may look as follows:
- .. figure:: img/using_tilesets_terrain_example_tilesheet.webp
- :align: center
- :alt: Example full tilesheet for a sidescrolling game
- Example full tilesheet for a sidescrolling game
- .. figure:: img/using_tilesets_terrain_example_tilesheet_configuration.webp
- :align: center
- :alt: Example full tilesheet for a sidescrolling game with terrain peering bits visible
- Example full tilesheet for a sidescrolling game with terrain peering bits visible
- .. _doc_using_tilemaps_assigning_properties_to_multiple_tiles:
- Assigning properties to multiple tiles at once
- ----------------------------------------------
- There are two ways to assign properties to multiple tiles at once.
- Depending on your use cases, one method may be faster than the other:
- Using multiple tile selection
- ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
- If you wish to configure various properties on several tiles at once,
- choose the **Select** mode at the top of the TileSet editor:
- After doing this, you can select multiple tiles on the right column by holding
- :kbd:`Shift` then clicking on tiles. You can also perform rectangle selection by
- holding down the left mouse button then dragging the mouse. Lastly, you can
- deselect tiles that were already selected (without affecting the rest of the
- selection) by holding :kbd:`Shift` then clicking on a selected tile.
- You can then assign properties using the inspector in the middle column of the
- TileSet editor. Only properties that you change here will be applied to all
- selected tiles. Like in the editor's inspector, properties that differ on
- selected tiles will remain different until you edit them.
- With numerical and color properties, you will also see a preview of the
- property's value on all tiles in the atlas after editing a property:
- .. figure:: img/using_tilesets_select_and_set_tile_properties.webp
- :align: center
- :alt: Selecting multiple tiles using the Select mode, then applying properties
- Selecting multiple tiles using the Select mode, then applying properties
- .. _doc_using_tilemaps_using_tile_property_painting:
- Using tile property painting
- ^^^^^^^^^^^^^^^^^^^^^^^^^^^^
- If you wish to apply a single property to several tiles at once,
- you can use the *property painting* mode for this purpose.
- Configure a property to be painted in the middle column, then
- click on tiles (or hold down the left mouse button) in the right column
- to "paint" properties onto tiles.
- .. figure:: img/using_tilesets_paint_tile_properties.webp
- :align: center
- :alt: Painting tile properties using the TileSet editor
- Painting tile properties using the TileSet editor
- Tile property painting is especially useful with properties that are
- time-consuming to set manually, such as collision shapes:
- .. figure:: img/using_tilesets_paint_tile_properties_collision.webp
- :align: center
- :alt: Painting a collision polygon, then left-clicking tiles to apply it
- Painting a collision polygon, then left-clicking tiles to apply it
- .. _doc_using_tilesets_creating_alternative_tiles:
- Creating alternative tiles
- --------------------------
- Sometimes, you want to use a single tile image (found only once within the
- atlas), but configured in different ways. For example, you may want to use the
- same tile image, but rotated, flipped, or modulated with a different color. This
- can be done using *alternative tiles*.
- .. tip::
- Since Godot 4.2, you don't have to create alternative tiles to rotate or
- flip tiles anymore. You can rotate any tile while placing it in the
- TileMap editor by using the rotation/flip buttons in the TileMap editor
- toolbar.
- To create an alternative tile, right-click a base tile in the atlas displayed by
- the TileSet editor, then choose **Create an Alternative Tile**:
- .. figure:: img/using_tilesets_create_alternative_tile.webp
- :align: center
- :alt: Creating an alternative tile by right-clicking a base tile in the TileSet editor
- Creating an alternative tile by right-clicking a base tile in the TileSet editor
- If currently in Select mode, the alternative tile will already be selected
- for editing. If not currently in Select mode, you can still create alternative
- tiles, but you will need to switch to Select mode and select the alternative
- tile to edit it.
- If you don't see the alternative tile, pan over to the right of the atlas image,
- as alternative tiles always appear on the right of base tiles of a given atlas
- in the TileSet editor:
- .. figure:: img/using_tilesets_configure_alternative_tile.webp
- :align: center
- :alt: Configuring an alternative tile after clicking it in the TileSet editor
- Configuring an alternative tile after clicking it in the TileSet editor
- After selecting an alternative tile, you can change any properties using the
- middle column like you would on a base tile. However, the list of exposed
- properties is different compared to base tiles:
- - **Alternative ID:** The unique numerical identifier for this alternative tile.
- Changing it will break existing TileMaps, so be careful! This ID also controls
- the sorting in the list of alternative tiles displayed in the editor.
- - **Rendering > Flip H:** If ``true``, the tile is horizontally flipped.
- - **Rendering > Flip V:** If ``true``, the tile is vertically flipped.
- - **Rendering > Transpose:** If ``true``, the tile is rotated 90 degrees
- *counter-clockwise* and then flipped vertically. In practice, this means that
- to rotate a tile by 90 degrees clockwise without flipping it, you should
- enable **Flip H** and **Transpose**. To rotate a tile by 180 degrees
- clockwise, enable **Flip H** and **Flip V**. To rotate a tile by 270 degrees
- clockwise, enable **Flip V** and **Transpose**.
- - **Rendering > Texture Origin:** The origin to use for drawing the tile. This
- can be used to visually offset the tile compared to the base tile.
- - **Rendering > Modulate:** The color multiplier to use when rendering the tile.
- - **Rendering > Material:** The material to use for this tile. This can be used
- to apply a different blend mode or custom shaders to a single tile.
- - **Z Index:** The sorting order for this tile. Higher values will make the tile
- render in front of others on the same layer.
- - **Y Sort Origin:** The vertical offset to use for tile sorting based on its Y
- coordinate (in pixels). This allows using layers as if they were on different
- height for top-down games. Adjusting this can help alleviate issues with
- sorting certain tiles. Only effective if **Y Sort Enabled** is ``true`` on
- the TileMapLayer node under **CanvasItem > Ordering**
- You can create an additional alternative tile variant by clicking the large "+"
- icon next to the alternative tile. This is equivalent to selecting the base tile
- and right-clicking it to choose **Create an Alternative Tile** again.
- .. note::
- When creating an alternative tile, none of the properties from the base tile
- are inherited. You must set properties again on the alternative tile if you
- wish those to be identical on the base tile and the alternative tile.
|