Interactions simples

Écrit le 01/09/2004 par redneck
Dernière mise à jour : 06/02/2006

Interactions simples

Voici notre tutorial numéro 4.
Dans le précédent tutorial, nous avons créé un panneau GUI qui montrait l'état des gateaux cuisinés dans les cuisines de l'UAC ainsi que des boutons qui permettront de changer le statut affiché.
Ce tutorial est la traduction/adaptation du Tutorial #4 de Zeh disponible sur le forum de doom3world.org Merci à eux pour les sources.

Télécharger les fichiers du tutorial.

Les scripts GUI ne permettent pas seulement d'afficher des animations ou des images statiques. Ces scripts permettent aussi des interactions avec le joueur, et de modifier le niveau de jeu lui-même - ouvrir une porte, appeler un ascenseur ou allumer une lumière. Ceci est permis par les interactions basiques du GUI - capture de clicks de souris et lancement de commandes. Dans ce tutorial nous allons ajouter les interactions des clicks de souris avec nos boutons de statut.

Ce tutorial peut être réalisé de 2 façons : à partir du code lui-même ou bien à partir de l'éditeur. Utiliser le code est normalement plus rapide, mais pour une question de visualisation directe, nous utiliserons l'éditeur de GUI.

Ouvrez le script GUI que nous avons créé dans le dernier tutorial, et sauvegardez le dans le même répertoire <doom3>/base/etat_gateau sous le nom "etat_gateau2.gui" .

http://www.game-lab.com/images/tuts/doom3_interaction/tut4_1.jpg

D'abord, rappelez vous que nos windowDEf de statut, "statut_ok", "statut_pasmal" et "statut_beurk", sont toutes visibles. Pour l'instant nous allons les rendre "invisible" pour que le statut par défaut soit vierge. Dans la fenêtre "Navigator", double-cliquez sur "statut_ok" et dans l'onglet "General" décochez l'option "visible".
Le petit icone représentant un oeil à gauche de "statut_ok" disparaîtra aussi, rendant la windowDef "statut_ok" invisible dans l'éditeur. Attention tout de même : l'option "Visible" dans l'onglet "General" indique si la windowDef sera rendue dans le jeu lui-même alors que l'icone représentant l'oeil indique que la windowDef est visible dans l'éditeur. On peut donc avoir une windowDef qui n'apparaît pas dans l'éditeur (l'oeil est enlevé) mais visible dans le jeu ( option "visible" dans "general" cochée).
Vous remarquerez que les windowDef "enfants" qui sont "symbole_ok" et "texte_ok" ont aussi disparues.

Faîtes la même chose pour les windowdef "statut_beurk" et "statut_pasmal", on aura alors un panneau "ETAT ACTUEL DU GATEAU" totalement vierge.

http://www.game-lab.com/images/tuts/doom3_interaction/tut4_02.jpg

Nous allons ajouter les événements qui feront apparaître ces windowDef.

Les windowDef sont non seulement des éleements visuels (image, texte, bord et fond) mais elles répondent aussi à certains événements. Vous pouvez associer du code qui sera exécuté quand la souris se déplace sur une windowDef , en ressort ou bien quand on clique dessus.

Dans le code cela est très facilement réalisé comme si on voulait ajouter un attributs ou une windowDef "enfant". Par exemple, cette windowDef ...

windowDef monBouton { 
    rect        10, 10, 100, 100 
    background  "gui/button_background" 
    matcolor    1, 1, 1, 1 
} 

... pourrait être améliorer avec un événement comme suit ....

windowDef monBouton { 
    rect        10, 10, 100, 100 
    background  "gui/button_background" 
    matcolor    1, 1, 1, 1 
    Nom_d_événement { 
        // code à exécuter
    } 
} 

...et le code dans le bloc "eventName" serait exécuté quand une certaine condition serait remplie. Ces événements sont par exemple - "onMouseEnter" quand le joueur déplace le curseur vers la zone de la windowDef, "onMouseExit" quand le joueur déplace le curseur en dehors de la zone de la windowDef, "onAction" quand le joueur active la windowDef en cliquant dessus. Il y en a d'autres.

Nous utiliserons ces simples événements de souris. Dans notre exemple, cela ressemblerait à ...

windowDef monBouton { 
    rect        10, 10, 100, 100 
    background  "gui/button_background" 
    matcolor    1, 1, 1, 1 
    onMouseEnter { 
        // code à exécuter
    } 
} 

...et notre code serait exécuter quand le curseur rentre dans la zone de la windowDef.

Alors qu'il est facile de faire cela dans le code, dans l'éditeur de GUI nous n'avons pas directement accès au code de la windowDef. Heureusement l'éditeur permet d'ajouter autant de code que vous voulez à une windowDef.

Nous ferons d'abord les interactions simples avec les boutons. Dans l'éditeur, sélectionnez la windowDef "bouton_beurk" et aller dans le menu "Item > Scripts", ou bien click-droit sur la windowDef et choisir "Scripts", ou bien pressez CTRL+ENTER. La fenêtre de code "Item Scripts" apparaît.

http://www.game-lab.com/images/tuts/doom3_interaction/tut4_03.jpg

Bien sur comme nous n'avons pas encore de code, cette fenêtre est blanche. Ajoutons le squelette de ce que nous voulons ....

onMouseEnter 
{ 
} 

onMouseExit 
{ 
} 

onAction 
{ 
} 

Pour l'instant ça fait pas grand chose.

Venons-en à notre preimère command de script GUI : set. Avec set, vous pouvez établir des attributs de windowDef directement à travrs le code. (il ya quelques exeptions dont nous parlerons plus tard). set prend comme paramètre le nom de la propriété que l'on veut changer ainsi que la valeur que l'on veut attribuer.

onMouseEnter 
{ 
   set "bouton_beurk::matcolor" "0.5 0.5 0.5 1"; 
} 

onMouseExit 
{ 
   set "bouton_beurk::matcolor" "1 1 1 1"; 
} 

onAction 
{ 
} 

Il est facile de comprendre le code : quand le curseur rentre dans la zone, la propriété matcolor sera changée en "0.5 0.5 0.5 1", donc rouge sombre. Quand le curseru sort de la zone, matcolor revient à son état initial et le bouton redevient rouge..

Après ça , fermez la fenêtre "Item Scripts" et testez le GUI en pressant CTRL + T.
Et bien ça marche pas !!! Pourquoi ? Car la couche "sang" est sur le dessus et "capture" les évenements de souris.

Malgré cela, on peut dire que la couche "sang" n'aura aucun événement de souris à gérer, double cliquez sur la couche "sang" dans la fenêtre "Navigator". Dans la fenêtre qui apparaît, onglet "General" cochez l'option "No events". Cela permettra d'être sur que la couche sang d'interfèrera pas avec les événements (ce sera seulement un effet visuel).
Maitenant restestez votre GUI (CTRL + T)

http://www.game-lab.com/images/tuts/doom3_interaction/tut4_04.jpg

Et voilà ça marche !

Sortez du visualisateur. Sélectionnez "bouton_beurk" et pressez CTRL+ENTREE pour éditer son script. Copiez le et appliquez ce code aux "bouton_ok" et "bouton_pasmal". N'oubliez pas de changer le code pour qu'il fasse référence aux bonnes windowDef.

onMouseEnter 
{ 
   set "bouton_pasmal::matcolor" "0.5 0.5 0.5 1"; 
} 

onMouseExit 
{ 
   set "bouton_pasmal::matcolor" "1 1 1 1"; 
} 

onAction 
{ 
} 

Pour "bouton_pasmal" et

onMouseEnter 
{ 
   set "bouton_ok::matcolor" "0.5 0.5 0.5 1"; 
} 

onMouseExit 
{ 
   set "bouton_ok::matcolor" "1 1 1 1"; 
} 

onAction 
{ 
} 

Pour "bouton_ok".

Maitenant il faut que le click de souris fasse apparaître les messages de statut.

C'est facile. Comme nous avons changé la matcolor d'un bouton dans un événement d'une windowDef, on peut changer la propriété "Visible" d'une autre winbdowDef. Ainsi rendre la windowDef "statut_beurk" "visible" quand on clique sur le bouton "bouton_beurk". Sélectionnez "bouton_beurk", editez le code (CTRL+ENTREE) et tapez ceci :

onMouseEnter 
{ 
   set "bouton_beurk::matcolor" "0.5 0.5 0.5 1"; 
} 

onMouseExit 
{ 
   set "bouton_beurk::matcolor" "1 1 1 1"; 
} 

onAction 
{ 
   set "statut_beurk::visible" "1"; 
} 

Fermez et testez le GUI manitenant.

http://www.game-lab.com/images/tuts/doom3_interaction/tut4_05.jpg

Sympa non ? Vous aurez remarqué que le curseur s'est changé en main montrant une interaction possible.

C'est suffisant pour rendre visible une windowDef, mais il y a un piège. Si vous cliquez sur deux boutons, deux windowDef de statut seront visibles ce que nous ne voulons pas. On doit alors être sur de cacher les autres windowDef statut avant d'en rendre une visible. On ajoute au code :

onMouseEnter 
{ 
   set "bouton_beurk::matcolor" "0.5 0.5 0.5 1"; 
} 

onMouseExit 
{ 
   set "bouton_beurk::matcolor" "1 1 1 1"; 
} 

onAction 
{ 
   set "statut_beurk::visible" "1"; 
   set "statut_pasmal::visible" "0"; 
   set "statut_ok::visible" "0"; 
} 

Ainsi quand on clique "statut_beurk" apparaît et les windowDef "statut_pasmal" et "statut_ok" sont rendues invibles.

Maintenant copiez le bloc onAction de ce script et collez le pour les autres boutons. Changez évidemment le code pour que les bonnes windowDef soient visibles ou invisibles.

onAction 
{ 
   set "statut_beurk::visible" "0"; 
   set "statut_pasmal::visible" "1"; 
   set "statut_ok::visible" "0"; 
} 

Pour "bouton_pasmal", et

onAction 
{ 
   set "statut_beurk::visible" "0"; 
   set "statut_pasmal::visible" "1"; 
   set "statut_ok::visible" "0"; 
} 

Pour "bouton_ok".

Testez votre GUI. Si vous cliquez sur un bouton, le texte correspondant apparaît, si vous cliquez sur un autre bouton, le premier message disparaît et le nouveau apparaît.
Notre panneau manque un peu de son pour aggrémenter le tout
Dans le script GUI, on peut utiliser la commande localSound. Il y a un seul argument - le son que vous voulez entendre. Pour faire les choses plus faciles, nous utiliserons les sons intégrés au jeu avec des commandes copiées directement depuis les sources GUI de id software (ça ressemblera vraiment au jeu).
Nous allons ajouter un son quand le curseur rentre sur la zone d'un bouton et quand on clique dessus.
Sélectionnez "bouton_beurk" et pressez CTRL+ENTREE

onMouseEnter
{
    localSound "guisounds_ping2";
    set "bouton_beurk::matcolor" "0.5 0.5 0.5 1";
}

onMouseExit
{
    set "bouton_beurk::matcolor" "1 1 1 1";
}

onAction
{
    localSound "guisounds_click3"; 
    set "statut_beurk::visible" "1"; 
    set "statut_pasmal::visible" "0";
    set "statut_ok::visible" "0";
}

...c'est simple, notez que "guisounds_ping2" sera joué lors de l'événement onMouseEnter, et "guisounds_click3" sera joué lors du click sur un bouton.
Il vous faudra alors ajouter les même commande localSound aux "bouton_ok" et bouton_pasmal".

Petite remarque : bien que le tutorial original (Tutorial #4 de Zeh) met en avant la possibilité de l'éditeur de GUI de pouvoir jouer des sons, je n'ai pas réussi à faire sortir le moindre bruit avec ma version. ??? Je pose le problème si quelq'un trouve la solution merci de la poster plus bas.
Par contre comme nous le verrons dans le prochain tutorial, l'intégration de ce GUI dans une map montrera que les sons sont bel et bien entendus!!!

http://www.game-lab.com/images/tuts/doom3_interaction/tut4_6.jpg