XML : Étape par étape

De Runes of Magic Wiki FR
Aller à la navigationAller à la recherche

Cette page va servir à expliquer le fonctionnement des différents éléments qui peuvent être placés dans un fichier XML pour Runes of Magic. Chaque élément possède en outre sa propre page, avec la liste de toute les possibilités.

Note : Cette page est encore en construction.

Types d'éléments

Les éléments peuvent être distingués en trois types principaux, plus l'élément global Ui.

  • Éléments groupes : Il s'agit des éléments regroupant d'autres éléments.
  • Éléments objets : Il s'agit de tous les objets pouvant être créés pour l'interface, que ce soient les fenêtres, les boutons, etc.
  • Éléments événements : Il s'agit de tous les événements déclenchables par l'utilisateur sur les différents éléments objets.
  • Éléments propriétés : Il s'agit des éléments attribuant une ou plusieurs propriétés des éléments objets.


Eléments de base

Structure du document : Ui

Il s'agit de l'élément initial de tout document XML. Il définit les bases du document XML. L'élément UI possède trois propriétés, qui sont à spécifier dans chaque page XML.

 <Ui xmnls="http://www.runewaker.com/" xmnls:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://www.runewaker.com/UI.xsd">
    ...
 </Ui>

LUA et XML : Script

Il existe un élément qui spécifie au fichier XML quel fichier LUA il doit aller chercher de manière prioritaire pour les appels de code LUA. Balise auto-fermante qui contient la propriété file où est spécifié le nom de fichier.


Éléments objets

Types d'éléments objets

Il existe plusieurs éléments objets, avec des fonctionnalités différentes :

  • Button : Création de bouton.
  • Frame : Création de fenêtre ou de zone de clic.


Dimensions

Les éléments objets peuvent avoir différentes dimensions. Pour modifier la dimension d'un objet, il faut employer l'élément Size. Celui-ci s'emploie comme suit :

 <Size>
    <AbsDimension x="12" y="23"/>
 </Size>

Il faut tout d'abord créer l'élément groupe Size, qui contiendra alors l'élément propriété AbsDimension. Cet élément aura deux propriétés, x qui déterminera la largeur de l'élément objet, et y qui déterminera la hauteur de l'élément objet. Ces propriétés se doivent donc d'être positives non nulles.


Coordonnées

Tous les éléments objets doivent ensuite être placés sur la fenêtre. Les coordonnées qui seront spécifiées seront relative à un point particulier de l'objet à placer, et/ou d'un autre objet sur lequel s'aligner. Pour indiquer les coordonnées d'un objet, il faut employer l'élément groupe Anchors, qui contiendra lui-même les éléments Anchor pour placer l'objet.

 <Anchors>
   <Anchor point="CENTER">
       ...
   </Anchor>
 </Anchors>


L'élément Anchor possède tout d'abord la propriété point. Celle-ci sert à indiquer le point servant de référence sur l'objet pour les coordonnées. Le point est représenté comme suit :

       TOPLEFT        TOP        TOPRIGHT
          X ---------- X ---------- X
          |            |            |
          |          CENTER         |
   LEFT   X ---------- X ---------- X   RIGHT
          |            |            |
          |            |            |
          X ---------- X ---------- X
     BOTTOMLEFT      BOTTOM    BOTTOMRIGHT


Une fois ceci fait, il faut utiliser les sous-éléments Offset et AbsDimension pour indiquer les valeurs des coordonnées :

  <Anchors>
     <Anchor point="BOTTOM">
         <Offset>
             <AbsDimension x="0" y="-250"/>
         </Offset>
     </Anchor>
  </Anchors>
     

Le sous-élément Offset aura alors en sous-élément AbsDimension qui servira cette fois-ci à indiquer le décalage. La propriété x pour le décalage en abscisse, et la propriété y pour le décalage en ordonnée. Les X et Y peuvent donc êtres nuls voire négatifs.

S'il est nécessaire d'aligner l'objet avec un autre, il est alors possible de spécifier dans l'élément Anchor deux autre propriétés : relativeTo et relativePoint. La propriété relativeTo sert à sépcifier le nom de l'objet sur lequel il faut s'aligner. La propriété relativePoint indique ensuite le point de référence de l'objet sur lequel s'aligner. L'exemple ci-dessous représente l'alignement d'une frame dont la gauche sera placée à 5 pixels de la droite de la frame nommée "frmRef".

  <Anchors>
     <Anchor point="LEFT" relativeTo="frmRef" relativePoint="RIGHT">
         <Offset>
             <AbsDimension x="5" y="0"/>
         </Offset>
     </Anchor>
  </Anchors>


Arrière-plan : Définition d'une apparence

Pour qu'une frame ait une apparence, il faut lui définir un arrière-plan et une bordure. Ceci doit être fait en employant l'élément Backdrop. Voici un exemple de définition :

 <Backdrop edgeFile="Interface\BagFrame\BagFrame-Backdrop-Border" bgFile="Interface\BagFrame\BagFrame-Backdrop-BG">
    <BackgroundInsets>
       <AbsInset top="12" left="12" bottom="12" right="12"/>
    </BackgroundInsets>
    <EdgeSize>
       <AbsValue val="12"/>
    </EdgeSize>
    <TileSize>
       <AbsValue val="32"/>
    </TileSize>
 </Backdrop>

En détail, l'élément BackgroundInsets sert à spécifier le décalage entre la texture d'arrière-plan et les bordures de la frame. En utilisant pour cela le sous-élément AbsInset, il est possible de spécifier le décalage par rapport aux quatre bords. Ensuite, l'élément EdgeSize sert à expliciter la taille de la bordure (avec le sous-élément AbsValue), et l'élément TileSize sert à spécifier la taille des 'blocs' de texture d'arrière-plan qui vont servir à remplir celui-ci. Une fois encore, le sous-élément AbsValue est employé pour spécifier la valeur.


Couches : Texte et textures

Pour qu'un élément objet puisse être visible, il est nécessaire de lui attribuer des couches, contenant des textures ou du texte. L'élément Layers sert à contenir les éléments Layer de chaque couche. Chaque couche possède un niveau de priorité, défini par la propriété level. La couche ayant le niveau de priorité le plus élevé sera tracée par-dessus les autres :

     ------ HIGHLIGHT
    ------ OVERLAY
   ------ ARTWORK
  ------ BORDER
 ------ BACKGROUND

La couche peut alors contenir les sous-éléments Texture pour mettre des textures ou FontString pour afficher du texte.

 <Layers>
    <Layer level="BACKGROUND">
       <Texture...
    </Layer>
    <Layer level="ARTWORK">
       <FontString...
    </Layer>
 </Layers>


Textures

Chaque texture, définie par l'élément Texture, possède un nom (propriété name) et un chemin d'accès (propriété file).

 <Texture name="TextureA" file="Interface\BagFrame\BagFrame-Title-Border">
   ....
 </Texture>

La texture a ensuite une dimension et un point d'ancrage, définis par les sous-éléments Size et Anchors, de la même manière que pour un élément objet. Un autre sous-élément, TexCoords, sert à définir le taux d'affichage de la texture.

 <Texture name="TextureA" file="Interface\BagFrame\BagFrame-Title-Border">
    <Size>
       <AbsDimension x="120" y="250"/>
    </Size>
    <Anchors>
       <Anchor point="TOPLEFT"/>
    </Anchors>
    <TexCoords left="0.25" right="0.75" top="0" bottom="1"/>
 </Texture>

L'élément TexCoords sert à définir les parties de la texture affichées. Les valeurs spécifiées sont comprises entre 0 et 1. Left et Top correspondent aux points de début du traçage de la texture (par défaut 0). Right et Bottom correspondent aux points de fin de traçage de la texture (par défaut 1).


Texte

Du texte peut être affiché simplement par l'élément FontString. Celui-ci a comme propriétés le nom, puis le modèle de base servant à définir la police, par la propriété inherits. Enfin, le texte affiché par défaut est défini avec la propriété text. La zone de texte aura alors des coordonnées à nouveau définies par l'élément Anchors.

 <FontString name="txtPrice" inherits="GameFontNormal" text="Prix">
    <Anchors>
       <Anchor point="TOPLEFT">
          <Offset>
             <AbsDimension x="12" y="0"/>
          </Offset>
       <Anchor>
    </Anchors>
  </FontString>