Préparer et importer vos images

Écrit le 18/03/2005 par redneck
Dernière mise à jour : 05/04/2006

Avant Propos

Voici le troisième tutorial sur les scripts GUI.

Nous allons voir comment préparer vos images externes et les utiliser dans vos scripts GUI. J'utilise The Gimp car c'est un logiciel gratuit et très patique mais vous pouvez utiliser Photoshop ou tout autre logiciel permettant d'utiliser les techniques ci-dessous. Nous allons donc transformer un fichier PSD en un script GUI qui sera utilisé plus tard.

Ce tutorial est la traduction/adaption du tutorial #3 de Zeh disponible sur le forum de doom3world.org. Merci encore à eux pour les sources.

Introduction

Habituellement, pour créer une interface du moteur de Doom3, on utilise un logiciel d'édition graphique puis on importe les images à utiliser dans le script GUI.

Ce tutorial commencera à partir d'un fichier PSD (type Photoshop), puis nous exporterons nos images en réflechissant à leur utilisation et les réassemblerons dans l'éditeur de GUI.
Nous allons créer un panneau permettant de vérifier la qualité des gâteaux cuisinés par les hommes de l'UAC. Chaque personne pouvant tester la qualité du gâteau avant de le manger. Si la qualité du gâteau n'est pas au rendez-vous, on peut alors changer l'état de qualité en cliquant sur un bouton. Les personnes venant par la suite sont alors capables de voir la qualité du gâteau.

- Télécharger les fichiers Source du tutorial

Voilà à quoi ressemblera notre panneau de statut de la qualité du gâteau :

http://www.game-lab.com/images/tuts/doom3_gui3/tut3_26bis.jpg

Création et Export de l'interface depuis Photoshop

Voici le fichier PSD tutorial3_ecran.psd ouvert dans Photoshop.

http://www.game-lab.com/images/tuts/doom3_gui3/tut3_01.jpg

Toutes les couches (layers) sont visibles ici, le texte sera ajouté directement dans l'éditeur de GUI. Notez que le fichier PSD est créé avec une taille de 640*480, cela aidera quand nous aurons à redimensionner ou placer les prochaines windowDef dans l'éditeur.
Avant d'exporter quoi que ce soit, un petit conseil : utiliser une couche par windowDef n'est pas une bonne idée. Si vous partagez des images entre plusieurs GUI c'est bien mais il est préférable de rassembler plusieurs couches pour créer un seul fichier image. C'est ce que nous ferons ici, ainsi même un fichier PSD avec une douzaine de couches nous donnera un script GUI assez simple.

Pour commencer, nous allons cacher tout ce qu'on veut pas voir, et exporter ce qu'il restera à l'écran. Dans notre cas, on exportera en premier lieu le panneau, rendons invisible toutes les couches (y compris le fond) et laissons la couche « panneau » visible.

http://www.game-lab.com/images/tuts/doom3_gui3/tut3_02.jpg

Maitenant sélectionner tout (CTRL+A), assurez-vous qu'une couche visible est selectionnée (en cliquant dans le panneau des couches sur la couche « panneau », puis allez dans le menu Edit > Copy Merged (SHIFT+CTRL+C) pour créer une copie de tout ce qu'il y a dans les sous-couches « panneau » dans le presse-papier.

Sélectionnez le menu File > New (CTRL+N). Vous remarquerez qu'il utilise les dimensions — hauteur et largeur — de la partie visible, cliquez OK pour créer une nouvelle image.
Allez dans Edit > Paste (CTRL+V), puis supprimez la couche de fond « background » créée par défaut dans le panneau de contrôle des couches (bouton droit->Delete Layers)

http://www.game-lab.com/images/tuts/doom3_gui3/panneau_de_controle.jpg

Voilà on a une image prête à être exportée.

http://www.game-lab.com/images/tuts/doom3_gui3/tut3_03.jpg

Cependant avant de sauvegarder, il y a 2 pièges à éviter :

Le premier concerne la taille de l'image. Comme vous pouvez le voir dans le menu Image > Canvas Size, notre image a une taille de 600*440. Nous allons la transformer en une image utilisée par le moteur de Doom3 et si la hauteur et la largeur de l'image ne sont pas des puissances de 2, le moteur fera la transformation durant le chargement de l'image, rajoutant ainsi du calcul inutile. Il est donc conseillé de n'utiliser que des images qui ont des tailles puissances de 2 (4, 8, 16, 32, 64, 128, 256, 512).

Nous avons alors trois choix :

  1. Prendre notre image de 600*440 et la redimensionner à une bonne taille avec Photoshop (par exemple 512*256), puis l'exporter et l'utiliser dans l'éditeur de GUI en rechangeant les dimensions (fenêtre « transformer »), ou bien ;
  2. Ajouter des zones transparentes à notre image, pour la faire assez grande pour être d'une taille puissance de 2 (dans notre exemple 600 ->1024 et 440->512), puis l'exporter et l'utiliser telle quelle dans le script, ou bien ;
  3. Construire notre image à partie de plusieurs petites (côtés, coins, centre, bords) chacune ayant une taille correcte.

En ce qui concerne l'utilisation mémoire, le premier choix utilise toute la zone pour notre image. Mais l'image ne sera pas de bonne qualité à cause du redimensionnement

Le deuxième choix est bon car la qualité sera au rendez vous, mais vous utilisez de l'espace en texture inutile.

Le troisième choix est le meilleur, mais ce sera plus difficile de créer toute une interface. Mais il est très bon quand on veut créer des interfaces complexe ou que plusieurs scripts GUI utilise la même texture.

J'utiliserai le deuxième choix pour l'instant. Gardez à l'exprit que vous aurez à décider la meilleur option dans le futur, et cela dépendra de beaucoup de facteurs.

Donc on va ajouter quelques zones inutiles à notre image. Aller dans le menu Image > Canvas Size et changez la taille pour atteindre la taille plus grosse valide (puissance de 2). Ici 1024*512. Cliquez sur l'ancre (anchor) en haut à gauche pour que notre image reste dans le coin supérieur gauche du document.

http://www.game-lab.com/images/tuts/doom3_gui3/tut3_04.jpg

Cela changera la taille du canevas sans changer la taille de l'image.

http://www.game-lab.com/images/tuts/doom3_gui3/tut3_05.jpg

Maintenant le deuxième piège. Comme l'image aura une transparence, nous devons être sûrs qu'un canal alpha est exporté. Comme nous devons exporter une image TGA, il nous faut créer un canal alpha manuellemnt.

Pressez CTRL et cliquez sur le nom de la couche dans le panneau de contrôle des couches. Cela créera une sélection qui correspond au masque alpha de cette couche.

http://www.game-lab.com/images/tuts/doom3_gui3/tut3_06.jpg

Selectionnez le menu Select > Save Selection et utilisez le nom de votre choix pour le nouveau canal.

http://www.game-lab.com/images/tuts/doom3_gui3/tut3_07.jpg

Cela crée un nouveau canal alpha dans votre document. Vous pouvez trouver dans la fenêtre « Channels » du panneau de contrôle des couches. C'est juste un masque en grayscale de votre opacité, où le blanc est une opacité totale et noir une transparence totale.
Nous sommes prêts à sauvegarder l'image.

Allez dans le menu File > Save As. Sélectionnez le format « Targa » (TGA), et vérifiez que « Alpha Channels » est coché.

http://www.game-lab.com/images/tuts/doom3_gui3/tut3_08.jpg

Au lieu de sauvegarder dans le répertoire base de Doom3, nous allons nous organiser. Créez un dossier etat_gateau dans le répertoire <doom3>/base et sauvez l'image sous le nom panneau.tga.
Une nouvelle fenêtre apparaîtra, choisissez « 32 bits » sinon le canal alpha ne sera pas exporté.
Voilà pour notre première image. Fermez le document sans sauvegarder et vous allez vous retrouver avec le fichier PSD de départ. Occupons-nous alors du reste

Cachez toutes les couches puis rendez visible la couche « effetgore » et toutes les sous-couches pour que nous puissions exporter la texture représentant le sang et la vitre cassée.

http://www.game-lab.com/images/tuts/doom3_gui3/tut3_09.jpg

Le procédé est assez identique à ce qu'on vient de faire. J'ai nommé l'image sang.tga.

  1. Sélectionner tout (CTRL+A) ;
  2. Copy merged (SHIFT+CTRL+C avec la couche sélectionnée) ;
  3. Créer un nouveau document image (CTRL+N) ;
  4. Prendre les propriétés par défaut (ENTER) ;
  5. Coller la texture (CTRL+V) ;
  6. Supprimer la couche de fond, « background » par défaut ;
  7. Redimensionner le canevas (Image > Canvas Size) en utilisant la taille 1024x512 size et les ancres dans le coin supérieur gauche ;
  8. CTRL+Click sur la couche dans le panneau de contrôle des couches pour sélectionner sa transparence ;
  9. Aller dans Select > Save Selection, et utiliser n'importe quel nom ;
  10. Sauvegarder Save As au format TGA , avec « Alpha Channels » et 32 bit/pixel ;
  11. Fermer le document image sans sauvegarder.

Nous avons encore les boutons et les icones de statut à exporter. Dans le fichier PSD original, cachez tout et rendez visible la couche « boutons » seulement.

http://www.game-lab.com/images/tuts/doom3_gui3/tut3_10.jpg

Nous allons les exporter d'une façon différente. Bien que les 3 boutons appartiennent à la même couche, nous allons les exporter dans trois images différentes. De plus nous n'avons pas besoin de canal alpha donc ce sera plus facile.
D'abord utilisez le « Rectangular Marquee Tool » (ou M) dans la fenêtre d'outil à gauche (c'est le rectangle en pointillé en haut à gauche) et faites un rectangle autour du premier bouton pour le sélectionner. Ne vous inquiétez pas de la taille du rectangle, lors de la copie, les zones transparentes sont enlevées. Vérifiez que le premier bouton est sélectionné en entier et qu'aucune partie des autres boutons ne l'est.

http://www.game-lab.com/images/tuts/doom3_gui3/tut3_11.jpg

Maintenant on fait pareil qu'avant (sauf tout sélectionner sinon on va sélectionner les trois boutons) et on s'arrête à l'étape 6 (qui est devenu 5 dans ce cas)

  1. Copy merged (SHIFT+CTRL+C avec la couche sélectionnée) ;
  2. Créer un nouveau document image (CTRL+N) ;
  3. Prendre les propriétés par défaut (ENTER) ;
  4. Coller la texture (CTRL+V) ;
  5. Supprimer la couche de fond « background » par défaut ;

Maintenant nous devrions redimensionner la taille du canevas (probablement 128*64) mais comme on a affaire à un bouton très simple, la qualité de l'image n'est pas un gros problème, nous allons redimensionner l'image comme indiqué plus haut dans le choix numéro 1. Cela donnera un exemple des différentes manières de faire.

Allez dans le menu Image > Image Size. Ca marche comme Canvas Size mais cela va changer la taille de l'image elle-même à l'intérieur du document. Quand la fenêtre « Image Size » apparaît, décochez « Constrain Proportions » pour pouvoir changer la hauteur et la largeur indépendamment. Utilisez des valeurs puissance de 2 (128 et 64 respectivement).

http://www.game-lab.com/images/tuts/doom3_gui3/tut3_12.jpg

Pressez OK et l'image deviendra un peu plus grande.

Pour sauver, comme on n'utilise pas de transparence, on ne s'inquiète pas du canal alpha. Donc faites seulement File > Save As. Vérifiez que le « Alpha channels » est décoché. Sauvegardez dans le dossier etat_gateau sous le nom beurk_bouton.tga. Choisissez 24 bits/pixel (pas de alpha, pas besoin de 32).

Fermez le document, ne sauvegardez pas et retournez au fichier PSD original.
Faites la même chose pour les deux autres boutons et sauvegardez les sous les noms pasmal_bouton.tga et ok_bouton.tga dans le même répertoire.

Il nous reste à exporter les symboles représentant le statut du gateau. Comme pour les premières images, celles-ci ont aussi des paramètres de transparence donc on s'occupera du canal Alpha.

Avec le fichier PSD de base, cachez tout sauf la couche « statut ». Choisissez un des smileys à afficher (« tete de mort » par exemple) et cachez les autres. Répetez les différentes étapes du procédé d'export (notez que l'étape 7 est différente) :

http://www.game-lab.com/images/tuts/doom3_gui3/tut3_14.jpg
  1. Sélectionner tout (CTRL+A) ou bien « Marquee Tool » et sélection rectangulaire ;
  2. Copy merged (SHIFT+CTRL+C avec la couche sélectionnée) ;
  3. Créer un nouveau document image (CTRL+N) ;
  4. Prendre les propriétés par défaut (ENTER) ;
  5. Coller la texture (CTRL+V) ;
  6. Supprimer la couche de fond « background » par défaut ;
  7. Redimensionner le cannevas (Image > Canvas Size) en utilisant la taille 128*128 size et les ancres au milieu ;
  8. CTRL+Click sur la couche dans le panneau de contrôle des couches pour sélectionner sa transparence ;
  9. Aller dans Select > Save Selection, et utiliser n'importe quel nom ;
  10. Sauvegarder Save As au format TGA , avec « Alpha Channels » et 32 bit/pixel ;
  11. Fermer le document image sans sauvegarder.

Faites le pour les trois symboles de statut. J'ai utilisé les noms symbole_beurk.tga, symbole_pasmal.tga et symbole_ok.tga.

Nous sommes alors prêts pour créer le script GUI lui-même. Fermez Photoshop.

Le GUI Editor

Ouvrez l'éditeur GUI et créez un nouveau document GUI. Avant tout sauvegardez le sous le nom etat_gateau.gui dans le répertoire etat_gateau que nous avons créé plus tôt.
Commençons par le début : créez une nouvelle windowDef (menu Item > New > windowDef), et double-cliquez sur « Desktop » dans la fenêtre Navigator. Dans l'onglet « General » donnez lui le nom « panneau ». Dans l'onglet « Image », cochez l'option « Material » et tapez « etat_gateau/panneau » comme nom de « Material ».

Une chose à se rappeler, les accès aux fichiers sont relatifs au répertoire base de doom3. Donc « etat_gateau/panneau » se réfère au fichier <doom3>\base\etat_gateau\panneau.tga.
Ici il ne faut pas confondre : dans les onglets de l'éditeur GUI, les chemins d'accès sont écrit avec des / et pas des \ comme dans l'explorateur windows.

Ciquez OK, et voyez le résultat. La nouvelle windowDef est créée et on voit notre panneau comme fond. La taille est mauvaise malgré tout, nous avons besoin de le faire manuellement pour qu'elle corresponde à la taille originale car l'image a été créée en 1024*512 :

http://www.game-lab.com/images/tuts/doom3_gui3/tut3_15.jpg

...allez dans la fenêtre « transformer » et utilisez les tailles originales (1024x512). Puis centrez le panneau, en mettant 20*20 pour X*Y : en largeur 640 (taille desktop)-600(taille panneau)=40 ->20 de chaque côté, et en hauteur 480-400=40->20 de chaque côté.

Faites la même chose pour la couche de sang/vitre cassée. Créez une nouvelle windowDef, double-cliquez pour ouvrir ses propriétés et donnez lui le nom « sang », utilisez « etat_gateau/sang » dans l'onglet « Image » pour le « Material » choisissez « etat_gateau/sang » (bien sur vous pouvez remplir la fenêtre « Properties » si vous connaissez les noms des propriétés). Changez la taille à 1024*512 et la position à 0*0.

http://www.game-lab.com/images/tuts/doom3_gui3/tut3_16.jpg

Maitenant ajoutons le texte. Créez plusieurs nouvelles windowDefs, double-cliquez, ajoutez le texte, changer leur taille et leur position. Voilà ce que ça donne :

tut3_17bis.jpg

C'est pas mal mais il y a quelque chose de bizarre.
Si vous regardez bien le texte n'est pas recouvert par le sang ou les effets de la vitre cassée.

C'est normal en fait chaque fois que vous créez une windowDef, l'éditeur la place sur celles déjà existantes, dans la liste de la fenêtre « Navigator » le sang est tout en haut car il a été créé en premier, et donc tous les textes qui suivent apparaitrons par dessus.

Pour changer ça, sélectionner la couche « sang », bouton droit et choisissez Arrange > Bring to Front

tut3_18bis.jpg

Maitenant nous allons créer les boutons. Créez une nouvelle windowDef, éditez-la , nommez-la « bouton_beurk », mettez le nom « Material » à « etat_gateau/beurk_bouton », utilisez « BEURK » comme texte et pressez OK. Changer la taille (82*37) et mettez-le à la bonne position.

tut3_19bis.jpg

Deux choses à noter, la première est de penser à ramener la couche « sang » devant. La deuxième est que nous avons changé la taille de nos boutons à 128*64. En revenant à la taille originale (82x37), cela rend bien.
Enfin, nous avons utiliser une windowDef avec une image ET un texte.

Maitenant faites la même chose pour les « bouton_pasmal » et « bouton_ok ». Vous pouvez aussi copier le « bouton_beurk » , le copier et changer ses propriétés. C'est plus facile.
Ensuite n'oubliez pas de ramener la couche « sang » au premier plan.

Comme dans Photoshop, vous pouvez cacher différentes couches comme la couche de « sang », pour travailler sur les textes plus facilement. Il suffit de cliquer sur le petit oeil à côté du nom dans le panneau de contrôle des couches.

tut3_20bis.jpg

Nous allons maintenant, créer les panneaux de statut. Créer une nouvelle new windowDef, nommez-la « statut_ok », et positionnez-la à peu près au milieu de l'écran comme ci-dessous.

tut3_21bis.jpg

Créez une windowDef, nommez-la « symbole_ok », mettez le « Material » du nom de « etat_gateau/symbole_ok ». Changer sa taille (128*128) et placez-la dans la partie gauche de la windowDef « statut_ok » que nous venons de créer.

tut3_22bis.jpg

Nous faisons cela car dans la prochaine lesson, nous serons capable de changer le statut des windowDef donc c'est important de bien tout positionner. Nous allons maintenant faire dépendre le « symbole_ok » de la windowDef « statut_ok » (créer une relation parent/enfant)

Sélectionner les deux windowDefs « symbole_ok » et « statut_ok ». Une chose très importante : la dépendance se fera dans l'ordre où vous allez sélectionner les windowDefs. La première sera toujours parent et le reste enfant. Donc sélectionnez la windowDef « statut_ok » en premier.

Puis bouton droit et Arrange > Make Child.

http://www.game-lab.com/images/tuts/doom3_gui3/tut3_23bis.jpg

Ainsi la windowDef symbole se retrouve à l'intérieur de la windowDef statut et la liste des couches se rafraîchit montrant cela. La windowDef enfant fait partie de sa windowDef parent et est masquée par elle. Si on cache la parent on cache aussi l'enfant.

Maintenant créons du texte.

Créez une nouvelle windowDef, nommez-la « texte_ok ». Ce texte sera une description du statut actuel. J'ai utilisé la fonte par défaut, une échelle de 0.275 et le texte « Le gateau est propre à la consommation. Soyez attentif à tout signe clinique jusqu'à 4 heures après l'absorption. Tout symptome doit être signalé immédiatement à l'équipe de maintenance du rapport d'état des gateaux. » Placez-le texte à côté du « symbole_ok ».

tut3_24bis.jpg

Il faut ensuite rendre la windowDef du texte dépendante de la windowDef statut comme on a fait pour le symbole.

Après cela on a bientôt terminé, remettez la couche de « sang » en premier plan.

http://www.game-lab.com/images/tuts/doom3_gui3/tut3_25.jpg

Sauvegardez le fichier GUI dans le répertoire <doom3>/base/etat_gateau/ puis pressez CTRL + T ou allez dans Tools > Viewer pour tester avec le visualisateur.

http://www.game-lab.com/images/tuts/doom3_gui3/tut3_26bis.jpg

Il faut maintenant terminer avec les « statut_pasmal » et « statut_beurk ». Rappelez-vous qu'il est parfois plus pratique d'éditer le code et de le changer à la main.

Ouvrez le fichier .gui que vous venez de créer avec un éditeur de texte. Regardez la windowDef « statut_ok » :

   windowDef statut_ok
    {
        rect    64,159,512,147
        visible    1
        windowDef symbole_ok
        {
            rect    16,6,128,128
            visible    1
            background    "etat_gateau/symbole_ok"
            matcolor    1,1,1,1
        }
        windowDef texte_ok
        {
            rect    153,6,345,134
            visible    1
            forecolor    1,1,1,1
            text    "Le gateau est propre à la consommation. Soyez attentif à tout signe clinique jusqu'à 4 heures après l'absorption. Tout symptome doit être signalé immédiatement à l'équipe de maintenance du rapport d'état des gateaux."
            textscale    0.27500001
        }
    }

Faîtes simplement un copier /coller deux fois de ce texte. Laissez le texte original et modifiez les deux autres en changeant les « _ok » par « _pasmal » puis par « _beurk » dans la deuxième copie. Le résultat final est :

   windowDef statut_ok
    {
        rect    64,159,512,147
        visible    1
        windowDef symbole_ok
        {
            rect    16,6,128,128
            visible    1
            background    "etat_gateau/symbole_ok"
            matcolor    1,1,1,1
        }
        windowDef texte_ok
        {
            rect    153,6,345,134
            visible    1
            forecolor    1,1,1,1
            text    "Le gateau est propre à la consommation. Soyez attentif à tout signe clinique jusqu'à 4 heures après l'absorption. Tout symptome doit être signalé immédiatement à l'équipe de maintenance du rapport d'état des gateaux."
            textscale    0.27500001
        }
    }
    windowDef statut_pasmal
    {
        rect    64,159,512,147
        visible    1
        windowDef symbole_pasmal
        {
            rect    16,6,128,128
            visible    1
            background    "etat_gateau/symbole_pasmal"
            matcolor    1,1,1,1
        }
        windowDef texte_pasmal
        {
            rect    153,6,345,134
            visible    1
            forecolor    1,1,1,1
            text    "Le gateau n'est pas trop nocif. A n'utiliser qu'en cas d'extreme nécessité. Signalez-vous à l'équipe médicale immédiatement après absorption."
            textscale    0.27500001
        }
    }
    windowDef statut_beurk
    {
        rect    64,159,512,147
        visible    1
        windowDef symbole_beurk
        {
            rect    16,6,128,128
            visible    1
            background    "etat_gateau/symbole_beurk"
            matcolor    1,1,1,1
        }
        windowDef texte_beurk
        {
            rect    153,6,345,134
            visible    1
            forecolor    1,1,1,1
            text    "Manger ce gateau est synonyme de mort. Mettez la zone en quarantaine et commencez la décontamination AH2-B."
            textscale    0.27500001
        }
    }

Notez que j'ai aussi changé le texte pour mettre une meilleur description de chaque statut.

Après avoir modifier le fichier .gui, sauvegardez-le et fermez-le. Puis ouvrez ce fichier à partir de l'éditeur de GUI. Si vous avez fait une erreur dans l'edition texte du fichier .gui vous devriez avoir un plantage. Vérifiez alors votre fichier pour trouver où vous vous êtes plantés.
Si tout va bien vous devriez avoir les différents statuts qui se chevauchent l'un sur l'autre :

tut3_27.jpg

Conclusion

Voila et maintenant, il y a plus qu'à créer le script pour l'utiliser dans le jeu.