Dynamische Netzzeichnung in Unreal Engine 4

Ursprünglicher Autor: Tommy Tran
  • Übersetzung

In diesem Unreal Engine 4-Tutorial lernen Sie, wie Sie Farben auf einem beliebigen Netz zeichnen.

Durch das Zeichnen von Gitternetzen können Spieler Objekte im Spiel einfärben. Beispiele für das Zeichnen auf dem Netz: 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 Mesh eröffnet den 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 das Zeichnen von Gitternetzen für viele andere Effekte verwenden. Sie können zum Beispiel mit Farbdosen auf Objekte malen, Wunden auf Charaktere zeichnen oder Spieler sogar ihr eigenes Gesicht zeichnen lassen!

In diesem Tutorial lernen Sie, wie man auf ein Skelettnetz zeichnet. 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 Szenenerfassung
  • 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 Eckpunkten 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 hingegen 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- Tutorial-Serie 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 . Entpacke sie, gehe zu MeshPainterStarter und öffne MeshPainter.uproject . Klicke auf Play , um den Charakter zu sehen, den wir färben werden.


Wie in den Tutorials zu Schnee und Gras ist auch für diese Methode eine Szenenaufnahme erforderlich. Um Zeit zu sparen, habe ich bereits eine Blaupause für die Aufnahme der Szene erstellt. Wenn Sie mehr über die Erfassungsoptionen erfahren möchten, lesen Sie unser Tutorial zum Erstellen von Spuren im Schnee .

Lassen Sie uns zunächst herausfinden, wie Sie auf ein Netz zeichnen können.

Mesh-Zeichnung


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 Erzeugen einer Maske direkt auf einem Rendering-Ziel (unter Verwendung 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, wird die zweidimensionale sphärische Maske nicht um Ecken gebogen und berücksichtigt nicht die Geometrie. Um die richtige Maske zu erzeugen, muss eine sphärische Maske die Positionen in der Welt abtasten . Wie erhalte ich Zugriff auf Positionen in der Welt, wenn ich den Knoten "Material zum Rendern von Zielen zeichnen" verwende?

Wenn Sie die Methoden des Zeichnens mit Maschen untersucht haben, haben Sie möglicherweise ein Video von Ryan Brook zum Zeichnen von Charakterschaden mit Renderzielen gefunden (die in meinem Tutorial verwendete Methode basiert auf seiner Methode). Im Video generiert er erfolgreich dreidimensionale sphärische Masken und sammelt sie 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 von Weltpositionen durchführen (die wir weiter unten erläutern werden).

Der zweite Schritt ist das Codieren von Positionen in der Welt als Renderziel. Dies kann erreicht werden, indem die Farbe des Sweep-Materials auf Absolute Weltposition eingestellt wird und der Sweep mithilfe der Szenenerfassung erfasst wird. So würde das Rendering-Ziel aussehen:


Hinweis: Beim Rendern ändert sich die Farbe des Ziels, da der Charakter animiert ist. Dies führt zu einem ständigen Positionswechsel in der Welt.

Der dritte Schritt besteht darin, kugelförmige Masken zu erstellen. Nachdem wir auf die Netzpositionen in der Welt zugegriffen haben, können wir sie auf einer sphärischen Maske abtasten und dann eine sphärische Maske direkt auf dem zweiten Renderziel zeichnen.

Der letzte Schritt ist das Anwenden einer Maske auf das Material des Charakters, 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, benötigt er Folgendes:

  • Zwei Renderziel-Renderings. Das erste fängt das unentwickelte Netz ein 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 Schauspieler, auf den Sie zeichnen möchten, benötigen Sie ein separates Renderziel.

Die in diesem Lernprogramm beschriebene Methode lehnt das zweite Rendern und die Rendern-Zielposition in der Welt ab. Dies ist möglich durch die Kombination von Entwicklungs- und Kugelmasken zu einem Material (Entwicklungsmaterial). Danach wird der Sweep mit dem additiven Composite-Modus für die Akkumulation von sphärischen Masken erfasst.

Es ist erwähnenswert, dass beide Methoden am besten funktionieren, wenn das Netz keine überlappenden UV-Strahlen aufweist. Wenn sich UV-Strahlen überlappen, haben die Pixel einen gemeinsamen UV-Raum und daher die gleichen Informationen über die Masken. Beispielsweise können beide Hände eines Charakters im selben Raum mit UV-Licht eingesetzt werden. Wenn eine Maske auf eine Hand angewendet wird, wird sie auch auf die andere 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: Nicht beleuchtet. Aufgrund dessen erfasst die Szenenerfassung keine Beleuchtungsinformationen.
  • Beidseitig: Aktiviert. Manchmal können erweiterte Flächen in die andere Richtung aussehen (dies hängt davon ab, wie der UV-Scan des Netzes durchgeführt wurde). Der zweiseitige Parameter stellt sicher, dass alle invertierten Flächen angezeigt werden.
  • Verwendung \ Wird mit Skelettgitter verwendet: Aktiviert. Wenn dieser Parameter aktiviert ist, werden die Shader kompiliert, die erforderlich sind, damit das Material auf Skelettnetzen funktioniert.


Als nächstes erweitern wir das Netz. Erstellen Sie dazu das folgende Diagramm. Beachten Sie, dass ich die Parameter CaptureSize und UnwrapLocation bereits im MPC_Global- Asset erstellt habe .


Wir führen also 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 sphärischen Maske und Schwarz für Pixel außerhalb der sphärischen Maske zurück. Machen Sie sich keine Sorgen, wenn Sie die Werte für die Parameter festlegen, da dies in Blunts durchgeführt wird.

Es ist wichtig , um den Knoten zu setzen Absoluten Weltpositionswert Absolute Welt Position (ohne Versätze für Shader Material A) . Dies ist notwendig, da sich die Position des Pixels in der Welt durch das Abrollen ändert. Durch den Ausschluss von Material Shader Offsets erhalten wir vor der Bereitstellung eine Startposition in der Welt.

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 ihn zu erweitern.

Charakterentwicklung


In diesem Lernprogramm übernimmt die Blaupausenerfassung die Bereitstellung und das Greifen. 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 gesetzt ist .


Als nächstes benötigen wir eine Funktion, um einen Sweep und ein Capture durchzuführen. Erstellen Sie eine neue Funktion mit dem Namen PaintActor . Dann legen Sie folgende Eingaben an:

  • ActorToPaint: Der Typ muss Actor sein . Dies ist ein Schauspieler, für den wir einen Sweep und Capture durchführen werden.
  • Trefferzonen: Art des Vector . Dies ist der Mittelpunkt der sphärischen Maske.
  • BrushRadius: Typ Float . Der Radius der sphärischen Maske in Einheiten der Welt.


Obwohl diese Zeichenmethode mit jedem Schauspieler funktionieren kann, wird nur geprüft, ob der resultierende Schauspieler von der Character- Klasse geerbt wird . Um den Code zu vereinfachen, speichern wir die Skeleton-Mesh-Komponente 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 macht:

  1. Erstens behalten wir das Ausgangsmaterial des Netzes bei, damit wir es später erneut anwenden können. Dann bringen wir das Kehrmaterial auf.
  2. Diese Linie übergibt dem Sweep-Material den Schnittpunkt und den Pinselradius zum Aufbringen einer sphärischen Maske

Um den Sweep zu testen, müssen wir zuerst die Linie des Spielers nachzeichnen, um den Schnittpunkt zu erhalten.

Kreuzungspunkt erhalten


Klicken Sie auf Kompilieren und kehren Sie zum Haupteditor zurück. Schließen Sie dann BP_Player . Öffnen Sie die Funktion schießen und fügen Sie die ausgewählten Knoten. Setzen Sie für dieses Tutorial den Pinselradius auf 10 .


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 zum Zeitpunkt der Kreuzung eine Sweep-Erfassung durchführen.

Nachdem wir das Netz ausgepackt haben, müssen wir ein Sweep-Capture durchführen.

Sweep-Capture


Für den Anfang wäre es schön, ein nicht beleuchtetes schwarzes Flugzeug 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 Plane- Komponente 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 Lernprogramm verwenden wir eine Größe von 500 × 500 Einheiten zum Erweitern und Erfassen , sodass die Hintergrundebene nicht kleiner als diese Größen sein sollte. Stellen Sie den Skalenwert(5,0, 5,0, 1,0) .


Da die Position des Flugzeugs und die Position des Sweeps übereinstimmen, wäre es schön, das Flugzeug nach unten zu verschieben, um Z-Konflikte zu vermeiden. Stellen Sie dazu den Location- Wert (0.0, 0.0, -1.0) ein .


Als nächstes müssen wir ein Capture durchführen. Kehren Sie zur PaintActor- Funktion zurück und fügen Sie die markierten Knoten hinzu:


Wir erfassen also das erweiterte Netz, woraufhin das Ausgangsmaterial des Netzes erneut angewendet wird.

In dem resultierenden Schema überschreibt die Szenenerfassung den Inhalt des Renderziels. Damit sich die sphärischen Masken ansammeln, müssen wir die Aufnahme 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 Zeichenmaterial verwenden.

Maskengebrauch


Gehen Sie zu Characters \ Mannequin \ Materials und öffnen Sie M_Mannequin . Fügen Sie dann die markierten Knoten hinzu. Setzen Sie das Texture Sample auf RT_Capture .


Bei diesem Schema wird die rote Farbe angezeigt, 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 Abbildung, die verwendet werden kann. Immerhin gibt es Würfel, Zylinder, Zapfen und vieles mehr! In den folgenden zwei Beiträgen erfahren Sie mehr über diese Formen und ihre Verwendung:


Wenn Sie eine andere Methode zum Zeichnen auf einem Netz erlernen möchten, lesen Sie den Artikel von Tom Luman zum Rendern von Wunden auf Zeichen . Anstatt sphärische Masken anzusammeln, wird eine feste Anzahl von sphärischen Masken verwendet. Der Vorteil dieser Methode ist die Kostengünstigkeit (abhängig von der Anzahl der sphärischen Masken) und die relativ einfache Animierbarkeit der Masken. Der Nachteil dieser Methode ist die strikte Beschränkung der Anzahl der sphärischen Masken.

Jetzt auch beliebt: