Level-Design in C.I.T.Y. Die Entwicklung des Square-Levels :: Projekt 1+2

Level-Design in C.I.T.Y. Die Entwicklung des Square-Levels :: Projekt 1+2

Inhaltsverzeichnis 1 Einleitung 1 2 Das Level-Design in C.I.T.Y. 2 2.1 Workflow des Level-Designs..................... 3 3 Die U-Bahn-Station 5 3.1 Modellierung............................. 5 3.2 Texturierung und UV-Mapping................... 8 3.3 Lichtquellen und 3D-Texte...................... 9 4 Das U-Bahn-Netzwerk 12 5 Das Bodenmodell 14 6 Die Schnittstelle zwischen Ober- und Unterwelt 16 7 Die Platzierung der Häuser 18 8 Der Park 19 9 Das Level für das Projekt bereitstellen 20

1 Einleitung In dieser Arbeit wird erklärt, wie das Square-Level erstellt und wie die einzelnen Komponenten des Levels realisiert und verknüpft werden.die Modellierung und die dazugehörige Texturierung sind ebenfalls ein Thema. Zwei Programme sind essentiell für das Level-Design: Zum einen das Modellierungs- Programm Blender 1, zum anderen Unity3D 2. In Blender werden die Modelle erstellt und werden darauf folgend in Unity3D platziert. 1 http://www.blender.org 2 www.unity3d.com 1

2 Das Level-Design in C.I.T.Y. Bei aktuellen Computerspielen sind die unglaubliche Größe und enorme Vielseitigkeit der digitalen Welten manchmal einfach nur bewundernswert. Diese Spiele bieten einen Detailgrad, welcher der realen Welt sehr nahe kommt. Manchmal geht die in der virtuellen Welt dargestellte Fantasie sogar über unsere reale Welt hinaus. Es sind keine Grenzen gesetzt, außer wenn diese erforderlich sind, um den Spieler in einem bestimmten Rahmen zu halten. Die Entwickler solcher AAA-Games 3 verfügen meistens über eigene Level-Editoren, die viele Schritte automatisiert. Für das C.I.T.Y.-Projekt ist Unity3D als ein vergleichbares Hilfswerkzeug zu betrachten, besonders da größere Spielefirmen inzwischen ebenfalls auf Unity3D setzten 4. Im Rahmen dieses Projektes ist das Square-Level enstanden(abbildung 2), welches bewusst rechteckig gestaltet wurde. Der Erstellungsprozess konnte somit durch Schnelligkeit und Einfachheit überzeugen. Dies gilt besonders für das Tunnel-Netzwerk. Wenn nicht nur Rechteckige Kurven im Level existiert, sondern auch Kurven mit einem Krümmung ungleich 90-Grad, dann kann das Tunnel-Netzwerk zunächst nicht einfach erstellt und erweitert werden wie das Lego-Baustein-Prinzip. Im Square-Level konnte man die Strassenmarkierungen durch Duplizieren, Verschieben und Rotationen um 90 Grad relativ schnell setzten. Ein grundsätzliches Problem besteht, wenn man das Straßennetz nicht eckig generieren möchte. Denn in diesem Fall müsste man komplett vom Generierungs- Tool Blended Cities Abstand nehmen, da mit diesem Tool nur gerade und eckige Straßen generiert können. Der Aufwand, die Straßen zu interpolieren,wäre viel zu hoch. Des weiter müssten Eckhäuser erschaffen werden, die keinen rechten Winkel aufweisen, denn in der Realität sind die Häuser meist auch an den Winkel der Straße angepasst(abbildung 1). Abbildung 1: Der Winkel ist ungleich 90 Grad 3 Spiele die ein sehr hohes Budget haben. 4 http://www.golem.de/showhigh2.php?file=/1009/78190.html 2

Abbildung 2: Übersicht auf das Level 2.1 Workflow des Level-Designs Nur weil man einzelne Bestandteile eines Levels hat, heisst das nicht, dass man ein fertiges Level hat. Das Zusammenbauen kann man mit einem Lego-Bausatz vergleichen. Blended Cities gehört nicht zum Level, sondern ist ein Tool für die Generierung des Bodens im Level. Wichtige für den Workflow ist die Schnittstelle zwischen Ober- und Untererde. Wenn diese genau festgelegt ist, kann parallel an beiden Levels gearbeitet werden. Schnittstellen sind in diesem Kontext als Löcher im Bodenmodel für die U-Bahn-Stationen zu verstehen. 3

Abbildung 3: Workflow des Level-Designs 4

3 Die U-Bahn-Station Die U-Bahn-Station wurde mit dem Programm Blender 3D modelliert, welches man unter der GPL-Lizenz verwenden kann. Dieses Programm ermöglicht unter anderem den Einsatz von Modifiers, auf die ich später eingehen werde. Der Erstellungsprozess der U-Bahn-Station teilt sich in drei Arbeitsschritte auf. Der Erste Schritt ist die Modellierung. Hier werden Meshes erstellt, die aus Punkten bestehen, die wiederum Flächen in einem 3D-Raum abbilden können. Die Flächen können auf Texturen verweisen. Die Texturierung beinhaltet die Erstellung von Texturen, die z. B. das Format einer JPG oder PNG haben können. Die Texturen werden im zweiten Schritt zu der U-Bahn-Station erstellt und verlinkt. Zum Schluss wurde die U-Bahn-Station in Unity3D eingefügt, wo zusätzlich Lichter und 3D-Texte erstellt wurden. 3.1 Modellierung Als Vorlage wurde eine der Kölner U-Bahn-Staionen ausgewählt(siehe Abb. 4). Abbildung 4: Vorlage für die Modellierung Es gibt zwei Eingänge über die der Spieler zur Zwischenetage gelangen kann. Siehe Abbildung 5. Die Zwischenetage (Abb. 6) gibt dem Spieler die Möglichkeit sich zwischen zwei verschiedenen Bahnsteige zu entscheiden. Es wurden Schilder erstellt, damit später in Unity3D dynamische Beschriftungen und Informationen zum jeweiligen Bahnsteig hinzugefügt werden können. Damit die U-Bahn-Station mehr lebendiger wirkt, ist in der Zwischenetage ein Kiosk eingebaut (Abb. 7). Modellierungstechniken wurden angewendet, damit das Modell nicht zu Komplex wird und wiederholte Arbeitsschritte erspart bleiben. Eine dieser Modellierungstechiken ist der Einsatz von Modifiers. Der Modifier Mirror läßt ein 5

Abbildung 5: Der Eingang zur U-Bahn Abbildung 6: Die Zwischenetage Abbildung 7: Der Kiosk läßt die Zwischenetage mehr lebendiger wirken Abbildung 8: Der Bahnsteig ausgewähltes Objekt an einer Achse spiegeln. Da die U-Bahn-Station Symmetrisch sein soll, ist dies eine sehr willkommener Modifier. Array ist ebenfalls ein Modifier, der ein erstelltes Objekt wiederholen kann. Beispielsweise werden die Säulen entlang einer Achse mit einem bestimmten Abstand zu einander dupliziert. 6

An dieser Stelle folgt eine Auflistung aller Objekte in dem Modell mit der Angabe welcher Modifier verwendet und welches Texturierungsverfahren angewandt wurde. bars Die Querbalken der Gleise Modifier:Array Texturierung: Cube Projektion ceilling Die Decke am Bahngleis Texturierung: Cube Projektion ground Der Boden am Bahnsteig Texturierung: Cube Projektion ground subway Der Boden unter den Gleisen Texturierung: Cube Projektion kiosk Das Kiosk in der Zwischenetage Texturierung: UV-Mapping kiosk person Die Person im Kiosk Texturierung: UV-Mapping lamps Lampen am Bahnsteig Modifier:Array Texturierung: UV-Mapping pillar Pfeiler in der Mitte Modifier:Array Texturierung: Cube Projektion railing Absperrzaun Modifier:Array Texturierung: Cube Projektion scheudle Fahrpläne stairs down Treppe zwischen Zwischenetage und Bahnsteig Modifier:Array Texturierung: Cube Projektion stairs up Treppe zwischen Zwischenetage und Obererde Modifier:Array Texturierung: Cube Projektion stairway Zwischenetage und die Treppengänge Texturierung: Cube Projektion subway sign Die oberirdischen Schilder der U-Bahn Texturierung: UV-Mapping 7

subway station Der Bahnsteig Texturierung: UV-Mapping tunnel back Tunnel als Verbindungsstück tunnel front Tunnel als Verbindungsstück wall Die Wand am Bahnsteig. Texturierung: Cube Projektion Bei allen Objekten existiert der Modifier: Mirror mit ausnahme von Kiosk, scheudle und subway sign, da sich durch die Mirror-Funktion auch die Texturen spiegeln. Wenn die Textur sich spiegelt, dann ist der Text auf einer Textur ebenfalls gespiegelt. Das fertige Modell kann man in Abbildung 9 im Wireframe-Mode betrachten. Abbildung 9: Das Modell in Wireframe-Mode 3.2 Texturierung und UV-Mapping Die Texturierungsart Cube Projektion ist weniger aufwändig im Gegensatz zum manuellen UV-Mapping. Eine Textur, die nahtlos ist, kann unendlich wiederholt nebeneinander platziert werden, ohne dass man einen pixeligen Übergang erkennen kann, und wird gerade deswegen bei Objekten mit C.P. eingesetzt. Bei UV-Mapping wird das Objekt wie mit einer Schere auseinandergeschnitten und die ausgeschnittenen Flächen werden auf einer UV-Map platziert, die letzenendlich für eine Textur eingesetzt wird. Eine Textur, die anhand einer UV-Map erstellt worden ist, nennt sich auch Texture-Atlas und kann nur für das eine Objekt verwendet werden, währendem Texturen, die nahtlos sind, auf jedem Objekt platziert werden können, dessen Texturierungsart C.P. ist. Die Wand-Textur der U-Bahn-Station habe ich aus einer realen Station fotografiert. Der Nächste Schritt war, die Textur nahtlos zu machen. 8

Abbildung 10: Dies ist ein Textur-Atlas des Kiosks Abbildung 11: Die Wand-Textur der U-Bahn-Station 3.3 Lichtquellen und 3D-Texte In Unity3D besteht die Möglichkeit in einer Szene Lichter einzubinden. Ich habe den Lichttyp Spotlight ausgewählt, weil das Licht nicht in einer bestimmten Richtung strahlen soll, sondern gleichmäßig in alle Richtungen. Diese Lichter habe ich in der Zwichenetage und am Bahnsteig eingesetzt. Für den Einsatz von 3D-Texten musste ein neues Material erstellt werden, das auf einen selbst geschriebenen Shader und eine Schriftart verweist. Unity3D unterstützt zwar 3D-Texte, aber der Standard-Shader stellt den Text durch andere Objekte dar. D.h. wenn der Spieler in der Zwischenetage ist, so kann er den Text am Bahnsteig lesen, weil der Text durch die Wände angezeigt wird. Um das Problem zu lösen musste ein neuer Shader geschrieben werden: Shader "CITY/3D Text Shader" { Properties { 9

} _MainTex ("Font Texture", 2D) = "white" {} _Color ("Text Color", Color) = (1,1,1,1) SubShader { Tags { "Queue"="Transparent" "IgnoreProjector"="True" "RenderType"="Transparent" } Lighting Off Cull Off ZWrite On Fog { Mode Off } Blend SrcAlpha OneMinusSrcAlpha Pass { Color [_Color] SetTexture [_MainTex] { combine primary, texture * primary } } } } Dieser Shader musste von dem Material verwendet werden und das Material benötigte eine Schriftart, die in dem Projekt hinzugefügt werden musste( Abb. 12). 10

Abbildung 12: Materialeigenschaften des 3D-Textes in Unity 3d 11

4 Das U-Bahn-Netzwerk Die Verbindungsstücke ermöglichen es, ein U-Bahn-Netzwerk in Unity3D zu erstellen. An der Station wurden von Beginn an zwei Verbindungsstücke angebracht: Tunnel front und Tunnel back (Abb. 9). Die beiden Verbindungen sind gleich modelliert. Eins von den Stücken wurde vom Stationsmodell separiert und als einzelnes Modell abgespeichert. Dieses ist für die geraden Strecken gedacht (Abbildung 13). Damit das U-Bahn-Netzwerk Kurven enthält, wurde noch eine 90-Grad-Kurve erstellt. Die Kurve musste mehrmals bearbeitet werden, weil die U-Bahn einen größeren Wendekreis erfordert hat(abbildung 14 und 15). Abbildung 13: Der Tunnel in Blender Abbildung 14: Die Kurve in Blender Im Unity3D erfolgte der Zusammenbau zu einem Tunnel-Netzwerk (Abb, 16). Die aufwendigere Arbeit bestand darin, die Stücke genau aneinander zu setzen. Dies konnte man mit Hilfe der Snap-Settings in Unity3D vereinfachen. In der 3.0 Version von Unity3D kann man dies mit Hilfe des Vertex-Snapping noch viel einfacher durchführen. Es wird pro Modell ein Vertex ausgewählt. Nach der Bestätigung werden die Modelle an diesen Stellen aneinander gesetzt. 12

Abbildung 15: Der erste Einsatz der Kurve Abbildung 16: Das Netzwerk in Unity3D zusammengebaut 13

5 Das Bodenmodell Der Boden im Level besteht aus den Straßen und den Bürgersteige. Hierfür wurde das Generierungstool Blended Cities 5 verwendet. Blended Cities muss mit Blender 3D geöffnet werden, damit man auf das Programm zugreifen kann. Zuerst muss ein Mesh, das nur aus Kanten besteht, erstellt und mit Gewichtungen belegt werden. Durch die Gewichtung teilt man Blended Cities mit, was für einen Typ von Straße die Kante haben soll. Die Breite der Straße kann man ebenfalls einstellen. Es wurden Eibahnstraße sowie einspurige- und zweispurige Hauptstraßen generiert. Der nun generierte Boden enthält jedoch keine Straßenmarkierungen. Diese mussteen noch in Blender per Hand erstellt und positioniert werden. Das Schwierige lag darin, den Mittelpunkt der Straße zu finden. Mit Hilfe einer Kante, die man genau in der Mitte zerschneiden ließ, konnte man den Mittelpunkt ermitteln und somit war man in der Lage, die Linien mittig zu platzieren. Die Erstellung der Übergänge für die Fußgänger stellte sich als einfach heraus. Abbildung 17: Ausschnitt von einer Kreuzung mit Straßenmarkierung 5 http://jerome.le.chat.free.fr/index.php/en/download/blender/city-engine-download.html 14

Abbildung 18: Das fertige Bodenmodell 15

6 Die Schnittstelle zwischen Ober- und Unterwelt Da das Bodenmodell (Abb. 18) keine Löcher zu der U-Bahn-Station hat, mussten diese manuell ausgeschnitten werden. Dafür wurden Würfel an den Eingängen der U-Bahn-Station platziert und an die Größe des Eingangs angepasst. Der nächste Schritt war, die Würfeln in das Bodenmodell zu importieren. Die Würfel wurden im Bodenmodell dort platziert, wo der Zukünfitige Eingang der Station sich befinden sollte(abb. 19). Durch eine Differenz-Funktion mit dem Boden und den Würfeln in Blender sind die Löcher als Resultat entstanden (Abb. 20. Abbildung 19: Die Würfel simulieren die Eingänge Abbildung 20: Löcher im Mesh Dieser Vorgang wurde insgesamt für drei Eingänge mal wiederholt. Jetzt musste in Unity3D die U-Bahn-Station an dem Bodenmodell angedockt werden (Abb. 21). Dies konnte man durch die Snap-Settings in Unity3D 16

vereinfachen. Allerdings ist dies durch das neue Vertex-Snapping deutlich einfacher geworden. Man wählt ein Vertex in je zwei verschiedenen Modellen und dann werden diese an die ausgewählten Punkten positioniert. Abbildung 21: Die Station wurde an den Eingängen angebracht 17

7 Die Platzierung der Häuser Das Setzen von fertigen Häuser-Modellen gehörte auch zu einer der Aufgaben des Level-Designs. Durch das Duplizieren bereits gesetzter Häuser konnte man in einem schnellen Tempo, die Stadt mit Häuser füllen. Jeder Block wurde auch in sein eigenes Gameobjekt eingefügt. So kann man ganze Blöcke auf einmal deaktivieren, was deutlich performanter beim Editieren des Levels ist.zudem können auf diese Weise Blöcke deaktiviert werden, die sich außerhalb des Sichtfeldes des Spielers befinden. Abbildung 22: Das Stadtbild 18

8 Der Park Im Zentrum des Levels wurde ein Park errichtet. Mit Hilfe von dem Terrain- Editor und Terrain-Assets in Unity3D kann man schöne Landschaften oder Grünanlagen bauen. Der Park erschafft ein besonderes Ambiente und sorgt für Abwechslung in der Stadt. Im Park selbst wurden Pfade angelegt, auf denen z. B. animierte Figuren entlang laufen können. Er bietet außerdem die Möglichkeit, dort ganz ande Arten von Lektionen zu realisieren. Um den Park herum wurde ein Zaun errichtet, damit jenern weniger zugänglich ist. Dies soll den Spieler dazu anregen, den Park zu erkunden. Sogenannte grüne Inseln wurden am Park platziert, damit der Übergang vom Stadtbild zum Park nicht zu extrem wird. Abbildung 23: Ansicht im Park Abbildung 24: Ansicht von außen 19

9 Das Level für das Projekt bereitstellen Da der Einsatz von SVN mit Unity3D nicht immer ohne Schwierigkeiten abläuft, ist es ratsam, das Level in einem Unitypackage exportieren zu lassen, damit eine Einbindung in das Hauptprojekt möglich ist. Unity3D unterstützt SVN nur in der Pro-Version. Da aber keine Szene, sondern nur die einzelne Bestandteile dieser exportiert werden sollen, werden Prefabs exportiert, die als eine Art Container dienen werden. z. B. die Häuser sind in einem Gameobjekt namens Buildings. Da wird das Gameobjekt Die Buildings werden in das neu erstellte Prefab, das sich in der Projek-Hierarchie befindet, eingefügt. Der nächste Schritt besteht darin, den Prefab auszuwählen und dann den Menüpunkt Select dependendcies auszuwählen. Nun kann unter Assets ein Unitypackage exportiert werden. Wenn später das Paket importiert wird, muss nur das Prefab in die Szene eingefügt werden, da auch Positionsdaten im Prefab gespeichert werden. 20