• Level: Anfänger (es sollte Teil 1 abgeschlossen worden sein)
  • Tools: Text-, HTML oder XML-Editor
  • Zeitaufwand: ca. 20 min


Teil2: Layer und Layout-Elemente

Nachdem ihr nun den ersten Schritt getan habt, ist es zwar schön, daß etwas angezeigt wird, aber nur so ein blöder Kasten nutzt ja in den meisten Fällen recht wenig. Daher wollen wir nun dem Kasten eine Textausgabe hinzufügen. Damit soll vor allem das Layer-System innerhalb der XML-Dateien erklärt werden.
Aber Vorsicht, dieses System ist starker Tobak!

Layer-Element: Layer

Es gibt bestimmte Elementtypen, die nicht von Frame abstammen und dadurch nicht für sich selbst einfach im AddOn stehen können. Sprich die Elemente benötigen immer(!) ein Frame-Element oder eines seiner abgeleiteten Typen. Damit man die besonderen Elemente auch einbauen kann und es gut sichtbar ist, wer welche Fähigkeiten besitzt gibt es das Element Layers. Dieses Element stellt eine Art Behälter dar, in dem ein oder mehr Layer-Elemente untergebracht werden können. Layer sind wiederum ein Behälter für die genannten eingeschränkten Elemente.
Hört sich jetzt alles furchtbar komliziert an, ist es am Anfang auch aber wenn man es einmal verstanden hat, ist es durchaus logisch.
Die Layer sind, wie der Name schon vermuten lässt, Elemente für Ebenen. Es gibt mehrere Arten von Ebenen, welche definieren, wie die im Layer-Element enthaltenen Elemente angezeigt werden sollen. Die Ebene wird durch das Attribut level im Layer-Element angegeben.
Halten wir folgendes fest

  1. Layers liegt im Element Frame oder einem der davon abgeleiteten Elemente.
  2. Layer liegt im Element Layers
  3. Es können mehrere Layer-Elemente in Layers vorhanden sein.
  4. Jedem Layer-Element muss durch das Attribut level eine Darstellungsebene zugewiesen werden.

Ist ja alles wieder Theoretisch daher mal ein fiktives Beispiel nur mit den drei genannten Elementen (alle anderen Elemente sowie unerhebliche Attribute werden aussen vor gelassen)

  1. Frame
  2. Layers !- Start-Tag Layers -
  3. Layer level="BACKGROUND" !- Start-Tag Layer mit level BACKGROUND -
  4. !- Spezial-Elemente -
  5. /Layer !- Ende-Tag Layer -
  6. Layer level="OVERLAY" !- Start-Tag Layer mit level OVERLAY -
  7. !- Spezial-Elemente -
  8. /Layer !- Ende-Tag Layer -
  9. /Layers !- Ende-Tag Layers -
  10. /Frame

In dem Beispiel werden zwei Layer definiert. Eines, das die darin enthaltenen Layout-Elemente im Hintergrund halten soll und ein Anderes, welches die enthaltenen Layout-Elemente über dem eigentlichen Frame-Element platzieren soll. Der Unterschied liegt darin, daß jedes Element im OVERLAY-Layer die Elemente im BACKGROUND-Layer überdecken kann.

Kommen wir aber endlich zum eigentlichen Thema den Layout-Elementen. In unserem ersten Fall zum Textelement Fontstring

Layout-Element: Fontstring

Um Texte in der Benutzeroberfläche auszugeben, bedarf es einem speziellen Element. Dieses Element heißt Fontstring. Das Element wird wie andere Elemente (zB Frame) positioniert und mit einer Größe belegt. Wobei es bei Texten zumeist sinnvoll ist, keine Größenangaben zu machen und diese einfach auszulassen.
Das Element selbst besitzt die folgenden Attribute

  • name
    Der Name des Elementes. In den meisten Fällen sollte auch hier mit dem Synonym $parent, sowie einem Zusatz zur Eindeutigkeit des Elementes gearbeitet werden.
  • text
    Wenn man bereits vorher einen festen Text zuweisen will, kann man das in diesem Attribut tun. Einfach als Wert den Text, der dargestellt werden soll, zuweisen. Es handelt sich hierbei aber nur um reinen Text! Wer also denkt er könnte jetzt lua-Funktionen reinschreiben, der irrt.
    Diese Angabe ist optional!
  • inherits
    Hier kann man angeben, welche Vorlage für dieses Textelement man verwenden will. WoW bietet bereits diverse Vorlagen für Textelementen an, die sich in der Schriftart und der Schriftgröße unterscheiden. In den meisten Fällen, sollte das Attribut mit dem Wert GameFontNormal belegt werden.
    Diese Angabe ist optional!

Für unser Beispiel wollen wir einen vordefinierten Text angeben und die Standardvorlage von WoW. Das Ganze soll als OVERLAY angezeigt und unterhalb des oberen Randes des Vaterelementes (dem Frame) ausgerichtet werden.

  1. Layers
  2. Layer level="OVERLAY"
  3. Fontstring name="$parent_Text" inherits="GameFontNormal" text="Dies ist ein Test"
  4. Anchors
  5. Anchor point="TOP" relativePoint="TOP" relativeTo="$parent"
  6. /Anchor
  7. /Anchors
  8. /Fontstring
  9. /Layer
  10. /Layers

In diesem speziellen Fall wird diesmal keine zusätzlichen Verschiebung des Elementes durchgeführt. Es reicht aus das Element durch die Ankerpunkte festzusetzen.
Wenn ihr das Erschaffene jetzt in WoW betrachtet, wundert ihr euch sicherlich, wieso die Schrift gelb ist. Dies ist ebenfalls durch die Vorlage definiert. Ihr könnt die Schriftfarbe aber sehr leicht verändern, damit die Schrift Beispielsweise weiß erscheint. Hierfür verwendet ihr einfach das Element Color. Das Element besitzt vier Attribute, welche alle im Bereich von 0.0 bis 1.0 liegen. Die Werte werden als reale Zahlen interpretiert.

  • r
    Das Attribut steht für die Farbe Rot.
  • g
    Das Attribut steht für die Farbe Grün.
  • b
    Das Attribut steht für die Farbe Blau.
  • a
    Das Attribut steht für die Durchsichtigkeit (alpha-Wert). Dieses Attribut ist optional und wird bei auslassen automatisch mit 1.0 belegt.

Wir wollen in unserem Beispiel die Schriftfarbe in Orange ändern. Dafür benötigen wir ein volles rot, und ein halbes grün laut Farb-Tabelle. Daher werden die beiden Attribute entsprechend angepasst.

  1. Layers
  2. Layer level="OVERLAY"
  3. Fontstring name="$parent_Text" inherits="GameFontNormal" text="Dies ist ein Test"
  4. Anchors
  5. Anchor point="TOP" relativePoint="TOP" relativeTo="$parent"
  6. /Anchor
  7. /Anchors
  8. Color r="1" g="0.5" b="0" /
  9. /Fontstring
  10. /Layer
  11. /Layers

Das Frame mit dem Textelement Da die Helligkeit automatisch auf den höchstmöglichen Wert eingestellt ist, können wir dieses Attribut auch ganz weglassen.
Nun sollten wir in unserem Kasten den Schriftzug Dies ist ein Test in oranger Farbe erblicken.
Schön, auch das haben wir also geschafft. Doch wir haben noch lange nicht das Ende erreicht.

Zum Download des Beispiels: HowTo_XML2a.zip


Layer-Element: Texture

Neben dem Textelement gibt es noch ein weiteres Layout-Element. Dieses Element erlaubt es Bilder anzuzeigen und wird Texture genannt. Das Texture-Element besitzt folgende Attribute

  • name
    Wie auch bei allen anderen Elementen, sollte hier ein eindeutiger Name verwendet werden.
  • file
    Der Name der Datei(ohne Endung) und die Pfadangabe.
    Dieses Attribut ist optional.
  • alphaMode
    Der alphamodus in dem die angegebene Textur(Bild) dargestellt werden soll.
    Dieses Attribut ist optional und wird im Normalfall mit “BLEND” initialisiert.

Zwar muss man nicht das Attribut file vorab belegen, was gut für bestimmte Aufgaben ist in denen man im Spiel die Textur anpasst, allerdings ist es für unseren Fall weniger sinnvoll das Attribut auszulassen.
Das Attribut alphaMode ist dagegen zu wenig getestet worden meinerseits, als das ich zu diesem Tips geben kann. Eventuell wird dies Teil eines anderen HoWTo werden.
Wie auch bisher, kann man dem Element eine Größe und eine Position zuweisen. Dies genügt auch für den ersten Schritt und wir wollen das Element einfach mit der folgenden Textur einbauen: “InterfaceGluesCharacterCreateUI-CharacterCreate-Classes”. Die Textur soll unterhalb der eigenen Schrift mit 10 Pixel Abstand erscheinen und 60×60 Pixel groß sein.

  1. Texture name="$parent_Textur" file="InterfaceGluesCharacterCreateUI-CharacterCreate-Classes"
  2. Size
  3. AbsDimension x="60" y="60" /
  4. /Size
  5. Anchors
  6. Anchor point="TOP" relativePoint="BOTTOM" relativeTo="$parent_Text"
  7. Offset
  8. AbsDimension x="0" y="-10" /
  9. /Offset
  10. /Anchor
  11. /Anchors
  12. /Texture

Das Frame mit dem Textelement und dem BildelementDie ausgewählte Textur zeigt alle Klassenicons, die im Spiel bei der Charaktererstellung gezeigt werden.
Nachdem ihr die Textur eingebaut habt, sollte es im Spiel dann so wie auf dem Bild gezeigt aussehen.
Die Textur wurde natürlich speziell gewählt, denn es gibt noch etwas das man mit der Textur machen kann. Wenn wir schonmal dabei sind, können wir das halt auch gleich abarbeiten.

Zum Download des Beispiels: HowTo_XML2b.zip
Bevor wir diesen Abschnitt volständig beenden und uns den Frame-Elemente zuwenden, wollen wir noch eine Kleinigkeit für die Anzeige des Bildes verändern.

Wie in 2b zu sehen, sind innerhalb des Bildes mehrere Icons versteckt. Jetzt fragt man sich natürlich wie man an die einzelnen Abschnitte des Bildes gelangen kann. Um einen bestimmten Bereich auszuwählen und anzeigen zu lassen in dem Texture-Element, wird das Element TexCoords eingebunden. Das Element besitzt vier Attribute, welche die Koordinaten des gewünschten Bereiches definieren.

  • left
    linke Startspalte
  • right
    rechte Endspalte
  • top
    obere Startzeile
  • bottom
    untere Endzeile

Die Werte stellen prozentuale Bildwerte zwischen 0.0 und 1.0 dar. Um es besser zu verdeutlichen wollen wir uns mal das gegebene Bild näher anschauen. Wie man deutlich erkennen kann, handelt es sich hierbei um 4 Bilder pro Spalte. Etwas schwieriger ist dagegen die Anzahl Bilder pro Spalte. Da wir das Bild aber syymetrisch definiert haben (60 hoch und 60 breit), liegt es nahe, das es sich ebenfalls um vier Bilder pro Spalte handelt.
Aufbauend auf dieser Grundlage kann man feststellen das jedes Bild 25% (entspricht 0.25) Breite und 25% (entspricht 0.25) Höhe des Gesamtbildes einnimt. Wir wollen für unser Beispiel das Klassenbild der Priester herauspicken und anzeigen lassen. Daher wird die Startspalte bei 0.5, die Endspalte bei 0.75, die Startzeile bei 0.25 und die Endzeile bei 0.5 gesetzt.

  1. Texture name="$parent_Textur" file="InterfaceGluesCharacterCreateUI-CharacterCreate-Classes"
  2. Size
  3. AbsDimension x="60" y="60" /
  4. /Size
  5. Anchors
  6. Anchor point="TOP" relativePoint="BOTTOM" relativeTo="$parent_Text"
  7. Offset
  8. AbsDimension x="0" y="-10"/
  9. /Offset
  10. /Anchor
  11. /Anchors
  12. TexCoords left="0.5" right="0.75" top="0.25" bottom="0.5" /
  13. /Texture

Damit sollte uns jetzt anstatt der kleinen Klassenbildersammlung ein großes Klassenbild der Priester entgegen scheinen.
Das war es auch schon wieder fürs erste. Als nächstes werden wir uns der Frame-Elemente widmen. Aber dies in einem eigenen HowTo.

zurück zur HowTo-Übersicht
zurück zur Übersicht der Skript-Sektion