User Tag List

Ergebnis 1 bis 1 von 1

Thema: 22 - Texturen

  1. #1
    Administrator Avatar von BaShoR
    Registriert seit
    18.06.2010
    Ort
    Oberbayern
    Alter
    32
    Beiträge
    4.214
    Blog-Einträge
    1
    Renommee-Modifikator
    20

    22 - Texturen

    Ok, also als erstes, was sind Texturen? Texturen heißen nur die eigentlichen Bilder, für moderne Spiele werden sogenannte Materials erstellt, aber oftmals wird dazu trotzdem noch Textur gesagt. Eine Textur ist also in unserem Sprachgebrauch ein (sich gegebenenfalls wiederholendes) Bild, das auf Brushes geklebt wird, um der Umgebung ein Gesicht zu verleihen.

    Vorweg ist noch zu sagen, dass ich euch nicht beibringe, wie man Texturen erstellt, sondern nur wie man sie in das Spiel exportiert.

    Hinweis, alle wichtigen Version der höchauflösenden Textur könnt ihr von mir downloaden wenn nötig.

    Also erst einmal zu den Grundzügen einer Textur. Wie ihr einen Brush mit einer Textur belegt wisst ihr schon, jedoch ist das Bild, egal wie groß die Textur wird nie zu Ende. Die Textur für die Wand könnte z.B. so aussehen:



    Nun wirklich groß ist sie nicht, aber sie ist kachelbar. Das heißt man kann sie immer wieder nebeneinander legen und man sieht keinen Übergang, höchstens eine Wiederholung des Musters. Zur Erklärung hier ein Bild:



    In der Mitte stoßen beide aneinander, jedoch ist dort ein sanfter Übergang und man erkennt die Kante nicht. Bei genauem hinsehen erkennt man jedoch die Wiederholung des Musters, hier links und rechts eingerahmt.


    Textur für Sourcegames verwendbar machen

    Nun wollen wir unsere Textur natürlich auch im Spiel verwenden.
    Ich werde euch nicht erklären wie man eine kachelbare Textur erstellt, sondern nur wie man sie ins Spiel bringt. Ihr könnt hierfür entweder eure eigene Textur verwenden, oder meine. Wir werden die Textur mit den Standarttools von Valve importieren, diese benötigen das Targa Bildformat.

    Also erst einmal zu den Grundzügen einer Textur für die Source Engine. Die Seitenlängen der Textur müssen immer eine Potenz von 2 sein.

    Es gehen also die Werte 2, 4, 8, 16, 32, 64, 128, 256, 512, 1024, 2048, 4096.

    Die Standarttexturgröße von Valve ist 512*512 ab und zu wird jedoch auch 1024*1024 benutzt, prinzipiell muss man jedoch für jede Textur entscheiden wie hochauflösend sie sein muss. Meine Textur hat übrigens eine Auflösung von 1024*1024.

    Um die Textur nun ins Spiel zu bringen benötigen wir 2 Dateien, eine VMT und eine VTF. Die VTF Datei steht für "Valve Texture Format", in ihr werden die Bildinformationen gespeichert, die später die VMT benutzt.
    VMT steht für "Valve Material File". In ihr wird der Pfad zur Grundtextur angegeben und weitere Infos für die Engine.

    Also, um anzufangen müssen wir erst einmal die Grundlagen dafür schaffen, dass alles funktionieren kann.
    Wir erstellen dazu zwei Ordner, einmal unter
    Code:
    C:\Programme\Steam\steamapps\ACCOUNTNAME\counter-strike  source\cstrike\materials
    Und einmal unter

    Code:
    C:\Programme\Steam\steamapps\ACCOUNTNAME\sourcesdk_content\cstrike\materialsrc
    Den Ordner könnt ihr nennen wie ihr wollt, jedoch empfehle ich euch, hierfür euren Namen zu verwenden, um das Ganze übersichtlich zu halten.

    Nun noch eine letzte Sache, bevor wir anfangen können. Geht in den Ordner

    Code:
    C:\Programme\Steam\steamapps\ACCOUNTNAME\sourcesdk\bin\ep1\bin
    Und erstellt eine Verknüpfung der Vtex.exe.
    Diese speichert ihr unter

    Code:
    C:\Programme\Steam\steamapps\ACCOUNTNAME\sourcesdk_content\cstrike\materialsrc\EUERORDNER.
    Nun da wir alles vorbereitet haben, können wir anfangen. Falls ihr gerade kein passendes Bild parat habt, könnt ihr meins benutzen, hier könnt ihr es downloaden. Indem wir als erstes unser TGA Bild nach

    Code:
    C:\Programme\Steam\steamapps\ACCOUNTNAME\sourcesdk_content\cstrike\materialsrc\EUERORDNER
    kopieren. Zieht nun das Bild mit der Maus auf die Verknüpfung, dabei wird eine leere Textdatei daraus. Nun macht ihr das ganze noch einmal und fertig.
    Unter
    Code:
    C:\Programme\Steam\steamapps\ACCOUNTNAME\counter-strike  source\cstrike\materials\EUERORDNER
    wurde nun ein VTF-File erstellt.
    Nun müssen wir noch das VMT-File erstellen.
    Geht dazu nun in den Ordner
    Code:
    C:\Programme\Steam\steamapps\ACCOUNTNAME\counter-strike  source\cstrike\materials\EUERORDNER
    Erstellt nun eine neues Textfile und benennt es um in TEXTURNAME.vmt.

    (Falls ihr keine Dateiendungen seht, so könnt ihr dies ändern indem ihr unter
    Start>>Systemsteuerung>>Ordneroptionen>>Ansicht das Häkchen bei „Bekannte Dateitypen ausblenden“ wegmacht.)

    Nun doppelklickt ihr eure VMT.

    (Falls sich ein Fenster öffnet mit "Die folgende Datei kann nicht geöffnet werden" macht ein Häkchen bei "Programm aus einer Liste auswählen" und klickt auf Ok.
    Jetzt öffnet sich ein Fenster, mit einer Liste wo ihr den Editor auswählt und ein Häkchen macht, bei "Dateityp immer mit ausgewähltem Programm öffnen."
    Nun könnt ihr eure VMT ganz normal mit dem Editor öffnen.)

    In die VMT tragt ihr folgendes ein:
    Code:
    "lightmappedgeneric" { 
          "$basetexture" "EUERORDNER/TEXTURNAME" 
          "$surfaceprop" "brick" 
    }
    "lightmappedgeneric"
    Gibt den Shader an, in diesem Fall, das das Ganze mit einer Lightmap belegt werden soll, dies ist der Standartshader für Brushes.

    "$basetexture"

    Gibt den Pfad zu eurer Textur und deren Namen an.

    "$surfaceprop"

    Gibt die Materialeigenschaften an, dies ist wichtig damit bei Beschuss die richtigen Effekte zu sehen sind.

    Eine ausführliche Erklärung mit allen Surfacepropertys findet ihr in der Valve Developer Community

    Nun habt ihr eure erste Textur fertiggestellt, und könnt sie im Editor verwenden. Bei mir im Spiel sieht das ganze so aus:




    Normalmap erstellen

    Nun da wir unsere Basistextur fertig haben, wollen wir sie natürlich auch noch verschönern. Dafür gibt es verschiedene Methoden, die man verwenden kann, ich fange jetzt hier einfach mal mit der Normalmap an, da sie am besten bei dieser Textur wirkt.



    Wie ihr seht, sind die Farben komplett anders als bei der Mauer, zu der sie gehört.
    Das liegt daran, dass in der Normalmap die Informationen gespeichert werden, wie schräg die Textur an jeder Stelle ist. Welche Farbe für welche Richtung steht kann man ziemlich gut ablesen indem man einfach die Normalmap mit der Originaltextur vergleicht.
    Nun wollen wir die Normalmap ins Spiel importieren, falls ihr zu eurer eigenen Textur keine Normalmap habt, so könnt ihr die Normalmap für die Textur von oben hier downloaden.

    Wir fangen also an, indem wir unsere Normalmap umbenennen. Ich würde sie der Übersichtlichkeit halber "TEXTURNAME_normal" nennen.
    Wichtig ist, der Zusatz "_normal" den Anhand dieses Zusatzes erkennt der Compiler das es eine Normalmap ist und wendet automatisch die richtigen Einstellungen an. Der Compiler ist übrigens der selbe wie oben.

    Nun sollte eure Normalmap im selben Ordner sein, wo auch eure Textur liegt. Geht nun in diesen Ordner und öffnet die VMT.
    Diese ergänzt ihr um folgendes:

    "$bumpmap" "EUERORDNER/TEXTURNAME_normal"
    Der Eintrag "$bumpmap" gibt genauso wie auch bei "$basetexture" den Pfad zur Bilddatei an. Und lasst euch nicht davon verwirren, dass es dort Bumpmap heißt, eine Bumpmap ist etwas anderes als eine Normalmap, aber wir haben hier eine Normalmap eingefügt.

    Bei mir sieht das ganze danach so aus:
    Code:
    "lightmappedgeneric" { 
          "$basetexture" "EUERORDNER/TEXTURNAME" 
          "$bumpmap" "EUERORDNER/TEXTURNAME_normal" 
          "$surfaceprop" "brick" 
    }
    Fertig.

    Im Spiel sieht das Ganze dann so aus:



    Wie man hoffentlich im Vergleich erkennen kann sieht die untere Textur plastischer aus, als die obere, dadurch dass die Kanten der Steine abgedunkelt bzw. aufgehellt wurden. Der Effekt ist hier noch sehr dezent, besonders offensichtlich wird er jedoch wenn man die Taschenlampe anschaltet.


    Specularmap erstellen

    Jetzt wollen wir uns an Spiegelungen wagen. Dafür brauchen wir eine Specularmap, oder kurz auch Spec.
    Wir fangen wieder mit einer Textur an.



    Diese Fassadentextur wollen wir importieren. Damit die Fenster und wirklich nur die Fenster spiegeln müssen wir der Engine irgendwo sagen, welcher Bereich spiegeln soll, und welcher nicht. Und genau hier kommt die "Spec" ins Spiel. Die Spec für diese Textur sieht so aus:



    Eigentlich relativ einfach. Weiß heißt volle Spiegelung und Schwarz heißt keine Spiegelung. Mit den Zwischenstufen kann man das Ganze natürlich auch etwas genauer regeln.
    Wir fangen also wie immer an, indem wir unsere Textur konvertieren. Falls ihr keine eigene habt könnt ihr natürlich auch meine benutzen, ihr findet sie hier.
    Beim kompilieren müsst ihr nichts beachten, ich rate euch trotzdem der Übersichtlichkeit halber "_spec" an den Namen eurer Spec anzuhängen

    Nun müssen wir wieder in der VMT etwas anpassen, zu den Standartangaben fehlen jetzt noch 3 Stück:

    "$envmapmask" "SPECNAME"

    Gibt genauso wie "basetexture" oder "bumpmap" den Pfad zu einer Textur an, in diesem Fall zur Spec. Falls die Textur generell an jeder Stelle gleichstark spiegeln soll, so kann man die Spec auch weglassen und muss nur die beiden folgenden Einträge hinzufügen.

    "$envmap" "env_cubemap"
    Gibt an, welche Spiegelungen benutzt werden sollen, da Spiegelungen meißtens vorberechnet werden. Sollte nicht verändert werden.

    "$envmapint" "[x.x.x]"
    Gibt an, wie stark gespiegelt wird, das kann zwar auch über die Spec geregelt werden, jedoch kann man so am schnellsten Änderungen vornehmen, wenn die Spiegelungen zu stark oder schwach sind. Muss vorhanden sein.

    Nachdem alles eingefügt wurde, sieht meine Vmt so aus:

    Code:
    "lightmappedgeneric" { 
          "$basetexture" "EUERORDNER/TEXTURNAME" 
          "$envmapmask" "EUERORDNER/TEXTURNAME_spec" 
          "$envmap" "env_cubemap" 
          "$envmaptint" "[ 0.4 0.4 0.4 ]" 
          "$surfaceprop" "concrete" 
    }
    Nun könnt ihr das ganze Testen, bei mir sieht es so aus:



    Falls bei euch die Fenster unnatürlich spiegeln, schaut euch das entsprechende Tutorial noch einmal an.

    Alphakanäle

    Nun wollen wir etwas komplett anderes in Spiel bringen. Diesmal keine Feste Mauer sondern ein Gitter mit Lücken, das Prinzip ist das gleich jedoch ist hier natürlich auch etwas zu beachten. Fangen wir erst einmal mit der Grundtextur an. Die sieht so aus:



    Wie ihr seht sind die Lücken zwischen den Metallstäben nicht durchsichtig. Das liegt daran, dass die Engine hierfür ein extra Bild braucht, das angibt, wie durchsichtig die Textur an welcher Stelle ist. Dieses Bild kann jedoch im Alphachannel der Textur untergebracht werden. Der Alphachannel für diese Textur sieht so aus:



    Die Funktion wird denke ich mal deutlich. Weiß heißt undurchsichtig und Schwarz komplett durchsichtig. Die Zwischentöne, also Grau, geben an wie stark durchsichtig dieser Pixel ist.

    Wie genau erstelle ich einen Alphakanal in Photoshop/Gimp?

    Spoiler:

    Anleitung von M3rl1n:

    Wir gehen in unseren Kanälechannel (unten rechts neben den Ebenenchannel) und erstellen einen neuen Kanal :



    Sollte euer Alphakanal nicht weiß sein , färbt ihn weiß

    Jetzt blenden wir unseren Alphakanal aus und unsere RGB Kanäle wieder ein Nun sollte unsere Grafik weder normal sichtbar sein.

    Jetzt nehmen wir unser Zauberstab Werkzeug und wählen alles aus was später Transparent sein soll.

    Bei mir ist als nun alles schwarze Ausgewählt :


    Jetzt wechseln wir auf unseren Alphakanal (den RGB Kanal ausblenden) gucken nach ob wir Schwarz / Weiß als Grundfarben haben (ganz wichtig!) und löschen alles schwarze durch betätigen der Entf-Taste.

    Jetzt solltet ihr das Muster in eurem Alphakanal haben.

    Jetzt könnt ihr den RGB Kanal wieder einblenden und eure Grafik als 32-Bit .tga Datei abspeichern!


    Nun wollen wir die Textur mal ins Spiel bringen.

    Fangt also an, indem ihr eure Textur wieder ganz normal konvertiert. Wie immer könnt ihr hier meine Textur downloaden Im Gegensatz zur Normalmap muss hierbei nichts besonderes beachtet werden. Wenn ihr sie konvertiert habt, dann müssen wir die Vmt schreiben. Die Grundzüge sind wieder dieselben, jedoch muss diesmal noch dazu:

    "$translucent" 1
    Der Befehlt gibt an, das im Alphachannel der Textur ein Bild ist, anhand dessen die Engine dann feststellen kann, welche Stellen durchsichtig sind, gemeint ist das Schwarzweiß Bild von oben. Falls die Textur für ein Model bestimmt ist, so muss anstelle von "translucent" "alphatest" verwendet werden.

    Optional könnt ihr noch weitere Parameter hinzufügen, interessant könnten diese hier sein für euch:

    "$nocull" 1
    Wenn dieser Parameter vorhanden ist, kann man die Textur von beiden Seiten sehen.

    "%compilepassbullets" 1
    Brushes die mit dieser Textur belegt sind blocken nun keine Kugeln mehr.


    Nach alldem sieht meine Vmt so aus:
    Code:
    "lightmappedgeneric" { 
          "$basetexture" "EUERORDNER/TEXTURNAME"
          "$translucent" 1
          "%compilepassbullets" 1
          "$surfaceprop" "metalgrate" 
          "$nocull" 1 
    }
    Nun ist die Textur fertig und ihr könnt sie euch im Spiel angucken, bei mir sieht das Ganze dann so aus:



    Kombination von Normalmap und Specularmap

    Eine letzte Sache noch und dann seid ihr fertig und könnt die wichtigsten Features des Textursystems der Source Engine. Bis jetzt haben wir jeden Effekt nur einzeln benutzt, und nichts kombiniert, aber genau das, wollen wir jetzt ändern.
    Das Problem dabei ist, das Source ein Problem damit hat, wenn eine Textur aus mehr als 2 Bildern besteht. Wie kann man also zum Beispiel eine Normal und eine Spec Map gleichzeitig benutzen? Wir haben so etwas ähnliches schon gemacht bei der Transparenz. Und auch diesmal können wir den Alphachannel benutzen.
    Man kann den Alphachannel der Textur und der Normalmap benutzen, jedoch muss man die Specmap invertieren, wenn man sie in den Alphachannel der Textur packt.
    Darum nehmen wir einfach den der Normalmap.
    Ich habe schon eine kleine Textur vorbereitet:



    Die oben 3 Bilder sind die Textur, die unteren beiden sind Normal und Specmap.
    Das Ganze soll einmal eine Fliesentextur in 3 Farben werden. Die Fugen der Fliesen sind zwar weiß, jedoch fällt das nicht mehr auf, da sie dank der Normalmap schattiert werden, und dank der Specmap nicht spiegeln. Im Spiel sehen sie also dunkler aus.
    Falls ihr eine eigene Textur benutzen wollt könnt ihr das natürlich wieder gerne machen, wenn nicht könnt ihr meine hier downloaden, die Specmap ist in dem Alphachannel der Normalmap.
    Also wieder Texturen konvertieren, beim Konvertieren darauf achten, dass bei der Normalmap „_normal“ angehängt ist, sonst wird sie falsch kompiliert.

    Schreibt euch nun eine Vmt, die eine Normalmap und eine Specmap hat, nur das "$envmapmask" lasst ihr weg.

    Eine Sache müsst ihr noch hinzufügen:
    "$normalmapalphaenvmapmask" 1
    Dieser Parameter gibt an, dass sich die Spec im Alphachannel der Normalmap befindet. Eine Pfadangabe ist nicht nötig, da wir ja schon den Pfad zur Normalmap angegeben haben.

    Nachdem ich fertig bin, sieht meine Vmt wie folgt aus, ich habe die weiße Fliesentextur gewählt:

    Code:
    "lightmappedgeneric" { 
          "$basetexture" "EUERORDNER/TEXTURNAME" 
          "$bumpmap" "EUERORDNER/TEXTURNAME_normal" 
          "$normalmapalphaenvmapmask" 1 
          "$envmap" "env_cubemap" 
          "$envmaptint" "[ 0.1 0.1 0.1 ]" 
          "$surfaceprop" "tile" 
    }
    Im Spiel sieht es bei mir nun so aus:




    So, nun seit ihr fertig. Ihr könnt alles was wichtig ist, hier noch ein paar Extras:

    Nützliche Commands:
    "%keywords" "keyword1,keyword2,..."
    Hinzufügen von Schlüsselwörtern, die beim Suchen berücksichtigt werden.



    Tutorial von Niklas "Nikl" Möller. Vielen Dank dafür!
    Urform der Texturen von www.mayang.com/textures.
    Geändert von BaShoR (04.05.2011 um 21:54:48 Uhr)

Ähnliche Themen

  1. Eigene Texturen werde im Game nicht angezeigt
    Von BlackFire im Forum 2D Design
    Antworten: 17
    Letzter Beitrag: 15.02.2012, 00:01:26
  2. Fehler bei skalieren von Texturen
    Von nikl im Forum 2D Design
    Antworten: 0
    Letzter Beitrag: 04.07.2010, 21:00:34
  3. 10 | Texturen auf Brushes richtig anpassen
    Von DaEngineer im Forum Quake 3 Engine Tutorials
    Antworten: 0
    Letzter Beitrag: 26.06.2010, 23:41:17
  4. 3 | Die Common Texturen
    Von DaEngineer im Forum Quake 3 Engine Tutorials
    Antworten: 0
    Letzter Beitrag: 26.06.2010, 22:18:18

Stichworte

Berechtigungen

  • Neue Themen erstellen: Nein
  • Themen beantworten: Nein
  • Anhänge hochladen: Nein
  • Beiträge bearbeiten: Nein
  •  
[email protected]