Up to date

This page is up to date for Godot 4.2. If you still find outdated information, please open an issue.

Utilisation de l'éditeur de thème

This article explains how to create and manage UI themes using the Godot editor and its theme editor tool. We recommend getting familiar with the basics behind GUI skinning/theming by reading Introduction à l'habillage des interfaces graphiques before starting.

L'éditeur de thème est un outil du panneau inférieur qui s'active automatiquement lorsqu'une ressource Theme est sélectionnée pour être modifiée. Il contient l'interface utilisateur nécessaire pour ajouter, supprimer et ajuster les types de thèmes et les éléments de thèmes. Il comporte une section d'aperçu pour tester vos modifications en direct, ainsi qu'une fenêtre de dialogue pour effectuer des opérations groupées sur les éléments de thème.

Création d'un thème

Comme toutes les autres ressources, les thèmes peuvent être créés directement dans le dock du système de fichiers en faisant un clic droit et en sélectionnant Nouvelle ressource..., puis en sélectionnant Theme et en cliquant sur Créer. Cette méthode est particulièrement utile pour créer des thèmes à l'échelle d'un projet.

Les thèmes peuvent également être créés à partir de n'importe quel nœud control. Sélectionnez un nœud control dans la hiérarchie de la scène, puis dans l'inspecteur, allez sur la propriété theme. De là, vous pouvez sélectionner Nouveau Theme.

Cela créera un thème vide et ouvrira l'éditeur de thème. Gardez à l'esprit que les ressources créées de cette façon sont regroupées avec la scène par défaut. Utilisez plutôt le menu contextuel pour enregistrer le nouveau thème dans un fichier.

Si l'éditeur de thème fournit les outils nécessaires pour gérer les types et les éléments de thème, les thèmes incluent également la police par défaut, de secours, que vous ne pouvez modifier qu'à l'aide du dock de l'Inspecteur. Il en va de même pour le contenu des types de ressources complexes, tels que StyleBoxes et les icônes — ils s'ouvrent à la modification dans l'inspecteur.

Aperçu de l'éditeur de thèmes

L'éditeur de thème comporte deux parties principales. L'éditeur de thème principal, situé au bas de l'éditeur Godot, vise à fournir aux utilisateurs des outils pour créer, modifier et supprimer rapidement des éléments et des types de thèmes. Il donne des outils visuels pour choisir et modifier les controls, en abstrayant les concepts de thème sous-jacents. La boîte de dialogue Manage Theme Items, quant à elle, tente de répondre aux besoins de ceux qui souhaitent modifier les thèmes manuellement. Elle est également utile pour créer un nouveau thème d'éditeur.

Aperçu des thèmes

Le côté gauche de l'éditeur principal comporte un ensemble d'onglets d'aperçu. L'onglet Default Preview est visible d'emblée et contient la plupart des contrôles fréquemment utilisés dans différents états. Les aperçus sont interactifs, de sorte que les états intermédiaires (par exemple, le survol) peuvent également être prévisualisés.

Des onglets supplémentaires peuvent être créés à partir de scènes arbitraires de votre projet. La scène doit avoir un nœud control comme racine pour fonctionner comme un aperçu. Pour ajouter un nouvel onglet, cliquez sur le bouton Ajouter un aperçu et sélectionnez la scène enregistrée dans votre système de fichiers.

Si vous apportez des modifications à la scène, elles ne seront pas reflétées automatiquement dans l'aperçu. Pour mettre à jour l'aperçu, cliquez sur le bouton de rechargement de la barre d'outils.

Previews can also be used to quickly select the theme type to edit. Select the picker tool from the toolbar and hover over the preview area to highlight control nodes. Highlighted control nodes display their class name, or type variation if available. Clicking on the highlighted control opens it for editing on the right-hand side.

Types de thèmes et éléments

La partie droite de l'éditeur de thème fournit une liste des types de thèmes disponibles dans la ressource de thème éditée, et le contenu du type sélectionné. La liste des éléments du type's est divisée en plusieurs onglets, correspondant à chaque type de données disponible dans le thème (couleurs, constantes, styles, etc.). Si l'option Show Default est activée, alors pour chaque type intégré, ses valeurs par défaut du thème sont affichées, en grisé. Si l'option est désactivée, seuls les éléments disponibles dans le thème édité lui-même sont affichés.

Les éléments individuels du thème par défaut peuvent être ajoutés au thème actuel en cliquant sur le bouton Override en regard de l'élément. Vous pouvez également remplacer tous les éléments par défaut du type de thème sélectionné en cliquant sur le bouton Override All. Les propriétés remplacées peuvent ensuite être supprimées avec le bouton Remove Item. Les propriétés peuvent également être renommées à l'aide du bouton Rename Item, et des propriétés entièrement personnalisées peuvent être ajoutées à la liste à l'aide du champ de texte situé en dessous.

Les éléments de thème surchargés peuvent être modifiés directement dans le panneau de droite, sauf s'il s'agit de ressources. Les ressources disposent de contrôles rudimentaires, mais doivent être modifiées dans le dock de l'inspecteur.

Les Styleboxes disposent d'une fonctionnalité unique, qui vous permet d'épingler une Styleboxes individuelle dans la liste. La Styleboxes épinglée agit comme le chef de meute, et toutes les Styleboxes du même type sont mises à jour à ses côtés lorsque vous modifiez ses propriétés. Cela vous permet de modifier les propriétés de plusieurs boîtes à style en même temps.

Si les types de thèmes peuvent être choisis dans un aperçu, ils peuvent également être ajoutés manuellement. En cliquant sur le bouton plus à côté de la liste des types, vous ouvrez le menu Add item Type. Dans ce menu, vous pouvez soit sélectionner un type dans la liste, soit saisir un nom arbitraire pour créer un type personnalisé. Le champ de texte permet également de filtrer la liste des nœuds control.

Gérer et importer des éléments

Un clic sur le bouton Gérer les items fait apparaître la boîte de dialogue Gérer les items de thème. Dans l'onglet Modifier les items, vous pouvez visualiser et ajouter des types de thèmes, ainsi que visualiser et modifier les éléments de thèmes du type sélectionné.

Vous pouvez créer, renommer et supprimer des éléments de thème individuels en cliquant sur le bouton correspondant Add X Item et en spécifiant leur nom. Vous pouvez également supprimer en masse des éléments de thème soit par leur type de données (à l'aide de l'icône en forme de pinceau dans la liste), soit par leur qualité. Supprimer les éléments de classe supprime tous les éléments de thème intégrés que vous avez personnalisés pour un type de nœud de contrôle. Suppression des éléments personnalisés supprime tous les éléments de thème personnalisés pour le type sélectionné. Enfin, Suppression de tous les éléments supprime tous les éléments du type.

From the Import Items tab you can import theme items from other themes. You can import items from the default Godot theme, the Godot editor theme, or another custom theme. You can import individual or multiple items, and you can decide whether to copy or omit their data as well. There are several ways you can select and deselect the items, including by hand, by hierarchy, by data type, and everything. Opting to include the data will copy all theme items as they are to your theme. Omitting the data will create the items of the corresponding data type and name, but will leave them empty, creating a template of a theme in a way.