C.I.T.Y. Entwicklung von Serious Games · Dieses Konzept basiert auf einem Layersystem, welches...

25
C.I.T.Y. Entwicklung von Serious Games Projektdokumentation über die Entwicklung einer Minimap in Unity und C# Wahlpflichtfach SS 2013 / Anfang WS 2013/2014 Projektleitung: Prof. Dr. Friedbert Jochum Dipl. Inform. Beate Münster Dipl. Inform. Dennis Buderus Marco Reitano Projektteilnehmer: Jan Pütz Andreas Meinerzhagen Philipp Teichert Gummersbach, den 20.10.13 Seite 1/25

Transcript of C.I.T.Y. Entwicklung von Serious Games · Dieses Konzept basiert auf einem Layersystem, welches...

C.I.T.Y.

Entwicklung von Serious Games

Projektdokumentation über die Entwicklung einer Minimap in

Unity und C#

Wahlpflichtfach SS 2013 / Anfang WS 2013/2014

Projektleitung: Prof. Dr. Friedbert Jochum

Dipl. Inform. Beate Münster

Dipl. Inform. Dennis Buderus

Marco Reitano

Projektteilnehmer: Jan Pütz

Andreas Meinerzhagen

Philipp Teichert

Gummersbach, den 20.10.13

Seite 1/25

InhaltsverzeichnisEinleitung...........................................................................................................................3

Anforderungen..............................................................................................................4Meilensteine..................................................................................................................4

Konzept..............................................................................................................................5Entwicklungsidee..........................................................................................................5

Projektentwicklung............................................................................................................8Einarbeitung..................................................................................................................8Kartengenerierung.........................................................................................................8Probleme bei der Umsetzung......................................................................................10

End-Konzept....................................................................................................................13Probleme des ersten Konzepts....................................................................................13Layersystem................................................................................................................15Probleme beim Zeichnen der CombinedTexture........................................................17Zoomfunktion.............................................................................................................18

Fazit.................................................................................................................................19Literatur- / Quellenverzeichnis........................................................................................20

Tutorial zur Minimap:.................................................................................................21Navigation über OSM Karten (C# Beispiel):..............................................................21Realistischeres Pathfinding:........................................................................................21

Glossar.............................................................................................................................22Anhang.............................................................................................................................25

Seite 2/25

Einleitung

Diese Dokumentation beinhaltet die einzelnen Schritte des C.I.T.Y. Projektes

"Entwicklung einer Minimap" welches von der Fachhochschule Köln als

Wahlpflichfach angeboten wird.

C.I.T.Y. umfasst ein Serious Game Projekt, das von Mitarbeitern und Studierenden der

Fachhochschule Köln entwickelt wird, und Schülern den Umgang mit Alltagsaufgaben

spielerisch näher bringen soll.

In dem C.I.T.Y. Projekt "Entwicklung einer Minimap" geht es um einen im Spiel

integrierbaren Spielweltausschnitt aus der Vogelperspektive, der für den Benutzer

zusätzlich nützliche und leicht verständliche Symbole zur Orientierungshilfe in der

vorhergenannten Spielwelt anzeigt.

Umgesetzt wird dies mit der Unity Spiel-Engine, die die Entwicklung von

Computerspielen und anderer interaktiver 3D Grafikanwendungen erlaubt, mithilfe der

auch C.I.T.Y. selber entwickelt wird. Die Programmiersprache C# wird für die

Umsetzung benutzt.

Seite 3/25

Anforderungen

Zu Beginn des Projektes wurden folgende Anforderungen gestellt, diese sind in

Inhaltliche und Performancetechnische Anforderungen unterteilt:

Inhaltliche Anforderungen:

– Darstellen eines beliebigen Ausschnittes der Spielwelt

– Darstellen von statischen Objekten wie Points of Interest

– Darstellen von dynamischen Objekten (bewegliche Objekte)

– Muss auf jedes Gameobjekt platzierbar sein

Performancetechnische Anforderungen:

– unbekannte Größe der Spielwelt

– Speicher sparend

– schnell

Meilensteine

Die folgenden Meilensteine sind am Anfang des Projektes festgelegt worden, um eine

grobe Orientierung des Arbeitsablaufes am Projekt zu erhalten.

Erster Meilenstein: Funktionsumfang mitte Mai 2013

Entwickeln des Funktionsumfanges und darauf aufbauend das Konzept.

Zweiter Meilenstein: Minimap Implementieren anfang Juni 2013

Umsetzung des Konzeptes und implementieren der Minimap, so dass die Funktion einer

Ingame Karte abrufbar ist. Gegebenfalls mit der Anzeige von Points of Interest.

Dritter Meilenstein: Dynamischer Routenplaner ende Juli 2013

Erweitern der Minimap mit der Funktion der Anzeige von Routen mithilfe des

gegebenen Straßengraphen.

Vierter Meilenstein: Endabgabe Anfang August

Seite 4/25

Konzept

Entwicklungsidee

Das Projekt soll folgendermaßen Umgesetzt werden:

1. Screenshots von der Spielewelt machen

2. Screenshots zu einem Tilegrid zusammenfügen

3. CombinedTexture aus dem Tilegrid erzeugen

4. "Point of Interest" und Routen auf die CombinedTexture malen

5. CombinedTexture ständig aktualisieren

Die Performance wird bei der Entwicklung erst einmal in den Hintergrund

gestellt, da es zu allererst um die Funktionserfüllung geht und wenn diese

gegeben ist, kann die Optimierung vorgenommen werden.

Seite 5/25

Diese Funktionen werden durch die folgenden Klassen realisiert:

Die Idee hinter dieser Umsetzung ist, dass aus beliebig vielen Screenshots, aus einer

beliebig großen Spielwelt, ein Ausschnitt gewählt werden kann, wo nur die benötigten

Screenshots geladen werden.

Diese müssen zu einer CombinedTexture, also einer Textur zusammengefügt werden,

auf die dann die Route oder "Points of Interest" gezeichnet werden können. Diese

CombinedTexture kann dann als Material auf einem Gameobjekt durch Unity auf allen

beliebigen Spielobjekten, wie z.b. Schilder, angezeigt werden.

Seite 6/25

Abbildung 1: Klassendiagramm der Minimap

Seite 7/25

Abbildung 2: Beispiel einer Minimap von dem Spiel Saints Row 4. Der Gelbe Pfeil unten im Bild ist der Spieler, die hellblauen Punkte sind "Points of Interest" . Quelle: Saints Row 4

Projektentwicklung

Einarbeitung

Der erste Schritt zu Beginn des Projektes ist es Unity und C# soweit zu beherrschen,

dass man Anfangen kann die Entwicklungsidee zu realisieren. Hierzu wurde die

Einführungswoche in den Osterferien 2013 genutzt sowie Tutorials aus dem Internet1

absolviert oder parallel in einem C# Einsteiger-Buch nachgeschaut2.

Kartengenerierung

Eine Orthographische Kamera mit einer benutzerdefinierten Pixelgröße macht

Screenshots von der gesamten Spielwelt aus der Vogelperspektive, indem diese auf dem

Koordinatensystem jede Reihe und Spalte abläuft.3

1 http://unity3d.com/learn/tutorials/modules 22.10.132 Einstieg in Visual C# 2012 von Thomas Theis3 http://www.youtube.com/watch?v=ZuV9Xlt-l6g 22.10.13

http://www.youtube.com/watch?v=tijYJcJnl0I 22.10.13http://www.jakel168.com/2010/09/how-to-make-mini-map-for-your-scene-in.html 22.10.13

Seite 8/25

Abbildung 3: Die Kamera schießt so der Reihe und Spalte nach einzelne Fotos(Tiles) von der gesamten Spielwelt

Die daraus resultierenden Screenshots werden dann namentlich identisch mit ihren

Weltkoordinaten abgespeichert. (Zum Beispiel der Screenshot von dem ganz unteren

linken Abschnitt 0_0; Der rechts Screenshot daneben 0_100; bei einer

Weltkoordinatengröße des Screenshots von 100x100)

Aus diesen Screenshots kann nun jeder beliebige Ausschnitt der Spielewelt dargestellt

werden, indem die relevanten Screenshots in einem Tilegrid (Abbildung 4) gelagert

werden, welche dann zu einer CombinedTexture zusammengefasst werden.

Seite 9/25

Abbildung 4: Beispiel eines 3x3 Tilegrids/Minimapausschnittes einer Spielewelt andem man gut erkennen kann das der Ausschnitt aus einzelnen Screenshots besteht.

Probleme bei der Umsetzung

Ein Problem trat beim schießen der Screenshots mit der Kamera auf. Die Kamera macht

beim Screenshot schießen nicht die Bilder in der Auflösung, die der Kamera zugeordnet

wurden, sondern in der Größe des Sceneview-Fensters in Unity. Dies wird durch eine

selbst programmierte Menüoption Streetmap -> Take Make Screenshot gelöst, in dem

die Fenstergröße manuell mit der Maus gezogen werden muss und das Fenster diese

Größe während des Screenshot schießens beibehält.(Abbildung 6)

Es wurde diese Lösung gewählt da nach größerer Recherche keine andere Lösung

gefunden wurde.

Seite 10/25

Abbildung 5: Die Bildausschnittbestimmung der Minimap

Ein anderes Problem ist durch den Assetpostprozessor von Unity aufgetreten. Denn der

Assetpostprozessor der die einzelnen vorher geschossenen Screenshots zur Laufzeit

lädt, skaliert deren Größe auf 2er Potenzen. Aus diesem Grund kam es zu starken

Effizienz-Problemen, die mit dem Abschalten dieser PowerOfTwo-Funktion des

Assetpostprozessors verursacht wurde. Als zufriedenstellende Lösung wurde diese

Funktion wieder eingeschaltet, nur dass jetzt direkt nach dem Schießen der Screenshots

die Pixelgröße auf die nächstliegende 2er Potenz skaliert wird, damit dies nicht während

der Laufzeit durchgeführt wird.

Seite 11/25

Abbildung 6: Programmierte Streetmap Menüfunktion zur Behebung der willkürlichen Screenshotgröße

Seite 12/25

Abbildung 7: Klassendiagramm des Streetmap-Menü Fensters

End-Konzept

Probleme des ersten Konzepts

Zum Zeitpunkt der Endabgabe war das Projekt noch nicht funktionsfähig und somit

hätte das Projekt keinen nutzen für C.I.T.Y. gehabt. Aus diesem Grund wurde

entschieden, das Projekt zu verlängern. Das alte Konzept musste verworfen werden,

weil eine neue und gemeinsame Begründungsgrundlage benötigt wurde.

Seite 13/25

Abbildung 8: Die Schnittstelle zu C.I.T.Y. wird aus den Attributen der Minimap Klasse und der Layersystem Klasse realisiert

Seite 14/25

Abbildung 9: Klassendiagramm der Minimap nach dem neuen Konzept

Layersystem

Nun wird aus der Erfahrung des ersten Konzepts ein neues Konzept aufgestellt.

Dieses Konzept basiert auf einem Layersystem, welches nicht mehr einfach alle "Points

of Interest" und Routen auf einen Tilegrid aus Screenshots zeichnet.

Stattdessen gibt es unterschiedliche Ebenen (Layer), auf denen Drawables liegen, die in

der Lage sind sich selber Zeichnen. Das Layersystem selber verwaltet alle Ebenen.Im

Gegensatz zu vorher ist es möglich, die Minimap zu zeichnen ohne auf Screenshots als

Hintergrund angewiesen zu sein.

Das Layersystem wurde hinzugefügt da es vom Code her besser lesbar ist als wenn alle

Ebenen einzeln aufgelistet werden.

Ein Drawable ist ein zeichenbares Objekt, welches auf einer Fläche, also ein oder

mehreren Tiles, die einer Ebene zugeordnet sind, gezeichnet wird.

Diesen Ebenen werden nun Prioritäten zugeordnet, diese bestimmen welche Ebene

andere Ebenen überzeichnet. Die Ebene mit der geringsten Priorität ist das Screenshot

Layer, welches aus performancetechnischen Gründen eine eigene Klasse besitzt.

Allerdings kann man jedes Layer nach belieben verstecken oder wieder anzeigen lassen.

So wird die CombinedTexture nach dem neuen Konzept gezeichnet.

Seite 15/25

Abbildung 10: Funktion des Layersystems ( Die Zusammenfassung der einzelnen Ebenen)

Seite 16/25

Abbildung 11: Dies ist ein gutes Beispiel von einem Layersystem. Wie man sieht wurde der Hintergrund, also die Straßenkarte, noch nicht geladen. Allerdings wird schon der Name der Niederländischen Ortschaft angezeigt. Quelle: Google Maps

Probleme beim Zeichnen der CombinedTexture

Ein Problem gab es beim Zeichnen der CombinedTexture. Das Weltkoordinatensystem

orientiert sich an der Ecke unten links, der Rectangle Orientierungspunkt wird oben

links festgelegt und eine Textur zeichnet sich von oben rechts an.

So gab es Verwirrungen während der ersten Zeichenversuche, denn bei diesen

Versuchen hat die CombinedTexture das, was sie zeichnen sollte, gespiegelt gezeichnet,

bis es mit einmal waagerechtem und einmal senkrechten Spiegeln gelöst wurde.

Durch das jeweilige Spiegeln liegen die Koordinatenkreuze nun korrekt zueinander, so

das diese miteinander interagieren können.

Seite 17/25

Zoomfunktion

Die Zoomfunktion ist jetzt auch mithilfe von Zoomstufen gegeben.

Jede Zoomstufe ist um eine Tilelänge größer oder kleiner, je nachdem, ob heranzoomt

oder wegzoomt wird. Die größte Zoomstufe würde ein einziges Tile als Sichtbereich

darstellen, die nächstkleinere Zoomstufe würde dann je nachdem auf welches Tile im

Gatter gezoomt wurde die nächstliegenden Tiles mitanzeigen.

Beim heranzoomen werden, wie in der Abbildung erklärt immer eine Reihe oder Spalte

des sichtbaren Tilegrids weggeschnitten. Und zwar immer darauf basierend, welche

Entfernung zum Rand am größten ist von dem zu zentrierendem Tile ausgesehen.

Seite 18/25

Abbildung 12: Beispiel Ranzoomen. Grün ist eine Zoomstufe näher. Schwarz zwei. Rot drei.

Fazit

Letztenendes hat dieses Projekt einen Abschluss gefunden, was die wichtigsten

Funktionalitäten angeht.

Wir hoffen das die Minimap für das C.I.T.Y. Projekt eine Erweiterung

ist und vielleicht sogar noch anderen Studierenden den Anreiz und die Möglichkeit gibt

das aktuelle Konzept zu erweitern und/oder zu verbessern.

Seite 19/25

Literatur- / Quellenverzeichnis

• http://docs.unity3d.com/Documentation/ScriptReference/

• http://www.gamedev.net/page/resources/_/technical/game-programming/line-drawing-algorithm-explained-r1275

• http://forum.unity3d.com/threads/143895-Benchy-Profiler-A-simple-benchmarking-and-profiling-tool-for-Unity-Free

• http://docs.unity3d.com/Documentation/Manual/iphone-InternalProfiler.html

• http://docs.unity3d.com/Documentation/ScriptReference/Texture2D.SetPixels.html

• http://docs.unity3d.com/Documentation/ScriptReference/Camera.html

• http://answers.unity3d.com/questions/168705/understanding-worldtocameramatrix-and-cameratoworl.html

• http://docs.unity3d.com/Documentation/ScriptReference/Rect.html

• http://en.wikipedia.org/wiki/Aspect_ratio

• http://docs.unity3d.com/Documentation/ScriptReference/Physics.Raycast.html

• http://forum.unity3d.com/threads/3880-Submitting-featured-content

• http://www.youtube.com/watch?v=Ty0XFQDeCz8

• http://www.youtube.com/watch?v=ogoELXNjDrE

• http://docs.unity3d.com/Documentation/Components/class-RenderTexture.html

• http://docs.unity3d.com/Documentation/ScriptReference/RenderTexture.html

• http://www.youtube.com/watch?v=bkCLqPpopvE

• http://www.video2brain.com/de/videotraining/unity-einstieg-in-die-3d-spieleprogrammierung

• http://dzaebel.net/XmlSerializer.htm

• http://msdn.microsoft.com/en-us/library/system.xml.serialization.xmlserializer.aspx

• https://www.assetstore.unity3d.com/#/content/6459

• http://www.youtube.com/watch?v=tijYJcJnl0I

• http://forum.unity3d.com/threads/45586-Possible-to-make-a-Minimap-without-using-renderTexture

• http://www.dastardlybanana.com/radarPage.htm

• http://www.gdcvault.com/play/1015528/AI-driven-Dynamic-Dialog-through

• http://www.joystiq.com/2008/05/03/explore-liberty-city-with-google-map-application/7

• http://www.openstreetmap.org/

• https://developers.google.com/maps/documentation/javascript/maptypes?hl=de

Seite 20/25

Tutorial zur Minimap:

• Anhand zusätzlicher Kamera: http://www.youtube.com/watch?v=ZuV9Xlt-l6g

• Advanced Minimap: http://www.youtube.com/watch?v=tijYJcJnl0I

Navigation über OSM Karten (C# Beispiel):

• http://www.dupuis.me/node/27

Realistischeres Pathfinding:

• http://www.gamasutra.com/view/feature/3096/toward_more_realistic_pathfinding.php

Seite 21/25

GlossarA:

Auftrag: Ein Auftrag ist eine Aufforderung an eine andere Person, eine bestimmte Handlung vorzunehmen.

B:C:

CombinedTexture: Die gezeichnete Textur. Altes Konzept: Die Resultat nach dem "Points of Interests" und Route/n auf das TileGrid gezeichnet wurde als Textur.Neues Konzept: Das Resultat nachdem die Drawables der Ebenen, die Sichtbar sind, sich nacheinander nach höhe ihrer Priorität gezeichnet haben als Textur.

D:Drawable: In unserem Sinne ein Spielobjekt, welches gezeichnet werden soll

Dynamisch: In unserem Sinne ”anpassend”, “veränderbar”

E:Ebene: (Zeichen)Ebene

F:G:

GameObjekt: Ein beliebiges Objekt innerhalb der Unity3D Spiele-Engine, das durch so genannte Components in seinem Verhalten mit der Spielwelt verändert werden kann

H:Hauptmenü: siehe Menü

I:J:K:L:

Layer: (Zeichen)Ebene.M:

Menü: Ein Menü ist eine Form der interaktiven Benutzerführung bei Computerprogrammen mit grafischer, zeichenorientierter oder seltener sprachorientierter Benutzeroberfläche

Metadaten: Daten, die Informationen über Merkmale anderer Daten enthalten, aber nicht diese Daten selbst.

Minimap: Siehe StadtplanN:O:

OpenStreetMap: OpenStreetMap ist ein freies Projekt, das für jeden frei nutzbare Geodaten sammelt (OpenData). Mit Hilfe dieser Daten können Weltkarten errechnet oder Spezialkarten abgeleitet werden sowie Navigation betrieben werden. Auf der OpenStreetMap-Startseite ist eine solche Karte abrufbar.

Seite 22/25

P:POI / Point-Of-Interest: Englisch:„Ort von Interesse“ , ist ein Begriff im Zusammenhang mit Navigationssystemen und Routenplanern. Sie können in der Karte als kleine Symbole dargestellt werden.

Q:R:

Route: Eine Route beschreibt den genauen Weg zwischen mehreren Punkten. Eine Route ist nicht mit der Luftlinie (Strecke) zwischen zwei Punkten zu verwechseln.Rectangle: Eine Unity-Funktion zur Erstellung eines Rechtecks. Benötigt eine X,Y Koordinateneingabe. ( Beginnt oben rechts zu zählen!)

S:Screenshot: Eine Bilddatei, die die aktuelle Sicht einer Kamera auf die Spielwelt repräsentiert.

Serious Game: Englisch: ernsthaftes Spiel. Darunter versteht man digitale Spiele, die nicht primär oder ausschließlich der Unterhaltung dienen, wohl aber derartige Elemente zwingend enthalten.

Skalieren: In der Computergrafik und digitalen Bildbearbeitung bezeichnet Skalierung die Größenänderung eines digitalen Bildes

Stadtkarte: siehe Stadtplan

Stadtplan: Ein Stadtplan ist eine großmaßstäbige thematische Karte einer Stadt (oder auch Teil einer Stadt) zum Zweck einer möglichst schnellen Orientierung in einem urbanen Raum. Die Darstellung ist daher überwiegend grafisch stark vereinfacht und auf allgemeinverständliche Signaturen reduziert

Spiel-Engine: Eine Spiel-Engine (englisch game engine, deutsch etwa Spiel-Motor) ist ein spezielles Framework für Computerspiele, die den Spielverlauf steuert und für die visuelle Darstellung des Spieleablaufes verantwortlich ist. In der Regel werden derartigePlattformen auch als Entwicklungsumgebung genutzt und bringen dafür auch die nötigen Werkzeuge mit.

Spielewelt: Die Umgebung, in der sich der Schüler mit seinem Avatar bewegen kann und mit der er in Interaktion treten kann.

Symbol: Ein Sinnbild, ZeichenT:

Tile: (englisch). In Deutsch: Fliese, Kachel. In unserem Sinne: Einzelbild / Bildausschnitt

TileGrid: Eine aus mehreren Tiles zusammengesetzte FlächeU:

Seite 23/25

Unity: Siehe Spiel-EngineV:

Vision: 1. Eine langfristige Ausrichtung eines Projekts2. Das innere Bild einer Vorstellung, meist auf die Zukunft bezogen.

W:X:Y:Z:

Ziel: Ein in der Zukunft liegender angestrebter Zustand

Seite 24/25

AnhangAls Anhang ist die SourceCode Dokumentation enthalten, die mit Doxygen erstellt

wurde.

Seite 25/25