Bonjour à tous !

Dans le cadre du dossier consacrer à la création de GUI, voici donc le premier article.

Définition

Une GUI est tout simplement une interface graphique (Graphical User Interface, soit interface utilisateur graphique). Ce sont tous les éléments affichés à l’écran qui permettent d’utiliser le programme, ou le jeu. Par exemple, dans un jeu de combat, les barres de vie, le temps, les noms des persos, leur avatar (s’il y en a), leur barre de « super », et parfois même des informations qui apparaissent au dessus des coups, tout cela fait partie de la GUI. Mais ce n’est pas tout, tout ce qui est affiché lorsqu’on est pas en jeu, comme l’écran d’accueil, les différents menus, et autre, tout fait aussi partie de la GUI. Pour en créer une, ils font donc créer chaque page, et ensuite créer les transitions entre chacune d’elles. Il y a aussi un élément important lors de la conception, qui correspond finalement au design pattern « MVC », c’est qu’il faut faire tout son possible pour que le coeur du jeu ou du programme soit indépendant de son interface. C’est à dire que toutes les infos affichées ne sont pas envoyées à la GUI lorsqu’elles sont reçues/créées/traitées, mais que c’est la GUI qui va les chercher en tant voulu. Ca paraît peut être idiot de faire ça, et on pourrait croire que c’est une perte de temps inutile, mais au final c’est vraiment pratique. Tout d’abord, en suivant cette méthode, on aura pas à penser à l’affichage lors de la création du coeur. On se concentrera sur ce dernier, et on l’optimisera pour qu’il fonctionne, et rien d’autre. Et le deuxième avantage de cette indépendance, c’est qu’on pourra changer d’interface selon nos envies, par exemple passer de CeGUI à une bibliothèque maison, sans avoir à retoucher au coeur. On ne changera que l’interface, et rien d’autre.

Lexique

  • Un sprite : Normalement on l’appelle pas vraiment comme ça dans le cadre d’une GUI, mais vu que c’est exactement le même principe, moi je le fais Razz . Un sprite est donc une image, ou une partie d’une image affichée à l’écran. Par exemple la barre de vie dans un jeu de combat est composée d’au moins deux sprites : la barre de couleur de fond, et la barre qui représente la vie. Les deux sont superposés, et la deuxième est réduite petit à petit que la vie descend, laissant apparaître la première.
  • Un imageset : C’est une liste de coordonnées indiquant où se trouve chaque sprite sur une seule image. Vu que les sprite sont petits, pour optimiser la mémoire utilisée, on ne charge qu’une seule grande image contenant tous les sprites, et on mémorise la position de chaque sprite sur cette image. C’est ce à quoi sert un imageset.
  • Un look : A la base on appelle ça un « look’n'feel », mais look c’est plus court Razz . C’est ce qui permet de définir les objets qui seront affichés, à partir de sprite, de texte, et d’autres éléments.
  • Un layout : On l’utilise pour placer les différents objets définis dans les looks pour créer la GUI. Le mieux est d’avoir un layout par page.

Voilà, les bases sont maintenant posées pour la suite de ce dossier, qui sera tout de même plus technique que cet article. Je vous retrouve donc demain pour parler du positionnement.

XOXO.