Erstellen des Agenten Ein Kunststil in Unity

Infiltriere Ruby La Rouges geheimes Versteck in Agent A: Ein Puzzle in Verkleidung.

Marketing ist einer der wichtigsten Aspekte bei der Schaffung eines erfolgreichen Indie-Spiels. Oft ist ein Element, das als Marketinginstrument übersehen wird, einfach Ihre Spielkunst! Ein einzigartiger und wunderschöner Kunststil hilft Ihnen nicht nur, Verkäufe im Geschäft zu erzielen, sondern auch, die Aufmerksamkeit der Presse und vor allem der Redakteure auf sich zu ziehen, die entscheiden, ob Sie Ihr Spiel präsentieren möchten oder nicht. In diesem Artikel beschäftigen wir uns Schritt für Schritt, vom Papier bis zur endgültigen Kunst, mit dem, was erforderlich ist, um den Kunststil von Agent A mit Unity auf mobile Geräte zu bringen, und geben hoffentlich angehenden Entwicklern einige hilfreiche Einblicke!

Mein Name ist Mark White, ich bin der 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 als eines der besten von Apple für 2015, als Editor's Choice in 30 Ländern und als bestes neues Spiel in über 100 Ländern ausgezeichnet. Es erreichte die Nummer 1 in 43 Ländern und wurde als PAX Aus Indie Showcase Winner ausgewählt!

Der hinterhältige Ruby La Rouge.

Warum Einheit?

Warum haben wir uns zunächst für die Unity-Spiel-Engine entschieden, mit der wir unser Spiel erstellen wollten? Sowohl Jason als auch ich haben Unity in unseren früheren Jobs viele Jahre lang verwendet und als Künstler finde ich es persönlich sehr einfach, mit ihnen 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 3D-Kameraansicht. Wir haben jede Szene so gestaltet, dass sie zwischen 16: 9 und 4: 3 skaliert, ohne wichtige Trefferzonen abzuschneiden, sodass unser Spiel auf jeder Bildschirmgröße von kleinen Telefonen bis 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 Dinge wie Sammlerstücke oder Portale nicht außerhalb unserer Sicherheitszone liegen.

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

Die sichere Zone ist der Bereich innerhalb der Ränder, der auf 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 also skalieren, bis die Sicherheitszone oben und unten auf dem Bildschirm aufschlägt, und dann anhalten, um ein bisschen mehr von der Szene an den Seiten zu enthüllen. Bei einem größeren Gerät wie einem iPad wird es zur Seite skaliert und stoppt, wobei oben und unten auf dem Bildschirm etwas mehr sichtbar wird.

Durch Skalieren der Szene kann der Spieler leicht alles sehen, was im Spiel wichtig ist, selbst wenn er auf einem sehr kleinen Bildschirm spielt.

Wo soll ich anfangen?

Um unseren visuellen Stil als Marketinginstrument zu verwenden, mussten wir viel Zeit in die Erstellung der Kunst investieren, um sicherzustellen, dass sie auffällt. 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 entworfen. Der Grund dafür ist, den Iterationsprozess zu beschleunigen. Das Modellieren eines Objekts dauert viel länger als das einfache Skizzieren und mit allen anderen zu planenden Elementen (Texturen, Beleuchtung, Trefferzonen, Portale, Sammlerstücke, Puzzles und das Gesamtbild) war für jede Szene 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. Oft ist der schwierigste Teil des Designs nur ein Anfang. Als ein von den 60ern inspiriertes Spionagespiel wollte ich, dass alle Szenen das Gefühl der Connery-Bond-Ära 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 gesammelt wurde, skizzierte ich einige 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, koppeln, werden Sie feststellen, dass das Skizzieren von Ideen viel schneller und sogar unterhaltsamer wird, da es so genau ist, schneller gelöscht oder geändert werden kann als Papier, über eine hervorragende Benutzeroberfläche verfügt und das Gerät auch tragbar ist Sie sind also nicht auf Ihren Schreibtisch beschränkt.

http://procreate.si/

Farb- / Beleuchtungsspott.

Nachdem ich mit der anfänglichen Layoutskizze zufrieden war, entwarf ich die Gesamtfarben und die Beleuchtung der Szene so, dass ich sie beim endgültigen Modell im Auge habe. Ich hatte die Idee, auf diese Weise aus dem Pixars-Designprozess heraus zu arbeiten und wie sie Farbskripte für ihre Filme erstellen, um die Stimmung für jede Aufnahme zu erfassen. 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 anpassen, und durch die Verwendung von Photoshop anstelle von Illustrator kann ich die hervorragenden Ebenenanpassungsfunktionen wie "Farbbalance" verwenden, um das gesamte Farbschema zu optimieren.

Endgültiges 2D-Modell.

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

Von 2D-Kunst zu 3D-Modellen.

Neben der Benutzeroberfläche und einigen Animationen ist Agent A vollständig 3D. Dafür gibt es mehrere Gründe, aber der Hauptgrund ist die Effizienz sowohl für die Leistung als auch für die Größe der App-Datei. Durch die Auswahl von 3D wird jede Szene von ca. 30 MB 2D-Kunst 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 noch mehr Dateigröße hinzuzufügen.

Zu Beginn der Skizzenphase erstellen wir sehr einfache Gray-Box-Modelle für jede Szene, mit denen Jason dann mit der Entwicklung beginnen kann. Dadurch können Kunst und Entwicklung gleichzeitig produziert werden.

Hier ist ein Beispiel eines frühen Gray-Box-Modells im Vergleich zu einem endgültigen Modell:

Das endgültige 2D-Modell wird als Referenz zum Modellieren der 3D-Szene verwendet. Zu diesem Zeitpunkt ist zu beachten, dass nicht alles von 2D nach 3D repliziert werden kann. Daher möchten wir das Modell so nah wie möglich an 2D heranführen.

Unser bevorzugtes 3D-Paket ist Blender. Es ist ziemlich leistungsfähig, wenn man bedenkt, dass es kostenlos ist und die meisten unserer Anforderungen abdeckt. Während der Modellierung in Blender richten wir ein Licht ein, um eine ungefähre Vorstellung von der gesamten Szenenbeleuchtung zu erhalten. Dies erleichtert das Übergehen und den Versuch, den Look in Unity einzurichten.

Beleuchtung, Färbung und Texturierung - das technische Kernstück.

Wenn Sie sich gefragt haben, warum das endgültige Modell einige seltsame Farben in Blender enthält, liegt dies daran, dass alle endgültigen Farben und Texturen vollständig in Unity ausgeführt werden. 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 ebenfalls sehr einfach zu verwenden. Der schnellste Weg bestand darin, alle Farben / Texturen in Unity auszuführen und doppelte Handhabungen zu vermeiden (Färben in Blender, dann Farben mit anpassen) die verschiedenen Beleuchtungseinstellungen einmal in Unity).

Der Kunststil von Agent A enthält viele Farbverläufe, sodass schon früh klar war, dass wir eine Möglichkeit benötigen würden, diese Farbverläufe in Unity auf effiziente Weise zu erstellen. Die Verwendung eines Shaders zum Zeichnen der Farbverläufe zur Laufzeit hätte jeder Szene viel Overhead hinzugefügt, und wir wollten unbedingt sicherstellen, dass Agent A auf so vielen Geräten mit niedrigen Spezifikationen wie möglich ausgeführt werden kann. Jason hat eine Lösung gefunden, um winzige Pixelstrukturen zu verwenden, die sich ausdehnen und einen Farbverlauf erzeugen. In Photoshop erstelle ich ein 1px hohes Bild und füge so viele horizontale Pixel hinzu, wie ich zum Erstellen des Verlaufs benötige. Ein glatter Graustufenübergang von Schwarz zu Weiß wäre also 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 glatten Verlauf ergeben. Jason fügte dann dem Shader einen Rotationsregler hinzu, damit ich den Farbverlauf auf der ihm zugewiesenen Fläche um 360 Grad drehen konnte, sodass ich versuchen konnte, meine 2D-Verlaufsgrafik zu replizieren.

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

So erscheint es in Unity, 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 Rändern zu entfernen.

Der Shader basiert auf Unitys alten diffusen oder unbeleuchteten Shadern, und Jason fügte ein wenig seines eigenen Codes hinzu, um die rotierenden 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
// eine gedrehte Transformationsmatrix anwenden 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; Rotationsmatrix = Rotationsmatrix * 2–1; v.texcoord.xy = mul (v.texcoord.xy, Rotationsmatrix); v.texcoord.xy + = 0,5; }}

Ein seltsamer Weg zur UV-Karte…

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

Wir versuchen nicht, eine traditionelle 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.

Bei der Auswahl jedes einzelnen Gesichts sieht es viel schöner aus:

Es wird nur die Vorderseite des Bedienfelds ausgewählt.

Bei dieser Methode benötigt jedes Gesicht, über das Sie die Kontrolle haben möchten, ein separates Material in Ihrem Modell. Auf diese Weise verfügen Sie bei der Auswahl des Objekts in Unity über mehrere Materialien, mit denen Sie die Farbe, den Farbverlauf und die Textur jedes Gesichts steuern können.

Einige der Materialien, die auf dem Bedienfeld eingerichtet wurden.Die endgültigen Farben in Unity. Beachten Sie den Farbverlauf entlang derselben Vorderseite, die oben ausgepackt wurde.

Beleuchte es.

Wir haben festgestellt, dass ein gerichtetes Licht pro Szene und manchmal ein zusätzliches Punktlicht ungefähr die Grenze dafür ist, wie weit wir es auf Mobilgeräten verschieben können, ohne die Bildrate zu senken. Der Grund, warum wir versuchen, diffuse Shader so oft wie möglich zu verwenden, anstatt sie nicht zu beleuchten, ist, dass wir die Echtzeitschatten des gerichteten Lichts verwenden können, wenn sich Objekte in den Szenen bewegen, z. B. eine geheime Spionagekonsole, 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. B. ein bisschen Gelb, damit sich die Szene etwas wärmer anfühlt.

Texturierung.

Die Texturen im Kunststil spielen eine große Rolle bei der Schaffung des einzigartigen Stils. Alle Texturen stammen entweder aus der realen Fotografie, wurden in Photoshop von Grund auf neu gemalt oder sind eine Mischung (PhotoChopped). Die Art und Weise, wie sie dann auf das Objekt angewendet werden, erfolgt über einen Kanal in Jasons Shader. Wir haben 2 Optionen, die dann auf alle verschiedenen Shader angewendet werden (diffus, unbeleuchtet usw.). Die 2 Optionen zum Mischen von Texturen sind Multiplizieren und Additiv. Abhängig von dem jeweiligen Aussehen, das ich erreichen möchte, würde ich einen Shader auswählen, der entweder einen Multiplikations- oder einen Additivkanal hat, und dann meine Textur in den Steckplatz legen. Dieser Texturschlitz verfügt auch über den 360-Grad-Rotationsschieber und einen Schieberegler zur Steuerung der Stärke der Multiplikations- oder additiven Texturmischung. Der Multiplikations- / Additiv-Steckplatz kann auch mit einem Farbverlauf verwendet werden, der dann über die Textur angewendet wird, die Sie in den Basissteckplatz fallen gelassen haben.

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

Dies ist ein weiteres Code-Snippet aus Jasons Shader, das im zusätzlichen Textur-Slot für Multiplizieren und Additiv hinzugefügt werden soll:

void surf (Eingabe IN, inout SurfaceOutput o) {// Hinweis: Wir kombinieren Texturen in einem einzigen Oberflächen-Shader-Durchgang half4 c = _Color * tex2D (_MainTex, IN.uv_MainTex); // Basistextur & Farbe c * = (tex2D (_Multiply, IN.uv2_Multiply) * _MultiplyStrength) + (1.0f-_MultiplyStrength); // Textur multiplizieren o.Albedo = c.rgb; o.Alpha = ca; }}
void surf (Eingabe IN, inout SurfaceOutput o) {half4 c = _Color * tex2D (_MainTex, IN.uv_MainTex); // Basistextur & Farbe c + = tex2D (_Additive, IN.uv2_Additive) * _AdditiveStrength; // additive Textur o.Albedo = c.rgb; o.Alpha = ca; }}

Und schließlich ist hier die Kunst der Foyerszene im Spiel:

Fazit.

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

Mark White @elwhiteo

Jason Rawlings @JasonRawlings

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

www.yakand.co