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

When horizontal (left, right) and/or vertical (top, bottom) anchors are changed to 1, the margin values become relative to the bottom-right corner of the parent control or viewport.

../../_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.