Tileset Tutorial in English

This is my first tutorial, and my first article in english, too. Let me know if somewhat needs an adjustment.

I don’t want to write about the creational process of these rocks. That would be a tut about painting, but i want to talk about seamless tiles. To create tiles without visible seam is quite an art.

Above all it has nothing to do with the graphical skills of a person, but with planning. As our example serves a block of nine rock tiles. We will encounter almost all difficulties of tiling with it.

Look at the colored bars on the picture. You can see which borders of a tile have to be equal with borders of other tiles.

You can avoid many mistakes, as well as much unnecessary work and corrections, when you are always aware of these border connections. Be aware of it before you start painting, as well as during all the process of creation till its end.

It is (relative) simple with the eight outer tiles. They have only two sides each. But this contains a nifty little fact: they have also corners.

As you can see at this picture, all tiles and all colors meet each other at the four corners of the center tile. You need to be cautious what color, hue and brightness you use at this place. The most critical thing of the corners is the fact, that the sunny, bright side meets here with the dark and shady side. You may say (as i said when i started this tileset): no, they don’t meet, there is the center tile between them. but at this point i totally had forgotten the overall reason of tilesets. you can combine these nine tiles to get four different shaped rocks. and of course in some of these rocks the bright tile will meet the dark tile.

This is what i mean when i say: “You need to be mindful all the time when working your tileset!” I wasn’t, and so i had finished the tiles by maybe 80%, when i noticed the tiles wouldn’t work together. So i had to work over the entire piece.

But let’s start at the beginning.

Like i said, a tileset needs a plan. First of all there should be a scribble. At least if it’s going to be your first tileset. Don’t underestimate the power of a piece of paper. You can (maybe should) draw as much combinations of your tiles, so you get an overview of the connections.

Never ever start with the center tile. It is impossible to fine-tune its four sides with the outer tiles. I always start with the upper left tile, but only because i like that. You can start at any of the four corners.

You can finish the corner tile without furter ado and almost finish the three tiles around it. But before you paint the borders of the three tiles around, start thinking. Look at the picture. In order to match later properly, the border of the corner tile must be copied to the border of the flanking tiles.

I always copy a strip of border pixels, only a few pixels wide or high. As you start, you will feel save with a very wide stripe. Then you paint over that stripe to make it match with the rest of your new tile, but remember not to paint over the boundaries of that tile! Every big change at it will destroy the seam.

Use a grid if possible. With Photoshop, you can show/hide the grid here: “View > Show > Grid”. The size of it you can change at “Edit > Preferences > Guides, Grid & Slices”. When copying, turn on “Snap”, that’s also under “View”. When painting, turn it off.

Don’t make the copied region too big. Your tiles may be seamless afterwards, but everyone will see the tiling anyhow. Copy a strip which is only one pixel wide and paint the rest new. This will be the best for the quality of your tileset. Every copied, but not changed region will look awkward later in your game.

If the first three tiles are finished, proceed in copying borders. Look at the arrows.

The graphics i used for this tut show an already finished tileset. But if you start painting your own, you will start from ground up. You will need to paint over borders all the time, and that’s okay. But every changed border must be updated in other tiles. And this can be very dangerous. Always be aware of the tile connections! If you don’t work mindful enough, you will forget to update borders, what will cause a not-seamless tileset. This will annoy you very much, because it is always much work and refining it later is a pain in the ass. But likewise you could easily make another big mistake. Updating borders of tiles which aren’t meant to connect. Be attentive.

Et Voilà: the final rock block!

In closing some tips for Photoshop: You don’t need to zoom in and out all the time if you work at little graphics. Just open a new window for your picture: “Window > Arrange > New window for …”

This is very helpful, since you can view your picture at one window at original size, and at the other window you can work at 800% zoom! You can also have one pic with grid and the other without.

So, i hope you like this tutorial and find it useful. Let me know about things to improve by comments!

Tileset Tutorial in Deutsch

Ich habe schon einmal die Zusammengehörigkeit von Tile-Kanten mit einem Bild illustriert. Aber das habe ich noch einmal überarbeitet und den Erstellungsprozess erklärt. Viel Spaß:

Die Entstehung der Felsen-Grafik will ich hier nicht illustrieren, das würde eher in die Kategorie Painting gehören.

Ich möchte mich eher mit dem schwierigen Aspekt des “Kachelns” beschäftigen. Ein perfektes Tileset aus vielleicht 20 Tiles so zu erstellen, dass man die “Nähte” im Spiel nicht sieht, ist eine Kunst für sich.

Dabei kommt es zuallererst nicht auf das grafische Geschick an, sondern ob der Macher sein Set gut geplant hat. Als Beispiel dient ein Neunerblock von Felsen-Tiles. An ihm kann man schon mit so ziemlich allen Problemen des Kachelns konfrontiert werden.

Die farbigen Balken, die ich über die Tile-Ränder gelegt habe, zeigen an, welche Seite eines Tiles mit welchen Seiten von anderen Tiles zusammenpassen muss. Gleiche Farbe = Zusammenhang.

Man kann viele Fehler ebenso wie unnötige Arbeit und Korrekturen vermeiden, wenn man sich immer (vorher — sowie beim Malen!) bewusst ist, mit welchen anderen Tiles das Aktuelle zusammenpassen soll.

Bei den acht außen liegenden Tiles geht das alles relativ problemlos. Sie haben jeweils nur zwei Seiten, die mit anderen Tiles funktionieren müssen. Allerdings birgt das auch das erste Problem, denn die Tiles haben nicht nur Kanten, sonder auch Ecken.

Wie man an der Grafik sieht, treffen an den vier Eckpunkten in der Mitte alle Tiles und Farben zusammen, daher sollte man gründlich überlegen, welcher Farbstich und welche Helligkeit hier am besten hinpassen. Kritisch ist ja hierbei, dass sich die helle, sonnige Ecke mit der dunkelsten Ecke trifft.

Genau das war das Problem, dem ich begegnet bin, nachdem ich schon zu 80 Prozent fertig war. Ich wollte schöne Kontraste haben, oben links von der Sonne angestrahlte Felsen, und unten rechts die dunklen Ecken. Ich hatte nicht bedacht, dass das dunkle, unten rechts liegende Tile auch mal mit dem sonnigen Tile links oben zusammentreffen würde. Aber genau das soll ja durch ein gutes Tileset ermöglicht werden.

Fangen wir jedoch mal von vorne an.

Wie schon gesagt, auch ein Tileset braucht Planung. Als erstes sollte die Skizze stehen. Zumindest, wenn man sowas das erste Mal macht. Unterschätzt nicht wie viel Hilfe so ein Spickzettel bieten kann. An ihm könnt ihr mit dem Finger abfahren, welche Tiles aneinander passen müssen. Doch vorerst beschäftigen wir uns nur mit dem Neunerblock links oben.

Mit dem mittleren Tile zu beginnen, wäre fatal. Die vier Seiten mit den acht äußeren Tiles ständig abzustimmen ist unmöglich.

Ich fange bei einer Ecke an. Der oben links, die passt mir einfach am besten.

Man kann ohne weiteres die Ecke komplett fertig stellen und die drei angrenzenden Tiles fast ganz. Bevor man aber bei diesen an den Seiten rechts und unten arbeitet, muss man sich ins Gedächtnis rufen, was kacheln soll und was nicht.

Ich habe immer einige Pixel vom Ursprungs-Tile kopiert und im neuen Tile angesetzt. Die Grenze darf nicht übermalt werden. Sich in Photoshop das Raster (Grid) anzeigen zu lassen ist wirklich unerlässlich (Ansicht > Zeigen > Raster). Während man Ränder kopiert, sollte “Ausrichten” (ebenfalls unter “Ansicht”) aktiviert sein. Beim Malen muss das wieder ausgeschalten werden.

Am Anfang war das kopierte Stück bei mir vllt. zehn Pixel breit. Damit kann man (aus Angst die Grenze zu übermalen und damit das Tiling zu zerstören) zwar nichts falsch machen, aber schön wird es dann nicht.

Lieber nur zwei, vielleicht sogar nur einen Pixel auf beiden Seiten der Rasterlinie kopieren. Nach meiner Erfahrung bringt das weit mehr für die Bildqualität.

Denn: je größer die kopierte und nicht veränderte Region, desto auffälliger wird später die Grenze. Die Formen wiederholen sich und die “Nähte” sind im Spiel unübersehbar. Wenn man den Spielgrafiken ansieht, dass sie Tiles sind, dann muss die Arbeitsweise noch verbessert werden.

Okay, weiter mit dem fröhlichen Ränder-kopieren.

Ich habe für diese Tut-Bilder auf ein bereits fertiges Tileset zurückgegriffen. Daher ist alles noch einigermaßen übersichtlich. Aber wenn ihr anfangt, dann natürlich von Grund auf. Um die Steine (oder was auch immer) gut hinzubekommen, werdet ihr viel daran herummalen und auch die Grenzen zwischen den Tiles dabei immer wieder überschreiten. Das ist völlig okay so. Das muss sein. Da sich die Grenzen dann ständig ändern, müsst ihr auch ständig zwischen den Tiles die neuen Ränder hin- und herkopieren.

Und hier lauert der schärfste Feind des Tilesets: Unaufmerksamkeit. Ihr müsst aufpassen die Tiles aktuell zu halten. Aber auf keinen Fall dürft ihr wild herumkopieren! Mir ist es schon öfter passiert, dass ich Ränder angepasst habe, wo das gar nicht nötig war, weil die Tiles gar nicht zusammenpassen konnten.

Et Voilà: Der fertige Neunerblock!

Zum Schluss noch ein Photoshop-Tipp: Ihr müsst bei der Arbeit an kleinen Bildern nicht ständig aus- und einzoomen! (Ich sage das weil ein sehr bekannter Pixelart-Künstler dies als sein Lebensmotto oder so angeben hat. Völliger Quatsch.) Wählt “Fenster → Anordnen → Neues Fenster für…”, und schon erscheint euer aktuelles Bild in einem zweiten Fenster. Ihr könnt also gleichzeitig bei 800% Vergrößerung Details bearbeiten, und im Fenster daneben die Auswirkungen in Originalgröße sehen.

Noch ein großer Vorteil: nicht nur den Zoomfaktor, sonder auch ob das Raster angezeigt wird, kann man für jedes Bild einzeln einstellen.

April Update

Es gab schon länger nichts Neues, das liegt daran, dass ein neues Semester angefangen hat. Ich arbeite mich derzeit in VVVV ein, bislang noch mit mäßigem Erfolg. Zwischendurch will ich Mistraal weiterentwickeln. Erfahrungsgemäß beanspruchen mich neue Projekte aber sehr. Skizzen und Verhaltensweisen für Gegner liegen in meiner Schublade und wollen realisiert werden. Das Tileset habe ich erweitert, um meine Fehler vom Anfang auszubessern. Soll heißen: es gibt zusätzliche Felsen-Tiles, da nicht alle aneinandergepasst haben.

Präsentation im Zeppelin-Museum

Unsere Gruppe (die das Projekt “Die Fahrten des Zeppelin” bearbeitet hatte) fuhr am 13. März nach Friedrichshafen. Am nächsten Tag waren wir Punkt 9.30 Uhr am Zeppelinmuseum, wo die Öffnungszeiten einen Einlass ab 10 suggerierten. An einem Nebeneingang erhörte man unser Klingeln, und dann wurde nach einem Fleckchen für die Präsentation gesucht.

Der erste Platz hatte eine nette Skulptur, auf deren Sockel wir den Laptop platzierten. Er hatte auch schöne große Fenster, die man nicht verdunkeln konnte. Die Wand, die zum Präsentieren gedacht war, hatte viele schöne Fugen, vielleicht war es ja ein Wandschrank.

Wir hatten soviel Zeit, dass wir nach einem besseren Ort suchen konnten. Ein paar Schritte weiter hatte der Raum zwar keine Fenster mehr, doch die Milchglasdecke machte ihren Job genauso gut. Wir hatten ziemliches Glück, dass es ein bewölkter Tag war. Von nebenan holten wir uns noch schnell eine Sitzbank, auf die wir den Laptop stellten, und dann konnte es auch schon los gehen.

Die vorgestellten Projekte wurden allesamt sehr gut aufgenommen. Vielleicht ergibt sich ja für das Eine oder Andere noch was. Wir hatten einen Kurzfilm, zwei Raum-Installationen, ein 3D-Stockpuppentheater, einen interaktiven Leuchttisch und mein Spiel im Angebot.

v. l. n. r.: beim Spiel vorführen; ein Schneesturm trifft die Mistraal; ich beim erklären und daneben Prof. Kühnle, der noch die untere Ecke des Beamerbildes mitnimmt.

(Thunder)clouds

Jetzt gibt es auch Wolken. Darunter sind auch Gewitterwolken, die gefährliche Blitze in alle Richtungen schleudern. In welche, das weiß man erst hinterher. Hier als Schneeflockenfelder dargestellt, sind jetzt auch “Frostfelder” eingebaut. Wenn das Schiff hindurchfährt und dabei schon vorher von einer Wolke nass ist, dann gefriert das Wasser zu einem Eispanzer. Es funktioniert auch alles tadellos.

Zu den Blitzen gehört natürlich auch, dass sie das Schiff beschädigen. Wenn das Schiff getroffen wurde blinkt es drei Mal rot auf und die “Gesundheit” reduziert sich um 1. Natürlich sind das alles vorläufige Anzeigemethoden und Werte, aber es klappt.

Freeze II

So, habe jetzt die Grafiken für die Zustände nass und vereist erstellt. Vereist gefällt mir ziemlich gut, aber über Nass muss ich evtl. noch mal nachdenken. Ein bisschen überrascht bin ich über den Effekt, der sich bei mir einstellte, sobald mein Schiff (im Spiel) das erste Mal einfror. Ich fühlte mich gleich irgendwie eingepackt und gefesselt. Dass sich dieser Zustand des Schiffes so auf mich überträgt, ist echt erstaunlich, aber es ist eine tolle Sache.

Das ist die Ansicht im 3D-Programm. Eigentlich ziemlich einfach gemacht, es sind nur modifizierte Quader mit abgeschrägten Kanten, die um das Schiff herumgelegt sind.

Thank you for the music

Ich habe einen kleinen Fehler ausgebessert, der mir noch gar nicht weiter aufgefallen war. Wenn der Schneesturm einsetzt, wird die Hintergrundmusik ausgeblendet und das Blasen des Sturms lauter gedreht. Nach einer Weile dreht sich das um, der Sturm verschwindet und die Musik kommt wieder.

Allerdings wird die Lautstärke bis zu ihrem Maximalwert aufgedreht. Sehr störend falls man das Spiel eher leise gedreht hatte. Aber durch ein verzwicktes Konstrukt mit vier Map Flags ist es jetzt so geregelt, dass die ursprüngliche Lautstärke der Musik gespeichert wird und später auch wieder nur bis dahin aufgedreht wird. Puh.

Freeze!

Leichter als erwartet fiel es mir, zwei zusätzliche Zustände für den Spieler zu implementieren. Wenn er durch eine Wolke fliegt, wird er nass. In diesem Zustand ist er schwerer, und sofern er nicht entgegensteuert, sinkt er langsam nach unten. Nach einer Weile wird er dann wieder trocken.

Wenn er aber im nassen Zustand durch ein ›Frostfeld‹ fliegt, dann gefriert das Wasser und das Schiff vereist. In diesem Zustand ist er noch etwas schwerer.

Nach einer Weile schmilzt das Eis und das Schiff ist wieder nass, und danach auch bald wieder trocken, solange es nicht durch weitere Wolken oder Frostfelder fliegt.

Es ging wirklich recht flott zu scripten, und ich muss eigentlich nur noch die finalen Grafiken für Schiff und Wetterphänomene erstellen.

Rotation Issues

So. Endlich hatte ich Zeit die Bewegungsdarstellung des Spielers zu Ende zu schreiben. Sie arbeitete schon ziemlich gut, aber noch nicht gut genug. Manchmal funktionierte die Animation der Drehungen nicht genau. Es kam vor, dass der Spieler nach rechts flog, aber das Zeppelin in einem Frame verharrte wo das Schiff seitlich gedreht war. So als ob es seitwärts flöge. Da waren nur ein paar minimale Anpassungen nötig.

Echt krass worauf man bei Scripten alles achten muss. Jede kleinste Möglichkeit muss durchdacht und beschrieben sein, sonst tritt halt sowas auf. Ich hatte nicht daran gedacht, dass man beim Spielen manchmal bloß kurz auf einer Taste bleibt, so dass eine Drehung nur halb ausgeführt wird. In meinem Skript fehlte lediglich die kleine Regel, dass wenn der Spieler nach links fliegt, und seine Figur auch nach links ausgerichtet ist, aber nicht Frame 0 gezeigt wird, wieder zu Frame 0 zurück-animiert wird. Den entgegen gesetzten Fall hatte ich berücksichtigt.

Random Screenshots

Ein Screenshot meiner Arbeitsumgebung in Photoshop. Während ich das Bild in der Mitte in jeglicher Zoomstufe bearbeiten kann, bleiben mir die kleinen Ansichten links immer erhalten.

…

Diesen lustigen InGame-Grafikfehler erhält man, wenn man transparente Ebenen verwendet, aber vergisst einen Hintergrund einzubauen. Die Spielgrafik wird nur in jedem Frame neu gezeichnet, wenn ein Tile dahinter liegt.

Lösung: Erstellung eines einfarbigen Tiles für den Hintergrund, mit dem man die hinterste Ebene füllt. Wer dazu neigt, mit seinen Windows-Fenstern (lol) herumzuspielen, wenn ein Programm mal wieder abgestürzt ist, wird hier seine helle Freude haben.

Das musste einfach mal sein.