Das Interface für Mexican Runner

Tools: Construct 3, Krita, Affinity Designer

Meine Bachelorarbeit ist ein 2D endless Runner. Es geht um den Mexikaner Iker Sanchez der Tacos einsammelt.
Die Benutzeroberfläche orientiert sich an der mexikanischen Welt und der Comic/Cartoon Optik des gesamten Spiels.

Unter diesem Link kann das Spiel gespielt werden.

Usability

Neben mir selbst haben auch einige Freunde das Spiel genossen. Allgemein kommt das Spiel gut an. Es wird als witzig empfunden und macht Spaß - genau das wollte ich erreichen.
Besonders bei der Usability und dem Leveldesign war das Feedback der möglichen User wichtig und hilfreich. Was ich unter Anderem gelernt habe ist, dass eine Erklärung der Steuerung auf dem Screen notwendig ist. Außerdem lernte ich, dass ich das Spiel stufenweise schwerer werden lassen sollte, denn so verhindere ich eine frühzeitige Frustration beim Spieler.

Das Hauptmenü Interface

Der Rand der Menüelemente wird mit typisch mexikanischem Quadratmuster und Farben verziert. Der Taco markiert den aktiven Menüpunkt. Wird ein Menüpunkt ausgewählt, gibt es einen Sound als Feedback Hier zeige ich einige Ideenskizzen , die ich in Krita koloriert habe. Die dunkelblaue Schrift bildet einen Kontrast zu den anderen Elementen . Blau taucht sonst auch nicht im Menü auf.

Das Pausenmenü

Drückt der Spieler die Pausetaste ertönt ein Sound und die Musik des Spiels wird unterbrochen. Es ähnelt dem Hauptmenü, jedoch sind die Illustrationen grafisch und flach gehalten, denn sie sollen im Vergleich zum Spiel nicht zu sehr auffallen. Ich habe diese in Illustrator gezeichnet. Das Menü hat einen leichten Schattenwurf, um sich vom Rest abzuheben.

Das In-Game-Interface

Das Spiel kann online über den Desktop oder mit Touchscreen auf mobilen Geräten gespielt werden. Das Pferd rennt automatisch, es ist also keine Eingabe dafür nötig.
Da das Game sowohl am Desktop als auch mobil gespielt werden kann, haben die Ingame-Elemente zwei Funktionen. Am Desktop geben sie eine Erklärung mit welcher Taste der User etwas machen kann, i n der mobilen Version dienen sie als Hotspot zum Ausführen der Aktionen. Die zwei wichtigsten Buttons zum Springen und Schlagen sind dabei in den unteren Ecken, weil sie in der Nähe der Daumen sind. Rechts oben steht die Zahl der gegessenen Tacos.
Am Desktop springt Iker mit der Pfeiltaste oben und schlägt mit X. Auf einem mobilen Gerät springt Iker per Tipp auf den Button unten rechts. Er schlägt per Tipp auf den Button unten links. Das Pausenmenü wird am PC mit Tastendruck S geöffnet. Es liegt auf S und nicht Escape, weil die Escape-Taste vom System schon zur Minimierung des Vollbildmodus benutzt wird. Auf dem Telefon wird das Spiel mit einem Tipp links oben pausiert.


Capybook

Tools: Angular, Typescript, CSS

Ein soziales Netzwerk für das größte Nagetier der Erde.

Spiele Datenbank

Tools: Angular, Typescript, CSS

Eine Datenbank über Videospiele. Die Spielinformationen werden über die API von RAWG.io abgerufen. Die Spiele werden nach Beliebtheit sortiert. Der Klick auf ein Spiel leitet zur Detailansicht. Dort kann sich der Nutzer weitere Informationen wie zum Beispiel Errungenschaften anzeigen lassen. Von der Detailseite aus kann er sich weitere Spiele des Entwicklers oder Publishers anzeigen lassen. Außerdem ist es möglich nach Spielen zu suchen. Einige UI-Elemente stammen von der Material Google Datenbank.

Dogs

Tools, React, Javascript, CSS

Ein Datenbank über Hunde mit selbst gesammelten Informationen.

Das Interface von Hop Away

Tools: Axure, Blender, Photoshop

Mithilfe des Rapid Prototyping Tools Axure habe ich das Spiel Hop Away realisiert. Die Assets habe ich Blender modelliert.
Dieser Prototyp entstand für eine Ausstellung im LWL-Naturkunde Museum Münster. Es soll die verschiedenen Fluchtstrategien von Grashüpfern demonstrieren.
Das Menü greift die Wabbenform des Spielfeldes, auf dem der Grashüpfer springt, auf. Es folgt dem geometrischen Stil der Game Assets im Low Poly Stil.

Unter diesem Link kannst du den Prototypen ausprobieren.

Die Benutzeroberfläche von Frogame

Tools: Löve 2D, Photoshop

Frogame ist das Abschlussprojekt meines Erasmussemesters in Game and App Development an der IADE Lissabon. Dieses wurde mit der Lua Scripting Language und dem Löve 2D Framework programmiert.
Hauptmenü und Pausenmenü sind, wie der Grafik-Stil des Spiels, im Pixelart Stil gehalten.

Unter diesem Link kann das Spiel gedownloaded werden.

Musik Website

Tools: HTML, CSS, Javascript

Die Website für mein Musik Magazin Hard Hit. Hier kann man sich die Ausgaben des Magazines herunterladen und mehr über mich und meinen Musikgeschmack erfahren

Website anschauen

Website-Prototyp mit Framer

Tool: Framer

Um das UX-tool Framer auszuprobieren erstellte ich diese fiktive Website für eine Pizzeria.

Das Projekt funktioniert im Browser als auch auf Mobilgeräten. Zum Prototypen