Share
In diesem Tutorial zeige ich Ihnen, wie Sie flach schattierte 3D-Grafiken für Ihr Unity-Spiel erstellen und erklären, warum Sie dies überhaupt tun möchten.
Heutzutage gibt es eine Fülle von 3D-Tools und -Maschinen, mit denen jeder 3D-Spiele erstellen kann. Die Herausforderungen der 3D-Kunst sind jedoch gewaltig und erfordern oft eine Menge Zeit, Mühe und Fachwissen, die der Sologamedev oder Hobbyist nicht hat. Low-Polygon-Modelle in Kombination mit flachen Schattierungen bringen den Stil der frühen Neunzigerjahre mit Techniken zurück, die jeder erlernen kann. Und es ist nicht nur ein nostalgischer Rückschlag. Flat-Shading lässt sich leicht mit modernen Techniken wie Umgebungsokklusionskarten kombinieren, um Ihrem Spiel einen auffälligen, avantgardistischen Look zu verleihen.
Laden Sie das Unity-Beispielprojekt hier herunter
In diesem Lernprogramm wird vorausgesetzt, dass Sie bereits wissen, wie 3D-Modellierung ausgeführt wird, oder dass Sie kostenlose 3D-Modelle im Internet finden können. Ich werde Mustermodelle aus der Luft holen; Im Internet gibt es tonnenweise Anleitungen, wie Sie mit der 3D-Modellierung beginnen können. Wenn Sie gerade erst anfangen, kann ich Wings 3D und SketchUp wärmstens empfehlen. Beide haben im Vergleich zu professionellen Modellierungs-Apps extrem zugängliche Schnittstellen und werden in Formate exportiert, die von Blender und Unity verwendet werden können.
Sie haben sich also entschlossen, Ihre Hände mit Unity schmutzig zu machen und ein komplettes 3D-Spiel zu erstellen. Vielleicht haben Sie noch keine Kenntnisse in der Spielekunst, oder Sie haben Kunst für 2D-Spiele geschaffen. In beiden Fällen werden Sie schnell lernen, dass 3D-Spiele sehr viele Fähigkeiten erfordern, um sie zu erstellen. Sie müssen nicht nur lernen, 3D-Modelle zu erstellen, sondern auch diese Modelle auspacken, um eine Textur auf der Oberfläche des Modells richtig zu zeichnen. Natürlich müssen Sie auch die Textur mühsam erstellen.
Was wäre, wenn Sie das Modell nur erstellen könnten, aber nach einigen zusätzlichen Schritten fertig und fertig für Ihr Spiel sind, um es zu färben und zu schattieren? Sie könnten am Ende mit so etwas enden:
Oder dieses:
Sicher, der Look ist spartanisch und lo-fi - aber das ist der Punkt! Egal, ob Sie auf Nostalgie der frühen 90er Jahre abzielen, einen modernen abstrakten Look haben oder einfach nur Zeit sparen möchten, um Assets für ein Jam-Spiel zu erstellen, Flat Shading ist eine ausgezeichnete Wahl für den Einsteiger und den 3D-Experten.
Wenn Sie gerade erst mit der Spielekunst beginnen, können Sie sich dank der Einfachheit des Workflows auf die Grundlagen konzentrieren: Lernen Sie, wie Sie ein 3D-Modell mit einer schönen Silhouette und Form erstellen und es mit einem kleinen Satz von handverlesenen Farben einfärben. Wenn Sie sich auf diese Grundlagen konzentrieren, lernen Sie die grundlegenden Fähigkeiten der Kunst ohne Ablenkungen.
Jedes 3D-Modell besteht aus einer Reihe von Scheitelpunkten, die die Form dieses Modells bestimmen. Für jeden Knoten gibt es auch einen Vektor namens a normal-Stellen Sie sich dies als eine kleine Nadel vor, die aus dem Scheitelpunkt herausragt.
Die Rendering-Engine verwendet die Normalen für jeden Scheitelpunkt und vergleicht deren Richtung mit der Richtung der einfallenden Lichtquelle (n) und der Richtung, in die die Kamera zeigt, um die auf diesen Scheitelpunkt aufzubringende Lichtmenge zu bestimmen.
Der Renderer blendet langsam die Lichtmenge von einem Scheitelpunkt zum nächsten aus, wodurch einem 3D-Grundmodell ein "kissenhaftes" Aussehen verliehen wird. Wenn Sie keine Textur anwenden (und oft, auch wenn Sie es tun), sieht dies auf allem, was keine kurvige, "kissenartige" Oberfläche ist, wirklich schrecklich aus:
Bei einer flachen Schattierung erhält die gesamte Oberfläche eines Polygons eine gleichmäßige Lichtmenge, die sich aus einem normalen Abstand vom Mittelpunkt des Polygons ergibt:
Moderne Modellierungsanwendungen verwenden "harte Kanten" oder "Glättungsgruppen", um die Scheitelpunktnormalen des Modells an das Polygon anzupassen, an das sie angrenzt. Dadurch wird es einheitlich und flach schattiert. Ein erfahrener 3D-Künstler wird diese verwenden, um scharfe Kanten scharf und ebene Flächen flach aussehen zu lassen. Wir sind jedoch daran interessiert, dass das gesamte Modell scharf und flach aussieht. Zum Glück macht es Unity sehr einfach.
Wenn Sie mit Ihrem Modellierungswerkzeug hinreichend vertraut sind, können Sie Ihr Modell flach schattieren lassen, indem Sie alle Kanten auf "hart" setzen. In Unity können Sie jedoch einfach festlegen, dass Unity harte Kanten automatisch erstellt:
Klicken Sie im. Auf Ihr Modell Projekt Fenster, um seine aufzurufen Importeinstellungen in dem Inspektor Panel.
Gehe zum Normalen & Tangenten Abschnitt und in der Normale Dropdown, wählen Sie Berechnung.
Stellen Sie das ein Glättungswinkel zu 0 und klicken Sie auf Sich bewerben.
Unity verwandelt jede Kante, die einen schärferen Winkel als diese hat, in eine harte Kante. Wir möchten, dass all unsere Kanten hart sind und setzen es natürlich auf 0 gibt diesen Effekt.
Experimentieren Sie mit verschiedenen Glättungswinkeln, je nach der Geometrie Ihres Modells. Es ist eine erstaunlich einfache Möglichkeit, ein völlig anderes Aussehen zu erzielen.
Jetzt, da wir unser Modell flach schattiert haben, müssen wir ihm etwas Farbe geben! Es gibt viele Möglichkeiten, dies zu tun, aber einige sind besser als andere:
Ich bevorzuge die letzte Methode, die ich Ihnen unten beschreiben werde. Normalerweise müssen Sie nach dem Erstellen eines 3D-Modells dieses mühsam auspacken, um es an eine handgefertigte Textur anzupassen. Da wir jedoch nur an einer einzigen Farbe für jedes Polygon interessiert sind, spielt es keine Rolle, wie Ihr UV-Entpackungsauftrag aussieht. Es könnte sich nur um ein zufälliges Durcheinander von Scheitelpunkten handeln, solange es über dem richtigen Wert liegt Farbe!
Der erste Schritt beim Färben ist das Erstellen der Textur. Nehmen wir für unser Beispiel an, wir wollen vier Farben:
Laden Sie anschließend Ihr fertiges 3D-Modell in den gewünschten Modellierer und laden Sie Ihre Textur. Wählen Sie alle Flächen des Modells aus, für die Sie eine bestimmte Farbe haben möchten, und wickeln Sie diese automatisch aus. Das Ergebnis wird wahrscheinlich ein verwirrendes Durcheinander von Polygonen sein.
Wie gesagt, das spielt keine Rolle. Bewegen Sie alle Polygone übereinander und skalieren Sie sie in einen kleinen Fleck, der in eines der Quadrate Ihrer Palettenstruktur passt. Dann ziehen Sie sie auf die Farbe Ihrer Wahl.
Schau dir dein Modell an. Die strukturierten Abschnitte haben jetzt die richtige Farbe! Wiederholen Sie diesen Vorgang für die restlichen Flächen Ihres Modells. Wählen Sie sie erneut aus und entfernen Sie sie entsprechend der gewünschten Farbe. Wenn Sie einen Fehler machen, ist dies keine große Sache. Wählen Sie einfach die Flächen erneut aus, wickeln Sie sie ggf. erneut aus und platzieren Sie sie an der richtigen Stelle in der Textur. Dasselbe kann nicht für "echtes" UV-Auspacken gesagt werden!
Voilà! Sie haben ein farbiges, flach schattiertes Modell, das Sie in Ihr Spiel importieren können.
Falls Sie sich gefragt haben, gibt es einige Gründe, die anderen beiden Methoden zu vermeiden:
Bei dieser Methode werden viele Materialien erstellt, die Sie in Unity nachverfolgen müssen. Außerdem wird Unity Ihre Modelle nicht dynamisch stapeln und für jedes Material einen vollständigen Zeichnungsaufruf verwenden. Dies ist häufig der kleinste Engpass bei moderner Grafikhardware.
Einfach ausgedrückt: Sie erhalten eine schreckliche Leistung, wenn Sie diese Methode ausgiebig verwenden.
Dies funktioniert eigentlich ziemlich gut, und Sie möchten dies möglicherweise abhängig von Ihren speziellen Anforderungen oder Ihrem künstlerischen Arbeitsablauf verwenden. Sie werden jedoch sofort etwas bemerken: Wenn Sie Ihr Modell importieren und einen einfachen Diffus-Shader verwenden, scheinen Ihre Scheitelpunktfarben nicht zu erscheinen!
Dies liegt daran, dass die grundlegenden Shader sie ignorieren. Sie müssen spezielle Shader verwenden, die tatsächlich die Vertex-Farbdaten verwenden. Diese können leicht gefunden werden, aber es wird kompliziert, wenn Sie auch andere Rendereffekte von anderen Shader verwenden möchten: Diese Shader verwenden häufig auch keine Scheitelpunktfarben, und Sie müssen den Shader selbst ändern.
Wenn Sie noch nicht wissen, wie man Shader schreibt, kann dies zu einer Menge Zeit und Mühe führen, die Sie lieber für den Rest Ihres Spiels aufwenden würden. Es könnte auch nur ich sein, aber ich finde es viel einfacher, mehrere Farben gleichzeitig mit einer Textur zu ändern, anstatt sie manuell in einem Modellierer oder im Spiel mit einem Skript festzulegen.
Nachdem Sie nun eine Texturpalette und eine grundlegende Technik entwickelt haben, können Sie die restlichen Modelle für Ihr Spiel erstellen. Wie Sie vielleicht vermuten, können Sie Ihrer Palette einfach weitere Farben hinzufügen und dieselbe Textur für das gesamte Spiel verwenden.
Dies hat einige große Leistungsvorteile: Wenn Sie dasselbe Material für Ihr gesamtes Spiel verwenden, zeichnet Unity normalerweise alle Ihre Objekte effizienter, indem Sie sie "stapeln". Wie bereits erwähnt, sind "Draw Calls" ein wesentlicher Engpass in der Computergrafik, und es ist eine gute Idee, sie auf ein Minimum zu beschränken.
Unity versucht automatisch, Ihre Szene mit möglichst wenigen Draw-Aufrufen zu zeichnen, wenn Sie ein einziges Material für alles verwenden, obwohl jedes Modell auf dieselbe Weise skaliert werden muss und weniger als etwa 300 Scheitelpunkte hat. Es wird Sie darüber informieren, wie gut das gemacht wird Statistiken Fenster:
Spitze: Wenn Sie mehr über das Stapeln erfahren möchten, lesen Sie die Unity-Dokumente zu diesem Thema. Dies sollte für alle, die an der Leistung ihres Spiels interessiert sind, gelesen werden!
Sie haben eine Reihe von Modellen, die flach schattiert und farbig sind, und alles scheint an Ort und Stelle, aber was ist, wenn Sie die Farben ändern möchten, während das Spiel gespielt wird?
Angenommen, Sie haben ein Skript, das Ihr Flugzeug erscheinen lässt, aber danach möchten Sie es blau einfärben, wenn es freundlich ist, oder rot, wenn es ein Feind ist. Sie können sicherlich nur separate Paletten und separate Materialien erstellen, aber Sie verlieren dadurch den Leistungsschub, wenn Sie diese beiden Flugzeugtypen stapeln.
Das ist keine große Sache, wenn nur wenige von ihnen gleichzeitig in Sicht sind. Nehmen Sie jedoch das Beispiel eines prozedural erzeugten Terrains, das aus Tonnen und Tonnen von Kacheln oder Würfeln besteht, die aus vielen verschiedenen Geländetypen bestehen, wie zum Beispiel ein bestimmtes beliebtes Sandkastenspiel. Dies würde eine Menge Unentschieden bedeuten - aber keine Angst, es gibt eine Möglichkeit, nur ein Material zu verwenden!
Erinnern Sie sich noch daran, wie Sie Ihr Modell gefärbt haben, indem Sie seine UV-Koordinaten in farbige Kästchen legen? Mit Unity können Sie die Scheitelpunkte Ihres Modells im laufenden Betrieb ändern, einschließlich der UV-Koordinaten. Für jeden Gelände-Typ können Sie die UV-Koordinaten einfach per Skript in das richtige Farbfeld verschieben.
Erstellen Sie ein neues C # -Skript in Unity mit dem Namen PaletteColorizer und fügen Sie diesen Code ein:
mit UnityEngine; using System.Collections; public class PaletteColorizer: MonoBehaviour public int colorsPerRow = 4; public int colorIndex = 0; public bool overrideUVs = false; void Awake () if (! aktiviert) return; SetUVsToColor (colorIndex); void Update () public void SetUVsToColor (int colorIndex) if (overrideUVs) SetUVs (gameObject, GetColorOffset (colorIndex)); else TranslateUVs (gameObject, GetColorOffset (colorIndex)); Vector2 GetColorOffset (int colorIndex) Vector2 offset = new Vector2 (); float row = Mathf.Floor (colorIndex / colorsPerRow); Float-Schritt = 1.0f / colorsPerRow; offset.x = (colorIndex - (row * colorsPerRow)) * step; offset.y = (1.0f - (row / colorsPerRow)); Rückversatz; static public void TranslateUVs (GameObject obj, Offset von Vector2) var meshFilter = obj.GetComponent (); Mesh mesh = meshFilter.mesh; var newUVs = new Vector2 [mesh.uv.Length]; für (int i = 0; i < mesh.uv.Length; i++) newUVs[i] = new Vector2(mesh.uv[i].x + offset.x, mesh.uv[i].y + offset.y); mesh.uv = newUVs; static public void SetUVs(GameObject obj, Vector2 offset) var meshFilter = obj.GetComponent(); Mesh mesh = meshFilter.mesh; var newUVs = new Vector2[mesh.uv.Length]; for(int i=0; i < mesh.uv.Length; i++) newUVs[i] = new Vector2(offset.x + 0.01f, offset.y - 0.01f); mesh.uv = newUVs;
Um dieses Skript zu verwenden, fügen Sie es einfach als Spielkomponente zu einem Spielobjekt mit einem Material hinzu, das eine Palettentextur verwendet, legen Sie die Anzahl der Farben pro Zeile fest und legen Sie den Farbindex fest (beginnend mit 0 in der oberen linken Ecke und zählen Sie bis) rechts und unten.
Wenn die UV-Koordinaten Ihres Modells nicht so eingestellt sind, dass sie in die Palettenboxen passen (wie im Fall des Quaders "Wasser" um die Felder), überprüfen Sie die Option UVs überschreiben Ankreuzfeld; Wie Sie oben sehen können, schreibt das Skript vollständig neue Koordinaten, anstatt vorhandene zu verschieben.
Beachten Sie bei dieser Methode, dass Unity beim Ändern eines Netzes in Ruhe ein neues Netz im Speicher erstellt. Wenn Sie dies besonders häufig bei einer großen Anzahl von Netzen durchführen, stoßen Sie möglicherweise auf Speicherprobleme, und Sie möchten eine Möglichkeit zum Zwischenspeichern und Freigeben von Netzen suchen, die auf dieselbe Weise eingefärbt wurden. Bei einer vernünftigen Anzahl von Low-Poly-Modellen müssen Sie sich jedoch wahrscheinlich nie darum kümmern.
Flache Schattierungen müssen nicht unbedingt immer mit einheitlichen Farbblöcken gepaart werden. Eine Möglichkeit, subtile Details und einen realistischen "staubigen" Look für jede Oberfläche hinzuzufügen, besteht darin, der Umgebung Okklusion hinzuzufügen. Unity Pro bietet Möglichkeiten, umgebende Okklusion als Nachbearbeitungsfilter hinzuzufügen, aber ich möchte Ihnen einen Weg zeigen, wie Sie diesen zusätzlichen Schliff hinzufügen können, ohne die Pro-Version und ohne spezielle Shader.
Sie müssen lediglich Ihr Modell auspacken und den umgebenden Okklusionseffekt auf eine Textur "backen". Das bedeutet, dass Sie tatsächlich etwas Zeit und Mühe aufwenden müssen, um Ihr Modell richtig auszupacken. Nach diesem Schritt müssen Sie jedoch ein paar Klicks und ein wenig Fummeln in Ihrem Malprogramm ausführen, um Ihrem Modell ein etwas realistischeres, avantgardistisches Aussehen zu verleihen.
Zuerst sollten Sie Blender mit einer leeren Szene starten: Drücken Sie EIN Um alle Objekte in der Startszene auszuwählen, drücken Sie Löschen, dann drücken D bestätigen. Sie möchten keine Lampen oder Kameras, da diese als leere Junk-Objekte in Unity importiert werden.
Dann importieren Sie Ihr Modell hinein. (Datei> Importieren> Wellenfront (.obj)). Beginnen wir mit diesem Beispiel mit einem Felsblock.
Öffnen Sie den UV-Editor und erstellen Sie eine Textur, die ungefähr die gewünschte Detailmenge enthält. Ich bin ziemlich geizig, also bleibe ich bei 256x256px für alles über die Größe des Spielers (ein Stein oder Baum) und gehe nur bei sehr großen Objekten (wie dem Berg, auf dem sie laufen) größer..
Packen Sie jetzt Ihr Modell aus. Es gibt viele Möglichkeiten, dies zu tun, die viel detaillierter behandelt werden, als ich mir je erhoffen könnte. Konsultieren Sie daher die Blender-Dokumentation oder andere Online-Tutorials, wie Sie Ihr Modell richtig und effizient auspacken.
Jetzt, da Sie ein unverpacktes Modell haben, können Sie die umgebende Okklusion auf Ihre Textur aufbacken. Blender rendert die umgebende Okklusion direkt auf Ihre Textur und beachtet dabei die UV-Koordinaten, die Sie gerade ausgepackt haben. Folgen Sie einfach diesen Schritten:
Jetzt haben Sie die gebackene AO-Textur und ein Modell mit den richtigen UV-Koordinaten, um es verwenden zu können. Speichern Sie die Textur in einer Bilddatei und exportieren Sie das Modell in Blender in ein Format, das von Unity verwendet werden kann (z. B. .fbx).
Abhängig von Ihren Anforderungen können Sie die Textur so verwenden, wie sie ist. Erstellen Sie einfach ein neues diffuses Material, das Ihre neue gebackene AO-Textur verwendet, und setzen Sie die Farbe auf etwas, das schön aussieht.
Möglicherweise möchten Sie jedoch Modelle mit mehreren Farben, z. B. eine Baumstruktur. Sie müssen nur einige zusätzliche Schritte ausführen. Folgen Sie den Anweisungen oben, um eine gebackene AO-Textur für Ihr Baummodell zu erstellen. Dieses Mal sollten Sie jedoch nachverfolgen, wo Sie Ihre UV-Koordinaten eingeben, da Sie diese Stellen manuell in die Textur einfärben müssen.
Es wäre ratsam, Ihre UV-Inseln nach Farben zu gruppieren. In diesem Beispiel lege ich die Stammteile oben in die Textur und die Blattteile unten.
Öffnen Sie Ihre gebackene AO-Textur mit einem Malprogramm Ihrer Wahl (alles, was Ebenen unterstützt, wie z. B. GIMP). Erstellen Sie eine neue Ebene und platzieren Sie sie über Ihrer AO-Ebene. Verwenden Sie die AO-Ebene als Richtlinie, um die neue Ebene gemäß den Farben zu färben, die Sie im Modell sehen möchten.
Verwenden Sie die Lasso Mit dem Werkzeug oder einem anderen Auswahlwerkzeug Ihrer Wahl können Sie die Teile der Textur auswählen, die Sie einfärben möchten, und diese mit der richtigen Farbe füllen.
Sie haben jetzt die Farben eingerichtet, also ist es Zeit für die letzte Aufgabe: Mischen des AOs über den Farben. Bewegen Sie die AO-Ebene über die farbige Ebene und ändern Sie den Mischmodus auf Multiplizieren.
Legen Sie die Deckkraft der Ebene so fest, wie sie schön aussieht. Verwenden Sie Ihr eigenes Urteilsvermögen, notieren Sie sich jedoch diesen Prozentsatz, da Sie die gleiche Mischmethode und -menge verwenden möchten, um einen einheitlichen Effekt auf alle Ihre Texturen zu erzielen.
Speichern Sie diese Textur in einer Datei und importieren Sie sie neben dem Baummodell in Unity. Erstellen Sie ein Material wie für den Felsblock, und verwenden Sie dabei die soeben erstellte Textur.
Das wars so ziemlich! Verwenden Sie diese Technik für alle Ihre Modelle, um der gesamten Szene ein polierteres, fühlbareres Aussehen zu verleihen, als dies bei einer einfachen Flat-Shading-Funktion möglich wäre.
Möglicherweise stellen Sie fest, dass Ihre Materialien nur einfache diffuse Shader verwenden. Eine der schönsten Sachen bei der Verwendung von gebackenem AO, das direkt über der Farbtextur gemischt wird, besteht darin, dass Sie diese Textur mit jedem anderen Shader verwenden können, der eine diffuse Textur hat… ohne dass ein AO-spezifischer Code erforderlich ist!
Jetzt haben Sie eine praktische Toolbox mit Grafiktechniken, mit denen Sie ein komplettes, flach schattiertes Spiel erstellen können. Mit genügend Übung können Sie beeindruckende Bilder erstellen, die schnell produziert werden und effizient rendern.
Accentsconagua