Utiliser l'éditeur de GUI intégré

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

Introduction

Dans ce deuxième tutorial, vous aprendrez à utiliser l'éditeur de GUI présent dans Doomedit, créer des scripts GUI en utilisant une approche plus visuelle.
Merci encore à doom3world.org et à Zeh qui a écrit le tutorial original Tutorial 2 de Zeh.

Téléchargez les fichiers tutorial 2

Lancer l'éditeur de GUI

Ce qui est bien connu pour Doom 3, c'est son éditeur intégré de map, mais ce que peu de personnes savent c'est la présence de plein d'autre éditeurs et parmi ceux là l'éditeur de GUI.

Pour lancer l'éditeur de gui, la chose à faire est de lancer le jeu, de rentrer dans la console (ctrl+alt+² ou ctrl+alt+~ suivant vos claviers) et de taper :

editguis

Doom 3 se "fermera" et l'éditeur de GUI apparaîtra

Vous aurez peut être des problèmes d'affichage, avec une souris qui disparaît. Je vous conseille alors de vous tournez vers le forum suivant
http://www.game-lab.com/forums/viewtopic.php?t=1287
Cela devrait vous permettre de configuer votre éditeur Doomedit de manière convenable.

Ensuite il y a deux moyen pour accéder à l'éditeur de GUI.

1.) Dans l'éditeur DoomEdit, repérer la fenêtre Inspector (en bas à gauche généralement) , cliquer sur l'onglet console et taper :

editguis

2.) Soit de faire une copie de votre raccourci vers l'éditeur Doomedit, de le rennomer en GuiEdit par exmple et d'ajouter à la ligne de commande +editguis (dans les propriétés du raccourci)

"D:\Doom 3\Doom3.exe" +r_fullscreen 0 +vid_restart +editor +editguis

Normalement vous devriez avoir une fenêtre Quake IV GUI Editor (et oui quake IV utilisera certainement le même éditeur) qui apparaît si tout va bien.

http://www.game-lab.com/images/tuts/doom3_gui2/tutorial2_01.gif

La première chose à faire est d'aller dans le menu "View > Options..." , s'assurer que "Ignore Desktop Select" est décoché dans l'onglet "General", d'aller dans l'onglet "Grid" et choisir les options suivantes :

http://www.game-lab.com/images/tuts/doom3_gui2/tutorial2_02.gif

Je suggère ceci pour une interface plus facile d'utilisation; si vous ne mettez pas la grille ("show grid" décoché), il n'y a pas de moyen de savoir ce qui est à l'intérieur de la zone d'édition de 640x480 et c'est facile de se perdre. Vou spouvez utiliser d'autres options bien sûr mais soyez prévenus.

Création d'un nouveau GUI

Maintenant allez dans le menu "File > New" (ou CTRL+N) pour créer un nouveau script GUI. Votre zone d'édition est alors "remplie" d'un script GUI vide.

http://www.game-lab.com/images/tuts/doom3_gui2/tutorial2_03.gif

Vous devriez voir une fenêtre "Navigator", qui donne quels éléments sont visible et comment ils sont reliés entre eux. Vous devriez avoir seulement la windowDef "Desktop" et elle est visible (petit icone représentant un oeil).

http://www.game-lab.com/images/tuts/doom3_gui2/tutorial2_04.gif

Sélectionnez Desktop. Le cadre de la sélection apparaît alors (le cadre bleu) et les attributs de la windowDef "Desktop" apparaissent dans la fenêtre "Properties".

Ce cadre bleu est utile pour déplacer vos éléments ou changer leur taille. Vous pouvez aussi utiliser les flèches de votre clavier pour déplacer les cadres (pixel par pixel) ou bien shift+flèche pour changer la taille.
A noter que la windowDef principale Desktop ne peut être déplacer ni ajustée en taille par ce moyen. Du moins avec ce que j'ai pu tester.

Dans la fenêtre properties vous verrez les attributs de la windowDef "Desktop", en l'occurence son nom et l'attribut rect et ses valeurs.

Ajoutons maintenant une nouvelle windowDef :

http://www.game-lab.com/images/tuts/doom3_gui2/tutorial2_05.gif

Allez dans le menu "Item > New > windowDef" et ajouter une nouvelle windowDef. Il ya beaucoup d'éléments à ajouter mais cela sera vu dans les autres tutoriaux.

Vous devriez alors voir apparaître un nouveau cadre bleu repésentant votre nouvelle windowDef. Double cliquez dessus et une fenêtre apparaîtra avec plusieurs paramètres à régler. Tapez le nom dans l'onglet "General" (j'ai mis "Titre" tout simplement) puis dans l'onglet "Text", taper le texte à afficher comme dans le tutorial précédent. Voilà ce que ça donne :

http://www.game-lab.com/images/tuts/doom3_gui2/Item_properties_tutorial2.jpg

C'est très simple et on retrouve tous les attributs que nous avons utilisé lors de la dernière leçon. Ce qui est bien c'est que vous n'avez pas à connaître les noms des attributs par coeur ou regarder dans une quelconque référence des GUI (qui n'existe pas encore cependant) : vous avez juste à jouer avec les différentes variables et voir les résultats.
Après avoir rempli la fenêtre, cliquez sur OK pour voir le résultat.

http://www.game-lab.com/images/tuts/doom3_gui2/salut_tutorial2.jpg

Voilà, facile ! Redimensionner votre windowDef pour voir tout le texte, et changer la position comme vous le souhaitez.

Nous allons ajouter une autre windowDef : cette fois-ci une image comme dans le tutorial précédent. Sélectionner encore une fois "Item > New > windowDef", double cliquez sur la fenêtre qui vient d'être créée, donnez lui un nom (onglet "General") et dans l'onglet "Image" utilisez ce qui suit :

http://www.game-lab.com/images/tuts/doom3_gui2/image_tutorial2.jpg

Ici on donne une couleur de fond (Backcolor), afin de voir entièrement l'image, et on donne le nom de l'image (Material) à faire apparaître. Ici aussi faîtes attention au chemin d'accès de l'image : ici "logo_us" signifie que l'image "logo_us.tga" se trouve dans le répertoire <doom3>\base\.
Il y a d'autres options mais on les laissera de côté pour l'instant. Essayez les tout de même si vous en avez envie.

Cliquez sur OK.

http://www.game-lab.com/images/tuts/doom3_gui2/tutorial2_06.jpg

Vous pouvez alors déplacer la windowDef que vous venez de créer ou la redimensionner pour essayer.

Vous pouvez aussi noter les attributs "background", "matcolor", ainsi de suite dans la fenêtre "Properties"

Une chose à noter est que, même si on a fait une windowDef pour le texte et une autre pour l'image, on peut combiner les deux et avoir une image avec un texte par dessus.

Maintenant, on peut observer notre nouveau GUI avec le rendu du moteur de Doom3. En effet, on peut visualiser les GUI dans l'éditeur mais ça donnera un résultat un peu moins bon qu'avec le vrai moteur du jeu. De plus si vous travaillez sur des animations vous ne verrez pas le résultat.

Pas besoin de sortir de l'éditeur de GUI (vu qu'il est intégré au jeu), il suffit de choisir dans le menu "Tools > Viewer" (ou CTRL+T)...

http://www.game-lab.com/images/tuts/doom3_gui2/tutorial2_10.gif

...et vous aurez une nouvelle fenêtre avec votre GUI rendu par le moteur du jeu.

http://www.game-lab.com/images/tuts/doom3_gui2/resultat_tutorial2.jpg

...et voilà ! bien qu'on ait créé un GUI statique, le visualisateur de GUI (GUI viewer) est très utile et nous aidera beaucoup pour tester les animations et les scripts.

Bien entendu l'éditeur de GUI a généré un fichier .gui représentant le code lui-même. Je l'ai sauvegardé sous le nom tutorial2.gui

windowDef Desktop
{
    rect    0,0,640,480
    windowDef Titre
    {
        rect    0,0,230,192
        visible    1
        forecolor    1,1,1,1
        text    "Salut !"
        textscale    1
    }
    windowDef logo
    {
        rect    109,119,373,241
        visible    1
        background    "logo_us"
        matcolor    1,1,1,1
        backcolor    1,0.50196081,0,1
    }
}

Notez l'absence d'attribut font.

Conclusion

N'oubliez pas que, même si l'éditeur de GUI est très puissant, il n'en reste pas moins qu'il est parfois plus commode de changer directement le code que via l'éditeur. Et puis comme tout language, il est quand même plus facile de produire des choses de qualité quand on connait le code et qu'on sait comment ça fonctionne.
Pour la suite, on rentrera un peu plus dans le côté technique.