Disposition des Control dans Godot : décider qui gère la position et la taille

Choisir le contrat de placement

Un Control décrit un élément d'interface rectangulaire. Sa disposition dépend de son parent, de ses ancres, de ses décalages et de ses contraintes de taille. Un enfant direct d'un Container lui cède la gestion de son placement : si vous le déplacez à la main, la prochaine opération de disposition peut annuler ce déplacement. Avant de modifier des valeurs dans l'Inspector, décidez si l'élément est positionné librement ou organisé par un parent. [1][3]

Lire les ancres et les décalages comme un calcul

Les ancres définissent des points de référence relatifs au rectangle du parent. Les décalages déplacent ensuite les bords correspondants à partir de ces points de référence. Des ancres horizontales identiques maintiennent les deux bords liés à la même référence horizontale ; des ancres différentes permettent à la largeur de varier avec celle du parent. [2]

Prenons l'exemple, à titre d'illustration, d'un panneau d'état aligné à droite : on règle anchor_left et anchor_right sur 1, offset_left sur -240 et offset_right sur -20. Dans un espace de coordonnées du parent sans mise à l'échelle et de largeur 1000, les bords se trouvent à 760 et 980. Le panneau mesure donc 220 unités de large, avec une marge droite de 20 unités. Pour un parent de largeur 1200, ces bords passent à 960 et 1180. Le placement vertical est une décision distincte. Ce calcul suppose qu'aucun conteneur ni aucune contrainte de taille ne modifie le rectangle.

Laisser les conteneurs exprimer les relations

Utilisez un HBoxContainer pour une ligne et un VBoxContainer pour une colonne. Un MarginContainer fournit des marges internes via les constantes de thème. Imbriquez-les lorsque la relation entre les éléments compte plus que la position absolue de chaque enfant. [3]

Les options de dimensionnement des conteneurs forment elles aussi deux notions distinctes : Fill fait occuper à un contrôle la zone qui lui est allouée, tandis qu'Expand demande l'espace disponible dans une direction prise en charge. Leurs effets dépendent du type de conteneur. Pour une ligne de paramètres, définissez un agencement précis entre l'étiquette et la valeur, plutôt que de déplacer sans cesse la valeur par script chaque fois que l'étiquette change. [3]

Considérer la taille minimale comme une information issue du contenu

La taille minimale interne d'un contrôle peut dépendre du texte, des textures et des style boxes du thème. custom_minimum_size ajoute un minimum demandé supplémentaire ; ce n'est pas simplement une commande qui impose un rectangle de taille fixe. L'API Control citée documente aussi des contraintes de taille maximale qui peuvent primer sur les minimums. Lorsque le résultat est surprenant, examinez ensemble toutes les contraintes actives. [1]

Pour un écran de paramètres localisé, réservez un espace suffisant, mais laissez les étiquettes plus longues influencer la conception. Choisissez le retour à la ligne, le défilement ou un autre agencement lorsque le contenu ne tient pas. Imposer de petites coordonnées ne fait pas disparaître les besoins du texte, et augmenter tous les minimums peut ne laisser aucune disposition réalisable dans une petite fenêtre.

Vérifier le redimensionnement et les changements de propriétaire

Testez le panneau d'état et les lignes de paramètres avec des parents étroits et larges, avec des textes traduits plus longs et des dimensions de thème modifiées. Identifiez le parent qui contrôle réellement la disposition avant d'incriminer un préréglage d'ancres. Lorsque vous rattachez un contrôle libre à un Container, réexaminez son contrat de disposition : les anciens décalages manuels peuvent ne plus déterminer le résultat. [2][3]

Effectuez les corrections de disposition chez celui qui détient la relation. Il s'agit ici de cas de vérification proposés et d'exemples de calcul, et non d'affirmations selon lesquelles l'interface aurait été testée sur des appareils particuliers.

Sources

1. Control — Godot Engine contributors.
2. Size and anchors — Godot Engine contributors.
3. Using Containers — Godot Engine contributors.