Der technische 3D-Künstler Banzai Games Roman Tersky sprach darüber, wie der Rahmen gezeichnet und die Materialien für die Charaktere im Handyspiel Shadow Fight 3 angeordnet werden, und enthüllte auch einige Tricks beim Einrichten der Umgebung

Shadow Fight 3 ist ein Kampf- / RPG-Spiel, das auf der Unity3d-Engine basiert. Das Projekt wurde im November 2017 auf iOS / Android veröffentlicht. Seitdem hat die Gesamtzahl der Spielinstallationen 80 Millionen überschritten. Um ein so breites Publikum zu erreichen, hat das Entwicklungsteam eine hervorragende Spieloptimierung durchgeführt. Infolgedessen arbeitet das Projekt mit 60 FPS auf vielen modernen Geräten mit durchschnittliche Leistung.

Kritiker und Spieler bemerken häufig die visuelle Komponente von Shadow Fight 3. In diesem Artikel empfehlen wir Ihnen, „unter die Haube“ des Spiels zu schauen und herauszufinden, wie wir es geschafft haben, diese Qualität zu erreichen.

Rahmen rendern

Es gibt viele Faktoren, die sich direkt auf die Leistung des Spiels und die Anzahl der Frames auswirken, die pro Sekunde gespielt werden können. Einer der wichtigsten Indikatoren für uns war die Anzahl der Draw Calls beim Rendern eines solchen Frames im Spiel. Ich schlage vor, dieses Konzept genauer zu betrachten.

Beim Rendern eines Spielrahmens für jede statische Gruppe von Objekten, die durch ein Material verbunden sind, startet Unity Draw Calls und überlagert sie. Jeder Draw Call erfordert CPU-Ressourcen. Ein wichtiger Optimierungsschritt ist daher die Reduzierung der Anzahl der Aufrufe. Unser Ziel war es, diesen Indikator auf durchschnittlich 100 Anrufe pro Spielrahmen zu minimieren.


Einzelbild-Renderprozess

Die erste Stufe des Renderns in Shadow Fight 3 besteht darin, dynamische Charakterschatten und Glow-Effekte für leuchtende Elemente auf die Rüstung und Waffen der Spieler zu zeichnen.



Beide Prozesse haben ihre eigenen Eigenschaften und sollten genauer betrachtet werden.

Schatten

Zusätzlich zur Hauptkamera, für die der Hauptrahmen gerendert wird, ist auf der Bühne ein zusätzlicher orthografischer Kameraprojektor installiert, mit dem Schatten von den Zeichen auf einer separaten Oberfläche namens ShadowReciever gezeichnet werden können. Diese Kamera folgt dem Mittelpunkt zwischen den Gegnern und jeder Frame erstellt abhängig von seiner aktuellen Position seine Projektion auf die Ebene. Das Ergebnis wird als Alpha-Textur gerendert, die die Textur durch das Rendern des vorherigen Frames im dynamischen Material des ShadowReciever-Objekts ersetzt. Durch diesen Ansatz wird vermieden, dass echte Schatten berechnet und auf alle Standortmodelle gezeichnet werden müssen, was die Gesamtleistung erheblich beeinträchtigen würde.


ShadowReciever-Bereich

In diesem Rahmen dauerte dieser Prozess 20 Draw Calls.

Glühen

Der Prozess des Erzeugens eines Glüheffekts auf die Rüstung und Waffen der Charaktere ähnelt dem Prozess des Erzeugens dynamischer Schatten. Ein BlurCube-Würfel wird um ein Modell mit leuchtenden Elementen erstellt, auf das Glow-Effekte basierend auf den im blauen Kanal der RGB-Textur des Materials dieses Objekts gespeicherten Informationen auf jeden Frame projiziert werden (d. H. Der blaue Kanal fungiert als „Maske“ für die Projektion des Glühens - mehr dazu dies unten im Abschnitt über Materialien). Anschließend wird eine Unschärfe angewendet und die Information wird als Alpha-Textur gespeichert, die die Textur durch das Ergebnis des Renderns des vorherigen Rahmens im dynamischen Material von BlurCube ersetzt.


Blurcube

In unserem Rahmen dauerte dieser Vorgang 15 Draw Calls + 2 weitere, um den Effekt zu verwischen.

Maschen zeichnen

Zuerst werden Teile der Rüstung, Waffen der Charaktere, dann Teile der Position des nahen Plans, dann der entfernte und auch der Hintergrund, der eine Ebene mit einer Textur von 1024 x 512 ist, einzeln gezeichnet. Es folgen gezeichnete Partikelsysteme, kleine Details des Nah- und Fernplans und schließlich Modelle mit Scheitelpunktanimation (mehr dazu weiter unten). Am Ende werden für 2 Anrufe die berechneten und zuvor gezeichneten Schatten und Glüheffekte (Glow) angewendet.

Benutzeroberfläche

Zusätzlich zu den oben genannten Kameras ist eine weitere am Rendern des endgültigen Rahmens beteiligt, mit dem die Benutzeroberfläche separat gezeichnet werden soll. Im Gegensatz zum Haupt- und orthografischen Kameraprojektor ist er nicht für jeden Ort eindeutig, sondern während der gesamten Spielsitzung vorhanden. Nach dem Rendern der Szene, der Charaktere und aller Effekte wird die Benutzeroberfläche gerendert und über dem Hauptrahmen platziert, und damit wird der Effekt einer sich verdunkelnden Vignette den Rändern überlagert.


Renderergebnis der Hauptkamera


Renderergebnis der UI-Kamera


Endgültiges Frame-Rendering-Ergebnis

Insgesamt erforderte das Rendern des letzten Frames des Spiels 92 Draw Calls.

Wie ist das Material der Rüstung des Charakters

Um das Material der Rüstung des Charakters zu erstellen, werden Texturen mit einer Auflösung von 512 x 512 verwendet: Diffuse (1) , RGB-Masken (2) , MatCap (3) , eine zusätzliche diffuse Karte für die Schattenform (4) sowie eine MorphMask (5) mit kleiner Rauschstruktur Erzeugen des Effekts des Übergangs des Charakters in eine Schattenform.



Und wenn bei der Diffuse-Karte alles Standard ist (dies ist nur die Textur der Rüstung selbst), werden wir uns näher mit dem Rest befassen:

RGB-Texturmasken

Da die RGB-Textur herkömmlicherweise aus drei Farbkanälen besteht, die durch Zahlen von 0 bis 1 für jedes Pixel angegeben sind, ist es zweckmäßig, damit verschiedene Daten über das Material an jedem bestimmten Punkt des UV-Scans des Objekts zu speichern.

In unserem Fall enthalten die Kanäle der RGB-Textur (Maske) Informationen für die folgenden Prozesse:

• Rot (roter Kanal) zeigt an, welche Elemente des Materials ihre Farbe ändern, wenn die Gegner in derselben Rüstung am Kampf teilnehmen (wir verwenden dieses System, damit der Spieler seinen Charakter nicht mit dem Gegner verwechselt; bestimmte Teile der Rüstung sind im roten Kanal angegeben , für den Gegner in einer alternativen Farbe neu gestrichen, die vom Künstler separat festgelegt wurde);
• Grün (der grüne Kanal) soll anzeigen, auf welche Elemente der Panzerung die MatCap-Textur angewendet wird, um den Effekt einer Metalloberfläche sowie die Stärke des Effekts dieses Effekts zu erzielen (je heller, desto stärker der metallische Glanz).
• Blau (blauer Kanal) enthält Informationen darüber, auf welche Details Glühen angewendet wird, wodurch der Effekt einer leuchtenden Oberfläche erzeugt wird.

Matcap

  MatCap-Textur Grüne Kanal-RGB-Textur 

Um für jeden Ort einen Reflexionseffekt für Metallelemente von Rüstungen und Waffen von Charakteren zu erzeugen, wird eine einzigartige MatCap-Textur mit einer Auflösung von 512 x 512 erstellt, die auf einem verarbeiteten Screenshot des Ortes mit allen Merkmalen seiner Struktur und Beleuchtung basiert.

Abhängig vom Ort, an dem der Kampf ausgetragen wird, wird die entsprechende MatCap-Textur auf das Material der Rüstung und der Waffen der Charaktere angewendet. Die Wirkung der Metalloberfläche wird auf bestimmte Abschnitte des Materials angewendet, basierend auf den Informationen im grünen Kanal der RGB-Textur des Materials. Dieser Ansatz ist billig zu verarbeiten, erzeugt jedoch den Effekt einer realistischen reflektierenden Oberfläche von Metallelementen, wobei alle Merkmale der aktuellen Arena berücksichtigt werden.

  Vor dem Auftragen von MatCap Nach dem Auftragen von MatCap 

Schattenform

Wenn der Charakter in die diffuse Schattenform wechselt, wird die Materialtextur durch eine zusätzliche ersetzt, die speziell für die Schattenform erstellt wurde.

Für einen reibungslosen Übergang von einer Textur zur anderen wird eine Rausch-Morph-Maske verwendet, mit der ein allmählicher Substitutionseffekt erzielt wird:

Standortbeleuchtung

Alle Lichter und Schatten am Standort werden in Lightmap-Texturen mit einer Auflösung von 2048 x 2048 eingebrannt, wodurch die Berechnung der Beleuchtung in Echtzeit entfällt und die Produktivität erheblich gesteigert wird.



Die einzige gerichtete Lichtquelle dient dazu, die Charaktere entsprechend der allgemeinen Atmosphäre der Arena zu beleuchten, in der der Kampf stattfindet. Bei diesem Ansatz ist die Beleuchtung der Zeichen jedoch an jedem Punkt des Standorts gleich, unabhängig davon, ob sie sich unter den Kronen von Bäumen oder unter Sonnenlicht befinden. Diese Frage könnte gelöst werden, indem dynamische Schatten aus Umgebungsobjekten berechnet und Charaktermodellen überlagert werden. Dies würde jedoch die Leistung des Spiels erheblich beeinträchtigen.

Als Alternative zu jedem Ort speichern wir einen separaten, eindeutigen Schattenkartenverlauf: Tatsächlich handelt es sich um eine Textur mit einer Auflösung von 1024 x 1, die auf einem Standort-Screenshot basiert und den Grad der Schattierung in jedem Teil davon angibt. Wenn sich ein Charakter in der Arena bewegt, wird die Farbe seiner Rüstung nach dem Anwenden von Richtungsbeleuchtung mit der Verlaufsfarbe multipliziert, die seiner aktuellen Position am Ort entspricht. In schattigen Bereichen ist die angewandte Beleuchtung daher schwächer als in offenen Bereichen.


Karte Schattenkarte


Beleuchtungszeichen im schattierten Teil des Ortes


Beleuchtungsfiguren im offenen Bereich

Als letzten Schliff wird die Randbeleuchtungstechnologie verwendet, um die Kanten des Charaktermodells hervorzuheben, die beispielsweise an einem Ort mit einem brennenden Dorf deutlich sichtbar sind. Mit dieser Technologie können Sie die Umrisse der Charaktere hervorheben, damit sie im Hintergrund der Arena gut gelesen werden können.

Dynamische Arenaeffekte

Eine wichtige Rolle bei der „Revitalisierung“ von Shadow Fight 3-Standorten spielen FX-Effekte und dynamische Objekte wie Flaggen, sich bewegende Blätter auf Bäumen, schwankendes Gras usw.

Fx

Die meisten FX-Effekte (Feuer, Regen, Sonnenstrahlen usw.) in SF3 werden nach dem Prinzip erzeugt, animiertes Material auf statische Low-Poly-Modelle anzuwenden. Es gibt jedoch Effekte, die auf einem Partikelsystem beruhen.

Dynamische Objekte

Es gibt zwei Arten von dynamischen Objekten an SF3-Standorten: physikalisch angetrieben durch Gewebesimulation und Anlegen eines Impulses zur Simulation von Windböen sowie 3D-Modelle mit Scheitelpunktanimation. Für solche Objekte wird eine geloopte Animationsspur erstellt, die die Scheitelpunkte des 3D-Modells in Bewegung setzt.

  Vertex-Laubanimation. Stoffsimulation auf Flaggen. 

Reflexionen

Locations in SF3 basieren auf dem Prinzip einer Theaterbühne. Wie das Publikum im Theater ist die Kamera im Spiel nur in eine Richtung gerichtet und ändert sie nie. Umgebungsobjekte werden ebenfalls nach dem Prinzip der Theaterkulisse ausgeführt: Sie existieren genau so viele, wie der Spieler sehen kann. An den Seiten und hinter der Kamera befindet sich nichts, und alle Modelle haben nur an den Stellen Geometrie, die in das Sichtfeld der Kamera fallen können.

Um die Probleme der Reflexion mit maximaler Leistung in Arenen mit reflektierenden Oberflächen (Marmorboden, Wasser usw.) zu lösen, wurden die zu reflektierenden Elemente dupliziert und ihre Größe entlang der Z-Achse auf einen negativen Wert gesetzt. Die doppelte Position wird so eingestellt, dass beide Objekte von der Seite wie ein Spiegelbild voneinander aussehen. Das Material reflektierender Oberflächen weist eine Transluzenz auf, deren Stärke von der Art der Oberfläche abhängt. Wenn sich das reflektierte Objekt in einem ausreichenden Abstand befindet und das Detail anstelle eines Duplikats in den Hintergrund tritt, wird die Ebene mit einer Textur installiert, die auf einem Screenshot der reflektierten Oberfläche basiert, die entlang der Z-Achse gespiegelt ist. Dieser Ansatz verbessert nicht nur die Leistung des Spiels, sondern liefert auch ein sehr realistisches Ergebnis.

  Endergebnis Ohne Geschlecht 

Fazit

Das Problem der Renderoptimierung für mobile Geräte ist heute aktueller denn je. Was Sie in diesem Artikel gesehen haben, sind die Lösungen, die wir speziell für das Shadow Fight 3-Projekt erarbeitet haben. Derzeit hat Banzai Games mit der Entwicklung von zwei neuen Spielen begonnen, in denen wir versuchen werden, die Grafik noch besser zu machen, indem wir sowohl aktuelle Entwicklungen anwenden als auch hinzufügen etwas Neues.

Das Banzai Games-Team benötigt einen Grafikentwickler. Lesen Sie hier mehr über die freie Stelle.