RTTS - Tilesets

Creating tiles

(There's a German version below)

The biggest amount of work in creating new tiles is obviously painting them in the first place. As you can easily see, the tiles are saved as .bmps in the tiles/ directory. Each of them is 32x32 pixels big.

This is not a tutorial on how to paint tiles. Rather, it deals with how you integrate them into the game.

.ts files

In fact, you don't have to do anything to be able to select the tile when making a map. As soon as the .bmp is in the right directory, it will show up in the editor. However, there are a number of features that require additional work.

First of all, you'll probably want to put the tile into one of the tilesets which can be selected from the Tiles dialog. Secondly, you'll have to make sure that your tiles can cooperate with the border adjustment done by the editor.

All this is done in the .ts files in the tiles/ directory. Those files are plain textfiles. If you just want to add some extra tiles to an existing tileset, open an existing .ts file. Otherwise, you can create an empty textfile and rename it to whatever.ts. Just give it a descriptive name.

Adding the tiles to the tileset is pretty straightforward. If you've got tile graphics called my0.bmp, my1.bmp and my2.bmp, you'd just add three lines to the .ts file like this:

my0 ( );
my1 ( );
my2 ( );

Now the tileset will already be usable in the editor. However, there's more to be done for the automatic border adjustment.

Borders - tile edges

You have to decide what kind of borders your tiles use, i.e. what the tiles' edges look like. There are already a number of existing borders, and you should try to make your tiles compatible with them. More compatibility means that it'll be easier to create a wide range of maps. Have a look at the existing .ts files to see what border types are already there.

For example, if you have created a set of detail tiles which add to BloodyHarry's grass, you'll use the "blgrass" border for those tiles. In this simple case, your .ts file will now look like this:

my0 ( left "blgrass" right "blgrass" top "blgrass" bottom "blgrass" );
my1 ( left "blgrass" right "blgrass" top "blgrass" bottom "blgrass" );
my2 ( left "blgrass" right "blgrass" top "blgrass" bottom "blgrass" );

This means that all the edges (left, right, top, bottom) use the blgrass border. The editor will now automatically adjust the surrounding tiles if you place one of your new tiles.

Ground transition, shores

The previous example was only the simplest case though. Imagine you want to create a new dirt tileset. You'll have to create a set of transitioning tiles to make it compatible with the existing tilesets. For example, you'll need a dirt <-> blgrass and a dirt <-> noflwater transition.

Each of these transitions consists of 12 different tiles: straight, concave and convex transition lines.

Now consider a tile with a vertical transition line, there's dirt on the left and blgrass on the right. So the left and right border is pretty straightforward. Now what about the top and bottom?

Obviously, the top and bottom borders are both dirt and blgrass. Since this border is distinct from both dirt and blgrass, you need to come up with a new name for this type of border. The canonical way of determining this new name is:
- for horizontal borders (i.e. top and bottom), use "leftborder_rightborder"
- for vertical borders (i.e. left and right), use "topborder_bottomborder"

So in our example, the entry in the .ts file would look like this:

dirtgrass0 ( left "dirt" right "blgrass" top "dirt_blgrass" bottom "dirt_blgrass" );

All transition tiles can be defined using this naming scheme. To give another example, consider a transition tile which is dirt, but the lower left corner is filled with blgrass:

dirtgrass1 ( left "dirt_blgrass" right "dirt" top "dirt" bottom "blgrass_dirt" );

Deutsche Version

Der größte Teil der Arbeit zum Erstellen von neuen Tiles besteht natürlich darin, die Tiles zu malen. Wie leicht zu erkennen ist werden Tiles als .bmps im tiles/-Verzeichnis gespeichert. Jedes Tile ist 32x32 Pixel groß.

In diesem Tutorial geht es nicht darum, wie man Tiles malt, sondern darum, wie man sie ins Spiel integriert.

.ts-Dateien

Eigentlich müßt ihr gar nichts tun um die Tiles beim Erstellen einer Karte auswählen zu können. Sobald die .bmp-Datei im tiles/-Verzeichnis liegt wird man sie im Editor auswählen können. Allerdings gibt es einige Features, die zusätzlicher Arbeit bedürfen.

Zunächst sind da die Tilesets, in denen Tiles nach Stil etc. organisiert sind um im Editor die Übersicht zu behalten. Außerdem muß es dem Editor möglich sein, die angrenzenden Tiles automatisch an neu gesetzte Tiles anzupassen.

Die dafür nötigen Informationen sind in den .ts-Dateien im tiles/-Verzeichnis gespeichert. Diese Dateien sind einfach nur Textdateien. Wenn ihr zu einem bestehenden Tileset neue Tiles hinzufügen wollt, öffnet die entsprechende bestehende .ts-Datei. Andernfalls könnt ihr auch einfach eine leere Textdatei erstellen und diese entsprechend umbennen. Der Name der .ts-Datei sollte Sinn machen, damit man im Editor die Übersicht behält.

Die Tiles zum Tileset hinzuzufügen ist ziemlich einfach. Angenommen, ihr habt Tilegrafiken my0.bmp, my1.bmp und my2.bmp dann fügt ihr folgende Zeilen in die .ts-Datei ein:

my0 ( );
my1 ( );
my2 ( );

Jetzt könnt ihr das Tileset im Editor schon verwenden. Allerdings muß noch etwas Arbeit investiert werden, damit das Anpassen der Tiles richtig funktioniert.

Tileränder

Als erstes müßt ihr festlegen, was für Ränder eure Tiles verwenden, d.h. wie die Kanten der Tiles aussehen. Es gibt schon eine Reihe vorhandener Rändernamen, und eure neuen Tiles sollten möglichs mit ihnen kompatibel sein. Je kompatibler die Tiles sind, desto mehr Möglichkeiten hat man im Editor beim Erstellen von Karten. Schaut euch einfach mal die bestehenden .ts-Dateien an, um eine Übersicht über die existierenden Ränder zu erhalten.

Angenommen ihr habt ein paar Tiles mit kleinen Details gemacht, die auf BloodyHarry's Grasstiles aufbauen dann verwendet ihr z.B. den "blgrass"-Rand für diese Tiles. In diesem einfachen Fall muß die .ts-Datei dann folgende Zeilen enthalten:

my0 ( left "blgrass" right "blgrass" top "blgrass" bottom "blgrass" );
my1 ( left "blgrass" right "blgrass" top "blgrass" bottom "blgrass" );
my2 ( left "blgrass" right "blgrass" top "blgrass" bottom "blgrass" );

Das bedeutet, daß alle Kanten (left, right, top, bottom) den blgrass-Rand verwenden. Der Editor kann nun angrenzende Tiles automatisch anpassen.

Bodenübergänge

Das vorige Beispiel war nur ein einfacher Fall. Stellt euch vor ihr wollt ein neues "dirt"-Tileset erstellen. Damit dieses neue Tileset mit den bestehenden kompatibel ist müßt ihr eine Reihe von Übergangstiles zu den bestenden Tilesets erstellen. Ihr werdet zum Beispiel einen dirt <-> blgrass und einen dirt <-> noflwater Übergang benötigen.

Jeder dieser Übergänge besteht aus 12 verschiedenen Tiles: gerade, konkave und konvexe Übergangslinien.

Stellt euch nun ein Tile mit einem geraden, vertikalen Übergang vor. Auf der linken Seite ist dirt, und auf der rechten blgrass. Die linken und rechten Ränder sind also einfach zu bestimmen. Aber was ist mit dem oberen und unteren Rand?

Der obere und untere Rand besteht jeweils sowohl aus dirt als auch aus blgrass. Da diese Kanten nun ganz anders als die dirt- und blgrass-Kanten aussehen, muß ein neuer Name für diese Art von Rand her. Dieser Name sollte so bestimmt werden:
- für horizontale (d.h. obere bzw. untere) Ränder: "links_rechts"
- für vertikale (d.h. linke bzw. rechte) Ränder: "oben_unten"

In unserem Beispiel würde der Eintrag in die .ts-Datei nun so aussehen:

dirtgrass0 ( left "dirt" right "blgrass" top "dirt_blgrass" bottom "dirt_blgrass" );

Alle Übergangstiles können mit dieser Namensgebung definiert werden. Ein weiteres Beispiel: stellt euch ein Übergangstile vor, das hauptsächlich aus dirt besteht, nur die linke untere Ecke enthält blgrass:

dirtgrass1 ( left "dirt_blgrass" right "dirt" top "dirt" bottom "blgrass_dirt" );