|
@@ -5,6 +5,12 @@
|
|
|
Using TileMaps
|
|
|
==============
|
|
|
|
|
|
+.. seealso::
|
|
|
+
|
|
|
+ This page assumes you have created or downloaded a TileSet already. If not,
|
|
|
+ please read :ref:`doc_using_tilesets` first as you will need a TileSet
|
|
|
+ to create a TileMap.
|
|
|
+
|
|
|
Introduction
|
|
|
------------
|
|
|
|
|
@@ -14,342 +20,453 @@ First, they make it possible to draw the layout by "painting" the tiles onto a
|
|
|
grid, which is much faster than placing individual :ref:`Sprite2D <class_Sprite2D>`
|
|
|
nodes one by one. Second, they allow for much larger levels because they are
|
|
|
optimized for drawing large numbers of tiles. Finally, you can add collision,
|
|
|
-occlusion, and navigation shapes to tiles, adding additional functionality to
|
|
|
+occlusion, and navigation shapes to tiles, adding greater functionality to
|
|
|
the TileMap.
|
|
|
|
|
|
-.. image:: img/tileset_draw_atlas.png
|
|
|
+.. note::
|
|
|
|
|
|
-Project setup
|
|
|
--------------
|
|
|
+ Godot 4.0 has moved several per-tile properties, such as tile rotation, from
|
|
|
+ TileMap to TileSet. Individual tiles can no longer be rotated while in the
|
|
|
+ TileMap editor. Instead, the TileSet editor must be used to create
|
|
|
+ alternative rotated tiles.
|
|
|
+
|
|
|
+ This change allows for greater design consistency, as not every tile needs to be
|
|
|
+ rotated or flipped within a TileSet.
|
|
|
+
|
|
|
+Specifying the TileSet in the TileMap
|
|
|
+-------------------------------------
|
|
|
+
|
|
|
+If you've followed the previous page on :ref:`doc_using_tilesets`, you should
|
|
|
+have a TileSet resource that is built-in to the TileMap node. This is good for
|
|
|
+prototyping, but in a real world project, you will generally have multiple
|
|
|
+levels reusing the same tileset.
|
|
|
+
|
|
|
+The recommended way to reuse the same TileSet in several TileMap nodes is to save
|
|
|
+the TileSet to an external resource. To do so, click the dropdown next to the TileSet
|
|
|
+resource and choose **Save**:
|
|
|
+
|
|
|
+.. figure:: img/using_tilemaps_save_tileset_to_resource.webp
|
|
|
+ :align: center
|
|
|
+ :alt: Saving the built-in TileSet resource to an external resource file
|
|
|
+
|
|
|
+ Saving the built-in TileSet resource to an external resource file
|
|
|
+
|
|
|
+Creating TileMap layers
|
|
|
+-----------------------
|
|
|
+
|
|
|
+As of Godot 4.0, you can place several *layers* in a single TileMap node. For
|
|
|
+example, this allows you to distinguish foreground tiles from background tiles
|
|
|
+for better organization. You can place one tile per layer at a given location,
|
|
|
+which allows you to overlap several tiles together if you have more than one layer.
|
|
|
+
|
|
|
+By default, a TileMap node automatically has one premade layer. You do not have
|
|
|
+to create additional layers if you only need a single layer, but if you wish to
|
|
|
+do so now, select the TileMap node and unfold the **Layers** section in the
|
|
|
+inspector:
|
|
|
+
|
|
|
+.. figure:: img/using_tilemaps_create_layers.webp
|
|
|
+ :align: center
|
|
|
+ :alt: Creating layers in a TileMap node (example with "background" and "foreground")
|
|
|
+
|
|
|
+ Creating layers in a TileMap node (example with "background" and "foreground")
|
|
|
+
|
|
|
+Each layer has several properties you can adjust:
|
|
|
+
|
|
|
+- **Name:** A human-readable name to display in the TileMap editor. This can be
|
|
|
+ something like "background", "buildings", "vegetation", etc.
|
|
|
+- **Enabled:** If ``true``, the layer is visible in the editor and when running
|
|
|
+ the project.
|
|
|
+- **Modulate:** The color to use as a multiplier for all tiles on the layer.
|
|
|
+ This is also multiplied with the per-tile **Modulate** property and the
|
|
|
+ TileMap node's **Modulate** property. For example, you can use this to darken
|
|
|
+ background tiles to make foreground tiles stand out more.
|
|
|
+- **Y Sort Enabled:** If ``true``, sorts tiles based on their Y position on the
|
|
|
+ TileMap. This can be used to prevent sorting issues with certain tile setups,
|
|
|
+ especially with isometric tiles.
|
|
|
+- **Y Sort Origin:** The vertical offset to use for Y-sorting on each tile (in pixels).
|
|
|
+ Only effective if **Y Sort Enabled** is ``true``.
|
|
|
+- **Z Index:** Controls whether this layer is drawn in front of or behind other
|
|
|
+ TileMap layers. This value can be positive or negative; the layer with the highest Z
|
|
|
+ Index is drawn on top of other layers. If several layers have an equal Z Index
|
|
|
+ property, the layer that is *last* in the list of layers (the one which
|
|
|
+ appears at the bottom in the list) is drawn on top.
|
|
|
+
|
|
|
+You can reorder layers by drag-and-dropping the "three horizontal bars" icon on
|
|
|
+the left of the entries in the **Layers** section.
|
|
|
|
|
|
-This demo will use the following tiles taken from Kenney's "Abstract Platformer"
|
|
|
-art pack. You can find the complete set `here <https://kenney.nl/assets/abstract-platformer>`_
|
|
|
-but for this demo we'll stick to this small set.
|
|
|
+.. note::
|
|
|
|
|
|
-.. image:: img/tilesheet.png
|
|
|
+ You can create, rename or reorder layers in the future without affecting
|
|
|
+ existing tiles. Be careful though, as *removing* a layer will also remove
|
|
|
+ all tiles that were placed on the layer.
|
|
|
|
|
|
-Create a new project and place the above image in the project folder.
|
|
|
+Opening the TileMap editor
|
|
|
+--------------------------
|
|
|
|
|
|
-When using a tileset, it's important that adjacent tiles match up. Godot's default
|
|
|
-is to import 2D images using an interpolated "filter" mode, which will result in
|
|
|
-ugly borders between the tiles. Select the image and click the Import tab. Turn
|
|
|
-off ``Filter`` and click "Reimport". See :ref:`doc_import_images` for details.
|
|
|
+Select the TileMap node, then open the TileMap panel at the bottom
|
|
|
+of the editor:
|
|
|
|
|
|
-TileMap node
|
|
|
-------------
|
|
|
+.. figure:: img/using_tilemaps_open_tilemap_editor.webp
|
|
|
+ :align: center
|
|
|
+ :alt: Opening the TileMap panel at the bottom of the editor. The TileMap node must be selected first.
|
|
|
|
|
|
-Add a new :ref:`TileMap <class_TileMap>` node to the scene. By default, a TileMap
|
|
|
-uses a square grid of tiles. You can also use a perspective-based "Isometric" mode
|
|
|
-or define your own custom tile shape.
|
|
|
+ Opening the TileMap panel at the bottom of the editor. The TileMap node must be selected first.
|
|
|
|
|
|
-.. image:: img/tilemap_mode.png
|
|
|
+Selecting tiles to use for painting
|
|
|
+-----------------------------------
|
|
|
|
|
|
-Under the "Cell" section in the Inspector are many properties you can adjust to
|
|
|
-customize your tilemap's behavior:
|
|
|
+First, if you've created additional layers above, make sure you've selected the
|
|
|
+layer you wish to paint on:
|
|
|
|
|
|
-.. image:: img/tilemap_size.png
|
|
|
+.. figure:: img/using_tilemaps_select_layer.webp
|
|
|
+ :align: center
|
|
|
+ :alt: Selecting a layer to paint on in the TileMap editor
|
|
|
|
|
|
-- ``Cell Size``
|
|
|
- This defines the size of the grid. This should match the pixel size
|
|
|
- of your tiles. The default value is ``(64, 64)``.
|
|
|
+ Selecting a layer to paint on in the TileMap editor
|
|
|
|
|
|
-- ``YSort``
|
|
|
- This causes tiles to be drawn in order of their ``Y`` position, so that
|
|
|
- "lower" tiles are drawn on top of "higher" ones.
|
|
|
+.. tip::
|
|
|
|
|
|
-- ``Half Offset`` and ``Tile Origin``
|
|
|
- These properties affect the position of the tile relative to the grid position.
|
|
|
+ In the 2D editor, the layers you aren't currently editing from the same
|
|
|
+ TileMap node will appear grayed out while in the TileMap editor. You can
|
|
|
+ disable this behavior by clicking the icon next to the layer selection menu
|
|
|
+ (**Highlight Selected TileMap Layer** tooltip).
|
|
|
|
|
|
-- ``Quadrant``
|
|
|
- Defines the chunk size used for batched drawing. This can negatively
|
|
|
- affect performance. Don't change it unless you know what you're doing.
|
|
|
+You can skip the above step if you haven't created additional layers, as the
|
|
|
+first layer is automatically selected when entering the TileMap editor.
|
|
|
|
|
|
-- ``Custom Transform``
|
|
|
- Used to alter the tile's shape. Use this if you have non-square tiles.
|
|
|
+Before you can place tiles in the 2D editor, you must select one or more tiles
|
|
|
+in the TileMap panel located at the bottom of the editor. To do so, click a tile
|
|
|
+in the TileMap panel, or hold down the mouse button to select multiple tiles:
|
|
|
|
|
|
-All of these options can be left at their defaults for this demo.
|
|
|
+.. figure:: img/using_tilemaps_select_single_tile_from_tileset.webp
|
|
|
+ :align: center
|
|
|
+ :alt: Selecting a tile in the TileMap editor by clicking it
|
|
|
|
|
|
-Creating a TileSet
|
|
|
-------------------
|
|
|
+ Selecting a tile in the TileMap editor by clicking it
|
|
|
|
|
|
-Once you've configured your tilemap, it's time to add a
|
|
|
-:ref:`TileSet <class_TileSet>`. A TileSet is a
|
|
|
-:ref:`Resource <class_Resource>` that contains the data about your
|
|
|
-tiles - their textures, collision shapes, and other properties. When the game
|
|
|
-runs, the TileMap combines the individual tiles into a single object.
|
|
|
+.. tip::
|
|
|
|
|
|
-To add a new TileSet, click on the "Tile Set" property and select "New
|
|
|
-TileSet".
|
|
|
+ Like in the 2D and TileSet editors, you can pan across the TileMap panel using
|
|
|
+ the middle or right mouse buttons, and zoom using the mouse wheel or buttons in
|
|
|
+ the top-left corner.
|
|
|
|
|
|
-.. image:: img/tilemap_add_tileset.png
|
|
|
+You can also hold down :kbd:`Shift` to append to the current selection. When
|
|
|
+selecting more than one tile, multiple tiles will be placed every time you
|
|
|
+perform a painting operation. This can be used to paint structures composed of
|
|
|
+multiple tiles in a single click (such as large platforms or trees).
|
|
|
|
|
|
-Click on the TileSet property, and the "TileSet" panel will open at the bottom
|
|
|
-of the editor window:
|
|
|
+The final selection does not have to be contiguous: if there is empty space
|
|
|
+between selected tiles, it will be left empty in the pattern that will be
|
|
|
+painted in the 2D editor.
|
|
|
|
|
|
-.. image:: img/tilemap_tool.png
|
|
|
+.. figure:: img/using_tilemaps_select_multiple_tiles_from_tileset.webp
|
|
|
+ :align: center
|
|
|
+ :alt: Selecting multiple tiles in the TileMap editor by holding down the left mouse button
|
|
|
|
|
|
-First, you need to add the texture(s) that you'll use for the tiles. Click the
|
|
|
-"Add Texture(s) to TileSet" button and select the ``tilesheet.png`` image.
|
|
|
+ Selecting multiple tiles in the TileMap editor by holding down the left mouse button
|
|
|
|
|
|
-Next, click "New Single Tile" and drag in the image to select the tile you want.
|
|
|
-Click the "Enable Snap" button to make it easier to select the entire tile. A
|
|
|
-yellow rectangle appears around the selected tile.
|
|
|
+If you've created alternative tiles in your TileSet, you can select them for
|
|
|
+painting on the right of the base tiles:
|
|
|
|
|
|
-.. image:: img/tilemap_add_tile.png
|
|
|
+.. figure:: img/using_tilemaps_use_alternative_tile.webp
|
|
|
+ :align: center
|
|
|
+ :alt: Selecting an alternative tile in the TileMap editor
|
|
|
|
|
|
-Click on the TileMap in the scene tree, and you'll see that the newly created
|
|
|
-tile now appears on the right side. Click in the viewport and you can place
|
|
|
-tiles. Right-click to remove them.
|
|
|
+ Selecting an alternative tile in the TileMap editor
|
|
|
|
|
|
-.. image:: img/tilemap_draw.png
|
|
|
+Lastly, if you've created a *scenes collection* in the TileSet, you can place scene tiles in the TileMap:
|
|
|
|
|
|
-It's easy to accidentally select and move the tilemap node. To avoid this, use
|
|
|
-the node's lock button:
|
|
|
+.. figure:: img/using_tilemaps_placing_scene_tiles.webp
|
|
|
+ :align: center
|
|
|
+ :alt: Placing a scene tile containing particles using the TileMap editor
|
|
|
|
|
|
-.. image:: img/tile_lock.png
|
|
|
+ Placing a scene tile containing particles using the TileMap editor
|
|
|
|
|
|
-Collision shapes
|
|
|
-----------------
|
|
|
+Painting modes and tools
|
|
|
+------------------------
|
|
|
|
|
|
-If you're making a map that needs collisions - walls, floor, or other obstacles,
|
|
|
-for example - then you'll need to add collision shapes to any tiles that you
|
|
|
-want to be considered "solid".
|
|
|
+Using the toolbar at the top of the TileMap editor, you can choose between
|
|
|
+several painting modes and tools. These modes affect operation when clicking in
|
|
|
+the 2D editor, **not** the TileMap panel itself.
|
|
|
|
|
|
-Click "TileSet" at the bottom of the editor window to return to the tileset
|
|
|
-tool. Click the tile you previously defined (outlined in yellow). Select the
|
|
|
-"Collision" tab and click the "Create a new rectangle" button. Make sure you
|
|
|
-still have grid snap enabled, then click and drag in the tile. A square
|
|
|
-collision shape appears in light blue:
|
|
|
+From left to right, the painting modes and tools you can choose are:
|
|
|
|
|
|
-.. image:: img/tileset_add_collision.png
|
|
|
+Selection
|
|
|
+^^^^^^^^^
|
|
|
|
|
|
-You can add occlusion and navigation shapes to the tile in the same way.
|
|
|
+Select tiles by clicking a single tile, or by holding down the left mouse button to
|
|
|
+select multiple with a rectangle in the 2D editor. Note that empty space cannot be
|
|
|
+selected: if you create a rectangle selection, only non-empty tiles will be selected.
|
|
|
|
|
|
-Atlas tiles
|
|
|
------------
|
|
|
+To append to the current selection, hold :kbd:`Shift` then select a tile.
|
|
|
+To remove from the current selection, hold :kbd:`Ctrl` then select a tile.
|
|
|
|
|
|
-Rather than adding individual tiles one at a time, you can define a group of
|
|
|
-tiles all at once using an atlas. This also allows you to randomly generate
|
|
|
-tiles from the group.
|
|
|
+The selection can then be used in any other painting mode to quickly create copies
|
|
|
+of an already-placed pattern.
|
|
|
|
|
|
-Click "New Atlas" and drag to select the entire tile sheet.
|
|
|
+While in Selection mode, you can't place new tiles, but you can still erase
|
|
|
+tiles by right-clicking after making a selection. The whole selection will be erased,
|
|
|
+regardless of where you click in the selection.
|
|
|
|
|
|
-.. image:: img/tileset_atlas.png
|
|
|
+You can toggle this mode temporarily while in Paint mode by holding :kbd:`Ctrl`
|
|
|
+then performing a selection.
|
|
|
|
|
|
-If you haven't already, make sure to change the "Step" in the snap settings to
|
|
|
-`(64, 64)`, or your tiles may be chopped into smaller pieces. You can find
|
|
|
-this in the Inspector:
|
|
|
+.. tip::
|
|
|
|
|
|
-.. image:: img/tileset_snap.png
|
|
|
+ You can copy and paste tiles that were already placed by performing a
|
|
|
+ selection, pressing :kbd:`Ctrl + C` then pressing :kbd:`Ctrl + V`.
|
|
|
+ The selection will be pasted after left-clicking. You can press
|
|
|
+ :kbd:`Ctrl + V` another time to perform more copies this way.
|
|
|
+ Right-click or press :kbd:`Escape` to cancel pasting.
|
|
|
|
|
|
-Once you've defined the atlas you can add collision shapes to the individual
|
|
|
-tiles as before. You can also click "Icon" to select one of the tiles to represent
|
|
|
-the atlas.
|
|
|
+Paint
|
|
|
+^^^^^
|
|
|
|
|
|
-Back in the TileMap, you can select the atlas tile and you'll see all of the
|
|
|
-tiles it contains:
|
|
|
+The standard Paint mode allows you to place tiles by clicking or holding
|
|
|
+down the left mouse button.
|
|
|
|
|
|
-.. image:: img/tileset_draw_atlas.png
|
|
|
+If you right-click, the currently selected tile will be erased from the tilemap.
|
|
|
+In other words, it will be replaced by empty space.
|
|
|
|
|
|
-In addition to saving time when defining the tiles, this can help by grouping
|
|
|
-similar tiles together when you're working with a large number of tiles.
|
|
|
+If you have selected multiple tiles in the TileMap or using the Selection tool,
|
|
|
+they will be placed every time you click or drag the mouse while holding down
|
|
|
+the left mouse button.
|
|
|
|
|
|
-Random tile priorities
|
|
|
-~~~~~~~~~~~~~~~~~~~~~~
|
|
|
+.. tip::
|
|
|
|
|
|
-When drawing with atlas tiles, enabling the "Use priority" option causes tiles
|
|
|
-to be selected at random. By default, each tile in the tileset has an equal
|
|
|
-likelihood of occurring. You can change the likelihood by setting different
|
|
|
-priorities for each tile. For example, a tile with priority 2 is twice as
|
|
|
-likely to be selected as a tile with priority 1, and a tile with priority 3 is
|
|
|
-50% more likely to be selected than a tile with priority 2.
|
|
|
+ While in Paint mode, you can draw a line by holding :kbd:`Shift` *before*
|
|
|
+ holding down the left mouse button, then dragging the mouse to the line's end
|
|
|
+ point. This is identical to using the Line tool described below.
|
|
|
|
|
|
-Autotiles
|
|
|
----------
|
|
|
+ You can also draw a rectangle by holding :kbd:`Ctrl` and :kbd:`Shift`
|
|
|
+ *before* holding down the left mouse button, then dragging the mouse to the
|
|
|
+ rectangle's end point. This is identical to using the Rectangle tool
|
|
|
+ described below.
|
|
|
|
|
|
-Autotiles allow you to define a group of tiles, then add rules to control which
|
|
|
-tile gets used for drawing based on the content of adjacent cells.
|
|
|
+ Lastly, you can pick existing tiles in the 2D editor by holding :kbd:`Ctrl`
|
|
|
+ then clicking on a tile (or holding and dragging the mouse).
|
|
|
+ This will switch the currently painted tile(s) to the tile(s) you've just clicked.
|
|
|
+ This is identical to using the Picker tool described below.
|
|
|
|
|
|
-Click "New Autotile" and drag to select the tiles you wish to use. You can add
|
|
|
-collisions, occlusion, navigation shapes, tile priorties, and select an icon
|
|
|
-tile in the same manner as for atlas tiles.
|
|
|
+Line
|
|
|
+^^^^
|
|
|
|
|
|
-Tile selection is controlled by bitmasks. Bitmasks can be added by clicking
|
|
|
-"Bitmask", then clicking parts of the tiles to add or remove bits in the mask.
|
|
|
-Left-clicking an area of the tile adds a bit, right-click removes "off",
|
|
|
-and shift-left-click sets an "ignore" bit.
|
|
|
+After selecting Line Paint mode, you can draw in a line that is
|
|
|
+always 1 tile thick (no matter its orientation).
|
|
|
|
|
|
-Whenever Godot updates a cell using an autotile, it first creates a pattern
|
|
|
-based on which adjacent cells are already set. Then, it searches the autotile
|
|
|
-for a single tile with a bitmask matching the created pattern. If no matching
|
|
|
-bitmask is found, the "icon" tile will be used instead. If more than one
|
|
|
-matching bitmask is found, one of them will be selected randomly, using the
|
|
|
-tile priorities.
|
|
|
+If you right-click while in Line Paint mode, you will erase in a line.
|
|
|
|
|
|
-The rules for matching a bitmask to a pattern depend on the tileset's autotile
|
|
|
-bitmask mode. This can be set in the "Inspector" tab, under the "Selected Tile"
|
|
|
-heading. Allowed values are "2x2", "3x3 (minimal)", and "3x3".
|
|
|
+If you have selected multiple tiles in the TileMap or using the Selection tool,
|
|
|
+you can place them in a repeating pattern across the line.
|
|
|
|
|
|
-All "on" and "off" bits must be satisfied for a bitmask to match, but "ignore"
|
|
|
-bits are ignored.
|
|
|
+You can toggle this mode temporarily while in Paint or Eraser mode by holding
|
|
|
+:kbd:`Shift` then drawing.
|
|
|
|
|
|
-2x2
|
|
|
-~~~
|
|
|
+.. figure:: img/using_tilemaps_bucket_fill.webp
|
|
|
+ :align: center
|
|
|
+ :alt: Using the line tool after selecting two tiles to draw platforms diagonally
|
|
|
|
|
|
-In 2x2 mode, each bitmask contains four bits, one for each corner.
|
|
|
+ Using the line tool after selecting two tiles to draw platforms diagonally
|
|
|
|
|
|
-Where a bit is "on", all cells connected to that corner must be filled using
|
|
|
-the same autotile, in order for the bitmask to match.
|
|
|
-For example, if the top-left bit is set, the cell directly above,
|
|
|
-directly left, and diagonally above-left must be filled.
|
|
|
+Rectangle
|
|
|
+^^^^^^^^^
|
|
|
|
|
|
-Where a bit is "off", at least one cell connected to that corner must not be
|
|
|
-set using the same autotile.
|
|
|
+After selecting Rectangle Paint mode, you can draw in an axis-aligned
|
|
|
+rectangle.
|
|
|
|
|
|
-At least one bit must be set for the tile to be used, so a total of 15 tiles
|
|
|
-would be needed to provide exactly one tile for each arrangement that this mode
|
|
|
-can test for.
|
|
|
+If you right-click while in Rectangle Paint mode, you will erase in
|
|
|
+an axis-aligned rectangle.
|
|
|
|
|
|
-2x2 mode can only match cells that are part of a 2-by-2 block - cells with no
|
|
|
-neighbors and lines only one cell wide are not supported.
|
|
|
+If you have selected multiple tiles in the TileMap or using the Selection tool,
|
|
|
+you can place them in a repeating pattern within the rectangle.
|
|
|
|
|
|
-**Template - Generic:**
|
|
|
+You can toggle this mode temporarily while in Paint or Eraser mode by holding
|
|
|
+:kbd:`Ctrl` and :kbd:`Shift` then drawing.
|
|
|
|
|
|
-This template can be used for sideways or fully top-down perspectives.
|
|
|
-It's designed for a TileMap cell size of 64x64.
|
|
|
+Bucket Fill
|
|
|
+^^^^^^^^^^^
|
|
|
|
|
|
-Key:
|
|
|
+After selecting Bucket Fill mode, you can choose whether painting should be
|
|
|
+limited to contiguous areas only by toggling the **Contiguous** checkbox that
|
|
|
+appears on the right of the toolbar.
|
|
|
|
|
|
-- Red: "on"
|
|
|
-- White: "off"
|
|
|
+If you enable **Contiguous** (the default), only matching tiles that touch the
|
|
|
+current selection will be replaced. This contiguous check is performed
|
|
|
+horizontally and vertically, but *not* diagonally.
|
|
|
|
|
|
-.. image:: img/autotile_template_2x2.png
|
|
|
+If you disable **Contiguous**, all tiles with the same ID in the entire TileMap will
|
|
|
+be replaced by the currently selected tile. If selecting an empty tile with
|
|
|
+**Contiguous** unchecked, all tiles in the rectangle that encompasses the
|
|
|
+TileMap's effective area will be replaced instead.
|
|
|
|
|
|
-3x3 (minimal)
|
|
|
-~~~~~~~~~~~~~
|
|
|
+If you right-click while in Bucket Fill mode, you will replace matching tiles
|
|
|
+with empty tiles.
|
|
|
|
|
|
-In 3x3 (minimal) mode, each bitmask contains 9 bits (4 corners, 4 edges,
|
|
|
-1 center). The 4 corner bits work the same as in 2x2 mode.
|
|
|
+If you have selected multiple tiles in the TileMap or using the Selection tool,
|
|
|
+you can place them in a repeating pattern within the filled area.
|
|
|
|
|
|
-When an edge bit is "on", the cell which shares that edge must be filled.
|
|
|
-When an edge bit is "off", the cell which shares that edge must be empty.
|
|
|
+.. figure:: img/using_tilemaps_bucket_fill.webp
|
|
|
+ :align: center
|
|
|
+ :alt: Using the Bucket Fill tool
|
|
|
|
|
|
-The center bit should be "on" for any tile you wish to use. Note that in this
|
|
|
-mode, it makes no sense for a corner bit to be "on" when either edge bit
|
|
|
-adjacent to it is not "on".
|
|
|
+ Using the Bucket Fill tool
|
|
|
|
|
|
-A total of 47 tiles would be needed to provide exactly one bitmask for each
|
|
|
-arrangement that this mode can test for.
|
|
|
+Picker
|
|
|
+^^^^^^
|
|
|
|
|
|
-.. note::
|
|
|
+After selecting Picker mode, you can pick existing tiles in the 2D editor by
|
|
|
+holding :kbd:`Ctrl` then clicking on a tile. This will switch the currently
|
|
|
+painted tile to the tile you've just clicked. You can also pick multiple tiles
|
|
|
+at once by holding down the left mouse button and forming a rectangle selection.
|
|
|
+Only non-empty tiles can be picked.
|
|
|
+
|
|
|
+You can toggle this mode temporarily while in Paint mode by holding :kbd:`Ctrl`
|
|
|
+then clicking or dragging the mouse.
|
|
|
|
|
|
- Right-click an image and choose **Save image as…** to save it.
|
|
|
+Eraser
|
|
|
+^^^^^^
|
|
|
|
|
|
-**Template - Generic:**
|
|
|
+This mode is combined with any other painting mode (Paint, Line, Rectangle,
|
|
|
+Bucket Fill). When eraser mode is enabled, tiles will be replaced by empty tiles
|
|
|
+instead of drawing new lines when left-clicking.
|
|
|
|
|
|
-This template can be used for sideways or fully top-down perspectives.
|
|
|
-All templates below are designed for a TileMap cell size of 64x64, but you may
|
|
|
-have to use different subtile sizes for top-down templates as described below.
|
|
|
+You can toggle this mode temporarily while in any other mode by right-clicking
|
|
|
+instead of left-clicking.
|
|
|
|
|
|
-Key:
|
|
|
+Painting randomly using scattering
|
|
|
+----------------------------------
|
|
|
|
|
|
-- Red: "on"
|
|
|
-- White: "off"
|
|
|
+While painting, you can optionally enable *randomization*. When enabled,
|
|
|
+a random tile will be chosen between all the currently selected tiles when
|
|
|
+painting. This is supported with the Paint, Line, Rectangle and Bucket Fill
|
|
|
+tools. For effective paint randomization, you must select multiple tiles
|
|
|
+in the TileMap editor or use scattering (both approaches can be combined).
|
|
|
|
|
|
-.. image:: img/autotile_template_3x3_minimal.png
|
|
|
+If **Scattering** is set to a value greater than 0, there is a chance that no tile
|
|
|
+will be placed when painting. This can be used to add occasional, non-repeating
|
|
|
+detail to large areas (such as adding grass or crumbs on a large top-down
|
|
|
+TileMap).
|
|
|
|
|
|
+Example when using Paint mode:
|
|
|
|
|
|
-**Template - Generic 16 tiles:**
|
|
|
+.. figure:: img/using_tilemaps_scatter_tiles.webp
|
|
|
+ :align: center
|
|
|
+ :alt: Selecting from several times to randomly choose, then painting by holding down the left mouse button
|
|
|
|
|
|
-This template can be used for tilesets that only have 16 tiles - for simpler art
|
|
|
-styles the missing tiles will not be noticeable.
|
|
|
+ Selecting from several times to randomly choose, then painting by holding down the left mouse button
|
|
|
|
|
|
-Key:
|
|
|
+Example when using Bucket Fill mode:
|
|
|
|
|
|
-- Red: "on"
|
|
|
-- White: "off"
|
|
|
-- Blue-checkered: "ignore"
|
|
|
+.. figure:: img/using_tilemaps_bucket_fill_scatter.webp
|
|
|
+ :align: center
|
|
|
+ :alt: Using Bucket Fill tool with a single tile, but with randomization and scattering enabled
|
|
|
|
|
|
-.. image:: img/autotile_template_3x3_minimal_16.png
|
|
|
+ Using Bucket Fill tool with a single tile, but with randomization and scattering enabled
|
|
|
|
|
|
+.. note::
|
|
|
+
|
|
|
+ Eraser mode does not take randomization and scattering into account.
|
|
|
+ All tiles within the selection are always removed.
|
|
|
|
|
|
-**Template - Top-down floor in 3/4 perspective:**
|
|
|
+Saving and loading premade tile placements using patterns
|
|
|
+---------------------------------------------------------
|
|
|
|
|
|
-Key (applies to the four templates below):
|
|
|
+While you can copy and paste tiles while in Select mode, you may wish to save
|
|
|
+premade *patterns* of tiles to place together in a go. This can be done on a
|
|
|
+per-TileMap basis by choosing the **Patterns** tab of the TileMap editor.
|
|
|
|
|
|
-- Green: floor
|
|
|
-- Cyan: wall
|
|
|
-- Yellow: top of wall
|
|
|
-- Transparent: air
|
|
|
+To create a new pattern, switch to Select mode, perform a selection and press
|
|
|
+:kbd:`Ctrl + C`. Click on empty space within the Patterns tab (a blue focus
|
|
|
+rectangle should appear around the empty space), then press :kbd:`Ctrl + V`:
|
|
|
|
|
|
-.. image:: img/autotile_template_3x3_minimal_topdown_floor.png
|
|
|
+.. figure:: img/using_tilemaps_create_pattern.webp
|
|
|
+ :align: center
|
|
|
+ :alt: Creating a new pattern from a selection in the TileMap editor
|
|
|
|
|
|
-**Template - Top-down wall in 3/4 perspective:**
|
|
|
+ Creating a new pattern from a selection in the TileMap editor
|
|
|
|
|
|
-.. image:: img/autotile_template_3x3_minimal_topdown_walls.png
|
|
|
+To use an existing pattern, click its image in the **Patterns** tab, switch to
|
|
|
+any painting mode, then left-click somewhere in the 2D editor:
|
|
|
|
|
|
-**Template - Top-down wall in 3/4 perspective (thick walls):**
|
|
|
+.. figure:: img/using_tilemaps_use_pattern.webp
|
|
|
+ :align: center
|
|
|
+ :alt: Placing an existing pattern using the TileMap editor
|
|
|
|
|
|
-When using this template, set the TileSet subtile size to ``Vector2(64, 88)``.
|
|
|
+ Placing an existing pattern using the TileMap editor
|
|
|
|
|
|
-.. image:: img/autotile_template_3x3_minimal_topdown_walls_thick.png
|
|
|
+Like multi-tile selections, patterns will be repeated if used with the Line,
|
|
|
+Rectangle or Bucket Fill painting modes.
|
|
|
+
|
|
|
+.. note::
|
|
|
|
|
|
-**Template - Top-down wall in 3/4 perspective (tall walls):**
|
|
|
+ Despite being edited in the TileMap editor, patterns are stored in the
|
|
|
+ TileSet resource. This allows reusing patterns in different TileMap nodes
|
|
|
+ after loading a TileSet resource saved to an external file.
|
|
|
|
|
|
-When using this template, set the "Snap Options" Step to ``Vector2(64, 184)``
|
|
|
-and the "Selected Tile" Texture offset to height minus the cell size.
|
|
|
-This means the texture offset should be ``Vector2(0, -120)``:
|
|
|
+Handling tile connections automatically using terrains
|
|
|
+------------------------------------------------------
|
|
|
|
|
|
-.. image:: img/autotile_template_3x3_minimal_topdown_walls_tall.png
|
|
|
+To use terrains, the TileMap node must feature at least one terrain set and a
|
|
|
+terrain within this terrain set. See
|
|
|
+:ref:`doc_using_tilesets_creating_terrain_sets` if you haven't created a terrain
|
|
|
+set for the TileSet yet.
|
|
|
|
|
|
-3x3
|
|
|
-~~~
|
|
|
+There are 3 kinds of painting modes available for terrain connections:
|
|
|
|
|
|
-In 3x3 mode, each bitmask contains 9 bits (4 corners, 4 edges, 1 center)
|
|
|
+- **Connect**, where tiles are connected to surrounding tiles on the same
|
|
|
+ TileMap layer.
|
|
|
+- **Path**, where tiles are connected to tiles painted in the same stroke (until
|
|
|
+ the mouse button is released).
|
|
|
+- Tile-specific overrides to resolve conflicts or handle situations not covered
|
|
|
+ by the terrain system.
|
|
|
|
|
|
-Each bit checks a single adjacent cell. Corner bits only check diagonally
|
|
|
-adjacent cells. The center bit should be "on" for any tile you wish to use.
|
|
|
+The Connect mode is easier to use, but Path is more flexible as it allows for
|
|
|
+more artist control during painting. For instance, Path can allow roads to be
|
|
|
+directly adjacent to each other without being connected to each other, while
|
|
|
+Connect will force both roads to be connected.
|
|
|
|
|
|
-A total of 256 tiles would be needed to provide exactly one bitmask for each
|
|
|
-arrangement that this mode can test for.
|
|
|
+.. figure:: img/using_tilemaps_terrain_select_connect_mode.webp
|
|
|
+ :align: center
|
|
|
+ :alt: Selecting Connect mode in the TileMap editor's Terrains tab
|
|
|
|
|
|
+ Selecting Connect mode in the TileMap editor's Terrains tab
|
|
|
|
|
|
-Disabling autotile
|
|
|
-~~~~~~~~~~~~~~~~~~
|
|
|
+.. figure:: img/using_tilemaps_terrain_select_path_mode.webp
|
|
|
+ :align: center
|
|
|
+ :alt: Selecting Path mode in the TileMap editor's Terrains tab
|
|
|
|
|
|
-When using an autotile, it is possible to turn off the autotile behaviour and
|
|
|
-select tiles manually, by clicking "Disable Autotile" at the top of the tile
|
|
|
-selection window.
|
|
|
+ Selecting Path mode in the TileMap editor's Terrains tab
|
|
|
|
|
|
-Autotile binding
|
|
|
-~~~~~~~~~~~~~~~~
|
|
|
+Lastly, you can select specific tiles from the terrain to resolve conflicts in
|
|
|
+certain situations:
|
|
|
|
|
|
-By default, autotile only checks for adjacent cells filled using the same
|
|
|
-autotile. This behaviour can be overridden in order to have autotiles bind to
|
|
|
-each other, or even bind to empty cells. At present, this can only be done
|
|
|
-through scripting. You will need to add a script to your tileset, and define
|
|
|
-a function named "_is_tile_bound(drawn_id, neighbor_id)". This function will
|
|
|
-be called for each adjacent cell that does not contain the same autotile, and
|
|
|
-should return true if you want the drawn cell to "bind" to the neighbor cell.
|
|
|
-You can find the id of an autotile using "find_tile_by_name(name)", empty cells
|
|
|
-are given an id of -1.
|
|
|
+.. figure:: img/using_tilemaps_terrain_paint_specific_tiles.webp
|
|
|
+ :align: center
|
|
|
+ :alt: Painting with specific tiles in the TileMap editor's Terrains tab
|
|
|
|
|
|
-Note that to use this in the editor, the script should start with a "tool"
|
|
|
-declaration, and you may need to close and reload the scene for these changes
|
|
|
-to take effect.
|
|
|
+ Painting with specific tiles in the TileMap editor's Terrains tab
|
|
|
|
|
|
-Tips and tricks
|
|
|
----------------
|
|
|
+Any tile that has at least one of its bits set to a value set to the
|
|
|
+corresponding terrain ID will appear in the list of tiles to choose from.
|
|
|
|
|
|
-- If you're using a :ref:`Camera2D <class_Camera2D>` to scroll your level, you
|
|
|
- may notice lines appearing between your tiles. To fix this, open Project
|
|
|
- Settings and enable **Use Gpu Pixel Snap** in the **Rendering > 2d > Snapping** section.
|
|
|
+Handling missing tiles
|
|
|
+----------------------
|
|
|
|
|
|
-- You can flip and rotate tiles using the icons at the top right of the editor.
|
|
|
+If you remove tiles in the TileSet that are referenced in a TileMap, the TileMap
|
|
|
+will display a placeholder to indicate that an invalid tile ID is placed:
|
|
|
|
|
|
-- To draw straight lines, hold :kbd:`Shift` while clicking and dragging a tile.
|
|
|
+.. figure:: img/using_tilemaps_missing_tiles.webp
|
|
|
+ :align: center
|
|
|
+ :alt: Missing tiles in the TileMap editor due to the TileSet reference being broken
|
|
|
|
|
|
-- Tools such as copy, paste, and bucket fill, can be found in the "TileMap"
|
|
|
- menu in the upper-right.
|
|
|
+ Missing tiles in the TileMap editor due to the TileSet reference being broken
|
|
|
+
|
|
|
+These placeholders are **not** visible in the running project, but the tile data
|
|
|
+is still persisted to disk. This allows you to safely close and reopen such
|
|
|
+scenes. Once you re-add a tile with the matching ID, the tiles will appear with
|
|
|
+the new tile's appearance.
|
|
|
+
|
|
|
+.. note::
|
|
|
|
|
|
-.. image:: img/tilemap_menu.png
|
|
|
+ Missing tile placeholders may not be visible until you select the TileMap
|
|
|
+ node and open the TileMap editor.
|