| |
[Art Tagebuch]: Die Kunst des User Interface
Von Niel Vredeveldt
Zunächst einmal möchte ich die Gelegenheit wahrnehmen, mich vorzustellen: mein Name ist Niel Vredeveldt. Ich arbeite von Anfang an an dem Projekt mit, zuerst als Umgebungsgrafiker und nun als Interaction Designer hier bei TCoS.
Für diejenigen, die mit dem Begriff ‘Interaction Designer’ nichts anfangen können, das hat eine Menge mit Useability zu tun. Ich versuche, das Spiel benutzerfreundlicher zu machen. Wie man sich vorstellen kann, ist das Hauptwerkzeug durch das Spieler mit dem Spiele interagieren durch das User Interface. Es ist schon eine beängstigende Aufgabe, die Navigation durch TCoS zu einer angenehmen Erfahrung für jedermann zu machen und der Entwurf der des eigentlichen GUI nimmt den größten Teil meiner Zeit in Anspruch. Außerdem arbeite ich an dem Bewegungssystem, dem Kampfsystem, Spielerkontrolle und dem gesamten Kampffeedback:
In diesem kleinen Artikel versuche ich einen kleinen Teil dessen zu erklären wofür ich hier bei Spellborn verantwortlich bin: die gesamte Grafik des User Interface.
Diese Grafiken kann man in fünf Gruppen unterteilen:
- GUI Windows:
Das sind alle Interface-Fenster, die es in The Chronicles of Spellborn gibt, zum Beispiel Questlog, Freundesliste, Gildenfenster, Fertigkeitsbuch, Inventar usw.
- HUD: (Heads Up Display)
Das sind alle festen Interfaceelemente die während des Spiels auf dem Schirm sind, zum Beispiel Spieleravatarfenster, Minimap, Körperfelder, Kampfbalken etc.
- Icons:
Die gesamte Ausrüstung, jeder Questgegenstand, Rohstoffe und verbrauchbare Gegenstände haben Icons. Wir müssen tausende von Icons erstellen damit die Spieler einen Gegenstand erkennen wenn sie ihr Inventar oder einen laden durchsuchen. Außerdem brauchen wir zum Beispiel für den Kampf (Fertigkeiten) und die Interaktion mit NPCs spezielle Icons.
- Weltkarte
Wenn man das Universum von Spellborn erforscht, kann eine Karte sehr nützlich sein. Alle Karten sind in Splitterkarten unterteilt und diese in unterschiedliche Zonen. All diese Karten sind handgezeichnet.
- Zusätzliche GUI-Grafiken
Manchmal brauchen wir auch noch einzigartige GUI-Grafiken, zum Beispiel für das Innere von Läden, den Launcher, Ladebildschirme, Zeug für die Website usw.
Der Spellborn-Designstil
Weil Spellborn einen unverwechselbaren Grafikstil hat, versuche ich ihn auch in die GUI einzubringen. Die einfachste Art und Weise ist, die Wirbel und Windungen zu benutzen, die man so oft im Spellborn-Universum sieht, denn damit hat man eine GUI mit großem Detailreichtum. Es gibt allerdings einen Nachteil: das erste Design, das ich gemacht habe, ging sehr zu Lasten der Performance (Beta 1) und darum haben wir alles noch einmal neu gemacht, denn das Spiel zu spielen wenn der Rechner nur 5 Frames pro Sekunde darstellt schien uns keine gute Möglichkeit zu sein Wink Man sieht immer noch Teile dieses Designs im Layout der TCoS-Webseite.
Im derzeitigen Design, habe ich eine Menge dieser Wirbel und Windungen wieder aus dem GUI-Design herausgenommen, es rechts einfach gehalten und so die Performance beträchtlich gesteigert. Ich denke immer noch darüber nach, wieder mehr Details hinzuzufügen, und später kommt sicherlich noch mehr dazu, aber jetzt steht die Performance erstmal im Vordergrund.
In diesem Bild sieht man wie das GUI-Design sich während des Projektes entwickelt hat.
Farbschema
Als ich das User Interface überarbeitet habe, habe ich auch mit verschiedenen Farbschemata experimentiert. Die Farben, die es im Augenblick im Interface gibt, sind eine Kombination von Lila, Blaue und Rot für die Buttons. Es wird außerdem auch möglich sein, das Farbschema für die UI im Spiel zu wechseln - wir testen im Augenblick drei andere Farbschemata.
Das GUI-Fenster
Während man The Chronicles of Spellborn spielt, sieht man als User eine Vielzahl an Fenstern. Ich nehme als Beispiel eines dieser Fenster und erkläre, wie das alles zusammenkommen.
Lasst uns Beispiel das Inventar nehmen. Zuerst bekomme ich eine Anfrage von der Gameplay-Abteilung, dass wir eine Inventarfenster brauchen. Normale setze ich dazu eine Besprechung an. Da wird dann zusammen mit Gameplay, Interaction Design und der Techabteilung alles geklärt.
- Die Gameplay-Abteilung schreibt ein funktionales Design und erstellt eine grobe Beschreibung was es genau tun soll.
- Die Tech-Abteilung prüft, ob es möglich ist, die Technologie zu erstellen die hinter dem Fenster steckt und übernimmt die Verantwortung für die Implementation im Spiel.
- Die Interaction Design-Abteilung (also ich) entwirft ein Template-Design, das zeigt wie alles funktionieren soll, wo alle Buttons und Informationen platziert werden sollen. Die Positionen sind wichtig, damit das Fenster benutzerfreundlich ist. Das braucht normalerweise ein paar Versuche, um es richtig hinzubekommen. In diesem Bild seht ihr eine frühe Templateversion des Inventars.
Wenn alle Teilnehmer zustimmen, kann ich das endgültige Design entwerfen.
Für das endgültige Design benutze ich das Template um eine Vorlage in Photoshop zu erstellen. Die hat schon das endgültige "Look and Feel" wie letztlich die Version im Spiel. hier seht ihr eine endgültige Version des Inventars.
Wenn das Design fertig ist, gebe ich es unseren speziellen GUI-Codern. Alle notwendigen Grafiken für dieses Fenster werden in ein einziges großes Bild gepackt zusammen mit der den ganzen anderen GUI-Grafiken. Wir nennen das das “GUI sheet”. Die Code-Abteilung benutzt dieses Sheet dann um die Grafiken im Spiel zu erstellen. Ich verfolge den Implementationprozess genau und stelle sicher, dass alle Funktionen richtig implementiert werden.
Testphase
Wenn das Fenster schließlich im Spiel implementiert ist, beginnt die Testphase. Zuerst muss ich einen Acceptancetest machen. Das ist die letzte Prüfung, ob auch alle Funktionen plangemäß implementiert wurden. Gleichzeitig wird das Fenster unserer QA-Abteilung präsentiert und sie machen damit ihren ersten Probelauf. Das Feedback wird in weitere Überlegungen zur Verbesserung miteinbezogen. Wenn alles gut geht, erreicht das Fenster seinen finalen Status: Implementation in der endgültigen Fassung.
Quelle: TCoS Forum
|
|
