Attention: Here be dragons

This is the latest (unstable) version of this documentation, which may document features not available in or compatible with released stable versions of Godot.

Checking the stable version of the documentation...

Dimensioni e ancore

Se un gioco dovesse essere sempre eseguito sullo stesso dispositivo e alla stessa risoluzione, posizionare i controlli sarebbe una semplice questione di stabilire la posizione e le dimensioni di ciascuno di essi. Sfortunatamente, è raramente il caso.

Sebbene alcune configurazioni possano essere più comuni di altre, dispositivi come telefoni, tablet e console portatili di gioco possono variare notevolmente. Pertanto, spesso dobbiamo tenere conto di diversi rapporti d'aspetto, risoluzioni e ridimensionamenti dall'utente.

Ci sono diversi modi per tenerne conto, ma per ora immaginiamo che la risoluzione dello schermo sia cambiata e che i controlli si debbano riposizionare. Alcuni dovranno seguire il margine inferiore dello schermo, altri il margine superiore, o magari i margini destro o sinistro.

Si fa modificando gli offset di ancoraggio dei controlli, che si comportano in modo simile a un margine. Per accedere a queste impostazioni, bisogna prima selezionare la preimpostazione di ancoraggio Personalizzata.

Ogni controllo ha quattro offset di ancoraggio: sinistro, destro, inferiore e superiore, che corrispondono ai rispettivi bordi del controllo. Normalmente, tutti rappresentano una distanza in pixel rispetto all'angolo superiore sinistro del controllo padre oppure, nel caso in cui non sia presente un controllo padre, alla viewport.

Perciò per allargare il controllo, è possibile aumentare l'offset destro e/o diminuire l'offset sinistro. Questo permette di impostare con precisione la posizione e la forma del controllo.

Le proprietà di ancoraggio regolano il punto in cui partono gli offset. Ogni offset ha un'ancora individuale che si può regolare dall'inizio alla fine del genitore. Quindi le ancore verticali (superiore, inferiore) si regolano da 0.0 (cima del genitore) a 1.0 (fondo del genitore), con 0.5 come centro, e gli offset del controllo saranno posizionati rispetto a tale punto. Le ancore orizzontali (sinistra, destra) similmente si regolano da sinistra a destra del genitore.

Tieni presente che, se desideri che il bordo di un controllo sia sopra o a sinistra del punto di ancoraggio, devi impostare il valore di offset su un valore negativo.

Ad esempio: quando gli ancoraggi orizzontali vengono modificati in 1.0, i valori di offset diventano relativi all'angolo superiore destro del controllo o della viewport genitore.

Regolando i due ancoraggi orizzontali o i due verticali su valori diversi, il controllo cambierà dimensioni quando cambia il controllo genitore. In questo caso, il controllo è impostato per ancorare il suo angolo inferiore destro all'angolo inferiore destro del genitore, mentre gli offset del controllo superiore sinistro sono ancorati all'angolo superiore sinistro del genitore, quindi quando si ridimensiona il genitore, il controllo lo coprirà sempre, lasciando un offset di 20 pixel:

Centrare un controllo

Per centrare un controllo nel suo elemento padre, imposta i suoi ancoraggi a 0.5 e ogni offset a metà della sua dimensione rilevante. Ad esempio, il codice seguente mostra come un TextureRect si può centrare nel suo elemento padre:

GDScriptC#

var rect = TextureRect.new()
rect.texture = load("res://icon.svg")
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.offset_left = -texture_size.x / 2
rect.offset_right = texture_size.x / 2
rect.offset_top = -texture_size.y / 2
rect.offset_bottom = texture_size.y / 2
add_child(rect)

Impostando ogni ancoraggio a 0.5, il punto di riferimento per gli offset si sposta al centro del suo elemento padre. Da lì, impostiamo offset negativi così che il controllo assuma le sue dimensioni naturali.

Preimpostazioni di ancoraggio

Invece di regolare manualmente i valori degli offset e ancoraggi, è possibile utilizzare il menu Ancoraggio della barra degli strumenti, sopra la viewport. Oltre alla centratura, offre numerose opzioni per allineare e ridimensionare i nodi di controllo.