Bonjour à tous !

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

Le placement

Avant d’aborder la création des looks ou autres layouts, une des choses les plus difficiles à aborder dans CeGUI, et beaucoup d’autres GUI dont celle de Cyanide, est le placement. Au final c’est pas si compliqué, sauf que c’est pas simple non plus Razz . Pour positionner un objet, on lui donne une position et une taille. Jusque là ça reste simple et assez basique. La position permet donc de placer le coin supérieur gauche de l’objet dans la zone qu’il peut utiliser (l’intérieur de son parent), et la taille permet de placer le coin inférieur droit par rapport au coin supérieur gauche. Classique et efficace. Là où ça se complique, c’est comment on lui donne ces deux valeurs. On utilise ce qu’on appelle les « Unified Dimension », qu’on raccourcira en UDim. Une UDim est composée d’une valeur d’échelle « scale », et d’une valeur de décalage « offset ». Et les deux sont combinées pour obtenir la valeur finale. Je vais noter les UDim comme cela par la suite : UDim(scale, offset). Evidemment, que ce soit pour la position ou la taille, on donne un UDim pour l’axe des ordonnées, et un UDim pour les absicces. Et pour essayer d’éclaircir le tout, je vais donner quelques exemples :

  • position = ( UDim(0, 0), UDim(0, 0) ) => On place l’objet en (0,0) de son parent
  • position = ( UDim(0.5, 0), UDim(0.5, 0) ) => On place le coin supérieur gauche de l’objet au centre de son parent
  • position = ( UDim(0.5, 0), UDim(0, 20) ) => On place le coin supérieur gauche de l’objet au milieu de son parent sur l’axe des X, et avec un décalage de 20 pixels vers le bas sur l’axe des Y par rapport au haut de son parent
  • position = ( UDim(0.5, 0), UDim(0.5, 20) ) => On place le coin supérieur gauche de l’objet au centre de son parent,  avec un décalage de 20 pixels vers le bas sur l’axe des Y
  • taille = ( UDim(1, 0), UDim(1, 0) ) => L’objet fait la même taille que son parent
  • taille = ( UDim(0.5, 0), UDim(0.5, 0) ) => L’objet fait la moitié en taille de son parent
  • taille = ( UDim(1, 0), UDim(0.5, 20) ) => L’objet fait la même taille que son parent sur l’axe des X, et fait la moitié + 20 pixels sur l’axe des Y
  • taille = ( UDim(1, 0), UDim(0, 100) ) => L’objet fait la même taille que son parent sur l’axe des X, et fait 100 pixels sur l’axe des Y

Voilà, je pense que c’est suffisant pour comprendre. Et ceux de vous qui ont déjà fait du CSS, ou d’autres placement graphique, je pense que vous commencez à pas mal entrevoir la puissance de ce système. Je vous retrouve donc demain pour parler de la création des looks.

XOXO.