In diesem Unreal Engine 4-Tutorial erfahren Sie, wie Sie Farben auf jede Art von Netz zeichnen.
Mithilfe der Netzzeichnung können Spieler Objekte im Spiel einfärben. Beispiele für das Zeichnen von Maschen: Graffiti (Goop) in
Super Mario Sunshine , Gele in
Portal 2 und Tinte in
Splatoon . Das Zeichnen kann als Gameplay-Element oder einfach als Grafikdesign verwendet werden. Wie dem auch sei, das Zeichnen mit Maschen eröffnet Gameplay-Designern und Künstlern neue Möglichkeiten.
Obwohl dieser Effekt in den oben aufgeführten Beispielen fast gleichermaßen verwendet wird, können Sie die Netzzeichnung für viele andere Effekte verwenden. Zum Beispiel können Sie Objekte mit Farbdosen bemalen, Wunden auf Charaktere zeichnen oder sogar Spieler ihr eigenes Gesicht selbst zeichnen lassen!
In diesem Tutorial lernen Sie, wie Sie auf ein Skelettnetz zeichnen. Dazu werden wir Folgendes tun:
- Erweitern Sie das Netz in seine UV-Form
- Verwenden Sie den Schnittpunkt der Linienverfolgung, um eine sphärische Netzmaske zu erstellen
- Rendern Sie das erweiterte Netz und die sphärische Maske im Renderziel mithilfe der Szenenaufnahme
- Verwenden Sie eine Maske, um Texturen im Zeichenmaterial zu mischen.
Beachten Sie, dass es in diesem Lernprogramm
nicht um das Zeichnen von Scheitelpunkten geht. Das Zeichnen von Scheitelpunkten hängt von der Auflösung des Netzes ab und kann während des Spiels nicht geändert werden. Die in diesem Tutorial verwendete Methode funktioniert dagegen unabhängig von der Auflösung des Netzes und kann während des Spiels verwendet werden.
Hinweis: Es versteht sich, dass Sie die Grundlagen der Arbeit mit Unreal Engine bereits kennen. Wenn Sie Unreal Engine noch nicht kennen, lesen Sie unsere 10-teilige Unreal Engine- Lernserie für Anfänger .
Hinweis: Dieses Tutorial ist der vierte Teil einer Reihe von Tutorials zur Verwendung von Renderzielen in Unreal Engine:
An die Arbeit gehen
Laden Sie zunächst die
Materialien für dieses Tutorial herunter. Entpacken Sie sie, gehen Sie zu
MeshPainterStarter und öffnen Sie
MeshPainter.uproject . Klicken Sie auf
Wiedergabe , um den Charakter zu sehen, den wir ausmalen werden.
Wie in den Tutorials zu Schnee und Gras benötigt auch diese Methode eine Szenenaufnahme. Um Zeit zu sparen, habe ich bereits einen Entwurf für die Erfassung der Szene erstellt. Wenn Sie mehr über Erfassungsoptionen erfahren möchten, lesen Sie unser Tutorial zum
Erstellen von Fußabdrücken im Schnee .
Lassen Sie uns zunächst herausfinden, wie Sie auf ein Netz zeichnen können.
Netzzeichnung
In den meisten Fällen haben die Netze, mit denen Sie arbeiten müssen, bereits einen UV-Scan. Daher wäre es logisch, eine Maske mit dem Renderziel zu erstellen und sie dann auf das Netz anzuwenden. Das Generieren einer Maske direkt auf einem Renderziel (mithilfe von Material zum Rendern des Ziels zeichnen) führt jedoch normalerweise zu Brüchen in UV-Schalen.
Hier ist ein Beispiel für einen UV-Würfel-Scan und eine sphärische Maskentextur:
Und hier ist die Maske, die auf den Würfel angewendet wird:
Wie Sie sehen können, biegt sich die zweidimensionale sphärische Maske nicht um Ecken und berücksichtigt keine Geometrie. Um die richtige Maske zu erzeugen, muss eine sphärische Maske
Positionen in der Welt abtasten . Wie erhalte ich Zugriff auf Positionen in der Welt, wenn ich den Knoten Material zum Rendern von Ziel zeichnen verwende?
Wenn Sie die Methoden zum Zeichnen mit Maschen studiert haben, haben Sie möglicherweise ein Video von Ryan Brooke zum
Zeichnen von Charakterschäden mithilfe von Renderzielen gefunden (die in meinem Tutorial verwendete Methode basiert auf seiner Methode). Im Video generiert er erfolgreich dreidimensionale sphärische Masken und akkumuliert diese im Renderziel. Dies gelang ihm, weil er ein Rendering-Ziel zum Speichern von Netzpositionen in der Welt erstellt, das dann mit einer sphärischen Maske abgetastet werden kann. Schauen wir uns diese Methode genauer an.
Ryan-Methode
Diese Methode besteht aus vier Schritten. Der erste Schritt besteht darin, das gewünschte Netz „bereitzustellen“. Sie müssen nur alle Scheitelpunkte verschieben, um das Netz in seine UV-Form zu bringen. Hier sind zum Beispiel die UV-Koordinaten des Charakters:
Und hier ist der Charakter nach dem Einsatz bei Unreal:
Sie können das Netz erweitern, indem Sie einfache Berechnungen der Verschiebungen der Positionen der Welt durchführen (die wir unten diskutieren werden).
Der zweite Schritt besteht darin, Weltpositionen im Renderziel zu codieren. Dies kann erreicht werden, indem die Farbe des Sweep-Materials auf
Absolute World Position eingestellt wird und die Szenenaufnahme zum Erfassen des Sweeps verwendet wird. So würde das Rendering-Ziel aussehen:
Hinweis: Das Renderziel ändert die Farbe, da der Charakter animiert ist. Dies führt zu einem ständigen Positionswechsel in der Welt.
Der dritte Schritt besteht darin, sphärische Masken zu erstellen. Nachdem wir auf die Netzpositionen in der Welt zugegriffen haben, können wir sie auf eine sphärische Maske abtasten und dann eine sphärische Maske direkt auf das zweite Renderziel zeichnen.
Der letzte Schritt besteht darin, eine Maske auf das Material des Charakters anzuwenden, um Farben, Texturen oder Materialien zu mischen. Hier ist die Visualisierung der dritten und vierten Stufe:
Schauen wir uns nun meine vorgeschlagene Methode an.
Vorgeschlagene Methode
Obwohl Ryans Methode funktioniert, braucht er Folgendes:
- Zwei Rendering-Ziel-Renderings. Das erste erfasst das unentwickelte Netz und das zweite sammelt kugelförmige Masken.
- Ein Renderziel zum Speichern von Positionen in der Welt
- Renderziel zum Sammeln von sphärischen Masken. Für jeden Akteur, auf den Sie zeichnen möchten, benötigen Sie ein separates Renderziel.
Die in diesem Tutorial beschriebene Methode lehnt das zweite Rendern und Rendern der Zielposition in der Welt ab. Dies ist möglich, indem die Sweep- und Kugelmasken zu einem Material (Sweep-Material) kombiniert werden. Danach wird der Sweep im additiven Composite-Modus zur Akkumulation von Kugelmasken erfasst.
Es ist erwähnenswert, dass beide Methoden am besten funktionieren, wenn das Netz keine überlappenden UV-Strahlen aufweist. Wenn sich UV überlappen, haben die Pixel einen gemeinsamen UV-Raum und daher die gleichen Informationen über die Masken. Zum Beispiel können beide Hände eines Charakters im selben Raum UV-eingesetzt werden. Wenn eine Maske auf eine Hand angewendet wird, wird sie auch auf die andere Hand angewendet.
Nachdem wir uns mit der Methode vertraut gemacht haben, erstellen wir zunächst ein Sweep-Material.
Erstellen Sie flaches Material
Gehen Sie zum Ordner
Materialien und erstellen Sie ein neues Material.
Nennen Sie es
M_Unwrap und öffnen Sie es dann.
Ändern Sie die folgenden Optionen:
- Schattierungsmodell: Unbeleuchtet. Dank dieser Funktion werden bei der Szenenaufnahme keine Beleuchtungsinformationen erfasst.
- Zweiseitig: Aktiviert. Manchmal können erweiterte Flächen wegschauen (dies hängt davon ab, wie der UV-Scan des Netzes durchgeführt wurde). Der Parameter Two Sided stellt sicher, dass alle invertierten Flächen angezeigt werden.
- Verwendung \ Wird mit Skelettnetz verwendet: Aktiviert. Wenn dieser Parameter aktiviert ist, werden die Shader kompiliert, die erforderlich sind, damit das Material an Skelettnetzen arbeiten kann.
Als nächstes erweitern wir das Netz. Erstellen Sie dazu das folgende Diagramm. Bitte beachten Sie, dass ich die
Parameter CaptureSize und
UnwrapLocation bereits im
Asset MPC_Global erstellt habe.
Daher führen wir einen UV-Scan des Netzes an der angegebenen Stelle und mit der angegebenen Größe durch. Beachten Sie, dass Sie den
Koordinatenindex des TextureCoordinate- Knotens ändern müssen, wenn sich der eindeutige UV-Scan Ihres Netzes in einem separaten Kanal befindet. Wenn sich die eindeutigen UV-Koordinaten beispielsweise in Kanal 1 befinden, muss der
Koordinatenindex auf
1 gesetzt werden .
Die nächste Stufe ist die Schaffung einer sphärischen Maske. Dazu benötigen wir zwei Parameter: den Schnittpunkt und den Radius der Kugel. Erstellen Sie die ausgewählten Knoten:
Dieses Schema gibt Weiß für Pixel innerhalb der Kugelmaske und Schwarz für Pixel außerhalb der Kugelmaske zurück. Machen Sie sich keine Sorgen über das Einstellen von Werten für die Parameter, da wir dies in Blunts tun.
Es ist wichtig, den Knoten
Absolute World Position auf
Absolute World Position (ohne Material Shader Offsets) zu setzen . Dies ist notwendig, da sich die Position des Pixels in der Welt aufgrund des Abrollens ändert. Durch den Ausschluss von Material Shader-Offsets erhalten wir vor dem Einsatz eine weltweite Ausgangsposition.
Und das ist alles, was Sie für das Kehrmaterial benötigen. Klicken Sie auf
Übernehmen und schließen Sie das Material. Als nächstes müssen wir das Material auf den Charakter anwenden, um es zu erweitern.
Charakterbereitstellung
In diesem Tutorial übernimmt die Blaupause des Greifers die Bereitstellung und greift. Zunächst benötigen wir eine dynamische Instanz des Sweep-Materials. Gehen Sie zum Ordner
Blueprints und öffnen Sie
BP_Capture .
Fügen Sie dann die markierten Knoten zum
Event BeginPlay hinzu .
Stellen Sie sicher, dass
Parent auf
M_Unwrap eingestellt ist .
Als nächstes benötigen wir eine Funktion, um einen Sweep und eine Erfassung durchzuführen. Erstellen Sie eine neue Funktion namens
PaintActor . Erstellen Sie dann die folgenden Eingaben:
- ActorToPaint: Der Typ muss den Wert Actor haben . Dies ist ein Schauspieler, für den wir einen Sweep durchführen und einfangen werden.
- HitLocation: Geben Sie Vector ein . Dies ist der Mittelpunkt der sphärischen Maske.
- BrushRadius: Geben Sie Float ein . Der Radius der Kugelmaske in Einheiten der Welt.
Obwohl diese Zeichenmethode mit jedem Akteur funktionieren kann, prüfen wir nur, ob der resultierende Akteur von der
Zeichenklasse geerbt wurde. Um den Code zu vereinfachen, speichern wir die Skelettnetzkomponente in einer Variablen, da wir mehrmals darauf verweisen müssen. Dazu fügen wir die ausgewählten Knoten hinzu:
Jetzt ist es Zeit, eine sphärische Maske zu entwickeln und anzuwenden. Fügen Sie dazu ausgewählte Knoten am Ende der Knotenkette hinzu:
Hier ist, was jede Zeile tut:
- Zunächst bewahren wir das Netzquellmaterial auf, damit wir es später erneut anwenden können. Dann tragen wir das Kehrmaterial auf.
- Diese Linie führt durch das Scanmaterial den Schnittpunkt und den Pinselradius zum Aufbringen einer sphärischen Maske
Um den Sweep zu testen, müssen wir zuerst die Linie vom Spieler verfolgen, um den Schnittpunkt zu erhalten.
Schnittpunkt erhalten
Klicken Sie auf
Kompilieren und kehren Sie zum
Haupteditor zurück. Schließen
Sie dann
BP_Player . Öffnen Sie die Aufnahmefunktion und fügen Sie die markierten Knoten hinzu. Stellen Sie für dieses Tutorial den
Pinselradius auf
10 ein .
Klicken Sie auf
Kompilieren und schließen Sie
BP_Player . Klicken Sie auf
Wiedergabe und dann mit der
linken Maustaste auf den Charakter, um einen Drilldown durchzuführen und eine sphärische Maske anzuwenden.
Wenn Sie nicht verstehen, warum sich die Maske weiter bewegt, liegt dies daran, dass sich die Teile relativ zur sphärischen Maske bewegen. Dies ist jedoch kein Problem, da wir nur im Moment der Kreuzung eine Sweep-Erfassung durchführen.
Nachdem wir das Netz ausgepackt haben, müssen wir eine Sweep-Erfassung durchführen.
Sweep Capture
Für den Anfang wäre es schön, eine unbeleuchtete schwarze Ebene hinter dem erweiterten Netz hinzuzufügen. Dadurch werden die Nähte am Rand der UV-Schalen vermieden. Öffnen Sie
BP_Capture und fügen Sie eine
Flugzeugkomponente mit dem Namen
BackgroundPlane hinzu . Um Zeit zu sparen, habe ich bereits schwarzes Material erstellt.
Wählen Sie für das Material
M_Background aus .
In diesem Tutorial verwenden wir
500 × 500 Einheiten zum Entfalten und Erfassen, daher sollte die Hintergrundebene nicht kleiner als diese Größen sein. Stellen Sie
Scale auf (5.0, 5.0, 1.0) ein .
Da die Position der Ebene und die Position des Sweeps gleich sind, wäre es schön, die Ebene nach unten zu verschieben, um Z-Konflikte zu vermeiden. Stellen Sie dazu den
Standortwert ein (0.0, 0.0, -1.0) .
Als nächstes müssen wir eine Erfassung durchführen.
Kehren Sie zur
PaintActor- Funktion zurück und fügen Sie die markierten Knoten hinzu:
Wir werden also das erweiterte Netz erfassen, wonach das Ausgangsmaterial des Netzes erneut angewendet wird.
In dem resultierenden Schema überschreibt die Szenenaufnahme den Inhalt des Renderziels. Damit sich die sphärischen Masken ansammeln können, müssen wir die Erfassung der Szene zum vorherigen Inhalt
hinzufügen .
Wählen Sie dazu die
SceneCapture- Komponente aus und setzen Sie den
Scene Capture \ Composite-Modus auf
Additiv .
Klicken Sie auf
Kompilieren und schließen Sie die Blaupause. Jetzt müssen wir das Renderziel im Charaktermaterial verwenden.
Maskengebrauch
Gehen Sie zu
Charaktere \ Schaufensterpuppe \ Materialien und öffnen Sie
M_Mannequin . Fügen Sie dann die markierten Knoten hinzu. Setzen Sie das
Texturbeispiel auf
RT_Capture .
Dieses Schema zeigt die rote Farbe an, wenn die Maske weiß ist, und die orange Farbe, wenn die Maske schwarz ist. Wir können jedoch Texturen oder Materialschichten mischen.
Klicken Sie auf
Übernehmen und schließen Sie das Material. Klicken Sie auf
Wiedergabe und
klicken Sie mit der
linken Maustaste auf den Charakter, um mit dem Zeichnen zu beginnen.
Wohin als nächstes?
Das fertige Projekt kann hier heruntergeladen
werden .
Obwohl wir in diesem Tutorial sphärische Masken verwendet haben, ist dies nicht die einzige Figur, die verwendet werden kann. Immerhin gibt es Würfel, Zylinder, Zapfen und vieles mehr! Um mehr über diese Formen und ihre Verwendung zu erfahren, lesen Sie die folgenden zwei Beiträge:
Wenn Sie eine andere Möglichkeit zum Zeichnen auf einem Netz kennenlernen möchten, lesen Sie den Artikel von Tom Lohman über das
Rendern von Wunden an Charakteren . Anstatt sphärische Masken anzusammeln, wird eine feste Anzahl von sphärischen Masken verwendet. Der Vorteil dieser Methode ist ihre Billigkeit (die von der Anzahl der sphärischen Masken abhängt) und die relative Einfachheit der Animation der Masken. Der Nachteil dieser Methode ist die strikte Beschränkung der Anzahl der Kugelmasken.