Archive for the ‘Konzept’ Category

Tileset Tutorial in English

Samstag, 19. April 2008


Please use this banner if you want link to this tutorial, thanks!

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.

9er-Block farbig

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.

4 Ecken

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.

Tileset SkizzeBut 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.

Tileset Tut 1

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.

Tileset Tut 2Tileset Tut 3Tileset Tut 4

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!

9er-Block final

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

Samstag, 19. April 2008


Bei Verlinkungen bitte diesen Banner benutzen, danke!

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.

9er-Block farbig

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.

4 EckenWie 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.

Tileset SkizzeFangen 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.

Tileset Tut 1Man 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.

Tileset Tut 2Tileset Tut 3Tileset Tut 4

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!

9er-Block final

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

Mittwoch, 16. April 2008

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.

Alternative Zeppelin Designs

Mittwoch, 30. Januar 2008

Mistraal Skizzen 6cNachträglich noch ein paar Skizzen, als ich noch hin und her überlegte wie denn die Hintergrundstory aussehen könnte. Ich suchte nach alternativen Wegen, ein Zeppelin darzustellen oder einfach die Hülle etwas spannender zu gestalten.

Mistraal Skizzen 10aZwei Tage lang war ich dann von folgender Idee total begeistert: In einer von einem Asteroiden zerstörten und in Stücke geschlagenen Welt (schwebende Felsen) existieren nur noch vereinzelte Ansiedlungen der früheren Zivilisation. Das Zeppelin beliefert diese Siedlungen mit wichtigen Waren, die helfen, die Gesellschaft wieder aufzubauen (Ich muss zugeben dass der Urheber dieser Idee Ben Marty ist). Der Look ist dabei futuristisch, das Zeppelin in stylische Panzerungen und Metallteile gehüllt.

Mistraal Skizzen 3Nach Rücksprache mit Projektteilnehmern fiel mir dann aber selber auf, wie wenig das ›schwere‹ Design dem Gedanken des Zeppelins entspricht. Man würde von einem solchen Gebilde erwarten, dass es einen schnellen Antrieb hat und ein ganz anderes Bewegungsverhalten. Gedacht war ja dass es sich fast wie ein Ballon verhält und von Winden hinweggerissen wird. Der Look gefällt mir immer noch gut, nur passend wäre er nicht. Alternativ dazu auch andere Felsen-Designs.

Mistraal Skizzen 10cHieran fasziniert mich der Gedanke, ganze Städte auf der Hülle des Zeppelins anzusiedeln. Ebenfalls interessant: der Schwertfisch-, Lanzen- oder Bohrer-ähnliche Fortsatz vorne.

Mistraal Skizzen 10dDas Wal-, Schwertfisch oder Delphin-Design trägt dem früheren Gedanken von mir Rechnung, der gerne mit der Wahrnehmung des Nutzers spielen wollte. ›Bin ich nun über oder unter Wasser?‹ wird hier vermengt mit japanischen Göttergestalten und allgemeinen Verwirrspielen.

Genesis

Donnerstag, 24. Januar 2008

Heute war Projektvorstellung mit den anderen Studenten und Professoren. Meine Zweifel bezüglich ›Wer? Was? Wozu?‹ habe ich geäußert und es kamen auch viele Anregungen. Aber erst beim Mittagessen danach wurde die Diskussion erst freier und wirklich interessant. Eigentlich kann ich nicht so recht sagen, wie eins zum andren kam, aber endlich habe ich den Sinn des Spiels gefunden und bin total begeistert davon.

Wenn man sich mal so die Grafik bisher ankuckt, wird einem auffallen, dass es bis auf einen einzigen schwebenden Felsen keine Vegetation gibt. Alles ist öd und leer, wie am Anfang der Welt, als noch kein Leben erschaffen war. Und genau das wird der Spieler tun. Er wird durch die Welt reisen und ihr dabei Leben schenken. Die Postsäcke verwandle ich in Pusteblumen-Samen, die richtigen Stellen für den Abwurf werden durch sprudelnde Quellen symbolisiert. Und wenn der Samen die richtigen Bedingungen vorfindet, dann wird Leben sprießen!

Im Zuge dessen finde ich es auch nicht mehr angebracht, ein Zeppelin als Spielfigur zu haben. Mir schwebt ein Gott der Schöpfung vor, der aus grün funkelnden Lichtschleiern besteht. Vielleicht kann es ein Spiel werden, dass den Schöpfungsmythos nachspielt. Die bekanntesten davon laufen ziemlich gleich ab, mit Entstehen von fester Erde aus den Wassern, Pflanzen, Tieren, Menschen und so. Ich werde mich mal bei den Exotischeren umschauen, was sich so Interessantes findet.

Nachträglich gesehen, bin ich gelinde erstaunt, wie erst ein Spiel entstehen und dann das Konzept dafür herbeifliegen kann. Mit dem Schöpfungsthema als Inhalt kommt es mir auch kein bisschen zusammengeschustert vor. Das Thema selbst muss noch ausformuliert, untersucht und in spielbare Elemente und Story umgewandelt werden. Ansonsten bin ich immer den umgekehrten Weg gegangen. Der macht natürlich auch viel mehr Sinn, seien wir ehrlich. Das war jetzt Zufall. Aber ein glücklicher.

Interlude II

Sonntag, 20. Januar 2008

So. Eigentlich könnte ich jetzt glücklich sein. So gut wie alles funktioniert, und es sieht gut aus. Mein Konzept ist nicht zu 100% umgesetzt, aber das Wesentliche ist drin.

Aber mir fehlt was. Der Sinn. Ganz eindeutig. Ich habe mir von den echten Zeppelinen ein paar interessante Fakten genommen und das ganze in eine bunte Fantasiewelt gesetzt. Soweit okay. Aber … Post abwerfen? Wo? Bei wem? Und vor allem … wozu?

Bisher konnte ich es ignorieren, aber jetzt … die nächsten Tage gehören der Sinnsuche.

Painting Rocks

Mittwoch, 9. Januar 2008

Felsen-TilesetDer erste Arbeitsschritt im neuen Jahr ist die Erstellung eines Felsen-Tilesets. Die herumschwebenden Felsbrocken sind mir nicht genug, um einen Level aufzubauen, und so arbeite ich daran ein möglichst vielseitig anwendbares Grundelement zu erstellen.

Ich bin froh, einerseits die Erfahrung mit den Platzhalter-Grafiken gemacht zu haben, und mich andererseits mit den Mock-Ups in diversen Pixelart-Foren beschäftigt zu haben. Schon an meinen ersten Versuchen mit einem Erdboden-Tileset konnte ich einen sehr unschönen Effekt beobachten. Wenn man die Tiles, auf denen eine Spielfigur steht, so malt dass ihre obere Kante auch die Kante des Erdreiches ist, sieht das im Spiel hässlich aus. Die Figur läuft dann ganz exakt auf einer mit der Wasserwaage geeichten Erde. Möchte man ein paar Kuhlen und Löcher in der Erde haben, damit es etwas natürlicher aussieht, dann tritt die Figur ins Leere und läuft in der Luft herum.

Dem kann man ganz einfach entgegenwirken. Für die Erdoberfläche nimmt man zwei Tiles statt einem. Das obere von diesen Tiles ist nicht solide, sondern enthält nur am unteren Rand etwas Gras oder Erde. Das eigentliche Tile auf dem die Figur läuft, beginnt also optisch im Erdreich. Das sorgt nicht nur dafür, dass der Spieler nicht mehr in der Luft laufen muss, sondern auch dafür dass er optisch viel besser ins Spiel eingebettet wird. Man ist nun frei, die Füße der Spielfigur unten etwas abzurunden, damit ein leichter Von-Oben-Blick erreicht wird. Mit dem obersten Tile kann man eigentlich machen was man will. Es muss natürlich hinter dem Spieler gezeichnet werden, und dann könnte man auch eine bis zum Horizont gehende Steppe oder wilde Büsche malen. Es ist wirklich nur ein kleiner Kunstgriff, der aber unheimlich viel bewirkt.

Interlude

Donnerstag, 29. November 2007

Oh je. Mein Professor wird langsam ungeduldig. Er findet das ja alles schön und gut bisher, aber die Sache mit den Platzhaltern stört ihn. Ich soll doch endlich mit der richtigen Grafikerstellung anfangen.

Zitat: »Es ist mir egal, ob es funktioniert! Es muss nur gut ausschauen!«

Na mir ist das aber nicht egal. Ich studiere ja nicht umsonst MMVR. Die Interaktion ist das Herzstück. Ansonsten wäre ich beim ›normalen‹ Grafik-Design gelandet. Ich muss wirklich noch einiges schaffen bevor ich mit dem Malen anfange.

Final Concept

Mittwoch, 21. November 2007

Nun aber mal zum richtigen, zum zu verwirklichenden Konzept:

Mistraal Konzept 1Der Spieler soll in einer wüstenartigen Gegend herumfliegen, die Hitze bringt das Gas evtl. zum Entweichen und erschwert die Steuerung. Dann, entweder nach einer bestimmten Zeit oder einem Event, bricht ein Schneesturm los. Er dauert nur eine kurze Weile, aber danach ist alles vereist. Auch das Zeppelin. Von nun an geht es um Zeit, denn die Eisschicht macht das Schiff viel zu schwer, und es droht abzustürzen. Der Spieler kann von da an nicht mehr an Höhe gewinnen, und muss zusehen, rechtzeitig zu einem sicheren Ort (Ziel am Ende des Levels o.ä.) zu kommen.

Einen Vorgeschmack auf das, was ihm blüht, sollte er es nicht rechtzeitig schaffen, bekommt er durch die Luftschiffe die bisher still und stumm im Hintergrund ankerten. Diese sind ganz genauso mit einer Eisschicht überzogen und zu schwer geworden. Da sie dem Grund aber wesentlich näher sind, erreichen sie ihn auch früher, und der Spieler kann live miterleben, wie sie auf dem Boden aufkrachen und sich in Feuerbälle verwandeln … Auch eine Art der Motivation.

What’s going on here?! (Part 3)

Montag, 19. November 2007

Mistraal Skizzen 8aDie Idee hierzu kam mir während einer Vorlesung zur Existenzgründung. Die war nicht langweilig, ich guckte bloß einmal hoch zur Decke, und da hing diese riesige Lampe, die aus vielen einzelnen mattweißen Kugeln bestand. Ich fühlte mich irgendwie an UFOs erinnert.

Und deshalb stellen die Kugelhaufen auf der Skizze außerirdische Flugkörper dar, die zudem enorme Hitzequellen sind. Der Level stellt sich so dar, dass man ihn einfach nur durchqueren muss. Die UFOs verfolgen das Luftschiff aber die ganze Zeit, fliegen aber auch ständig extrem seltsame Manöver. Der Spieler muss zunächst versuchen, ihnen so gut es geht auszuweichen, denn durch ihre Hitze die sie verströmen, dehnen sie das Gas im Zeppelin zu weit aus. Es kommt daher zu Gasverlusten die das Luftschiff schwerer steuerbar machen.

Kommt es dann irgendwann doch zu einem Kontakt, tut der Spieler gut daran, von da an in der Nähe der UFOs zu bleiben. Nur in ihrer Nähe hat er dann nicht unter den schwereren Flugbedingungen zu leiden. Wie aber schon erwähnt, haben die Aliens viele extreme Flugmanöver drauf, die die Verfolgung sehr erschweren.

Dieses Wechselspiel von Anziehung und Abstoßung, Flucht und Verfolgung finde ich eigentlich ganz reizvoll.