Stylesheets

#Stylesheets

Cet metatable est très particulière car c'est avant tout une " librairie " de commande et de comportement. L'on va se servir de cette librairie pour créer des codes qui vont nous permettre de créer notre HUD de manière très simple.

Exemple :

Dans le cas ci-dessous nous demandons au menu de ce placer à 5 unit de la gauche et 2 unit du haut de notre écran et d'y rester même si l'utilisateur redimensionne la fenêtre. Nous lui demandons aussi que lorsque l'utilisateur fait un click sur ce menu il switch vers option.

CSS.MenuLeft = {
    left = 5;
    top = 2;
    resize = true;
    onclick = {
        switch = "Option";
    }
}

Dépendances

• UserInterface

Structure et fonctionnement du CSS

INFO : Les clés ne prennent pas en compte la casse.

####Sélecteur simple et sélecteur multiple :

Commençons par apprendre à utiliser un simple selector.

CSS.gameObject_name = {} 

Un sélecteur multiple :

CSS["gameObject_name1 gameObject_name2 gameObject_name3"] = {}

---

Comprendre la structure d'un fichier CSS Craftstudio

United.Stylesheets.Test = {}

do

    local CSS = United.Stylesheets.Test

    CSS.LeftMenu = {
        left = 5;
        resize = true;
    }
    
end

Pour commencer ce fichier doit être logiquement après le fichier boot dans le dossier défaut ressources. Déclarer une nouvelle feuille de style est simple, il suffit de dire que = United.Stylesheets. le nom de votre feuille de style est égal un tableau.

Le mot-clé CSS n'est qu'une technique pour raccourci l'écrit des commandes. Il serait con d'écrire à chaque sélecteur United.Stylesheets.Test.LeftMenu non ?

---

Le charger dans votre jeu

Retrouvons nous sur le fichier index de notre jeu (là ou généralement nous devrions déclarer le HUD)

function Behavior:Awake()
    UI = United.UserInterface:New(self,true) 
    United.Stylesheets("Test")
end

Et voilà le tour est jouer !

---

Sélecteur multiple et clé spécifique.

Il faut savoir que dans l'utilisation d'un sélecteur multiple il existe des clés spécifique! Exemple :

CSS["Menu_play Menu_Option"] = {
    model = "UI/MenuModel";
    key1 = {
        onhover = {
            model = "UI/MenuModel_hover";
        };
        onclick = {
            switch = "Play";
        }
    };
    key2 = {
        scale = 0.5;
        onclick = {
            switch = "Option";
        }
    }
}

La clé keyX (X étant le chiffre numérique de la sélection) vous permettra de préciser des actions uniques par clés sélectionner.

---

Button action

D'abord qu'est qu'une action ? C'est par exemple lorsque que l'utilisateur passe sur un bouton, alors à ce moment il peut y avoir plusieurs actions :

• Onclick
• Onhover
• Outhover
• Focus

Il est important de comprendre cet notion car elle sépare les commandes CSS en trois groupes distinct.

1. Les commandes uniques
2. Les sous-commandes
3. Les actions

Par exemple dans le code ci-dessous, left est une commande unique, onclick une commande d'action, scale une sous-commande.

CSS.MenuLeft = {
    left = 5;
    onclick = {
        scale = 0.5;
    }
}

Attention ça ne veut pas forcément dire qu'une sous-commande ne peut être utilisée uniquement dans une action, le nouvel exemple ci-dessous illustre bien cette problématique ;

CSS.MenuLeft = {
    left = 5;
    scale = 0.8;
    onclick = {
        scale = 0.5;
    }
}

Néanmoins il faut comprendre que leur position est majeure, car le premier scale est considéré comme le comportement scale par défaut de MenuLeft, alors que le second n'est que le résultat de l'action onclick.