Veröffentlicht am 16-08-2019

Erstellen des Agenten Ein Kunststil in Unity

Infiltriere Ruby La Rouges geheimes Versteck in Agent A: Ein Rätsel in Verkleidung.

Marketing ist einer der wichtigsten Aspekte bei der Entwicklung eines erfolgreichen Indie-Spiels. Oft ist ein Element, das als Marketinginstrument übersehen wird, einfach Ihre Spielkunst! Ein einzigartiger und wunderschöner Kunststil wird Ihnen nicht nur dabei helfen, Verkäufe im Geschäft zu erzielen, sondern auch dabei helfen, die Aufmerksamkeit der Presse und vor allem der Redakteure auf sich zu ziehen, die entscheiden, ob Sie Ihr Spiel veröffentlichen oder nicht. In diesem Artikel erfahren Sie Schritt für Schritt, wie Sie mit Unity den Kunststil von Agent A auf Mobilgeräte übertragen und hoffentlich einige hilfreiche Einblicke für angehende Entwickler gewinnen können.

Mein Name ist Mark White, ich bin Art Director bei Yak & Co und zusammen mit Jason Rawlings (Lead Programmer) haben wir "Agent A: Ein Puzzle in Verkleidung" entwickelt, ein Puzzlespiel zum Thema Spionage für iOS, Android und ... shoePhones !?

Agent A wurde mit einem von Apples Best of für 2015, Editors Choice in 30 Ländern und Best New Game in über 100 Ländern ausgezeichnet. Es wurde in 43 Ländern zum Puzzlespiel- und Abenteuerspiel Nummer 1 gekürt und als PAX Aus Indie Showcase-Gewinner ausgezeichnet!

Der hinterhältige Ruby La Rouge.

Warum die Einheit?

Zunächst einmal, warum haben wir uns für die Unity-Engine entschieden, mit der wir unser Spiel entwickeln? Sowohl Jason als auch ich haben Unity für viele Jahre in unseren vorherigen Jobs verwendet und als Künstler finde ich es persönlich sehr einfach, mit ihm zu arbeiten. Das größte Plus für unser kleines Indie-Unternehmen ist, dass wir einfach einmal entwickeln und auf vielen Plattformen bereitstellen können. Wenn Sie zu Beginn des Projekts klug sind und Ihre Layouts so planen, dass sie reaktionsschnell funktionieren, ist der Wechsel von einer Plattform zur anderen noch einfacher.

Mit Agent A reagiert nicht nur die Benutzeroberfläche, sondern auch die Ansicht der 3D-Kamera. Wir haben jede Szene so gestaltet, dass sie zwischen 16: 9 und 4: 3 skaliert, ohne dass wichtige Trefferzonen abgeschnitten werden müssen, sodass unser Spiel auf allen Bildschirmgrößen von kleinen Handys bis hin zu großen Tablets und Fernsehgeräten gespielt werden kann.

Zu diesem Zweck habe ich in den ursprünglichen Szenenentwürfen Anleitungen verwendet, um sicherzustellen, dass wichtige Objekte wie Sammlerstücke oder Portale nicht aus unserer Sicherheitszone entfernt werden.

Objekte außerhalb der sicheren Zone werden abgeschnitten, wenn die Szene auf verschiedenen Geräten skaliert.

Die sichere Zone ist der Bereich innerhalb der Ränder, der bei den verschiedenen Bildschirmgrößen niemals abgeschnitten wird. Es passt sich immer dem Bildschirm an. Auf einem breiten Gerät wie einem Samsung Galaxy S6 würden wir skalieren, bis die Sicherheitszone oben und unten auf dem Bildschirm auftaucht, und dann anhalten. Dies würde etwas mehr von der Szene an den Seiten zeigen. Bei einem größeren Gerät wie einem iPad wird es zu den Seiten hin skaliert und angehalten, sodass oben und unten auf dem Bildschirm etwas mehr zu sehen ist.

Durch Skalieren der Szene kann der Spieler problemlos alles sehen, was im Spiel wichtig ist, auch wenn sie auf einem sehr kleinen Bildschirm spielen.

Wo soll ich anfangen?

Um unseren visuellen Stil als Marketinginstrument nutzen zu können, war uns klar, dass viel Zeit in die Erstellung der Kunst investiert werden musste, um sie hervorzuheben. Daher war die Optimierung des Prozesses für unsere Zeitpläne sehr wichtig.

Obwohl unser Spiel in 3D ist, werden alle Grafiken zunächst in 2D erstellt. Der Grund dafür ist, den Iterationsprozess zu beschleunigen. Es dauert viel länger, ein Objekt zu modellieren, als es einfach zu skizzieren und mit allen anderen Elementen zu planen (Texturen, Beleuchtung, Trefferzonen, Portale, Sammlerstücke, Rätsel und das gesamte Erscheinungsbild). Für jede Szene war viel Iteration erforderlich .

Der erste Schritt.

Der erste Schritt für jede Szene bestand darin, nach Referenzbildern zu suchen. Dieser Schritt ist sehr praktisch, um Ihnen Ideen für eine erste Richtung zu geben, die Sie einschlagen können. Oft ist es der schwierigste Teil des Designs, nur einen Anfang zu machen. Als von den 60ern inspiriertes Spionagespiel wollte ich, dass alle Szenen dieses Connery-Bond-Ära-Feeling einfangen. Ich habe Bilder gesammelt (oder auf Pinterest gepinnt), die als Referenz für jede Szene aus Architektur, Film oder 50 / 60s-Illustration verwendet werden können, um Moodboards zu erstellen.

Alle Referenzbilder auf Pinterest.

Doodlin

Nachdem die Referenz zusammengetragen wurde, skizzierte ich ein paar grobe Layoutoptionen für Miniaturansichten auf Papier. Nachdem ich eines der zu verfolgenden Layouts ausgewählt hatte, verwendete ich Wacom und Photoshop, um sie etwas detaillierter zu skizzieren.

Kleiner Tipp.

Kürzlich haben wir ein iPad pro + Pencil gekauft. Kurz gesagt, wenn Sie Ihren Kunstprozess beschleunigen möchten, ist dieses Gerät unglaublich. Wenn Sie es mit Procreate, einer App für digitales Malen, kombinieren, werden Sie feststellen, dass das Zeichnen von Ideen viel schneller und sogar unterhaltsamer wird, da es so genau ist, schneller gelöscht oder geändert werden kann als Papier, eine hervorragende Benutzeroberfläche bietet und das Gerät auch tragbar ist Sie sind also nicht an Ihren Schreibtisch gebunden.

http://procreate.si/

Farbe / Beleuchtung verspottet.

Nachdem ich mit der anfänglichen Layoutskizze zufrieden war, entwarf ich die Gesamtfarben und -beleuchtung der Szene so, dass ich sie bei der Erstellung des endgültigen Modells im Auge hatte. Die Idee, auf diese Weise zu arbeiten, kam mir aus dem Designprozess von Pixars und der Erstellung von Farbskripten für ihre Filme, um die Stimmung für jede Aufnahme festzuhalten. http://pixar-animation.weebly.com/colour-script.html

Ich mache diese Entwürfe alle mit Vektorformen in Photoshop. Durch die Verwendung von Vektorformen kann ich die Farben sehr schnell optimieren. Durch die Verwendung von Photoshop anstelle von Illustrator kann ich die hervorragenden Funktionen zur Ebenenanpassung wie "Farbbalance" verwenden, um das Gesamtfarbschema zu optimieren.

Letztes 2D-Modell.

Das endgültige Modell ist eine Kombination meiner Skizzen und Farbmodelle mit zusätzlichen Details, Texturen und der endgültigen Beleuchtung. In dieser Phase ist es nicht ungewöhnlich, dass sich das Gesamtlayout ändert, wenn ich mehr Details hinzufüge. Um den Agent A-Stil zu erreichen, verwende ich viele Winkel. Das ist mir in vielen alten Bond-Filmset-Designs aufgefallen. Winkel können durch die Geometrie des Raumes und durch das Licht erreicht werden, das durch die Szene schneidet. Wie Sie hier sehen können, habe ich einige verschiedene Konfigurationen ausprobiert, bevor ich mich auf ein endgültiges Layout für die Foyerszene festgelegt habe.

Von 2D-Kunst zu 3D-Modellen.

Neben der Benutzeroberfläche und einigen Animationen ist Agent A vollständig 3D. Hierfür gibt es mehrere Gründe, der Hauptgrund ist jedoch die Effizienz, sowohl hinsichtlich der Leistung als auch der Größe der App-Datei. Wenn Sie sich für 3D entscheiden, reicht jede Szene von ca. 30 MB 2D-Kunst bis zu einer FBX mit ca. 500 KB plus minimalen Texturen (die ich unten erläutere). In 3D können wir auch Nahaufnahmen vergrößern, anstatt diese als separate Szenen zu gestalten und die Dateigröße zu erhöhen.

Schon in der Skizzenphase erstellen wir sehr einfache Grauboxmodelle für jede Szene, mit denen Jason dann anfangen kann, sich zu entwickeln. So können Kunst und Entwicklung gleichzeitig produziert werden.

Hier ist ein Beispiel für ein frühes graues Boxmodell im Vergleich zu einem endgültigen Modell:

Das endgültige 2D-Modell wird als Referenz zum Modellieren der 3D-Szene verwendet. In diesem Stadium ist zu beachten, dass nicht alles von 2D nach 3D repliziert werden kann. Daher ist es unser Ziel, das Modell so nah wie möglich an das 2D-Modell heranzuführen.

Unser 3D-Paket der Wahl ist Blender. Es ist ziemlich leistungsstark, wenn man bedenkt, dass es kostenlos ist und die meisten unserer Bedürfnisse abdeckt. Während des Modellierens in Blender richten wir eine Lichtquelle ein, um einen ungefähren Überblick über die gesamte Szenenbeleuchtung zu erhalten. Dies erleichtert das Bewegen und Einrichten des Erscheinungsbilds in Unity.

Beleuchten, Färben und Strukturieren - das Technische ist das Wesentliche.

Wenn Sie sich gefragt haben, warum das endgültige Modell einige seltsame Farben in Blender enthält, dann, weil alle endgültigen Farben und Texturen vollständig in Unity erstellt wurden. Der Grund dafür ist, dass Sie sehen, was Sie mit Unity erhalten. Es hat einen so einfach zu bedienenden Editor und die von Jason erstellten Shader sind auch sehr einfach zu bedienen. Der schnellste Weg bestand also darin, alle Färbungen / Texturen in Unity vorzunehmen und jegliche doppelte Behandlung zu vermeiden (Färben in Blender, dann Färben mit das unterschiedliche Beleuchtungssetup einmal in Unity).

Der Kunststil von Agent A enthält viele Farbverläufe. Es war also schon früh klar, dass wir diese Farbverläufe in Unity auf effiziente Weise erstellen müssen. Die Verwendung eines Shaders zum Zeichnen der Verläufe zur Laufzeit hätte zu einem erheblichen Mehraufwand für jede Szene geführt, und wir wollten unbedingt sicherstellen, dass Agent A auf so vielen Geräten mit niedriger Spezifikation wie möglich ausgeführt werden kann. Jason entwickelte eine Lösung für die Verwendung winziger Pixelstrukturen, die sich ausdehnen und einen Farbverlauf erzeugen. In Photoshop erstelle ich ein 1px-Bild und füge so viele horizontale Pixel hinzu, wie ich zum Erstellen des Verlaufs benötige, z. Ein fließender Graustufenübergang von Schwarz zu Weiß wäre nur 1px Schwarz neben 1px Weiß. In Unity nutzen wir dann die bilineare Filterung mit unseren winzigen Texturen, die, wenn sie über ein ganzes Netz gespannt werden, einen gleichmäßigen Verlauf ergeben. Anschließend fügte Jason dem Shader einen Drehregler hinzu, mit dem ich den Farbverlauf auf der zugewiesenen Fläche um 360 Grad drehen und meine 2D-Farbverlaufskunst replizieren konnte.

Hier ist ein Beispiel für eine um 3200% vergrößerte 2-Pixel-Textur:

So sieht es in Unity aus, wenn es auf ein Material angewendet wird:

Tipp: Stellen Sie sicher, dass Ihre Textur im Inspektor im Wrap-Modus auf Clamp eingestellt ist, um Blutungen an den Kanten zu entfernen.

Der Shader basiert auf Unitys alten diffusen oder unbeleuchteten Shadern und Jason hat ein bisschen seinen eigenen Code hinzugefügt, um die Rotations-UVs zu erstellen:

// Slider-Eigenschaft [0 bis 2xPI]
_Rotation ("Rotation", Range (0.0, 6.2831853071)) = 0.0
// Definiere eine Vertex-Funktion für deinen Shader
#pragma surface surf Lambert vertex: vert
// wende eine rotierte Transformationsmatrix an
float _Rotation;
void vert (inout appdata_full v) {
 v.texcoord.xy - = 0,5;
 float s = sin (_Rotation);
 float c = cos (_Rotation);
 float2x2 rotationMatrix = float2x2 (c, -s, s, c);
 Rotationsmatrix * = 0,5;
 Rotationsmatrix + = 0,5;
 rotationMatrix = rotationMatrix * 2–1;
 v.texcoord.xy = mul (v.texcoord.xy, rotationMatrix);
 v.texcoord.xy + = 0,5;
}

Ein seltsamer Weg zur UV-Karte…

Damit der Drehregler funktioniert, müssen Sie Ihre UV-Strahlen auf ungewöhnliche Weise auspacken. Jedes Gesicht auf einem Objekt muss flach ausgewickelt sein und die gesamte UV-Karte ausfüllen. Das heißt, wenn Sie (richtig gemacht) alle Gesichter auswählen und ihre UVs gleichzeitig betrachten würden, würden sie alle übereinander sitzen.

Wir versuchen nicht, eine herkömmliche UV-Karte wie folgt zu erstellen:

Alle Flächen des Bedienfelds sind ausgewählt.

Was wir wollen, ist dieses schöne Durcheinander überlappender Gesichter:

Wieder werden alle Flächen des Bedienfelds ausgewählt.

Wenn Sie jedes einzelne Gesicht auswählen, sieht es viel besser aus:

Nur die Vorderseite des Bedienfelds ist ausgewählt.

Bei dieser Methode benötigt jede Fläche, die Sie steuern möchten, ein separates Material in Ihrem Modell. Auf diese Weise stehen Ihnen bei der Auswahl des Objekts in Unity mehrere Materialien zur Verfügung, mit denen Sie die Farbe, den Farbverlauf und die Textur der einzelnen Flächen steuern können.

Einige der Materialien, die auf dem Bedienfeld eingerichtet wurden.Die endgültigen Farben in Unity. Beachten Sie, dass der Farbverlauf entlang derselben Vorderseite verläuft, die oben abgewickelt wurde.

Beleuchte es.

Wir haben festgestellt, dass ein direktionales Licht pro Szene und manchmal ein zusätzliches Punktlicht in etwa die Grenze dafür darstellt, wie weit wir es auf Mobilgeräten verschieben können, ohne die Bildrate zu senken. Der Grund, warum wir versuchen, so viele diffuse Shader wie möglich anstelle von unbeleuchteten zu verwenden, besteht darin, dass wir die Echtzeitschatten des gerichteten Lichts verwenden können, wenn sich Elemente in den Szenen z. eine geheime Spionage-Konsole, die sich hinter einem Gemälde entfaltet!

Das Umgebungslicht der Szene ist normalerweise auf einen mittleren Grauton eingestellt, aber manchmal füge ich ein wenig Farbe hinzu, um Dinge zu tönen, z. ein bisschen gelb, damit sich die Szene ein bisschen wärmer anfühlt.

Texturierung.

Die Texturen im Kunststil spielen eine große Rolle bei der Schaffung des einzigartigen Stils. Alle Texturen sind entweder echte Fotografien, die in Photoshop von Grund auf neu erstellt wurden, oder eine Mischung (PhotoChopped). Sie werden dann über einen Kanal in Jasons Shader auf das Objekt angewendet. Wir haben 2 Optionen, die dann auf alle verschiedenen Shader angewendet werden (diffus, unbeleuchtet usw.). Die 2 Optionen für das Textur-Blending sind Multiplizieren und Additivieren. Je nachdem, welchen Look ich erzielen möchte, wähle ich einen Shader mit einem Multiplikations- oder einem additiven Kanal aus und lege dann meine Textur in den Slot. Dieser Texturschlitz verfügt auch über den 360-Grad-Drehregler und einen Regler zur Steuerung der Stärke der Texturüberblendung "Multiplizieren" oder "Additivieren". Der Multiply / Additive-Slot kann auch mit einem Farbverlauf verwendet werden, der dann über die gesamte Textur angewendet wird, die Sie in den Basis-Slot abgelegt haben.

Hier einige Beispiele, wie die Shader in der Foyerszene eingesetzt wurden:

Dies ist ein weiterer Codeausschnitt aus Jasons Shader, der in den zusätzlichen Textur-Slot für Multiplizieren und Addieren eingefügt werden soll:

Leere Brandung (Input IN, Inout SurfaceOutput o) {
// Anmerkung: Wir kombinieren Texturen in einem einzigen Surface Shader-Durchgang
half4 c = _Color * tex2D (_MainTex, IN.uv_MainTex); // Grundtextur & Farbe
c * = (tex2D (_Multiply, IN.uv2_Multiply) * _MultiplyStrength) + (1.0f-_MultiplyStrength); // Textur multiplizieren
o.Albedo = c.rgb;
o.Alpha = c.a;
}
Leere Brandung (Input IN, Inout SurfaceOutput o) {
half4 c = _Color * tex2D (_MainTex, IN.uv_MainTex); // Grundtextur & Farbe
c + = tex2D (_Additive, IN.uv2_Additive) * _AdditiveStrength; // additive Textur
o.Albedo = c.rgb;
o.Alpha = c.a;
}

Und zum Schluss hier die Foyerszene Kunst im Spiel:

Fazit.

Da haben wir es also, den gesamten schrittweisen Prozess, um den Agent A-Kunststil in Unity zu erstellen. Wir hoffen, dass Sie diesen Leitfaden in gewisser Weise hilfreich fanden! Wenn Sie etwas davon wegnehmen, würden wir gerne von Ihnen hören. Sagen Sie also auf Twitter Hallo!

Mark White @elwhiteo

Jason Rawlings @JasonRawlings

Weitere Informationen zu "Agent A: Ein Puzzle in Verkleidung" finden Sie hier: www.agentagame.com

www.yakand.co

Siehe auch

Ein offener Brief an die Art All Night Teilnehmer + DC Arts Community + DC Government:Was ist mit der 40-mm-Brennweite passiert? Ein Jahr damitInterview mit einem Meister des Surrealen: Die Kunst von Giorge RomanFragen Sie einen Art Book EditorIn diesem Jahr habe ich 20 Romane und 30 Drehbücher gelesenDie elementare Kunst der Komposition