L'inventaire, par l'Atelier Sentô

 Atelier Sentô
Rédigé par Atelier Sentô
Publié le 03/03/2016

Créer un inventaire, c'est surement facile. On en voit dans énormément de jeux et leur création semble être l'évidence même. Et pourtant, une fois devant l'écran et un morceau de son jeu, il faut bien se l'avouer : en fait, ce n'est pas si simple et des besoins ergonomiques et d'intégrations viennent bouleverser et interroger. Voici un nouvel article de l'Atelier Sentô qui présente une étape de développement de leur jeu The Coral Cave :

Un inventaire taillé sur mesure

Assurément pour les joueurs, l'inventaire revêt une importance capitale. C'est l'endroit où l'on range avec soin les objets durement gagnés qui nous accompagneront tout au long de l'aventure. Il est donc important d'en soigner le design. En étudiant quelques point & click récents, on peut distinguer deux extrêmes :

A gauche : dans Machinarium, l'inventaire est une simple barre horizontale, sans décoration, qui apparaît en haut de l'écran quand on approche le curseur de la souris. Ce dénuement, qui peut surprendre dans un jeu aussi visuellement fouillé, s'explique car le petit robot avale tout ce qu'il ramasse. Il est son propre inventaire. Difficile de faire plus mignon !

A droite : dans Deponia, au contraire l'inventaire occupe la totalité de l'écran et il est entièrement dessiné. On l'active en faisant rouler la molette de la souris et il apparaît au terme d'une animation (qui peut faire planter le jeu si votre ordinateur n'est pas assez puissant).

Pour The Coral Cave, on avait en tête de limiter les menus pour donner un maximum de place aux personnages et décors. Nous sommes donc partis sur l'idée d'un inventaire en barre horizontale à la Machinarium. Mais on souhaitait quand même le travailler pour qu'il évoque l'univers du jeu

Deux problèmes se sont présentés à nous :

  • on avait du mal à dessiner un élément abstrait qui ne correspondait à rien de réel. Le résultat nous paraissait toujours forcé, comme une convention acceptée à contrecœur.
  • on voulait faire tenir tous les menus dans cette barre, ce qui n'était pas si facile compte tenu de sa forme très allongée. L'ergonomie n'était pas au point.

Au final, nous nous sommes rabattus sur une autre solution : un inventaire en forme de console portable.

Ce choix nous a conquis car ce n'est pas un design abstrait. Mizuka emporte sa console avec elle dans ses aventures et le joueur l'utilise pour sauvegarder sa progression. L'écran à cristaux liquides offre l'espace voulu pour afficher les menus et le contenu du sac de Mizuka. Et comme le joueur a l'habitude d'utiliser ce type d'appareil, la navigation est simplifiée.

De même, pour faire apparaître l'inventaire, on a choisi d'utiliser le clic droit de la souris (le gauche étant dévolu aux interactions avec le décor et les personnages). Là encore, l'idée est de faire aussi simple et intuitif que possible pour immerger le joueur dans l'univers du jeu.

Éloge de la cleptomanie

Maintenant que nous avons un inventaire, il va falloir le remplir. Combien de fois avons-nous sursauté devant des héros de point & click célèbres stockant sans vergogne des échelles dans la poche arrière de leur pantalon ? Pour The Coral Cave, nous nous sommes donné pour règle que le contenu de l'inventaire doit entrer sans problème dans le sac de notre héroïne. Le fait qu'il s'agisse d'une petite fille nous pousse à être doublement prudents. On ne va pas lui faire ramasser quelque chose qu'elle ne pourrait pas soulever.

Mais c'est aussi un avantage certain : quand le héros est adulte, il y a toujours un moment où ça coince de le voir ramasser tout ce qu'il trouve. Il est pas un peu clodo, celui-là ? Je ne sais pas vous, mais nous, on évite de toucher ce qui traîne par terre. A l'opposé, les enfants passent leur temps à faire ça, au grand dam de leurs parents. Et ça nous arrange !

A nous de concevoir des objets colorés qui attireront l'attention de Mizuka. Comme le reste du jeu, les items sont peints à l'aquarelle sur papier et on s'amuse vraiment à les dessiner :

Ce sont de tout petits dessins. On prend soin à faire un contour épais et à bien faire dépasser la couleur de sorte à avoir de la marge pour les découper sur l'ordinateur et créer un fond transparent autour. Pour chaque item, nous allons ensuite enregistrer deux images comme ceci :

A gauche, l'item tel qu'il apparaît dans l'inventaire (avec le petit carré sur lequel il sera posé).

A droite, tel qu'il apparaîtra à côté du curseur, une fois sélectionné. Le fond autour de l'objet est forcément transparent et il faut tenir compte de la position du curseur en laissant vide le coin supérieur gauche. Et voici le résultat avec quelques items rangés dans l'inventaire et l'un d'eux sélectionné par la souris :

Vie et mort d'un item

Pour créer un item dans Wintermute, le logiciel que nous utilisons, il faut entrer sa fiche d'identité, c'est-à-dire ce petit bout de code :

ITEM
{
       CURSOR_COMBINED = TRUE
       CAPTION = "Clé"
       NAME = "Item_Key"
       IMAGE = "items\key.jpg"
       CURSOR = "items\key_cursor.png"
       CURSOR_HOVER = "items\key_cursor .png"
       SCRIPT = "items\key.script"
}

En gros, il s'agit de donner à l'item un nom, d'indiquer les images à utiliser quand il apparaît dans l'inventaire ou combiné avec le curseur. On peut même ajouter une feuille de script si on veut le doter d'un comportement spécifique (par exemple un effet sonore quand on le sélectionne).

Ensuite pour l'utiliser dans le jeu, on écrira :

Game.TakeItem ("Item_Key") ;
Game.SelectedItem ("Item_Key") ;
Game.DropItem ("Item_Key") ;

Ces codes permettent de mettre un objet dans l'inventaire, le sélectionner pour l'utiliser sur le décor puis, une fois inutile, s'en débarrasser.

On le voit, c'est très simple de créer et d'utiliser un item avec Wintermute. Logique, ce logiciel est spécialement prévu pour les point & click et les items sont l'ossature de ces jeux. Si, une fois que vous aurez joué à The Coral Cave, vous ne vous mettez pas à ramasser plein de cochonneries par terre, ce sera à n'y rien comprendre !

PS : Trois special guests se sont glissés dans la BD. Les reconnaîtrez-vous ?

vignette pour les réseaux
23 commentaires

Comments

 Nergof

Ah oui j'oublié : Je vous vénère pour faire un jeu dessiné entièrement à l'aquarelle ! C'est d'une beauté de type très belle qui est admirable dans le domaine du jeu vidéo. Sincèrement continuez, je vous soutien en temps que fervent défenseur des bons jeux fait avec amour et conscience qu'il s'agit d'un art véritable et extraordinaire ! D'ailleurs, quand je vois votre style, ce que vous êtes capable de dessiner, j'ai envie de vous dire que : oui les menus c'est hyper chiant, c'est ce que j'aime le moins, mais vous, avec ce style, vous n'avez pas besoin de vous inspirer des autres jeux. Votre univers est la porte de toute ces magnifiques inspirations graphiques. Bisou

 Nergof

Excellent j'adore vos petits articles ! Je trouve ca dommage de ne pas garder ce contour pour les icones des objets de l'inventaire, c'est très jolie, je l'imagine avec un dégradé vers la transparence et très discret. Mais faut pas m'écouté, sa sent l'idée originale qui ne plait à personne sauf à moi xD

 Creamy

Super article, on sent une sacrée réflexion derrière chacun des aspects du jeu.
Continuez comme ça Content
P.S. : on écrit "kleptomanie".

 Atelier Sentô

Merci et, oups, désolé pour la faute !

 Nival

Excellent et super intéressant, comme d'hab' quoi ! Content

Juste, la console de Mizuka n'a qu'un unique bouton ? Tire la langue

 Atelier Sentô

Pour l'instant, oui. Mais elle va évoluer au fur et à mesure qu'on ajoutera des fonctionnalités. On a laissé des espaces vides pour pouvoir ajouter des boutons.

 Fir3fly03

Vraiment très intéressant encore une fois. Et la petite console, les détails avec les petits strap' attachés et les stickers, ça rend vraiment bien !

 Atelier Sentô

Merci ! On l'aime bien, cette console. On voudrait avoir la même !

 Sidexal

Tiens, Mizuka semble avoir un sac pourtant, du coup c'est assez étrange de retrouver ses objets dans la console :/
Par contre ça reste une très bonne idée de visuel pour un inventaire ! Les inventaires font vraiment partit de l'univers des point&clicks et leurs apportent une vraie identité Content

 Atelier Sentô

Il y a quelques point&click qui utilisent l'image d'un sac pour représenter l'inventaire. On y a pensé, à un moment. Mais on voulait que l'inventaire contienne également les menus du jeu (charger/sauvegarder/quitter).
Donc même si on avait utilisé l'image du sac, ça aurait été logique pour les items mais moins pour les menus. Si on avait voulu bien intégrer les menus dans le sac il aurait fallu les dessiner (par exemple dessiner "sauvegarder" comme si c'était cousu dans le tissu)... ce qui aurait fini par demander un surplus de travail et de programmation au moment de la localisation.
Au final, l'idée de la console nous a plu car c'était rigolo et un peu surprenant tout en restant cohérent avec le personnage. Après tout, l'inventaire est une interface. On aime le rendre tangible mais il reste une part d'abstraction qu'on ne peut éviter. En l’occurrence, la console référence les items contenus dans le sac plus qu'elle les contient elle-même. Et on peut utiliser une police de caractères pour les menus, ce qui simplifie leur traduction dans d'autres langues.

Pages