Tutoriel Visionaire Studio: inventaire de type Sam&Max (par ElGrande)

Je vais vous expliquer dans ce tutoriel comment réaliser une interface d’Inventaire de type Sam & Max version Telltale game.

Je me suis largement inspiré du tutoriel anglais créé par Glen Fernandez (http://www2.visionaire2d.net/glenfx/) faisant office de Tutoriel souche sur le site Visionaire.

Nous démarrons la réalisation en CREANT deux nouvelles interfaces. Je les ai nommé « Inventaire OUVERT » et « Inventaire FERMÉ ».

Attardons nous pour commencer sur le « Inventaire FERMÉ ». Il s’agit ici de créer une sorte de « bouton » qui lorsqu’activé dévoilera le réel inventaire.

La première chose à réaliser est de chargé une image qui représentera votre inventaire fermé à l’écran.

Cliquez sur « Inventaire FERMÉ » et cliquez désormais sur l’onglet « PROPERTIES » à droite. Ouvrez votre « BACKGROUND IMAGE » et sélectionnez l’image représentant votre inventaire fermé (un sac à dos bouclé, une valise fermée, un chapeau de magicien vide, qu’importe :-)). Tâchez de ne pas prendre une image trop grande : Souvenez-vous de la résolution de votre jeu et retouchez votre image au besoin pour correspondre à vos attentes.

Ensuite, sélectionnez comme CLASS « SECONDARY INTERFACE ». En effet, nous souhaitons que cette représentation fermée de notre inventaire agisse comme un « Bouton ». La seule façon que cela soit pris en compte est de considérer dès lors cette interface comme « secondaire ».

Laissez le « Standard Command » et le « Font » vide. Nous n’en aurons pas besoin pour cette réalisation.

Désormais, vous voudrez certainement que votre inventaire se tienne à un endroit précis de votre écran de jeu. Pour cela, sélectionnez la valeur « ABSOLUTE » dans les options « DISPLACEMENT ». Cela aura pour effet de placer l’Inventaire aux coordonnées inscrites juste en dessous.

Nous allons aborder une petite notion mathématique concernant les valeurs à rentrer. N’ayez crainte, cela n’a rien de compliqué mais il faut connaitre la subtilité.

L’OFFSET X représente le placement Horizontal de votre image.

L’OFFSET Y représente le placement Vertical de votre image.

Pour établir la position de votre Interface (l’inventaire dans ce cas précis), vous devez prendre la valeur « Y » de votre résolution de jeu (si vous avez créé le jeu sous une résolution de 1024×768, la valeur Y est 768) et SOUSTRAIRE la valeur « Y » de la taille de votre image d’inventaire fermé. Vous n’avez plus qu’à entrer la valeur obtenue dans le champ « Y » des OFFSET.

Exemple : Dans le jeu qui me sert d’exemple, j’ai une résolution de 1024×768. Mon image d’inventaire est de 150×150. Je soustrais donc 150 de 768 (les valeurs « Y ») et j’obtiens 618. Je tape 618 dans le champ « Y » des OFFSET.

 

 

Désormais, ouvrez le l’onglet « BUTTONS » et vous verrez apparaitre l’image représentant votre inventaire fermé. Nous allons déterminer la zone de cliquage pour créer un bouton. Pour ce faire, créez un nouveau « bouton » en cliquant sur le + et nommez le par exemple : « Commutateur Ouvert » (en effet, lorsque la souris cliquera dans cette zone cela aura pour effet d’ouvrir votre inventaire).
Ensuite, cliquez sur le carré bleu juste au-dessus de votre image : « CREATE & EDIT OBJECT AREA ». Maintenant tracez un contour sur votre image qui servira à délimiter la zone d’action.
Pour finir, dans la section « BUTTON TYPE » de l’espace de travail inférieur, cliquez sur « ACTION AREA » pour définir cette zone nouvellement créée comme étant une zone d’action.

 

 

Après être resté bouche bée devant le réalisme hallucinant de mon inventaire (fait à l’arrache pour le besoin du tuto), procédez de la même façon pour déterminez la zone de l’interface.

 

 

Nous allons maintenant définir quelle type d’action sera susceptible d’ouvrir l’inventaire.
Pour ce faire, ouvrez l’onglet « ACTION » de l’espace de travail inférieur et rajoutez une nouvelle action « ADD NEW ACTION » et donnez-lui un nom. Dans mon exemple, je l’ai nommé « Clic Gauche » avec beaucoup d’originalité :-). Définissez l’action sur « Left Click » (vous pouvez aussi choisir un autre type d’action mais c’est toujours pour l’exemple).
Enfin, créez l’effet du clique sur la zone d’interface et choisissez « SHOW/HIDE INTERFACE » et sélectionnez « SHOW ».

 

 

Attardons-nous désormais sur la configuration de l’« INVENTAIRE OUVERT ».
Rendez-vous dans les « PROPERTIES » de votre « INVENTAIRE OUVERT » et sélectionnez une image représentant votre inventaire (de la même façon que pour l’inventaire fermé).
Choisissez dans « CLASS » l’option « INVENTORY ». N’oubliez pas non plus de réglez vos paramètres de disposition avec « DISPLACEMENT – ABSOLUTE » et en respectant la règle « mathématique » expliquée plus haut.

 

 

 

Pour cet inventaire précis, je souhaite qu’il se ferme dès que mon curseur quitte la zone de l’interface. Pour cela je rajoute une petite précision en bas de l’espace de travail sous « ACTION ON LEAVING ».

 

 

Maintenant, retournez dans l’onglet « BUTTONS ». Nous allons créer les emplacements dans lesquels les objets collectés iront se loger. Pour coller avec le Tutoriel qui me sert de référence j’en ai créé trois sachant que chaque emplacement n’est destiné à ne recevoir qu’un seul objet. Libre à vous d’en faire d’avantage.
Pour chacun des emplacements vous devrez délimiter la zone couverte (le « CREATE & EDIT OBJECT AREA ») ainsi que déterminer le « BUTTON TYPE » dans l’espace de travail inférieur en « PLACEHOLDER FOR ITEM ».

 

 

Félicitation, nous touchons au bout de ce Tutoriel !
Terminons en douceur en introduisant cette nouvelle interface à votre personnage (pour peu que vous en ayez déjà un, sans quoi, je vous propose de commencer par là en consultant le fabuleux tutoriel de Piksel72 🙂 ) !
Ouvrez votre Menu de Personnage (le gros tab à gauche), sélectionnez votre Personnage, cliquez sur l’onglet « INTERFACE » et cochez les deux interfaces d’inventaire que vous venez de créer avec tant de talents.

 

 

Nous devons désormais terminé avec une action rédhibitoire, à savoir : définir la condition de départ de l’inventaire. En l’état, il est ouvert de base.
Rendez-vous dans les paramètres de votre jeu (le tab à gauche), dans l’onglet « GAME PROPERTIES » et sous « AT BEGIN START FOLLOWING ACTION » créé une nouvelle condition : « SHOW/HIDE INTERFACE » – « INVENTORY » – « HIDE ».
Votre inventaire sera désormais fermé à l’exécution de votre jeu.

 

FELICITATION ! 🙂
Vous pouvez désormais sauvegarder, exécuter et admirer votre oeuvre !

Laisser un commentaire