Diseño de Control en Godot: decidir quién controla la posición y el tamaño

Elegir el contrato de colocación

Un Control describe un elemento rectangular de la interfaz. Su disposición depende de su padre, de las anclas, de los offsets y de las restricciones de tamaño. Un hijo directo de un Container cede el control de su colocación a ese Container; si lo mueves a mano, la siguiente operación de disposición puede deshacer el cambio. Antes de modificar números en el Inspector, decide si el elemento se posiciona libremente o si lo organiza un padre. [1][3]

Interpretar anclas y offsets como un cálculo

Las anclas fijan puntos de referencia relativos al rectángulo del padre. Los offsets desplazan después los bordes correspondientes a partir de esos puntos de referencia. Si las anclas horizontales son iguales, ambos bordes quedan ligados a la misma referencia horizontal; si son distintas, el ancho puede variar con el del padre. [2]

Tomemos como ejemplo ilustrativo un panel de estado alineado a la derecha: se establecen anchor_left y anchor_right en 1, offset_left en -240 y offset_right en -20. En un espacio de coordenadas del padre sin escalar y con un ancho de 1000, los bordes quedan en 760 y 980. El panel mide 220 unidades de ancho y tiene un margen derecho de 20 unidades. Con un ancho del padre de 1200, esos bordes pasan a 960 y 1180. La colocación vertical es una decisión aparte. Este cálculo supone que ningún contenedor ni restricción de tamaño sobrescribe el rectángulo.

Dejar que los contenedores expresen las relaciones

Usa un HBoxContainer para una fila y un VBoxContainer para una columna. Un MarginContainer aporta relleno (padding) mediante constantes del tema. Anídalos cuando importe más la relación entre los elementos que la posición absoluta de cada hijo. [3]

Las opciones de tamaño de los contenedores también son distintas entre sí: Fill hace que un control ocupe el área que se le ha asignado, mientras que Expand solicita el espacio disponible en una dirección compatible. Sus efectos dependen del tipo de contenedor. En una fila de ajustes, deja que la etiqueta y el valor ocupen una disposición deliberada, en lugar de mover el valor por script una y otra vez cada vez que cambia la etiqueta. [3]

Tratar el tamaño mínimo como información del contenido

El mínimo interno de un control puede depender del texto, de las texturas y de los style boxes del tema. custom_minimum_size aporta un mínimo adicional solicitado; no es simplemente una orden para imponer un rectángulo fijo. La API de Control citada también documenta restricciones de tamaño máximo que pueden prevalecer sobre los mínimos. Cuando el resultado sorprenda, examina conjuntamente las restricciones activas. [1]

En una pantalla de ajustes localizada, reserva un espacio útil, pero permite que las etiquetas más largas influyan en el diseño. Si el contenido no cabe, elige entre ajuste de línea, desplazamiento u otra disposición. Forzar coordenadas pequeñas no elimina las necesidades del texto, y aumentar todos los mínimos puede dejar sin disposición viable a una ventana pequeña.

Revisar los cambios de tamaño y de propietario

Comprueba el panel de estado y las filas de ajustes con tamaños del padre estrechos y anchos, con textos traducidos más largos y con dimensiones de tema modificadas. Comprueba cuál es el padre que realmente gobierna su disposición antes de culpar a un preset de anclas. Si pasas un control libre a un Container (reparenting), reconsidera su contrato de disposición: es posible que los antiguos offsets manuales ya no determinen el resultado. [2][3]

Mantén las correcciones de disposición en quien es responsable de la relación. Lo anterior son casos de revisión propuestos y ejemplos aritméticos, no afirmaciones de que la interfaz se haya probado en dispositivos concretos.

Fuentes

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