Update Dokumentation authored by Kunz Susanne's avatar Kunz Susanne
...@@ -63,13 +63,13 @@ Die Animationen wurden in Unity erstellt. ...@@ -63,13 +63,13 @@ Die Animationen wurden in Unity erstellt.
Bei der Erstellung der Spielwelt wurde mit Substance Painter und Photoshop gearbeitet. Zuerst wurden in Substance Painter sogenannte "Planes" durch Pinsel mit verschiedenen Texturen bemalt. Diese Texturen wurden durch verschiedene Pinsel erstellt. Das Problem bei dieser Methode war, dass die Texturen nicht "seamless" waren. Sobald die Texturen wiederholt wurden und aneinandergereiht wurden, wurde ein deutlicher, harter Übergang sichtbar. Dieses Problem konnte nach Anschauen von einigen Tutorials auf YouTube durch eine Nachbearbeitung in Photoshop gelöst werden. Auf diese Weise sind zwei der vier Texturen entstanden. Die anderen beiden Texturen sind direkt in Photoshop erstellt worden. Dabei wurden Pinsel in Photoshop importiert und verwendet um eine Textur zu erstellen. Auch diese mussten "seamless" erstellt werden, da im Spiel die Textur der Umgebung, bzw. des Hintergrunds mehrfach wiederholt werden sollte. Hierbei wurde beispielsweise ein Pinsel, der eigentlich für die Erstellung von Marmorflächen gedacht war, für die Erstellung der Eisflächen benutzt. Dies zeigt, dass Pinsel für verschiedene Texturen verwendet werden können, allerdings auch, dass die verschiedenen Pinsel mit Kreativität ausprobiert werden müssen. Bei der Erstellung der Spielwelt wurde mit Substance Painter und Photoshop gearbeitet. Zuerst wurden in Substance Painter sogenannte "Planes" durch Pinsel mit verschiedenen Texturen bemalt. Diese Texturen wurden durch verschiedene Pinsel erstellt. Das Problem bei dieser Methode war, dass die Texturen nicht "seamless" waren. Sobald die Texturen wiederholt wurden und aneinandergereiht wurden, wurde ein deutlicher, harter Übergang sichtbar. Dieses Problem konnte nach Anschauen von einigen Tutorials auf YouTube durch eine Nachbearbeitung in Photoshop gelöst werden. Auf diese Weise sind zwei der vier Texturen entstanden. Die anderen beiden Texturen sind direkt in Photoshop erstellt worden. Dabei wurden Pinsel in Photoshop importiert und verwendet um eine Textur zu erstellen. Auch diese mussten "seamless" erstellt werden, da im Spiel die Textur der Umgebung, bzw. des Hintergrunds mehrfach wiederholt werden sollte. Hierbei wurde beispielsweise ein Pinsel, der eigentlich für die Erstellung von Marmorflächen gedacht war, für die Erstellung der Eisflächen benutzt. Dies zeigt, dass Pinsel für verschiedene Texturen verwendet werden können, allerdings auch, dass die verschiedenen Pinsel mit Kreativität ausprobiert werden müssen.
#### Grafiken Menü: #### Grafiken Menü:
Zum Design des User Interface wurde überwiegend mit Adobe XD gearbeitet, damit später auch ein High-Fidelity Prototyp entsteht der für die User Tests verwendet werden kann. Zum Design des User Interface wurde überwiegend mit Adobe XD gearbeitet, damit später auch ein High-Fidelity Prototyp entsteht, der für die User Tests verwendet werden kann.
Die Farben zum Design sind abgeleitet worden von den Farben die für die Charaktere des Spiels verwendet wurden. Hier war es wichtig dem Spieler ein einheitliches Bild auch außerhalb des Spiels durch die Menüführung zu bieten. Genauso wurde versucht das einheitliche Bild in den Icons und Werte, die am Rand des Spiels zu sehen, wieder zu spiegeln, um die Benutzung so einfach wie möglich zu gestalten, damit der Spieler nicht durch noch mehr Farben vom eigentlichen Spiel abgelenkt wird. Die Farben zum Design sind abgeleitet worden von den Farben die für die Charaktere des Spiels verwendet wurden. Hier war es wichtig dem Spieler ein einheitliches Bild auch außerhalb des Spiels durch die Menüführung zu bieten. Genauso wurde versucht das einheitliche Bild in den Icons wieder zu spiegeln, um die Benutzung so einfach wie möglich zu gestalten, damit der Spieler nicht durch viele unterschiedliche Farben vom eigentlichen Spiel abgelenkt wird.
Bei der Überlegung was alles im User Interface untergebracht werden muss, wurde erstmal nach unterschiedlichen Inspirationen von User Interfaces speziell für Spiele in Google und Pinterest gesucht. Denn es war nicht ganz einfach dieses umzusetzen, denn es gab keine Erfahrungen wie dieses für Spiele umgesetzt wird. Zusätzlich wurde dann in Absprache mit den anderen Departments festgelegt, was alles in dem Spiel benötigt wird um dem User alles benötigte anzubieten aber doch nicht zuviel, sodass es unübersichtlich wird. Bei den Icons wurde versucht das Design der Figuren mit den fetten Outlines zu übernehmen, was nicht ganz so einfach umzusetzen war. Es wurde darauf geachtet dass die Linien der Icons dick sind. Die Icons wurden größtenteils komplett selber erstellt und paar wurden aus flaticon.com verwendet. Bei der Überlegung was alles im User Interface untergebracht werden muss, wurde erstmal nach unterschiedlichen Inspirationen von User Interfaces speziell für Spiele in Google und Pinterest gesucht. Denn es war nicht ganz einfach dieses umzusetzen, da Susanne keine Erfahrungen im Spielebereich hatte und wie das User Interface für Spiele umgesetzt wird. Zusätzlich wurde dann in Absprache mit den anderen Departments festgelegt, was alles in dem Spiel benötigt wird um dem Spieler alles benötigte anzubieten aber nicht zuviel, sodass es unübersichtlich wird. Bei den Icons wurde versucht das Design der Figuren mit den dicken Outlines zu übernehmen, was nicht ganz so einfach umzusetzen war. Es wurde vorallem darauf geachtet dass die Linien der Icons dick sind. Die Icons wurden größtenteils selber erstellt und wenige aus flaticon.com verwendet.
Bei der Erstellung des Prototypen wurde darauf geachtet, dass es einfach ist, die verwendeten Farben in jedem Element zusammen zu ändern. Dass hat es uns im Nachhinein erleichtert, nochmal kleinere Anpassungen zu machen und somit kurz schauen welcher Farben am besten zueinander passen, damit nicht jedes einzelne Teil angefasst werden musste. Bei der Erstellung des Prototypen wurde darauf geachtet, dass es einfach ist, die verwendeten Farben in jedem Element zusammen ändern zu können. Dass hat es uns im Nachhinein erleichtert, nochmal kleinere Anpassungen zu machen und somit kurz schauen welche Farben am besten zueinander passen, damit nicht jedes einzelne Element angefasst werden musste. Das selbe Prinzip wurde noch für Komponenten angewendet, wie z.B. den Bereich wie man ins Menü kommt und wie man das Spiel beendet.
Zum Schluss als das ganze Design des Prototypen stand, wurden überall noch die ganzen Verlinkungen eingefügt. Somit könnte der Prototyp zum Testing verwendet werden und war einfach zum Durchklicken. Zum Schluss, als das ganze Design des Prototypen stand, wurden überall noch die ganzen Verlinkungen zwischen den einzelnen Elementen eingefügt. Somit konnte der Prototyp zum Testing verwendet werden und war einfach zum Durchklicken.
#### Charaktere & Eye Candy: #### Charaktere & Eye Candy:
![UI_Kit___2](uploads/f68169a5368f32adfd9fe545cfdae9d4/UI_Kit___2.png) ![UI_Kit___2](uploads/f68169a5368f32adfd9fe545cfdae9d4/UI_Kit___2.png)
... ...
......