Entwicklertagebuch
Der GUI-Editor in ANNO 1404

 

Erstellung der Benutzeroberfläche

Tobias HummrichWer Anno 1404 spielt, macht dabei – bewusst oder unbewusst – ständig Eingaben über die Benutzeroberfläche (Graphical User Interface, GUI). Außerdem sind Spiele der Anno-Reihe traditionell komplex, was durch benutzerfreundliche Bedienung ausgeglichen wird. Daher erfordert die Entwicklung der GUI besondere Aufmerksamkeit.



Wie funktioniert die GUI?

Schematische Darstellung der Baumstruktur der Benutzeroberfläche. "Button 3" ist ein Kind von "Bild", "Textfeld" ist ein Kind von "Fenster"Die GUI in Anno 1404 besteht aus sogenannten GUI-Elementen. Jeder Button, jeder Fortschritts- oder Füllstandsbalken, jedes Icon und jedes Fenster ist ein GUI-Element. Alle GUI-Elemente sind in einer Baumstruktur angeordnet. Eine solche Struktur ist vergleichbar mit einem Stammbaum: Jedes Fenster hat eine Menge von „Kind“-Elementen, die ihrerseits wieder eine Menge von „Kind“-Elementen haben können usw. Dadurch wird es einfacher, die momentan relevante GUI anzuzeigen, denn meistens ist nur ein kleiner Teil der gesamten Benutzeroberfläche sichtbar. Und wenn ein Fenster gerade nicht sichtbar ist, muss auch keines seiner Kind-Elemente oder Kindes-Kinder dargestellt werden.
Jedes GUI-Element (sprich: die gesamte Baumstruktur) wird mittels einer Skriptsprache definiert. Ihm werden mittels dieser Sprache auch bestimmte Eigenschaften, z.B. seine Größe, die verwendete Textur, Rotation usw., zugeordnet. Schließlich kann jedes GUI-Element noch auf bestimmte Ereignisse, wie Maus-Klicks oder Status-Veränderungen, reagieren. Alles in allem enthält Anno 1404 ungefähr 5500 GUI-Elemente. Es wäre aber sehr aufwändig, alle diese Elemente über ihren Skriptcode zu konfigurieren. Daher wird ein komfortabler Editor eingesetzt, mit dem sich die gesamte GUI einfacher erstellen und editieren lässt. Er ist in der Lage, die Baumstruktur der GUI als schematischen Baum darzustellen und daraus den Skriptcode automatisch zu generieren.

Wie funktioniert der GUI-Editor?

Der GUI-Editor besteht aus mehreren einzelnen Fenstern, die unabhängig voneinander auf dem Desktop angeordnet werden können. Dadurch kann jeder das Layout des Editors seinen Bedürfnissen anpassen.

Der Elementbrowser. Selektiert ist der "Schließen"-Button im Diplomatiemenü.Von zentraler Bedeutung für die Bearbeitung der GUI ist der Elementbrowser. Er zeigt die gesamte Baumstruktur – vergleichbar mit dem Datei-Baum wie ihn etwa der Windows-Explorer darstellt. Wie in der Abbildung zu sehen, befinden sich auf oberster Ebene die Fenster. Sie sind mit einem grünen Icon versehen. Ihre Kind-Elemente sind beim Start des Editors verborgen. Die Fenster können aber, ganz wie die Ordner im Windows-Explorer, „aufgeklappt“ werden, so dass ihre jeweiligen Kind-Elemente zu sehen sind. Diese können dann, sofern sie selber Kind-Elemente enthalten, wiederum geöffnet werden usw. Im Elementbrowser lassen sich außerdem GUI-Elemente neu anlegen, verschieben oder löschen. Schließlich lassen sich hier auch GUI-Elemente selektieren, um ihre Eigenschaften im PropertyEditor anzuzeigen.

Der PropertyEditor. Aussehen und Position der GUI-Elemente können hier bequem eingestellt werden.Im PropertyEditor sind alle Eigenschaften eines GUI-Elements einseh- und änderbar. Solche Eigenschaften sind beispielsweise die verwendete (Hintergrund-)Graphik, die Position und Größe des Elements und ob es bei Spielstart sichtbar ist oder nicht. In der Abbildung ist der Schließen-Button des Diplomatie-Menüs selektiert. Er befindet sich in der rechten oberen Ecke des Menüs, was durch die Werte X (= 1221) und Y (= 5) spezifiziert wurde. Im PropertyEditor kann weiterhin für einen Button angegeben werden, ob er zum Beispiel ein Icon oder Text anzeigt und ob er per Drag'n'Drop „gezogen“ werden kann. Für ein Textfeld kann eingestellt werden, ob es editierbar ist und wie viele Zeichen es maximal zulässt. Doch fast alle diese Eigenschaften sind statisch. Sie sagen nichts darüber aus, wie das GUI-Element auf Aktionen des Spielers reagiert.

Den Elementen Leben einhauchen

Der EventEditor. Auf der rechten Seite ist zu sehen, was passiert, wenn der "Schließen"-Button des Diplomatiemenüs gedrückt wird.Dafür gibt es den EventEditor. Nehmen wir als Beispiel einen Button. Sein Aussehen ist im PropertyEditor konfiguriert, aber was passiert, wenn der Button geklickt wird? Im EventEditor werden dazu dem Klick-Ereignis eine oder mehrere sogenannte GUI-Aktionen zugewiesen. Intern verweist eine GUI-Aktion auf ein Stück Quellcode, eben der Programmteil, der beim Klick auf den Button ausgeführt werden soll. In der Abbildung ist zu sehen, welche GUI-Aktionen ausgeführt werden, wenn auf den „Schließen“-Button des Diplomatie-Menüs geklickt wird. Und erst durch diese GUI-Aktionen erfüllt der Button seinen eigentlichen Zweck. Aber die Bedienung von Anno 1404 soll nicht nur zweckmäßig sein, sie soll auch gut aussehen. Schöne Graphik ist natürlich eine Grundvoraussetzung dafür, weiterhin aufpeppen kann man die GUI aber auch durch GUI-Sequenzen.

Die GUI muss nicht nur funktionieren, sie muss auch gut aussehen. Mit dem SequenceEditor lassen sich Effekte erstellen.GUI-Sequenzen sind sozusagen die Special-Effects der Benutzeroberfläche. Sie haben keine Gameplay-Relevanz, sondern sehen einfach nur gut aus. Mit dem SequenceEditor lassen sich die Zustände eines GUI-Elements zu gewissen Zeitpunkten festlegen. Auf der rechten Seite der Abbildung ist eine Tabelle ähnlich dem PropertyEditor zu sehen. Und tatsächlich: Hier werden die Eigenschaften zu einem Zeitpunkt der Sequenz festgelegt. In den allermeisten Fällen sind diese Änderungen allerdings nur temporär, d.h. Effekte verändern das Aussehen der GUI nur vor­über­gehend.
Als Beispiel dient uns eine einfache Sequenz, die ein GUI-Element – einen Button etwa – auf­blinken lässt. Wenn sie startet, hat der Button also seine normale Farbe. Die Sequenz definiert nach 500 Millisekunden eine andere Farbe, sagen wir: Rot. Dazwischen wird interpoliert, d.h. die Farbe des Buttons wird fließend innerhalb dieser halben Sekunde zum definierten Rot. Nach 1000 Millisekunden, so legt es die Sequenz fest, soll der Button dann wieder seine Ausgangsfarbe haben. Wird diese Sequenz auf den Button angewandt, leuchtet er innerhalb einer Sekunde einmal rot auf. Im EventEditor kann diese Sequenz nun dem Klick-Ereignis des Buttons zugewiesen werden. Dann leuchtet der Button jedes Mal rot auf, wenn er gedrückt wird.

So kann mit Hilfe des GUI-Editors die Benutzeroberfläche auf einfache Art und Weise erstellt werden. Auch Änderungen an der GUI sind leicht im Nachhinein durchzuführen. Dies resultiert in einer stetigen Verbesserung der GUI im Laufe des Entwicklungsprozesses und damit letztendlich in einer besonders benutzerfreundlichen und intuitiven Handhabung von Anno 1404.


von Tobias Hummrich (Software Developer, Related Designs)

 

               

© © 2015 Ubisoft Entertainment. All Rights Reserved. Anno 2205, Ubisoft and the Ubisoft logo are trademarks of Ubisoft Entertainment in the US and/or other countries.
Anno, Blue Byte and the Blue Byte logo are trademarks of Ubisoft GmbH in the US and/or other countries.
Datenschutz | Nutzungsbedingungen | Impressum | Kontakt | Jobs | Presse | Händler | Support | Über Ubisoft