Taille et ancrages

Si un jeu devait toujours être exécuté sur le même appareil et à la même résolution, les controls de positionnement seraient une simple question de réglage de la position et de la taille de chacun d'entre eux. Malheureusement, c'est rarement le cas.

De nos jours, seuls les téléviseurs ont une résolution et un format d'image standard. Tout le reste, des écrans d'ordinateur aux tablettes, des consoles portables aux téléphones mobiles, ont des résolutions et des rapports d'aspect différents.

Il y a plusieurs façons de gérer cela, mais pour l'instant, imaginons que la résolution de l'écran ait changé et que les controls doivent être repositionnées. Certains devront suivre le bas de l'écran, d'autres le haut de l'écran, ou peut-être les marges de droite ou de gauche.

../../_images/anchors.png

Ceci est fait en éditant les propriétés margin des controls. Chaque control a quatre marges : gauche, droite, bas et haut. Par défaut, ils représentent tous une distance en pixels par rapport au coin supérieur gauche du control parent ou (dans le cas où il n'y a pas de control parent) de la fenêtre de visualisation.

../../_images/margin.png

Lorsque les ancres horizontales (gauche, droite) et/ou verticales (haut, bas) sont modifiées à 1, les valeurs de marge deviennent relatives au coin inférieur droit du nœud Control parent ou de la fenêtre d'affichage.

../../_images/marginend.png

Ici, le control est réglé pour étendre son coin inférieur droit avec celui du parent, donc lors du redimensionnement du parent, le contrôle le couvrira toujours, laissant une marge de 20 pixels :

../../_images/marginaround.png

Centrage d’un contrôle

Pour centrer un Control dans son parent, réglez ses ancres à 0,5 et chaque marge à la moitié de sa dimension intrinsèque. Par exemple, le code ci-dessous montre comment un TextureRect peut être centré dans son parent :

var rect = TextureRect.new()
rect.texture = load("res://icon.png")
rect.anchor_left = 0.5
rect.anchor_right = 0.5
rect.anchor_top = 0.5
rect.anchor_bottom = 0.5
var texture_size = rect.texture.get_size()
rect.margin_left = -texture_size.x / 2
rect.margin_right = -texture_size.x / 2
rect.margin_top = -texture_size.y / 2
rect.margin_bottom = -texture_size.y / 2
add_child(rect)

Le réglage de chaque ancre à 0,5 déplace le point de référence pour les marges au centre de son parent. A partir de là, nous fixons des marges négatives pour que le control ait sa taille naturelle.

Préréglages de mise en page

Au lieu d'ajuster manuellement les valeurs de marge et d'ancrage, vous pouvez utiliser le menu Layout de la barre d'outils, au-dessus de la fenêtre d'affichage. Outre le centrage, il vous offre de nombreuses options pour aligner et redimensionner les nœuds Control.

../../_images/layout_dropdown_menu.png