File: editing-tilesets.rst

package info (click to toggle)
tiled-qt 1.2.1%2Bdfsg.1-1
  • links: PTS
  • area: main
  • in suites: buster
  • size: 31,084 kB
  • sloc: cpp: 85,970; java: 3,602; python: 1,469; xml: 1,251; sh: 56; makefile: 32; ruby: 15
file content (233 lines) | stat: -rw-r--r-- 8,340 bytes parent folder | download
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
Editing Tilesets
================

To edit a tileset it needs to be opened explicitly for editing. External
tilesets can be opened via the *File* menu, but in general the quickest
way to edit the tileset when it is already open in the *Tilesets* view
is to click the small *Edit Tileset* button in the tool bar below the
tileset.

Two Types of Tileset
--------------------

A tileset is a collection of tiles. Tiled currently supports two types
of tilesets, which are chosen when creating a new tileset:

Based on Tileset Image
   This tileset defines a fixed size for all tiles and the image from
   which these tiles are supposed to be cut. In addition it supports a
   margin around the tiles and a spacing between the tiles, which
   allows for using tileset images that either happen to have space
   between or around their tiles or those that have extruded the border
   pixels of each tile to avoid color bleeding.

Collection of Images
   In this type of tileset each tile refers to its own image file. It
   is useful when the tiles aren't the same size, or when the packing
   of tiles into a texture is done later on.

Regardless of the type of tileset, you can associate a lot of meta-
information with it and its tiles. Some of this information can be for
use in your game, like :ref:`collision information <tile-collision-editor>`
and :ref:`animations <tile-animation-editor>`. Other information is
primarily meant for certain editing tools.

.. note::

   A tileset can be either embedded in a map file or saved externally.
   Since Tiled 1.0, the default and recommended approach is to save your
   tilesets to their own file. This simplifies your workflow since it
   makes sure any meta-information is shared between all maps using the
   same tileset.

Tileset Properties
------------------

You can access the tileset properties by using the menu action
*Tileset > Tileset Properties*.

Name
   The name of the tileset. Used to identify the tileset in the
   *Tilesets* view when editing a map.

Drawing Offset
   A drawing offset in pixels, applied when rendering any tile from
   the tileset (as part of tile layers or as tile objects). This is
   can be useful to make your tiles align to the grid.

Background Color
   A background color for the tileset, which can be set in case the
   default dark-gray background is not suitable for your tiles.

.. raw:: html

   <div class="new new-prev">Since Tiled 1.0</div>

Orientation
   When the tileset contains isometric tiles, you can set this to
   *Isometric*. This value, along with the **Grid Width** and
   **Grid Height** properties, is taken into account by overlays
   rendered on top of the tiles. This helps for example when specifying
   :ref:`terrain-information` or editing :ref:`wang-sets`. It also
   affects the orientation used by the :ref:`tile-collision-editor`.

Columns
   This is a read-only property for tilesets based on a tileset image,
   but for image collection tilesets you can control the number of
   columns used when displaying the tileset here.

Image
   This property only exists for tilesets based on a tileset image.
   Selecting the value field will show an *Edit...* button, allowing
   you to change the parameters relevant to cutting the tiles from the
   image.

Of course, as with most data types in Tiled, you can also associate
:doc:`custom-properties` with the tileset.


Tile Properties
---------------

ID
   The ID of the tile in the tileset (read-only)

.. raw:: html

   <div class="new new-prev">Since Tiled 1.0</div>

Type
   This property refers to custom types defined in the :ref:`Object Types Editor <predefining-properties>`.
   See the section about :ref:`typed-tiles` for more information.

Width and Height
   The size of the tile (read-only)

Probability
   Represents a relative probability that this tile will get chosen out
   of multiple options. This value is used in *Random Mode* and by the
   :ref:`terrain-tool`.

Image
   Only relevant for tiles that are part of image collection tilesets,
   this shows the image file of the tile and allows you to change it.

.. _terrain-information:

Terrain Information
-------------------

Terrain information can be added to a tileset to enable the use of the
the :ref:`terrain-tool`. See the section about
:ref:`defining terrain information <define-terrain-information>`.

.. raw:: html

   <div class="new new-prev">Since Tiled 1.1</div>

.. _wang-sets:

Wang Sets
---------

A tileset can contain any number of Wang sets for use with the
:ref:`wang-tool`. See :ref:`defining-wang-tile-info` for more
information.

.. _tile-collision-editor:

Tile Collision Editor
---------------------

The tile collision editor is available by clicking the *Tile Collision Editor*
|tile-collision-editor-icon| button on the tool bar. This will open a
view where you can create and edit shapes on the tile. You can also
associate custom properties with each shape.

Usually these shapes define collision information for a certain sprite
or for a tile representing level geometry, but of course you could also
use them to add certain hot-spots to your sprites like for particle
emitters or the source of gunshots.

.. figure:: images/tile-collision-editor.png
   :alt: Tile Collision Editor

   Tile Collision Editor

.. note::

   Check out the `Tiled2Unity`_ tool by Sean Barton for a great example of
   what you can do with this information. It can take the collision shapes
   for all tiles and generate a single collision mesh from it, as
   demonstrated in the `Mega Dad Adventures`_ post.

.. _tile-animation-editor:

Tile Animation Editor
---------------------

The tile animation editor allows defining a single linear looping
animation with each tile by referring to other tiles in the tileset as
its frames. Open it by clicking the *Tile Animation Editor* |tile-animation-editor-icon| button.

Tile animations can be live-previewed in Tiled, which is useful for
getting a feeling of what it would look like in-game. The preview can be
turned on or off via *View > Show Tile Animations*.

.. figure:: images/tile-animation-editor.png
   :alt: Tile Animation Editor

   Tile Animation Editor

The following steps allow to add or edit a tile animation:

* Select the tile in the main Tiled window. This will make the *Tile Animation Editor*
  window show the (initially empty) animation associated with that tile,
  along with all other tiles from the tileset.

* Drag tiles from the tileset view in the Tile Animation Editor into the
  list on the left to add animation frames. You can drag multiple tiles at
  the same time. Each new frame gets a default duration of 100 ms.

* Double-click on the duration of a frame to change it.

* Drag frames around in the list to reorder them.

A preview of the animation shows in the bottom left corner.

.. |tile-collision-editor-icon|
   image:: ../../src/tiled/images/48x48/tile-collision-editor.png
      :scale: 50

.. |tile-animation-editor-icon|
   image:: ../../src/tiled/images/24x24/animation-edit.png

.. _Tiled2Unity: http://www.seanba.com/Tiled2Unity
.. _Mega Dad Adventures: http://www.seanba.com/megadadadventures.html

.. topic:: Future Extensions
   :class: future

   There are many ways in which the tileset editor can be made more
   efficient, for example:

   **Wang Sets**

   - Make it easier to set up Wang tiles (`#1729 <https://github.com/bjorn/tiled/issues/1729>`__)

   **Tile Collision Editor**

   - Allow setting collisions for multiple tiles at once (`#1322 <https://github.com/bjorn/tiled/issues/1322>`__)
   - Render tile collision shapes to the main map (`#799 <https://github.com/bjorn/tiled/issues/799>`__)
     or to the tileset view (`#1281 <https://github.com/bjorn/tiled/issues/1281>`__)

   **Tile Animation Editor**

   - Allow changing the default frame duration (`#1631 <https://github.com/bjorn/tiled/issues/1631>`__)
   - Allow changing the duration of multiple frames at the same time (`#1310 <https://github.com/bjorn/tiled/issues/1310>`__)
   - Support multiple named animations per tile (`#986 <https://github.com/bjorn/tiled/issues/986>`__)

   If you like any of these plans, please help me getting around to it
   faster by `becoming a patron <https://www.patreon.com/bjorn>`__. The
   more support I receive the more time I can afford to spend improving
   Tiled!