[Tutorialreihe] Tilesets erstellen

    Tutorial 1: Tilesets, häh?

    1. Einleitung

    In dieser Tutorialreihe werde ich versuchen das Zeichnen von Tiles und Tilesets zu erklären. Entstehen wird diese Reihe eigentlich für YORPG, damit ich nicht der Einzige bin, der nachher Tilesets zeichnet. Ich weiss, dass ich selber nicht wirklich der Beste bin und auch noch lange keine guten Tilesets zeichnen kann, aber ich denke mal für diese Tutorialreihe wird es reichen!

    Bevor es aber überhaupt losgehen kann, muss ich erstmal erklären, was überhaupt Tilesets sind. Wer schon weiss, was ein Tileset ist und wie es aufgebaut ist, kann dieses Tutorial überspringen.

    Wer den RPG Maker kennt, kennt auch Tilesets. Sie heißen im RPG Maker zwar Chipsets, aber im Grunde ist es dasselbe.

    Vorraussetzungen sind eigentlich nur Kenntnisse mit einem Grafikprogramm und mindestens eine Intelligenz der Stufe "ausreichend" :winking_face: .


    2. Was sind Tiles und Tilesets?

    Im Grunde sind uns Tilesets schon allen mal begegnet: Auf dem guten alten SNES. Wer kennt nicht noch Klassiker wie Secret of Mana, Terranigma und ähnliche?
    Ja, auch da gab es schon Tilesets. Jetzt möchte ich aber endlich klären: Was sind überhaupt Tilesets?

    Tilesets sind eigentlich nur Sammlungen (Sets) in denen mehrere Tiles gespeichert sind. Also müssen wir die Frage klären, was Tiles sind und nicht was "Tile-sets" sind.

    Tiles sind kleine, meist quadratische Bilder aus denen die Welten für viele 2D-Rollenspiele, 2D-Jump 'n Run, etc. aufgebaut werden. Warum sollte man ein Haus jedesmal neu zeichnen wenn man es braucht? Hört sich noch einfach an? Gut: Dann kommen jetzt die Sachen, die es schwer machen :winking_face:

    Jedes Tile für ein Spiel hat immer dieselbe Größe. Beim YORPG wird jedes Tile die Größe von 32x32 Pixel haben. Tiles müssen auch so gezeichnet werden, dass sie aneinanderpassen. Das heißt, wenn man zwei Grass-Tiles nebeneinander legt, müssen sie RANDLOS aneinander passen. Zumindest müssen Tiles aneinander passen, die aneinander gehören :winking_face:


    Wie macht man jetzt aber nen Haus? Ein ganzes Haus auf 32x32 Pixeln? Ihr könnt euch schon denken: NEIN! *G*
    Größere Objekte werden aus mehreren Tiles zusammengesetzt. In dem folgenden Bild sind 4 Tiles in unserem Tileset. Diese 4 Tiles werden dann in unserer Welt passend zu einem Objekt zusammengesetzt:



    3. Tilesets in Spielen?

    Vielleicht denkt ihr euch jetzt: "Tilesets, Tiles.. hmm.. ok. Aber wo ist sowas in Spielen?".
    Schauen wir uns einmal diese Szene aus seiken densetsu 3 an:


    Es ist schon schwieriger in diesem Spiel die Tiles zu erkennen. Dennoch sind welche vorhanden. In folgendem Bild will ich sie mal hervorheben:


    Die umrandeten Tiles (insgesammt 4) sind die einzigen für die Grassfläche. Die restlichen Kästchen sind auch alle Tiles. Diese hab ich jedoch jetzt nicht hervorgehoben. Und so gibt es in fast jedem alten SNES Spiel ein Tileset. Auch wenn man es oft gar nicht bemerkt. Je besser ein Tileset ist, umso weniger bemerkt man, dass eins benutzt wird.

    3. Noch vorweg bez. YORPG

    Bevor jetzt alle schon wild anfangen Tilesets zu machen, dabei ich noch gar nicht soweit bin mit dem Tutorial möchte ich dazu noch kurz was vorweg sagen:

    In einem Spiel sollten alle Tilesets einen Stil behalten. Sprich: Das eine Tileset sollte nicht total Comic-like sein mit extrem grellen Farben wobei das nächste dann echtere Farben hat.
    Hier sind ein paar Sachen bez. YORPG:

    Ein Tile ist 32x32 Pixel gross. Die Anzahl der Farben ist egal. Der Stil wird später versucht so zu halten wie bei den obrigen Bildern (nur nicht mit doppelten Pixeln überall xD).

    Ich werd aber die Tut-Reihe noch fortführen.


    Erste Versuche könnt ihr gerne hier ins Forum posten :smiling_face: Am besten macht einen gesamten Thread für alle Pixel-Art versuche und fertiges könnt ihr dann so posten wie immer :smiling_face:


    Ich würde mich über Feedback freuen :smiling_face:

    Und an Fragen solls nicht versagen: Einfach mich fragen

    So denn. Tutorial 2:

    Tutorial 2: Unser erstes Tile

    1. Einleitung

    In diesem Tutorial möchten wir unser erstes Tile erstellen. Ich möchte jetzt nicht mit dem kompliziertestem anfangen, daher werden wir im Laufe des Tutorials folgendes Tile fertigstellen:


    Ein gekachelter Boden, bestehend aus einem einzigen Tile mit der Größe 32x32 Pixel. Sieht noch nicht perfekt aus aber für dieses Tutorial ist das unser Ziel.

    2. Vorbereitung

    Bevor es los geht mit dem Zeichnen muss man sich erst einmal gedanken darüber machen, wie man so ein Tile zeichnen muss, damit es später auch aneinander passt. Also sollte man sich ein kleines Stückchen Papier schnappen und es einfach mit diesen Kacheln voll malen. Dann schaut man sich das Muster an und überlegt in wievielen Tiles man es aufteilen muss. In unserem Fall in ein einziges (damit es einfacher ist). Dieses umrahmt man sich dann und zeichnet es sich am besten nochmal raus. (Linkes Bild)


    Wenn man sich nun dieses Feld anschaut kann man erkennen, dass man unser Tile in 4x4 gleichgroße Abschnitte einteilen kann (was uns das Zeichnen vereinfachen sollte). (Siehe rechtes Bild). Sowas sollte man sich auch immer schon im voraus überlegen, da Tiles regelmäßigkeiten haben sollten. Man muss immer im Hinterkopf behalten, dass Tiles später nebeneinander gelegt werden.

    Nun nur noch ein paar letzte rechnereien bevor es endlich losgehen kann: Wir wissen, dass unser Tile 32x32 Pixel gross werden soll. Außerdem wissen wir, dass wir unser Tile in 4x4 Felder einteilen können.
    Man sollte sich also nun überlegen, wie gross ein so ein Feld sein sollte. Dazu teilt man einfach für die X-Achse 32 durch 4 --> 8 und für die Y-Achse genauso. Also ist jeder Abschnitt unseres Tiles 8x8 Pixel gross.

    3. Los gehts

    (Die Ansicht links ist fast immer um 4x vergrößert)

    Gesonderte Schritte nur für Programme mit Ebenen habe ich ROT gefärbt. Schritte die nur mit Programmen zu machen sind ohne Ebenen-Funktionen sind BLAU.
    Schritt 1: Bild einteilen

    Als erstes sollten wir mit unserem Malprogramm ein 32x32 Pixel großes Bild erstellen. Wer mit seinem Malprogramm ein Raster einstellen kann (nur anzeigen) sollte dieses auf 8x8 Pixel stellen, ansonsten kann man sich auch eins selber malen wie wir links erkennen können. Das selbstgemalte Raster sollte sehr helle Farben haben, damit wir es nachher nicht in unser eigentliches Tile mit einbauen.
    Schritt 2: Vorlage erstellen

    Erstellt nun eine Ebene mit dem Namen "Vorlage". Wählt einen schwarzen Pinsel aus und wählt nun am besten das Linien Werkzeug aus (kein Anti-Alias!). Schaut jetzt nochmal auf euer auf Papier gezeichnetes Bild. In welches Feld kommen nun welche Zeichnungen? Wo kommen wie welche Linien hin? Da wir in einem Tile später zwei gleiche Kacheln haben werden müssen die Linien um Feld 14 und Feld 8 überall gleichlang sein. Warum? Weil das die graden Linien unserer achteckigen Steine sind. Also umrahmen wir eigentlich nur Feld 14 und Feld 8 mit einem Rechteck. Diese Umrahmung sollte aus dem Bild hinaus gehen. Dann einfach auf der anderen Seite wieder anfangen.
    Jetzt verbinden wir einfach nur noch jeweils beide Punkt in den Feldern 1, 3, 9 und 11 damit wir unsere endgültige Form haben.

    Wir müssen im Kopf behalten, dass wir jede Kachel in unserem Tile doppelt haben. Die Viereckige und die Achteckige sind zweimal in dem Tile. Also müssen viele Felder identisch sein (derzeit noch).

    Reihe 1 und 3: Feld 1 = Feld 11, Feld 2 = Feld 12, Feld 3 = Feld 9, Feld 4 = Feld 10
    Reihe 2 und 4: Feld 5 = Feld 15, Feld 6 = Feld 16, Feld 7 = Feld 13, Feld 8 = Feld 14
    Schritt 3: Der erste Test

    Kopiere nun die Ebene Vorlage. Kopiere das komplette Bild. Erstelle ein neues Bild in der Größe von 128x128 Pixel und füge dein Bild 16 mal ein. Ordne sie so, dass sie immer genau nebeneinander liegen um zu testen ob die Vorlage problemlos aneinander passen würde.

    Das Bild sollte nun keine Lücken irgendwo haben und sollte so aussehen wie hier links. Die Rechtecke wirken zwar stärker, dass ist aber nicht schlimm, da wir ja nur eine Vorlage gemacht haben.
    Schritt 4: Licht

    Füllen wir den Hintergrund (Am besten auf einer neuen Ebene "Hintergrund") erstmal mit irgendeinem schwachen Grauton. Ich hab erstmal RGB 153, 153, 153 genommen. Die beiden Viereckigen Kacheln (Feld 8 & 14) werden nun mit dem ersten Lichteffekt gefüllt *g*. Wir möchten, dass das Licht von oben, links kommt. Dementsprechend müssen die Oberen und linken graden Linien heller sein als die Rechten und Unteren.
    Jetzt müssen wir die schwarzen Linien übermalen. (Daher die Ebene "Hintergrund" am Besten in den Vordergrund holen und halbtransparent machen, damit wir die Linien von der Vorlage noch sehen können).
    Erstmal malen wir nun den Schatten für die Linien, die wirklich in die Ausrichtung nach unten oder rechts liegen. Dazu übermalen wir die schwarzen Linien. Für das Licht übermalen wir nur da die Linien, wo noch welche sind, die nach oben, links zeigen. Da wo wir die Linien schon für Schatten benutzt haben zeichnen wir rechts, daneben.

    In dem Bild links habe ich übrig gebliebene schwarze Linien mal ROT hervorgehoben.
    Die übrig gebliebenen Linien beleuchten wir jetzt so, wie wir es wollen, es ist erstmal egal. Nur beachten wir auch hier, dass die einzelnen 16 Abschnitte im Bild wie oben genannt fast gleich sein sollten. Die Beleuchtung sollten wir hier jedoch etwas abschwächen.

    Wir ihr sicher schon bemerkt habt, sind die Rechtecke immernoch stärker als die achteckigen Kacheln, um die es eigentlich geht. Deswegen verdoppeln wir nun noch die Punkte für unsere diagonalen Linien. Außerdem nehmen wir nun am besten noch ein schwächeres Licht und einen schwächeren Schatten für unsere viereckigen Felder.

    Bislang haben wir erst 5 Farben benutzt und haben nun ein solches Feld wie hier links zu sehen.
    Tutorial 2 beendet

    Und so haben wir es geschafft. Nebeneinandergesetzt (Siehe Schritt 3) sieht unser Tile doch gar nicht mal soo schlecht aus.

    Aber es sieht irgendwie noch zu "gestellt" aus. Es sieht recht gewollt aus und könnte so noch lange nicht in irgendein RPG. Außerdem wirken die Viereckigen Kacheln jetzt wieder vertieft. Das soll ja auch nicht so sein. Es sieht auch nicht aus wie ein Boden. Und, und, und.

    Im nächsten Tutorial möchten wir uns also damit beschäftigen, das Tile ein wenig zu verändern und realistischer zu machen und danach werden wir dann Variationen machen.


    Habt ihr noch Fragen dazu? Dann stellt sie am besten direkt an mich ^^
    Auch bei diesem Tutorial würde ich mich um Feedback freuen

    hehe *g* Dann hier noch was zum Licht *g*

    Tutorial 3: Verbessern des Tiles

    1. Erste Änderungen

    Wie schon angekündigt müssen wir unser Tile noch ein wenig verbessern. Fangen wir mit etwas Logik bezüglich des Lichtes an. Wie weit kommt das Licht in die Zwischenräume der Kacheln? Schauen wir uns folgendes Bild an (Ich weiss sieht doof aus, aber ohne Maus lässt sich doof zeichnen xD):


    Wer damals in Physik gut aufgepasst hat, weiss, dass man sich jeden Lichtstrahl ruhig einzeln anschauen kann. Unsere Lichtquelle hat nun eine bestimmte Größe und von jedem Punkt darin kann eine grade Linie ausgehen, die die Landschaft drumherum beleuchtet.
    Den als "Unten" markierten Bereich in dem Bild können jedoch nur ein paar der Lichtstrahlen erreichen. Nicht von jedem Punkt der Lichtquelle kann man den Bereich "Unten" beleuchten. Das führt dazu, dass dieser Bereich dunkler ist als der Rest. Unterhalb des Bereiches "Unten" kommt überhaupt kein Licht mehr hin. Da ist es dann noch dunkler als darüber. Diese Logik möchten wir nun in unser Kachelbild einbauen. Zunächst nur mal bei den diagonalen Linien:

    <->

    Außerdem habe ich in diesem Bild die dunkelste Farbe durch etwas hellere ersetzt und habe restlich überbleibende doppelt-gepixelte diagonale Linien (was ein Wort) ersetzt durch Einfache.

    2. Eine goldene Regel

    Ja, genau! Jetzt kommt eine goldene Regel. Auch wenn ihr noch so einen schönen Boden hingekriegt habt, solltet ihr ihn nicht so bedingt hervorheben. Was bringt uns das wenn die Böden nachher mehr hervorgehoben sind als die Spielfiguren oder Gegner im Spiel? Nein, ein Boden muss immer schwach sein, daher niemals Tiles zu auffällig gestalten.

    Was ich damit sagen will, der Boden ist zu auffällig, dabei er noch gar nicht so super aussieht. Warum? Ganz einfach: Es sind zu helle Farben und zu starke Kontraste da. Und da wir dies bei diesem Tile gar nicht beabsichtigen müssen wir nun die Farben ein wenig abschwächen! Das ist keine große Änderung, aber wir haben unser Tile so von 5 Farben über 4 Farben (grade eben) auf jetzt 3 Farben runtergesetzt.

    <->

    <->

    Wenn du dich jetzt fragst, warum wir es nicht direkt so gezeichnet haben, dann möchte ich dir das auch beantworten: Manchmal ist das Erstellen von Tiles mit ausprobieren verbunden und dann macht man oft auch Umwege. Um euch mal die Unterschiede zu zeigen zwischen den einzelnen Bildern habe ich dann auch mal diesen Umweg genommen :winking_face:



    3. Farbverläufe

    Was fällt dir auf wenn du unser Tile anschaust und es mit denen aus Spielen vergleichst? Hmm.. Vieles? Richtig *g*. Nun - aber irgendwie sehen unsere Tiles noch recht.. nun wie soll man sagen? platt und langweilig aus! Das liegt daran, dass auf den Kacheln einfach eine einfarbige Fläche ist. Das macht dieses Tile langweilig. Und im Endeffekt kann man es so nicht benutzen. Bevor ich jetzt VERSUCHE zu erklären wie man zu einem Farbverlauf aus wenigen Farben kommt möchte ich das endgültige Ergebnis zeigen:


    Die Seite unten, rechts von dem achteckigen Stein ist nun dunkler als die oben, links. Ein kleiner Farbverlauf liegt nun auf dem Stein und versucht ihn so zu verschönern. Aber wie sieht so ein Weg bis zum fertigen Farbverlauf aus?

    Zunächst zeichnen wir den Farbverlauf so wie er später etwa verlaufen soll noch recht stufig. Wir füllen einfach die Flächen mit den Farben aus, wie sie später sein sollen.

    Ich habe das in diesem Fall mal mit graden Linien, die senkrecht und waagerecht liegen gemacht, welche ich per Zufall gezeichnet habe. Im allgemeinen habe ich versucht möglichst eine diagonale Form zu bekommen. Es ist auch nicht schlimm wenn das Tile nicht haargenau so aussieht, wie hier links abgebildet.
    Als nächstes nehmen wir nochmal alle 3 Farben des Farbverlaufes und zeichnen zufällig einzelne Punkte in den Farbverlauf. Dabei gibt es allerdings etwas zu beachten: (Schwer zu erklären, also wenn ihr was nicht versteht, fragt mich ruhig).

    Angenommen wir nehmen jetzt die helle Farbe um damit zufällig Punkte zu malen, müssen wir beachten, dass mehr Punkte in der Nähe der hellen Fläche sind und eigentlich fast gar keine mehr in der dunklen Fläche. Nehmen wir jetzt die dunkelste Farbe, sind die meisten Punkte unten, rechts. An der oberen, linken Ecke sind eigentlich keine Punkte davon mehr. Zum Schluss sollte man erst die mittlere Farbe nehmen und somit schafft man dann den endgültigen Schliff. Im Endeffekt sollte das so aussehen wie links.

    Ich Versuche diesen Schritt nochmal anhand einer Tabelle zu verdeutlichen:

    Hell Gefüllt Mittelmäßig Sehr wenig - - - -
    Mittel - Sehr wenig Mittelmäßig Gefüllt Mittelmäßig Sehr wenig -
    Dunkel - - - - Sehr wenig Mittelmäßig Gefüllt
    Jetzt machen wir das so ähnlich auch nochmal mit den kleinen viereckigen Steinen und schon sind wir auch mit diesem Schritt fertig :smiling_face:


    Im nächsten Tutorial werden wir dann Variationen von den Steinen machen. Derzeit ist unser Stein ja noch der perfekte Stein über den noch nie jemand gelaufen ist, der grade neu irgendwo gekauft wurde und grade erst dahin gesetzt wurde. Jedenfalls sieht es so noch aus.

    sore jaa, mata :smiling_face:

    thx :smiling_face:
    Ob du nun PNG, BMP, PCX, TGA, GIF oder so nimmst ist egal. Ich denke mal im YORPG werde ich später BMPs benutzen, die ich dann selber zu einem eigenen Format umwandel.


    Aber gut dass du es ansprichst. Ein Tile NIEMALS als JPG speichern. JPG Dateien verändern die Qualität des Bildes. Somit bleibt das Orginal nicht erhalten.


    Sicher ist man immer mit PNG, GIF oder BMP.

    Öhm. 128x128 benutze ich hier nur zur Verdeutlichung, damit es größer ist.


    Wenn ich hier jedes Bild auf 32x32 lassen würde, würde man nicht mehr genau erkennen wo welche Pixel sind.


    Und manchmal setze ich 4x4 Bilder von denen zusammen und 4*32 = 128 ^^


    Ich editier das am besten nachher mal in Tut 1 mit rein o.o

    Tutorial 4: Variationen erstellen

    1. Einleitung

    Aufgrund von Fragen wurde ich hierrauf aufmerksam:
    Tiles bitte niemals als JPG speichern. Wenn, dann als BMP, PNG oder GIF. TGA oder PCX geht auch. Aber bitte niemals als JPG ^^.

    Und wegen den Tiles: Ich benutze hier im Tutorial öfters 128x128 Bilder für ein Tile. Das liegt daran, dass ich sie um 4 fach vergrößert habe ( 4x32 = 128 ). So kann man besser die einzelnen Pixel erkennen.

    Jetzt aber zum eigentlichen Tutorial: Wie ich schon angekündigt habe, möchten wir heute Variationen der Tiles erstellen. Zum Beispiel ein Tile verdrecken oder ein wenig zerstören, usw.! Fangen wir also mit einem leicht zerstörten Tile an.

    2. Das Tile mit der Macke

    Als erstes speichern wir unser Tile nochmal anders ab. Wir möchten unser aktuelles Tile schließlich nicht überschreiben. Wir möchten ja Variationen erstellen. Also speichern wir es nochmal zur Sicherheit extra ab.

    Nun nehmen wir die Farbe, welche wir auch für unseren Schatten genommen haben. Wir nehmen dafür jetzt keine extra Farbe, weil die Hintergrundtiles ja nicht zu auffällig sein sollen. Nun zeichnen wir einfach die Umrisse eines rausgebrochenen Stückes an irgendeine Stelle.
    Nun füllen wir den Hintergrund mit einer ETWAS helleren Farbe aus. Also warum nicht gleich die, die wir in unserem Farbverlauf schon benutzt haben?

    Außerdem möchten wir einen kleinen Schatten einfügen. Das machen wir aber mit der Farbe, die wir auch für den Rand dieses Rausbruches benutzt haben.

    Und noch etwas muss man beachten. Unten, rechts darf jetzt kein Rand mehr für diesen Achteckigen-Stein sein, da er dort ja rausgebrochen ist ^^.
    Jetzt geht es weiter. Die neuenstandene Vertiefung muss eindeutig noch dunkler, findet ihr nicht? Eigentlich könnten wir jetzt eine neue Farbe nehmen und diese einfach darein füllen. Aber das sieht im Endeffekt an dieser Stelle nicht so schön aus.
    Warum? Nun, einerseits ist dort etwas rausgebrochen. Es muss also irgendwie auch rau aussehen und nicht so fein wie das. Außerdem sieht es auch wieder langweilig aus, wenn es dort einfach nur eine gefüllte Farbe hat. Wir machen also eine "Rasterfüllung" (Name ist jetzt nur von mir so ausgedacht).

    Wie sieht das aus? Nun, ganz einfach. Man malt immer Abwechselnd gefüllt und ungefüllt. Also in etwa füllt man das ganze so:

    X_X_X_X_X_X_X
    _X_X_X_X_X_X_
    X_X_X_X_X_X_X
    _X_X_X_X_X_X_
    X_X_X_X_X_X_X

     Wobei es an dieser Stelle auch nicht so schlimm ist, wenn man mal eine Ausnahme an manchen Pixeln macht. Es ist ja rausgebrochen und somit eigentlich unregelmäßig.
    Nun möchten wir nun noch diesen Ausbruch in die Schattierung (den Farbverlauf) des Steines einbauen. Deswegen nehmen wir nun einfach die dunkelste Farbe des Farbverlaufes und umrahmen diesen Ausbruch noch. Das kann ruhig ein wenig zufällig sein wo das wie dick umrahmt wird.
    Wenn wir nun noch mal eine 4x4 Anordnung unseres Tiles nehmen und an manche Stellen das neue Tile einsetzen, sieht es doch schonmal nicht mehr ganz so eintönig aus.
    Nehmen wir nochmal unsere Vorlage und speichern sie nochmal unter einen anderen Namen ab. Jetzt nehmen wir einfach die dunklere Farbe vom Farbverlauf und zeichnen zufällig ein paar Linien unten, rechts auf den Teil vom Stein. Diese dunklen Linien umranden wir jetzt noch mit der mittelhellen Farbe vom Farbverlauf und speichern diese wieder ab.
    Setzen wir auch diese simple Variation und fügen sie in unser 4x4 Testraster ein. Und es sieht schon wieder ein wenig weniger eintönig aus. Solche Variationen sollte man später in einem endgültigen Tileset fürs YORPG anbieten. Natürlich kann man noch schnell weitere Variationen erstellen. Das waren jetzt nur 2 Beispiele für Macken in den Steinen ^^.


    3. Verdreckte Steine

    Für unsere nächste Variante ist ein Malprogramm mit Ebenen recht vorteilhaft. Wer jetzt eins ohne hat muss erstmal die beiden Schritte zuende lesen und danach sich die einzelnen Farben leider selber raussuchen.

    Ich habe für diesen Schritt erstmal eine neue Ebene angelegt und habe auf dieser Ebene mit unserer Schattenfarbe und einem 4 Pixel dicken Pinsel (ohne Anti-Alias) zufällig eine Fleck gemalt. Etwa so wie links.
    Jetzt habe ich diese Ebene einfach um etwa 37% Transparent gemacht (Also ist es um 63% sichtbar ^^). Und schon ist eine weitere Variante fertig. :smiling_face:
    Beim Leveldesign später sollte man zwar nicht so übertreiben mit den auffälligeren Variationen wie ich hier links habe, aber es ist ja nur zur Verdeutlichung xD
    Hier ist eine weitere Variation. Und es gibt noch viele weitere Möglichkeiten Variationen zu machen.


    4. Verrückt aber super

    Unsere letzte Variation von dem Stein wird noch simpel aber dennoch recht gut. Wenn wir unseren normalen Stein angucken sieht es so aus, als würden die achteckigen Steine oben drauf komplett nach außen gebogen sein. Jetzt machen wir das ganze nach innen. Was ich damit meine werdet ihr sehen wenns fertig is xD.

    Wir übermalen jetzt einfach nochmal den Farbverlauf und machen das ganze nochmal genau anders herum. Also um 180° gedreht.
    Und so sieht unser neues Tile in der Variation aus. Man erkennt es aber auch nur wenn man genau hinguckt. Und dennoch sieht es hier nicht mehr so langweilig aus.


    So - ich hoffe es hat Spass gemacht soweit xD.
    Ihr könnte jetzt erstmal neue Variationen ausprobieren bis zum nächsten Tutorial.
    Es gibt unendlich viele Möglichkeiten ^^

    Ich denke mal im nächsten Tutorial werden wir nochmal einfach ein simples Küchentile machen zur Übung ohne viele Variationen - die könnt ihr dann selber versuchen.

    Du machst das wirklich super - mir fehlen dabei nur offensichtlich ein paar grundlegende Dinge o.o


    Sry, hab leider keine Ahnung von sowas ^^"


    Was ist "anti-Alias" ?


    Wie leert man einen Farbverlauf, bzw wie wurde er überhaupt gefüllt? oO
    Was ist ein Farbverlauf und was nützt es ihn zu leeren? ^^"


    Tut mir ja echt leid, aber ich hab wirklich _null_ Plan o.o"

    Wenn du eine Linie zeichnest und diese Linie dann geglättet gezeichnet wird hast du Anti-Alias an.
    Wenn du eine Linie zeichnest und diese wirklich MS-Paint artig gezeichnet wird hast du kein Anti-Alias an.


    Und das mit dem Farbverlauf leeren hab ich falsch ausgedrückt. Eigentlich meinte ich, dass wir ihn übermalen ^^


    sry. *edit*

    Zitat

    Original von ProfEich
    Wenn du eine Linie zeichnest und diese Linie dann geglättet gezeichnet wird hast du Anti-Alias an.
    Wenn du eine Linie zeichnest und diese wirklich MS-Paint artig gezeichnet wird hast du kein Anti-Alias an.


    Öhm kapier ich immer noch nicht o.o


    Wo stellt man das ein? Kannst Du Beispielbilder posten?

    Hier nochmal den Unterschied zwischen Anti-Alias und kein Anti-Alias.




    Wie man das mit diesem do**** Photoshop macht weiss ich nicht ^^
    Ich kann euch nur sagen wie das unter Corel PHOTO-PAINT geht.



    Mit diesem netten Knöpfen, was erscheint wenn man auf das Linien, Kreis, etc. Tool geht :smiling_face:

    Tutorial 5: Wiederholung

    1. Einleitung

    In diesem Tutorial wollen wir eigentlich nur nochmal das ganze an einem anderen Tile wiederholen.
    Fangen wir also an! Begeben wir uns also in die Küche. Nein! Das Essen lassen wir jetzt in Ruhe. Mal schaun. Mit etwas Glück habt ihr noch dieses Standartbild von Fließen auf dem Boden? Nein! Gut - ich find die auch grässlich :winking_face:
    Jedenfalls wollen wir uns heute an diesen Schachbrettähnlichen Küchenfließen versuchen. Im Grunde sind diese sogar einfacher als unser vorheriges Beispiel.

    In diesem Tutorial werd ich aber nicht Schritt für Schritt vorgehen, sondern einige Schritte schonmal zusammenfassen.

    Also los gehts :smiling_face:

    2. Küchentile

    Die Zutaten für unseren ersten Schritt sind 512 Gramm dunkle und 512 Gramm helle Pixel :smiling_face:
    Jup - Unser Tile ist 32x32 Pixel groß - und wir müssen die Hälfte davon dunkel füllen also 512 Pixel ;). Naja - back to topic

    Diesmal teilen wir unser Tile in 4 16x16 große Blöcke. Den Oberen, Linken füllen wir mit einem dunklen grau-Ton und den Unteren, Rechten ebenfalls. Die anderen beiden füllen wir mit einem hellen grau-Ton.

    Dann nehmen wir jeweils einen dunkleren Ton und malen die Vertiefungen der Kachel am Rand dunkel und dort wo Licht ist (diesmal wieder oben, rechts) wird es dort hell gemacht. Unsere Kacheln sind leicht abgerundet, deswegen habe ich an den Ecken noch einen Pixel mehr gemacht. Das fällt aber später eh nicht mehr auf xD
    Jetzt sieht das Tile wieder langweilig aus - deswegen malen wir nun wieder einen Farbverlauf drauf. Wobei wir den Schatten diesmal leicht eingeknickt malen. Also wie hier links :smiling_face:

    Ich weiss, das ging diesmal etwas sehr schnell - Aber ihr sollt es ja auch üben und auch mal was selber probieren ^^
    Im Endeffekt sind wir mit wenig Arbeit und Mühe zu diesem Ergebnis gekommen.
    Jetzt könnt ihr mal ein paar Variationen probieren. Vielleicht einfach mal ganz simpel gehaltene Flecken auf dem Boden oder risse in den Fliesen?

    Ich bin leider jetzt so gegen 2 Uhr recht lustlos auf viele Variationen deswegen hab ich es als Beispiel mal bei einem kleinen Riss gehalten, den man auch vielleicht nur mit Glück erkennt ^^


    3. Stile

    Es gibt leider noch eine weitere Kategorie, die man beim erstellen von Tilesets beachten muss. "Als könnte es nicht schon schwer genug sein" ^^"

    Als Beispiel möchte ich erstmal dieses Bild in den Raum stellen:


    Die Tiles sind teilweise aus JPEGs kopiert und deswegen nicht ganz aneinanderpassend.
    Insgesammt sind es Tiles, die ich irgendwo im Internet gefunden habe. Alles als Grass-Tile.

    Von links nach rechts werden die einzelnen Tiles auf diesem Bild schlechter.
    Fangen wir mal links an:
    Das Linke ist alles andere als langweilig. Es wirkt interessant und ist dennoch nicht zu auffällig. Danach das Tile ist leider von einem alten 16x16 Tile kopiert und deswegen recht kantik. Abgerundet wirkt es aber dennoch noch nicht zu auffällig.
    Beim dritten Tile gibt es einen Stilwechsel. Die Farben sind nun eher Comic-Artig. An diesen Stil möchten wir uns nicht setzen, da wir beim YORPG eher den linken Stil nehmen werden.
    Das Tile danach ist einfarbig und daher schon recht langweilig. Es gibt Spiele die Ihren kompletten Stil auf solche Tiles setzen (Zelda - SNES, Graal). Dort sind auch alle Tiles so gehalten und daher passt es dort auch zueinander. Dadurch sieht es im Spiel dann auch gut aus.
    Das vorletzte Tile ist einfach zufällig gepixelt. Sicherlich einfach irgendwelche Filter bzw. Effekte von Zeichenprogrammen mit krass-grellen Farben genommen. Zu auffällig. Wenn man schon einen solchen Filter/Effekt nimmt, dann bitte nicht so grelle Farben!
    Das letzte Tile ist einfach farblich komplett falsch! Würdet ihr da Grass raus erkennen? Vielleicht könnte man ein Tile für Meer am Strand rausmachen aber Grass sehe ich da nicht raus. Sowas bitte versuchen zu vermeiden.

    Nun - wie schon gesagt, ich selber bin auch nicht der Beste Pixelartists - noch lange nicht, aber für endgültige Tiles, die fürs Spiel gedacht sind sollte man sich auf einen Stil einigen. Ich sage dazu Koplio oder Seiken densetsu II. Aber bis wir solche Tiles erstellen können dauert es noch etwas o.o
    Daher erstmal üben :smiling_face:

    Und ihr braucht auch keine Angst haben, dass ihr schlechte Tiles einsendet (bzw. ins Fan-Art stellt). Wir können JEDE Hilfe gebrauchen und man übt ja selber noch :smiling_face:
    Und daran sehe ich dann auch, dass dieses Tut überhaupt gelesen wird ^^

    4. Rückblick

    Wir haben bislang zwei unterschiedliche Tiles gemacht:



    Nun fällt leider oft erst später auf, dass diese Stile nicht zu einander passen. Sie passen nur indirekt zu einander.

    In einem einzigen Gebäude dürfte man beide Tiles nicht zusammen benutzen. Das Linke wirkt eher neuer und gepflegter. Er ein Schloss von einem König oder sowas. Das Rechte passt eher in ungepflegtere Gebäude oder ältere Gebäude. Wenn man das Rechte Tile jetzt ans Linke anpassen wollte, müsste man mehr Glanz reinbringen, da es dann sicherlich eher Marmor währe oder sowas. Das hat dann aber später eher was mit den Leveldesignern (für das ich sicherlich auch noch ein Tutorial schreiben werde) zu tun als mit dem erstellen der Tilesets.

    Man sollte wenigstens beachten, dass innerhalb eines Tilesets überall derselbe Stil ist.

    Wie man es jetzt allerdings genau schafft, überall möglichst denselben Stil zu benutzen, dass lernen wir noch ^^

Jetzt mitmachen!

Sie haben noch kein Benutzerkonto auf unserer Seite? Registrieren Sie sich kostenlos und nehmen Sie an unserer Community teil!

Benutzerkonto erstellen Anmelden