Power-UI
Übersicht
Für meine Bachelorarbeit wollte ich mein Wissen aus dem Studium an etwas anwenden, das mich begeistert. Also habe ich mich dazu entschlossen, das UI für ein fiktives Videospiel zu erstellen! Um etwas Schaffbares zu machen, habe ich ein Mock-Up für ein fiktives Aufbau-Simulations-Spiel für Mobile erstellt. Da die Benutzeroberfläche eines Videospiels stark mit dem Gameplay verknüpft ist, habe ich auch versucht, eine einfache Gameplay-Schleife zu entwickeln.
Im Folgenden wurde der User-Centered Design Process zum Erstellen des Produkts angewandt. Die Schritte waren wie folgt: Analyse, Konzept, Design, Implementierung, Evaluation.
Inhaltsverzeichnis
Konzept
Da ich das UI für ein fiktionales Videospiel machen wollte, musste ich mir ein passendes Videospiel-Genre überlegen. Das Genre selbst hat einen großen Einfluss darauf, wie das Interface gestaltet wird. Grob gesagt, Casual Spiele (wie Match 3 oder Idling) brauchen weniger komplexes UI. Also habe ich mich für Aufbau-Simulation
als Herausforderung entschieden. Typische Aufbau-Simulationsspiele sind zum Beispiel die Anno- oder SimCity-Reihe.
Das Design folgte dem Ansatz von Mobile-first. Es war wichtiger, das Spiele-UI auf einem kleinem Bildschirm zum Laufen zu bringen, damit es später dann einfach für ein größeres Display angepasst werden kann.
Als Nächstes musste ich mich für ein Thema entscheiden. Dafür habe ich nach einem Thema gesucht, dass nur einen Aspekt eines Städte-Aufbau-Simulations-Spiels behandelt: Stromversorgung. Es ist eine der wichtigsten Infrastruktursystemen in unserem Leben. Über die Energiewende wird in der deutschen Politik schon seit Jahren geredet. Da natürliche Ressourcen, wie Kohle und Öl, langsam zur Neige gehen, investieren mehr Menschen in erneuerbare Energien.
Das Spiel selbst sollte die drei verschiedenen Aspekte von Energiepolitik behandeln: Umweltschutz, Wirtschaftlichkeit und Versorgungssicherheit. Beim Spielen sollte der Spieler einen Ausgleich zwischen diesen verschiedenen Systemen (wie Finanzierung, Ressourcen, Verschmutzung, etc) finden. Und um diese Entscheidungen zu unterstützen, braucht es ein komplexes UI.
Im Folgenden wird die Core Gameplay Loop mit einem kurzem Tutorial erklärt:
Der nächste Schritt war es dann, das Interface zu designen. Eine Anforderung für das Spiele-UI war, dass es platzsparend gestaltet ist (vor allem für Mobile). Screen Real Estate ist begrenzt und der Spieler sollte nur mit so viel Info versorgt werden, wie er gerade braucht. Also ist das Standard-UI sehr platzsparend angelegt, während Infofenster wie Finanzen großzügiger sind.
Design
Nach der Gameplay-Loop ist das visuelle Erscheinungsbild der wichtigste Aspekt. Ich habe versucht, auf Websites wie OpenGameArt oder Humble Bundle verwendbare Assets zu finden. Aber es war offensichtlich, dass ich meine eigenen Assets erstellen musste. Screen-Design, Icons und Game Objects mussten alle von Grund auf neu erstellt werden, während ein (modifiziertes) Terrain aus einem Humble Bundle verwendet wurde.
Icon-Design
Viele Informationen mussten platzsparend vermittelt werden. Aus diesem Grund war ein umfangreiches Icon-Set erforderlich. Der erste Schritt bestand darin, schnell viele Variationen der benötigten Icons zu erstellen.
Im Folgenden ist die erste Version der Symbole zu sehen. Sie wurden auch für den ersten Prototyp verwendet. Die Symbole selbst reichen von Gebäudetypen über Ressourcen bis hin zu allgemeinen Menübezeichnungen und Symbolen.
Die zweite Iteration der Symbole war eine Weiterentwicklung der ersten. Die Symbole sollten rund, freundlich und gut zu unterscheiden sein. Insgesamt wurden die wichtigsten Symbole neu gestaltet – das sind die für das Bau-Menü oder UI-Statusindikatoren wie Zufriedenheit der Bevölkerung.
Screen-Design
Bei der Gestaltung des Screen-Designs kamen die beiden Ebenen der Spielwelt und der Benutzeroberfläche des Spiels zusammen. Basierend auf den vorherigen Wireframes wurde das Bildschirmdesign erstellt. Die UI-Elemente selbst verwenden nur wenig Farbe zur Gestaltung, da die Farbverwendung für Infos reserviert ist.
Bevor ich tatsächlich Farben im Screen-Design verwendet habe, musste ich sicherstellen, dass das Gesamtbild gute Kontraste hat. Die UI-Elemente sollten genügend Kontrast zur Spielwelt haben, damit die Infos nicht verdeckt werden.
Im Folgenden sieht man, wie die Smart-TV-Ansicht aussieht. Diese ist zur mobilen Ansicht sehr ähnlich, aber die Navigation im UI muss auf die beiden Input-Achsen (links-rechts, oben-unten) der Smart TV-Fernbedienung ausgerichtet sein.
Terrain
Ein Spiel braucht auch eine Welt, in der es stattfindet. Das Gelände sollte einen einfachen, freundlichen und farbenfrohen Stil haben, damit es mit den gerenderten Assets harmoniert. Ich habe ein modifiziertes Tileset als Basis verwendet. Die Welt selbst besteht aus einzelnen Tiles (oder Kacheln). Darauf stehen Doodads wie Bäume, Büsche oder Felsen. Auch Spielobjekte wie die Kraftwerke selbst werden in die Welt gesetzt.
Ich habe den Tiled Map Editor verwendet, um die Karte zu erstellen. Terrain und Doodads waren in einem Tileset angeordnet. Die Karte konnte dann als json exportiert und innerhalb des Spiels rekonstruiert werden.
Assets
Die Assets für ein Bau-Spiel sind sehr wichtig, da der Spieler seinen Fortschritt in Form von großen Städten oder komplizierten Vorrichtungen sehen können soll. Um dem Spieler reichlich Optionen zu bieten, wurden viele Gebäude-Assets erstellt.
In den Skizzen wurde versucht, eine einfache Formsprache zu verwenden, damit die Gebäude leicht zu unterscheiden sind. Beispielsweise haben die meisten (konventionellen) Kraftwerke ein Generatorgehäuse, eine Energiequelle und Schornsteine. Gebäude vom Typ Andere Gebäude haben Würfel als Grundform.
Sie können in fünf Kategorien eingeteilt werden:
- Ressourcen
- Logistik
- Kraftwerke
- Infrastruktur
3D-Modelle
Die Zeichnungen waren auch die Grundlage für die 3D-Modelle. Aufbau-Simulations-Spiele haben oft eine isometrische Ansicht. Zum Protoyping wurde nur ein Teil aller Gebäude als gerenderter Sprite umgesetzt.
Implementierung
Um die Funktionalität des UIs zu testen, wurden insgesamt drei Prototypen erstellt.
Axure
Axure ist ein Tool zum Erstellen interaktiver Prototypen und Spezifikationen. Die Software wurde für den ersten Prototyp ausgewählt, da der Schwerpunkt ausschließlich auf dem UI-Design lag. Es erwieß sich als sehr nützlich, den Prototyp (visuelle Darstellung) parallel mit der Entwicklung des Konzepts zu erstellen.
Die Verwendung von Axure hatte jedoch auch Nachteile. Mit dem Prototyp wurden sieben Use-Cases implementiert, beispielsweise das Platzieren eines Gebäudes. Dazu ist eine Kollisions-Erkennung nötig: Der Spieler sollte nicht in der Lage sein, ein Gebäude auf einem anderem zu platzieren. Die Logik dafür musste also simuliert werden.
Unity
Nach dem Testen des Konzepts mit dem Klick-Prototyp waren viele Mängel offensichtlich: Ein Großteil der zugrunde liegenden Logik musste simuliert werden und die Prototyping-Software selbst stieß an ihre Grenzen. Als zweiten Durchlauf wollte ich den Prototyp mit der Game-Engine Unity erstellen.
Unity ist sehr mächtig, hat Multi-Plattform-Support und verfügt über ein reichhaltiges Ökosystem im Asset Stores. Der einzige Nachteil ist, dass das UI-System (UnityUI) nicht einfach zu bedienen ist. Es basiert auf GameObjects und einzelnen Komponenten und nicht auf Markup wie HTML und CSS. Also suchte ich nach einem Plugin, das mir helfen könnte und entschied mich für XmlLayout.
Ich habe auch versucht, eine grundlegende Spiellogik einzufügen. Ein Graph wurde für das Stromnetz implementiert und dieses mal gab es eine korrete Kollisionserkennung. Am Ende erwies sich ein Prototyp mit vollständiger Core-Funktionalität aber als zu ehrgeizig. Auch das UI-System war, selbst mit dem Plugin, immer noch ein Problem.
Phaser & VueJS
Die Arbeit mit Unity machte deutlich: Das wichtigste Merkmal des Prototyps ist das UI-System. Also habe die Technologie wieder gewechselt, diesmal zu HTML & CSS.
Für das Spiel selbst habe ich Phaser verwendet, ein HTML5-basiertes Spiel-Framework. Die UI-Optionen in Phaser sind jedoch sehr begrenzt. Also habe ich das UI mit VueJS über dem Spiel aufgebaut. Da beide Frameworks auf JavaScript basieren, war es sehr einfach beide Systeme miteinander zu verbinden.
Mit diesem neuen System habe ich die grundlegende Spiellogik wie Kamerabewegung, Rendern der Karte und Kollisions-Erkennung implementiert. Die Benutzeroberfläche selbst kommuniziert mit dem Phaser-Spiel über Events. Z.B. Wenn der Spieler ein Gebäude aus dem Baumenü in die Spielwelt zieht, übernimmt die Phaser-Instanz die Kontrolle.
Der Zweck des zweiten Prototyps bestand darin, Schwächen des ersten zu verbessern und schöner zu gestalten. Webbasiertes Styling zu verwenden hat sich als großartig erwiesen! Die Implementierung der Spielelogik in Phaser war jedoch eine Herausforderung. Beispielsweise gibt es keine native Unterstützung für isometrische Maps.
Nutzertests
Der Spielprototyp musste getestet werden, damit er tatsächlich für Gamer spielbar war. Während des Projekts wurden zwei Benutzertests durchgeführt: Der erste mit dem Axure-Prototyp, um das Konzept zu testen. Und ein zweiter, um dieses Konzept zu verfeinern und das Spiel besser zu gestalten.
Insgesamt wurden 19 Teilnehmer getestet. Bei jedem Test musste der Teilnehmer Fragen beantworten, z.B. wie vertraut er mit Videospielen ist. Danach wurden 7 Use-Cases im Prototypen gespielt. Um diese Tests vergleichen zu können, kam anschließend ein UEQ- und ein SUS-Fragebogen zum Einsatz.
Alles in allem hat der zweite Prototyp gute Bewertungen (SUS-Score von 72; UEQ zwischen 1 und 2 in den meisten Kategorien) bekommen. Die Leute mochten die Grafik und die gute Usability, aber einigen fehlte mehr Inhalt für das Spiel.
Der zweite Benutzertest wurde während des Global Game Jam 2020 in Ansbach durchgeführt. Es hat viel Spaß gemacht, besonders wenn man seinen Spielprototypen mit hochmotivierten Gamern testen kann.
Zusammenfassung
Zusammenfassend waren viele verschiedene Disziplinen beteiligt bei der Erstellung dieses Projektes. Videospiele sind ein sehr interessantes Medium, da sie Programmierung und Kunst vereinen, um etwas Spaßiges und Sinngebendes zu schaffen. Ihre Aufgabe ist eine gute Game-UX zu bieten und ich hoffe, ich konnte etwas über die Entwicklung von Spiele-UIs mit dieser Arbeit lernen.
Bei weiterem Interesse an meiner Arbeit kann diese hier gerne gelesen werden:
