CREER SA PROPRE INTERFACE (GUI)

Créer de A à Z sa propre interface n'est pas chose aisée. Pour vous aider, vous pouvez télécharger un template ou un GUI tout fait dans la section Ressources. Mais si vous souhaitez en réaliser un vous-mêmes, ne vous attaquez pas à trop complexe tout de suite.

Nous allons commencer par apprendre à en faire un à la fois simple et pratique, et que vous pourrez personnaliser par la suite une fois que vous aurez compris le fonctionnement.

Commencez par créer un nouveau jeu, puis choisissez le template Empty Game (pour ne pas vous retrouvez avec le GUI à la Sierra). Choisissez la résolution 640x480, puis la profondeur de couleurs 16 bits. Allez ensuite dans le panneau de gestion des GUI. Horreur, c'est tout vide !..

Pas de panique... Les templates les plus complexes utilisent plusieurs GUI, par exemple un pour les icônes d'action, un pour l'inventaire, un pour le menu sauver/charger, un pour les boîtes de dialogues, etc... Pour le moment, nous allons nous contenter d'un GUI unique avec toutes les fonctions accessibles au même endroit.

Dans le GUI numéro 0, vérifiez que l'option «clikable» est cochée, et l'option «text window» est décochée (nous faisons en effet un GUI avec des icônes sur lesquelles le joueur pourra cliquer, et non un panneau d'affichage de textes).

Nous allons commencer par déterminer la taille de notre interface. Nous allons la faire s'afficher sur toute la longueur de l'écran. Pour un jeu utilisant une résolution jusqu'à 640x480, si vous souhaitez une interface qui fasse toute la longueur de l'écran, vous devez entrez une longueur de 320 pixels (400 si vous faites un jeu en 800x600). Dans la fenêtre mouvante «GUI 0», double-cliquez sur la ligne Width (largeur) et entrez 320. Dans la ligne Height (hauteur), nous allons entrez une hauteur de 100 pixels.

Vous pouvez choisir la couleur du fond en double-cliquant sur la ligne «background color» et en entrant le numéro correspondant à la couleur souhaitez (en vous aidant du panneau Palette).

Si vous souhaitez afficher une image de fond, elle doit être de la taille de la résolution du jeu. Ici par exemple, bien que nous ayons entré une largeur de 320 pixels, il faudra malgré tout une image de 640 pixels de long pour un jeu utilisant une résolution de 640x480.

Téléchargez celle-ci pour commencer et sauvegardez-la au format BMP :

Notez qu'elle fait 640x200 pixels (donc le double des valeurs entrées précédemment). Allez dans le panneau de gestion des sprites, et cliquez sur Import New Sprite. Sélectionnez l'option Palette Index 0, étant donné que nous ne voulons pas de fond transparent, puis choisissez l'image de fond et cliquez sur Grab Entire Image.

Retournez au panneau de gestion des GUI. Dans la fenêtre GUI 0, double-cliquez sur Background Image, et choisissez le fond.

Nous allons à présent ajouter des icônes sur ce fond. Commençons par le menu disque : nous allons créer un bouton pour sauvegarder une partie, charger une partie, ou quitter le jeu. Nous les placerons à droite de l'interface.
_________________

http://www.ninatonnerre.com : le site officiel de la BD Nina Tonnerre
http://katurajdr.fr : mon forum officiel sur mes BD et autres créations

Allez dans le panneau de gestion des sprites, et importez chacun des sprites suivant selon la manipulation habituelle :

Notez que j'ai fait deux icônes par bouton : celui écrit en blanc sera celui affiché en temps normal, et celui écrit en jaune apparaîtra quand le pointeur de la souris survolera le bouton et appuyera dessus. Bien sûr, cela n'est pas obligatoire, mais rajoute un petit plus visuel !

Retournez dans le panneau de gestion des GUI, puis cliquez sur la première icône «Add GUI button». Tracez un rectangle en haut à droite sur votre fond, ne vous occupez pas de sa taille pour l'instant. Ceci fait, vous voyez apparaître un bouton gris avec du texte dessus. Rien ne vous empêche de laisser vos boutons avec cette apparence, mais avouons quand même que c'est assez moche... Nous allons donc les remplacer par les images ci-dessus.

Dans la fenêtre mouvante, double-cliquez sur la ligne «Image», puis sélectionnez l'image correspond à l'icône «Sauver» écrit en blanc. Répétez l'opération avec les lignes «Mouseover image» et «Pushed image», mais choisissez cette fois celui écrit en jaune.

Faites deux autres boutons de la même manière, afin de créer des icônes «Charger» et «Sauver». Si tout va bien, votre interface doit maintenant ressembler à quelque chose comme ça :

Nous allons maintenant programmer chacun de ces boutons afin qu'ils fassent ce qu'ils sont supposés faire ! Sélectionnez le bouton «Sauver», puis double-cliquez sur la ligne «script name». Entrez quelque chose comme «Sauver», par exemple. Puis double-cliquez sur le bouton : la page de script apparaît.

Trouvez la ligne intitulée «#sectionstart sauver_Click», puis, après la ligne «function sauver_Click(GUIControl *control, MouseButton button) {», entrez la ligne : «SaveGameDialog ();». Cela signifie que lorsque le joueur clique sur ce bouton, le jeu va lancer la boîte d'interface permettant de sauvegarder le jeu.

Répétez l'opération pour le bouton «Charger», et entrez la ligne «RestoreGameDialog ();».
Répétez l'opération pour le bouton «Quitter», et entrez la ligne «QuitGame (1);». Le 1 signifie que le jeu va d'abord demander confirmation au joueur avant de quitter ; si vous entrez 0, le jeu quittera tout de suite.

Si vous avez bien suivi les instructions, votre script doit ressembler à ceci :

Et voilà ! Vous avez votre menu Disque du jeu !
_________________

http://www.ninatonnerre.com : le site officiel de la BD Nina Tonnerre
http://katurajdr.fr : mon forum officiel sur mes BD et autres créations

Occupons-nous à présent de la liste des verbes, afin que votre personnage puisse interagir avec son environnement à travers plusieurs actions possibles.

Avant toutes choses, si vous avez créé un nouveau jeu à part du template Empty Game, il vous faut importer une image pour le curseur de la souris. Vous pouvez importer une image par mode (par exemple un curseur pour «marcher», un curseur pour «utiliser», etc), ou utiliser la même pour tous les modes, comme vous le souhaitez (voir le tutorial décrivant la partie Curseurs et modes de la souris).

Ensuite, téléchargez et sauvegardez les images suivantes au format BMP, et importez-les dans le panneau de gestion des sprites (avec le fond transparent cette fois) :

Retournez au panneau de gestion des GUI, et comme précédemment, créez 5 boutons en choisissant à chaque fois une image, afin de créer des boutons «Marcher», «Prendre», «Parler», etc. N'oubliez pas de sélectionnez l'image avec le texte en rouge quand la souris survole ou clique sur le bouton.

Vous devriez avoir à présent un GUI qui ressemble à ceci :

Nous allons à présent configurer ces boutons de manière à ce que le mode de la souris change quand on clique dessus.

Cliquez sur le bouton «Marcher», puis, dans la fenêtre mouvante, sur «left click», et choisissez «Set Cursor Mode». Double-cliquez ensuite sur la ligne en-dessous, «New mode number», et entrez 0, ce qui correspond au mode de curseur «Walk to» (voir le panneau de gestion Cursors).Répétez l'opération pour :
- Regarder : new mode number 1
- Parler : new mode number 3
- Prendre : new mode number 5
- Utiliser : new mode number 2

Le mode 4 étant activé lorsqu'on clique sur un objet d'inventaire, il n'est pas utilisé ici.
Voilà, vous avez votre liste de verbes ! Si vous avez programmé des événements utilisant ces verbes dans les menus d'interactions, le personnage pourra les activer en choisissant le verbe puis l'objet à actionner.

Occupons-nous à présent de l'inventaire. Il reste de la place au milieu : cliquez sur le dernier bouton, «Add GUI inventory window», puis tracez un cadre entre la liste des verbes et la liste du menu Disque, sur toute la hauteur. Vous voyez apparaître un cadre blanc et une fenêtre mouvante «GUI Control - inventory». Notez les lignes «item widht» et «item height» : ça indique la taille en pixels des objets d'inventaire. L'idéal est donc d'importer des sprites de la même taille pour les objets d'inventaire ; s'ils sont plus grands, ils risquent de se superposer. Vous pouvez bien sûr modifier la taille si vous souhaitez afficher des petites ou des grandes images dans l'inventaire.

Et voilà votre interface ! Il ne vous reste plus qu'à configurer la manière dont elle va s'afficher dans le jeu. Cliquez sur le fond, de manière à faire apparaître la fenêtre mouvante correspondante, puis double-cliquez sur la ligne «Visible». Vous pouvez ici choisir de quelle manière l'interface apparaît dans le jeu. Choisissez «Persistent», de manière à ce qu'elle reste affichée tout le temps.

Il faut maintenant déterminer à quel endroit de l'écran elle s'affiche. Le GUI se base sur une taille de 320x240 (la moitié de 640x480). Si nous voulons l'afficher en bas, étant donné que sa hauteur est de 100, nous allons entrez «140» dans la ligne «Y-Position». Laissez «X-Position» à 0 puisque l'interface prend toute la largeur.

Ce qui vous laisse une hauteur de 280 pixels pour votre décor. Sur un dessin faisant 640x480 pixels, vous devriez donc importer des images comme celles-ci si vous utilisez cette interface :

Le fond noir en bas fait 200 pixels de haut, ce qui laisse juste la place pour l'interface !

Créez vos personnages, programmez les interactions, et testez tout ça !

_________________

http://www.ninatonnerre.com : le site officiel de la BD Nina Tonnerre
http://katurajdr.fr : mon forum officiel sur mes BD et autres créations

Maintenant que vous avez compris les principes de base pour la création d'un GUI, vous pouvez le personnaliser à votre guise, à partir des quelques manipulations ci-dessous, afin de modifier sa taille, son apparence, etc.

Il existe plusieurs autres éléments pour configurer un GUI mais leur programmation est plus délicate (de toutes façons je ne les ai pas encore testés Suspect

) :

- GUI name : si vous avez plusieurs GUI pour votre interface, vous pouvez les nommer pour mieux les identifier.

- Bouton «Add GUI label» : vous permet d'ajouter une ligne de texte à votre interface.Tracez un rectangle de la même manière que pour créer un bouton, puis modifiez le texte à faire apparaître en double-cliquant sur la ligne «Text» de la fenêtre mouvante. Vous pouvez ajouter des codes à votre ligne de texte de manière à faire apparaître automatiquement certains éléments :

@gamename@ : le nom de votre jeu, tel que vous l'avez entré dans le General Settings
@overhotspot@ : fait apparaître le nom de l'élément sur lequel le curseur de la souris se déplace
@score@ : affiche le score du joueur, si vous faites un jeu à score
@totalscore@ : affiche le score maximum possible du jeu, tel que vous l'avez entré dans le General Settings.

Ainsi, votre Label pourra afficher le texte ci-après :
«Vous avez un score de @score@ sur un total de @totalscore@ pour le jeu @gamename@ !»

Le Label est surtout utile dans les jeux à la Lucasarts pour faire apparaître le nom de l'objet avec lequel on peut interagir.

- Bouton «Add GUI text box» : vous permet de faire apparaître une ligne de commande dans laquelle le joueur pourra entrer un texte (par exemple, si votre jeu demande un code à trouver pour avancer). Il vaut mieux créer un nouveau GUI exprès pour cela, à appeler pendant le jeu à un moment précis ! La boîte de texte se créer de la même manière qu'un bouton, et nécessite de programmer le script pour déterminer ce qui se passe en fonction du texte entré par le joueur.

- Bouton «Add GUI slider» : vous permet de créer une interface permettant au joueur de régler certains éléments du jeu comme le volume, la vitesse... Vous pouvez créer un Slider horizontal en traçant un rectangle horizontal, ou vertical en traçant un rectangle vertical (n'oubliez pas de préciser la taille du GUI avant !). Il faut ensuite passer par le script pour configurer les Sliders.

- Bouton «Add GUI List Box» : vous permet de créer une liste d'éléments, par exemple pour configurer vous-mêmes un panneau de chargement / sauvegarde. Nécessite de passer par le script pour le programmer.

- Options «Text Window» : En créant un nouveau GUI, vous pouvez choisir de créer un Text Window en cochant cette option. Cela vous permet par exemple de configurer vous-même l'aspect de la boîte d'affichage de texte qui apparaît, notamment si vous avez choisi une interface à la Sierra. En cochant cette option, le GUI se transformera en une boîte faisant apparaître plusieurs éléments à chaque coin et bordure du cadre. Déterminez simplement les graphismes qui apparaissent à ces endroits, ainsi que les couleurs dans la fenêtre mouvante. Vous pouvez ensuite aller dans le General Settings et demander à ce que ce soit ce GUI qui apparaisse quand un message s'affiche (ligne Text Windows Use Gui).

- Option «Clikable» : Si cette option est cochée, le joueur peut cliquer sur les boutons du GUI pour provoquer les différents événements qui y sont liés, de manière normale. Par contre, si cette option est décochée, le GUI n'est pas cliquable : si le joueur clique dans le GUI, le jeu fera comme si le GUI n'existait pas, et prendra en compte les éléments situés derrière. Utile par exemple si vous voulez un GUI transparent qui ne fait qu'afficher des informations.

- Option «Snap controls tro grid» : permet de faire bouger les différents éléments de votre GUI selon une grille pré-établie, afin par exemple de bien les aligner et d'avoir des espaces égaux entre chaque élément.
- Option «Lock controls in position» : quand vous êtes satisfait de la position de chaque élément, cochez cette option afin d'empêcher de les bouger par erreur (ils seront fixés à leur position actuelle).
- Option «Outline all GUI» : fait apparaître un cadre autour de chaque élément afin de mieux les distinguer.

- Menu «GUI» dans la barre de menu en haut :
* Import All GUI : vous permet d'importer un GUI tout fait, qui remplace tous ceux que vous avez déjà dans le jeu.
* Export All GUI : vous permet d'exporter l'ensemble des GUI que vous avez programmés, afin de les réutiliser dans d'autres jeux sans avoir à les refaire
* Import Another GUI : vous permet de n'importer qu'un seul GUI, qui s'ajoute à ceux que vous avez déjà dans le jeu.
* Export this GUI : vous permet de n'exporter qu'un seul de vos GUI.
* Edit interface_click : vous permet d'éditer le script lié au GUI. C'est le script qui apparaît par exemple quand vous double-cliquez sur un bouton de votre GUI afin de déterminer les événements qui se produisent quand le joueur clique dessus (faire apparaître la boîte de sauvegarde, de chargement, etc).
* New GUI : permet d'ajouter un nouveau GUI à votre jeu. Plus vous avez de GUI différents, plus votre interface sera complexe, mais si vous souhaitez une interface personnalisée de A à Z avec de nombreuses options, c'est inévitable, car vous ne pouvez pas, par exemple, mettre des Sliders, un Text Window et une liste de verbes dans un seul panneau ! En revanche, il vous faudra configurer la manière dont ces GUI apparaissent au cours de jeu, et à quels moment le joueur y a accès.
* Delete selected GUI : permet de supprimer un GUI.

- Les propriétés de base du GUI : Vous pouvez éditer certains éléments de votre GUI, en modifiant des lignes de la fenêtre mouvante.
* Background color : couleur du fond du GUI, si vous n'utilisez pas d'image
* Background image : image utilisée pour le fond du GUI
* Border color : couleur de la bordure
* X-Position : coordonnée X où apparaît le GUI
* Y-Position : coordonnée Y où apparaît le GUI
* Width : largeur du GUI
* Height : hauteur du GUI
* Visible :
«Normal» = le GUI apparaît à l'écran normalement, mais peut disparaître (par exemple avec la commande Hide GUI).
«Popup modal» : le GUI est invisible et n'apparaît qu'à un certain moment, configuré dans le script (par exemple quand le joueur clique sur une icône d'un autre GUI) ; quand ce GUI apparaît, le jeu est alors en pause (c'est par exemple le cas d'une fenêtre avec des Sliders, ou d'une boîte de chargement / Sauvegarde).
«Mouse YPos» = le GUI n'apparaît que quand le curseur de la souris se déplace à une certaine hauteur dans l'écran (par exemple, quand le joueur déplace la souris en haut de l'écran).
«Persistent» = le GUI reste affiché tout le temps, même si l'option «GUI turns off when disabled» est sélectionnée dans le General Settings. Utile pour qu'un GUI en particulier reste affiché tout le temps, quand les autres disparaissent.
* Z-Order : permet de déterminer la priorité d'affichage des GUI, si plusieurs se superposent.
_________________

http://www.ninatonnerre.com : le site officiel de la BD Nina Tonnerre
http://katurajdr.fr : mon forum officiel sur mes BD et autres créations