La gestion du thème du client

Le système de préférences géré par le Global Settings (res://autoloads/settings.gd) intègre la gestion du thème qui définit les différents éléments d’affichage.

Les paramètres sont définis par le script res:data_definition/settings_preset.gd et les paramètres par défaut sont stockés dans res:data/settings/settings_default.tres.

Les icônes sont définies dans la sous section GuiIcons, dans la section Theme dédiée au thème dans les presets (ceux par défault créé à l’origine sont créés à partir de la Resource SettingsPreset situé à res://data/settings/settings_default.tres

Les éléments à indiquer sont:

• Texture File: le fichier .svg où sont les icônes, organisées selon une grille et un ordre précis (voir plus bas)
• Grid Module : la taille (en pixels) de la grille qui organise les différentes icônes dans le fichier
• Columns Amount : le nombre de colonnes dans le fichier.

Avec ces informations, le Global GuiMedia(res://autoloads/gui_media.gd) va aller chercher dans le fichier les appels qui lui sont faits depuis le code pour indiquer la bonne icône d’interface pour le thème choisi.

L’ordre dans lequel les icônes sont disposées est crucial, car le système ira les chercher dans l’ordre indiqué par l’enum GuiMedia.Icon. C’est ce qui permet pour les appels depuis les nodes Control de simplement écrire :

Button.icon = GuiMedia.get_gui_icon(GuiIcon.Icon.GO_LEFT)

pour obtenir la flêche indiquant vers la gauche.

La police par défaut est NotoSans, pour permettre l’affichage aisée d’un maximum de langues. Seuls les éléments de Display sont en police khaganat.ttf (en cours de développement par Yann).

Comme il s’agit d’une police variable, pour diférencier l’engraissement et la largeur des diférentes polices dérivées (enregistrées en .tres dans res://data/gui/fonts), voici les correspondances utilisées dans les variations définies pour NotoSans:

• normal: weight=400 width=100 (format de base)
• light: width=300
• medium: weight=500
• semibold: weight=550
• bold: weight=600
• condensed: width=70
• semi condensed: width=85

Les différentes Theme Properties des éléments ne sont pas toujours simples à visualiser/comprendre. Donc quelques notes pour aider à faire la grille de correspondance entre les Settings et le thème Godot en arrière-plan (réalisé dans res:autoloads/settings.gd avec la méthode apply_theme_settings() depuis le dictionnaire qu’elle contient color_attribution_list.

• panel : StyleBox
  • Style de fond du PanelContainer. Définit le cadre et le remplissage de la zone du Container, utilisé pour dessiner le background (bordures, couleur, arrondis, etc.) du conteneur.

On peut épingler une des StyleBox qui sera alors parente de toutes les autres : Cf.Documentation Godot.

• normal : StyleBox
  • Style par défaut du bouton, lorsque son état est nromal (ni survolé, ni pressé, ni désactivé).
• hover : StyleBox
  • Style utilisé lorsque la souris survole le bouton.
• pressed : StyleBox
  • Style utilisé lorsque le bouton est pressé (clic en cours ou état `activé`).
• disabled : StyleBox
  • Style utilisé lorsque le bouton est désactivé (`disabled == true`).
• focus : StyleBox
  • Style utilisé lorsque le bouton a le focus clavier/manette.
• hover_pressed : StyleBox
  • Style utilisé lorsque le bouton est à la fois survolé et pressé. (Tous ne l’utilisent pas, voir par exemple le CheckButton).

• font : Font
  • Police pour le texte du Button.

• font_size : int
  • Taille de la police pour le texte du Button.

• font_color : Color
  • Couleur du texte du Button en état normal.
• font_hover_color : Color
  • Couleur du texte lorsque le Button est survolé.
• font_pressed_color : Color
  • Couleur du texte lorsque le Button est pressé.
• font_disabled_color : Color
  • Couleur du texte lorsque le Button est désactivé.
• font_focus_color : Color
  • Couleur du texte lorsque le Button a le focus sans survol/pression.
• font_hover_pressed_color : Color
  • Couleur du texte lorsque le Button est à la fois survolé et pressé.
• font_outline_color : Color
  • Couleur du contour (outline) du texte du Button si la police affiche un outline.

• icon_normal_color : Color
  • Couleur de modulation de l’icône du Button en état normal.
• icon_hover_color : Color
  • Couleur de modulation de l’icônedu Button lorsqu’il est survolé.
• icon_pressed_color : Color
  • Couleur de modulation de l’icône du Button lorsqu’il est pressé.
• icon_disabled_color : Color
  • Couleur de modulation de l’icône du Button lorsqu’il est désactivé.
• icon_hover_pressed_color : Color
  • Couleur de modulation de l’icône du Button lorsqu’il est à la fois survolé et pressé.

• icon : Texture2D
  • Icône affichée à côté du texte dans le Button.

• hseparation : int
  • Espace horizontal entre l’icône et le texte du Buton.
• outline_size : int
  • Épaisseur de l’outline du texte (si utilisé).
• expand_icon : bool / int (selon version)
  • Contrôle la façon dont l’icône est étendue dans le Button.

• font : Font
  • Police utilisée pour le texte du Label.

• font_size : int
  • Taille de la police pour le texte du Label.

• font_color : Color
  • Couleur du texte du Label en état normal.
• font_shadow_color : Color
  • Couleur de l’ombre du texte (shadow) si utilisée.

• shadow_offset_x : int
  • Décalage horizontal de l’ombre du texte.
• shadow_offset_y : int
  • Décalage vertical de l’ombre du texte.
• outline_size : int
  • Épaisseur de l’outline du texte (si utilisé).