GUIPage (UT2003)

1. Introduction
2. Positionné la page
3. Les bases d'une page
4. Ajouter un composant
5. Assigner la page a un mutator

Créé le 01/06/2003
Dernière mise à jour le 16/07/2003

1) Introduction

GUIPage est dans Unreal Tournament 2003 la classe de base pour faire une page de configuration comme on en voit dans certain mutator par exemple.
La page est entièrement écrite dans les defaultProperties ce qui nécéssite de coder directement avec les codes exporter (voir ce tutorial), seule les valeurs de départs des composants (quand on ouvre la page) et des functions spécifique aux composants de la page (comme sauvegardé les options) sont écrit dans le code proprement dit.
Il faut également savoir que tous les composants dis Controls(x) dans les defaultProperties, doivent être correctement numéroté en commençant bien par 0 et a ajoutant 1 a chaque composant.

Hiérarchie de la classe: Object / GUI / GUIComponent / GUIMultiComponent / GUIPage
Package de la classe: xInterface

Top

2) Positionné la page

Avant de commencer il faut savoir que toute les positions et tailles de la fenêtre et de ses composants sont en pourcent , c'est a dire que 1.00 = 100% la taille de l'écran. L'avantage de cette technique employé c'est que la page aurra la même taille quelque soit la résolution de l'écran.

Pour commencer il faut définir la taille de la fenêtre et sa position.

Exemple:

defaultProperties
{
    WinLeft=0.125000 // position horizontalle a partir de gauche de 12,5%
    WinTop=0.250000 // position verticatalle a partir du haut de 25%
    WinWidth=0.750000 // largeur de la fenêtre égal 75% la largeur de l'écran
    WinHeight=0.500000 // hauteur de la fenêtre égal 50% la hauteur de l'écran
}

Ce qui fait une fenêtre de 75% de large et de 50% de haut centré.
Pour centré horizontallement la fenêtre ou un composant c'est simple on prend 1.00 moins sa largeur divisé par 2, pareil pour centré verticalement 1.00 moins sa hauteur divisé par 2.

Top

3) Les bases d'une page

En premier comme une sorte de routine on met les composant suivant:

• Le fond
• Le titre
• Un boutton pour sauvegardé les options et fermé la fenêtre (OK).

A l'exeption des commentaires on peut ce contanté de copié/collé, mais on ne fait qu'ajouté du code, donc on éffacé pas la taille de la page etc.

defaultproperties
{
    Begin Object Class=GUIButton name=WindowBackground
        WinWidth=1.000000
        WinHeight=1.000000
        WinTop=0.000000
        WinLeft=0.000000
        bAcceptsInput=false
        bNeverFocus=true
        StyleName="ComboListBox"
        bBoundToParent=true
        bScaleToParent=true
    End Object
    Controls(0)=GUIButton'WindowBackground'

    Begin Object class=GUILabel Name=WindowTitleText
        Caption="Ma page" // ici je met le titre de ma page
        TextALign=TXTA_Center
        TextColor=(R=0,G=220,B=0,A=255)
        TextFont="UT2HeaderFont"
        WinWidth=1.000000
        WinHeight=32.000000
        WinLeft=0.000000
        WinTop=0.275000
    End Object
    Controls(1)=GUILabel'WindowTitleText'

    Begin Object Class=GUIButton Name=OkButton
        Caption="OK"
        WinWidth=0.200000
        WinHeight=0.040000
        WinLeft=0.400000
        WinTop=0.675000
        OnClick=ClickSave // le nom de la function appelé quand on clique sur ce boutton, on verra plus loin comment sauvegardé
    End Object
    Controls(2)=GUIButton'OkButton'
}

On reconnais dans les composants les même variables que pour la fenêtre WinWidth, WinHeight, WinLeft et WinTop qui permette de la même façon de positionné et de changé la taille du composant.
Je conseille néanmoins de gardé la hauteur du composant par défault, exemple 0.04 pour un boutton.

Dans certain composant il y a la variable Caption où il faut mettre du texte comme pour par exemple un composant GUILabel (un composant qui contient juste du texte) ou GUIButton (ce qu'il y a écrit sur le boutton).

Dans un composant GUILabel on utiilse aussi les variables suivantes:

• TextAlign sert a aligné le texte, exemple : TXTA_Left, TXTA_Center, TXTA_Right
• TextColor est la couleur du texte (voir ce tutorial pour plus d'information sur les variables de type color)
• TextFont est le type de police utilisé (pour connaîttre les autres type de police a utilisé ici, ouvrir UnrealEd et regardé les sous-classes de Object / GUI / GUIFont)

Dans un composant GUIButton on utiise aussi la variable suivante:

• OnClick est le nom de la function a retour booléan appellé quand on clique sur le boutton

Top

4) Ajouter un composant

Pour ajouter un composant il y a plusieurs trucs mettre, dabord déclaré le composant ensuite initialisé sa valeur de départ (quand on ouvre la fenêtre) puis modifié la variable du mutator pour quelle corresponde a celle de l'option quand on seuvegarde et enfin créé le composant dans les defaultProperties.

Exemple pour une case a coché: (composant de type bool)

var moCheckBox MyOption;


function InitComponent(GUIController MyController, GUIComponent MyOwner)
{
    Super.Initcomponent(MyController, MyOwner);

    MyOption = moCheckBox(Controls[3]); // assigne ma variable au composant
    MyOption.Checked(class'MyMutator'.default.bMyOption); // dés l'ouverture de la page, met la valeur du composant comme celle de la variable de mon mutator (ici les variables son appellé pareil)
}


function bool ClickSave(GUIComponent Sender)
{
    class'MyMutator'.default.bMyOption = MyOption.IsChecked(); // met la variable de mon mutator comme celle de mon option
    class'MyMutator'.static.StaticSaveConfig(); // une fois la ou les variable modifié de mon mutator, sauvegarde dans le fichier ini spécifié par le mutator

    Controller.CloseMenu(FALSE); // ferme la fenêtre
    return TRUE;
}


defaultproperties
{
    Begin Object class=moCheckBox Name=MyOptionCheckBox
        WinWidth=0.400000
        WinHeight=0.040000
        WinLeft=0.300000
        WinTop=0.600000
        Caption="Mon option a coché"
        CaptionWidth=0.900000
        bSquare=true
        ComponentJustification=TXTA_Left
    End Object
    Controls(3)=moCheckBox'MyOptionCheckBox'
}

Dans un composant moCheckBox on utilise aussi les variables suivantes:

• CaptionWidth qui est la largeur maximum de la description de l'option (Caption)
• ComponentJustification qui aligne la description, exemple : TXTA_Left, TXTA_Center, TXTA_Right

Exemple pour une boite numérique: (composant de type int)

var moNumericEdit ScoreBonus;


function InitComponent(GUIController MyController, GUIComponent MyOwner)
{
    Super.Initcomponent(MyController, MyOwner);

    ScoreBonus = moNumericEdit(Controls[3]); // assigne ma variable au composant
    ScoreBonus.SetValue(class'MyMutator'.default.ScoreBonus); // dés l'ouverture de la page, met la valeur du composant comme celle de la variable de mon mutator (ici les variables son appellé pareil)
}


function bool ClickSave(GUIComponent Sender)
{
    class'MyMutator'.default.ScoreBonus = ScoreBonus.GetValue(); // met la variable de mon mutator comme celle de mon option
    class'MyMutator'.static.StaticSaveConfig(); // une fois la ou les variable modifié de mon mutator, sauvegarde dans le fichier ini spécifié par le mutator

    Controller.CloseMenu(FALSE); // ferme la fenêtre
    return TRUE;
}


defaultproperties
{
    Begin Object class=moNumericEdit Name=ScoreBonusEdit
        WinWidth=0.400000
        WinHeight=0.040000
        WinLeft=0.300000
        WinTop=0.425000
        Caption="Score bonus"
        CaptionWidth=0.700000
        MinValue=1
        MaxValue=5
        ComponentJustification=TXTA_Left
    End Object
    Controls(4)=moNumericEdit'ScoreBonusEdit'
}

Dans un composant moNumericEdit on utilise aussi les variables suivantes:

• MaxValue la valeur maximale autorisé
• MinValue la valeur minimale autorisé

Exemple pour un glisseur: (composant de type float)

Pour un slider en général on a besoin de 2 composants car il n'a pas de description (caption) on utilise aussi un GUILabel.

var GUISlider MaxTime;


function string MaxTimeValueText() // function utilisé pour affiché la valeur du slider juste en dessous de celui-ci
{
    return "( "$int(MaxTime.Value)$"secondes )";
}


function InitComponent(GUIController MyController, GUIComponent MyOwner)
{
    Super.Initcomponent(MyController, MyOwner);

    MaxTime = GUISlider(Controls[6]); // assigne ma variable au composant
    MaxTime.SetValue(int(class'MyMutator'.default.MaxTime)); // dés l'ouverture de la page, met la valeur du composant comme celle de la variable de mon mutator (ici les variables son appellé pareil)
    MaxTime.OnDrawCaption = MaxTimeValueText; // le nom de la function utilisé pour affiché la valeur du slider
    Controls[6].FriendlyLabel = GUILabel(Controls[5]); // jumelle mon slider au label de sa description pour que ce dernier change de couleur en sélectionnant l'option
}


function bool ClickSave(GUIComponent Sender)
{
    class'MyMutator'.default.MaxTime = MaxTime.Value; // met la variable de mon mutator comme celle de mon option
    class'MyMutator'.static.StaticSaveConfig(); // une fois la ou les variable modifié de mon mutator, sauvegarde dans le fichier ini spécifié par le mutator

    Controller.CloseMenu(FALSE); // ferme la fenêtre
    return TRUE;
}


defaultproperties
{
    Begin Object class=GUILabel Name=MaxTimeLabel
        Caption="Maximum time :"
        TextALign=TXTA_Left
        TextColor=(R=255,G=255,B=255,A=255)
        WinWidth=0.400000
        WinHeight=0.040000
        WinLeft=0.150000
        WinTop=0.525000
        StyleName="TextLabel"
    End Object
    Controls(5)=GUILabel'MaxTimeLabel'

    Begin Object class=GUISlider Name=MaxTimeSlider
        WinWidth=0.450000
        WinHeight=0.040000
        WinLeft=0.400000
        WinTop=0.525000
        MinValue=15.000000
        MaxValue=60.000000
    End Object
    Controls(6)=GUISlider'MaxTimeSlider'
}

Dans un composant GUISlider on utilise aussi les variables suivantes: (comme dans un moNumericEdit)

• MaxValue la valeur maximale autorisé
• MinValue la valeur minimale autorisé

Exemple pour un menu déroulant: (composant de type byte)

const DIFFICULTY_NUM = 3;
var localized string DifficultyText[DIFFICULTY_NUM];
var moComboBox Difficulty;


function InitComponent(GUIController MyController, GUIComponent MyOwner)
{
    local int i;

    Super.Initcomponent(MyController, MyOwner);

    Difficulty = moComboBox(Controls[7]); // assigne ma variable au composant
    for(i=0; i<DIFFICULTY_NUM; i++) // initialise le contenu des cases
            if(DifficultyText[i] != "")
                    Difficulty.AddItem(DifficultyText[i]);
    Difficulty.ReadOnly(True); // ne permet pas l'écriture
    Difficulty.SetIndex(class'MyMutator'.default.Difficulty); // dés l'ouverture de la page, met la valeur du composant comme celle de la variable de mon mutator (ici les variables son appellé pareil)
}


function DifficultyChanged(GUIComponent Sender) // function appelé quand on change la valeur du composant
{
    if(Controller.bCurMenuInitialized == FALSE) return;
    class'MyMutator'.default.Difficulty = Difficulty.GetIndex(); // met la variable de mon mutator comme celle de mon option
    class'MyMutator'.static.StaticSaveConfig();
}


defaultproperties
{
    DifficultyText(0)="Easy"
    DifficultyText(1)="Medium"
    DifficultyText(2)="Hard"

    Begin Object class=moComboBox Name=DifficultyComboBox
        WinWidth=0.700000
        WinHeight=0.060000
        WinLeft=0.150000
        WinTop=0.600000
        Caption="Difficulty :"
        CaptionWidth=0.375000
        OnChange=DifficultyChanged
    End Object
    Controls(7)=moComboBox'DifficultyComboBox'
}

Dans un composant moComboBox on utilise aussi la variable suivante:

• OnChange le nom de la function appellé quand la valeur du ComboBox a été changé.

Top

5) Assigner la page a un mutator

Ca va permettre au mutator quand on le sélectionne, de faire apparaîttre un boutton Configurer variante en bas a droite de sa description pour ouvrir la page.

Exemple:

defaultproperties
{
    ConfigMenuClassName="MyPackage.MyPage"
}

Top