[Möglicherweisse veraltet. bitte um Überprüfung.]
An CrystalBlue stört mich zur Zeit am meisten das Benutzerinterface.
Aber das schöne an PlaneShift ist ja, dass es so offen ist. Daher kann man das Interface massiv umgestalten, wenn man nur weiß wie. Und da es kaum offizielle Dokumentationen gibt, hier nun eine Einführung!
Da ich nicht unbedingt der beste Grafiker bin soll dieses Tutorial auf die technischen Aspekte begrenzt sein, in einem anderen Tutorial zeige ich euch auch, wie das mit den Grafiken dann theoretisch geht.
Im ersten Teil wollen wir uns mit der allgemeinen Menüleiste beschäftigen, jene die normalerweise in der linken oben Ecke ist.
Die ist normalerweiße ziemlich groß und - meiner Meinung nach - unübersichtlich angeordnet. Ich hätte viel lieber ein zweizeiliges Design, mit kleineren Knöpfen, welche noch dazu ganz anders sortiert sind.
Kein Problem!
1. Wir brauchen dazu zwei Dateien. Beide befinden sich unter:
PlaneShift-Hauptordner/data/gui
Und es handelt sich um die Dateien "control.xml" und "control_styles.xml"
Als erstes öffnen wir die control.xml mit einem Texteditor und schauen sie uns etwas genauer an.
Die Datei beginnt hiermit:
Hiermit wird ein "Kontainer" erstellt, der dann die Navigationsleiste Enthält, das sogenannte ControlWindow.
Prinzipiell noch von Interesse sind für uns die Angaben:
visible="yes" savepositions="yes" movable="yes" resizable="yes"
Hier wird definert ob das ganze sichtbar ist (visible), ob die aktuelle Position für später gespeichert werden soll (savepositions), ob das ganze vom Benutzer im Spiel bewegt werden kann (movable) und ob wir die größe im Spiel verändern können (resizable).
Wenn ihr also die Standardansicht des Menüs gut findet und nur die Postion oder die Größe ändern wollt, könnt ihr das alles im Spiel tun (Shift-Klick auf die Elemente) und braucht diesen Guide nicht.
Wir wollen aber ein wenig mehr tun!
Aber in diesem Abschnitt der Datei müssen wir nichts ändern, gehen wir also weiter.
Hier wird ein Rahmen um alles bestimmt, wir könnten hier border="yes" setzen und würden einen Rand um unsere Menüleiste sehen. Tu es wenn du magst, für unser Beispielprojekt wird es aber nicht benötigt und sähe eher doof aus Smiling
Danach werden in unserem Kontainer zwei Objekte erstellt:
Das erste (name="ShowButtonUp") ist der kleine Knopf den ihr schräg rechts unterhalb des Quit-Knopfes seht, der dazu dient, die Leiste auszublenden.
Der zweite (name="ShowButtonDown") ist entsprechend der kleine Knopf den ihr in der linken oberen Ecke seht, nachdem ihr die Leiste ausgeblendet habt, daher hat er auch den Eintrag visible="no".
Auch hier müssen wir nichts ändern, ihr könntet allerdings z.B. die Größe der Knöpfe ändern indem ihr den Wert bei width="16" und height="16" ändert.
Alles weitere ignorieren wir hier und gehen weiter, endlich zu den Hauptmenüknöpfen, der erste ist der Quit-Knopf:
Hier bekommen wir zwei neuen interessante Einträge, nämlich tooltip="Quit" und sound="gui.quit".
Beim Eintrag tooltip steht das, was ihr zu lesen bekommt, wenn ihr mit der Maus über den Knopf geht.
(wenn ihr den PSDe-Patch installiert habt steht hier deshalb auch statt Quit Verlassen)
Beim Eintragg sound wird ein Sound definiert, der abgespielt wird, wenn man diesen Knopf benutzt, allerdings nicht direkt als Datei sondern durch eine Referenz, daher könnt ihr hier nicht einfach eine Sounddatei angeben die euch gefällt!
Ihr könnt den Tooltip ändern wenn ihr mögt.
Was wir allerdings wirklich ändern wollen ist die Größe der Knöpfe. Also die Einträge width="52" und height="52".
Das ganze ist in Pixeln angegeben und ich finde 32 mal 32 Pixel eine angenehme Größe für die Knöpfe, ihr solltet um das Tutorial genauso nachbauen zu können ersteinmal diese Größe nehmen, wenn ihr dennoch gleich eine andere eingeben wollt ist das kein Problem, ihr müsst blos im nächsten Abschnitt etwas mitdenken Smiling
So und nun müsst ihr die neue Größe noch bei allen folgenden Knöpfen ändern. (in den meisten Texteditoren kann man Text automatisch ersetzen lassen, tut das am besten indem ihr nach width="52" height="52" suchen und das dann durch width="32" height="32" ersetzen lasst.
Nachdem ihr das erledigt habt, die Datei unter dem gleichen Namen am selben Ort speichern.
2. Und nun wenden wir uns der zweiten wichtigen Datei zu, der control_styles.xml.
Diese Datei ist sogar ausnahmsweise recht gut dokumentiert, aber dennoch leite ich euch natürlich Schritt für Schritt hindurch.
Hier sind drei Stile definiert jeweils eingekleidet von
wobei das X eben eine Zahl von 1-3 ist.
Der Standardstil ist Nummer 2. Um einen Stil im Spiel zu ändern musst du auf den Pfeil zum Ausblenden rechtsklicken, damit schaltest du durch die hier definierten Stile durch.
Was wollen wir? Für das Tutorial erstellen wir eine zweizeilige Navigation, die halbwegs sinnvoll geordnet ist.
und zwar wie folgt, in der ersten Reihe sollen stehen:
Quit-Options-Help-Shortcuts-Guildinfo-Buddylist-Grouinfo-Petitions
in der zweiten dann:
Info-Chat-Spellbook-Inventory-Skills-Quests
Am besten sortiert ihr euch als erstes in der Datei die einzelnen Einträge.
Jeder Knopf wird durch
Wir kopieren also den zweiten Stil und kopieren ihn ganz unten ans Ende der Datei. Wichtig ist dass wir noch
Wir sortieren jetzt also die einzelnen Knöpfe ind die richtige Reihenfolge. Dazu tun wir erstmal nicht mehr, als die Einträge anders anzuordnen, das dient ausschließlich der Übersichtlichkeit und hat noch keinen Eoinfluss auf das Spiel.
Änderungen:
zu
zu
Anschließend die Einträge umsortieren, so dass es am Ende so aussieht:
Als nächstes ändern wir noch die Vorgabegröße der Knöpfe. Zwar reicht es an und für sich die Größe in der control.xml zu ändern, aber sobald wir einen anderen Stil aktivieren ist diese verloren.
Also nehmen wir uns diesen Eintrag vor:
So und jetzt kommt die eigentliche Arbeit, wir müssen die Koordinaten ändern an denen sich die Knöpfe befinden.
Der x-Wert gibt die Verschiebung auf der Längsachse (links-rechts) an und der y-Wert die Verschiebung auf der Höhenachse (oben-unten), jeweils gemessen am Rand des Bildschirms (x: vom linken Rand, y vom oberen Rand).
Als erstes platzieren wir die Knöpfe zum verstecken, bzw. wieder anzeigen der Leiste (ihr erinnert euch?) und zwar (fast) ganz oben links.
Die Knöpfe finden wir unter , der erste (name="ShowButtonUp") ist der zum verstecken, der zweite der zum wieder anzeigen (name="ShowButtonDown)".
Wir wollen sie jeweils 5 Pixel von dem oberen und 5 Pixel vom linken Rand entfernt haben, also tragen wir bei bei x und y jeweils 5 ein.
Ähnlich gehen wir jetzt bei den weiteren Knöpfen vor in der ersten Reihe bekommen ersteinmal alle Knöpfe einen y-Wert von 1, da sie alle 1 Pixel vom oberen Rand entfernt sein sollen.
Den x-Wert müssen wir jeweils berechnen:
Unser Knopf zum Verstecken ist 16 Pixel breit (siehe erster Teil), also muss der erste Menüknopf mindestens 16 Pixel für die breite des Knopfes + 5 Pixel für dessen Entfernung zum linken Rand - also 21 Pixel - vom linken Rand entfernt sein. Damit noch ein kleiner Abstand zwischen den beiden Knöpfen ist, wähle ich einen Wert von 25. Das ist unser x Wert für den ersten Menüknopf, also den Quit-Knopf.
Bei den weiteren Knöpfen gehen wir ähnlich vor, blos dass wir zwischen ihnen keinen Abstand wollen.
Unser zweiter Knopf ist dann 25 Pixel + die breite des Quit-knopfes - also 57 Pixel - vom linken Rand entfernt bekommt also einen x-Wert von 57.
Der dritte dann 89; der vierte 121; der fünfte 153; der sechste 185; der siebte 217 und der achte 249.
Damit haben wir die erste Reihe abgeschlossen und auch gleichzeitig die x-Werte für die zweite reihe ermittelt, da wir diese bündig mit der ersten haben wollen.
Also tragen wir hier für den ersten Knopf bei x 25; ein für den zweiten 57; usw. wobei wir hjier weniger Knöpfe haben und deshalb der letzte den Wert 185 bekommt.
Nun muss die zweite Reihe natürlich noch weiter nach unten als die erste, also müssen wir die y-Werte ändern.
Ich habe mich entschlossen einen kleinen Zwischenraum zwischen den beiden reihen zu lassen. Wir berechnen den y-Wert genauso wie den x-Wert des Quit-Knopfes, also abstand des oberen Knopfes zum oberen Rand (1) + die Höhe des Knopfes selbst (32) + den gewünschten Abstand. Mindestens muss der y-Wert der Knöpfe in der zweiten Reihe also 33 betragen, falls du keinen Zwischenraum willst. Ich habe einen Wert von 40 genommen und somit also einen Zwischenraum von 7 Pixeln.
Somit sieht die entsprechende Stelle dann so aus:
So nun müssen wir auch diese Datei wieder unter dem selben Namen am selben Ort speichern und sind fertig!
Und so sieht das ganze dann im Spiel aus:
| Anhang | Größe |
|---|---|
| control.xml_.txt | 8.32 KB |
| control_styles.xml_.txt | 4.57 KB |