Unity UI cuadrado que llena ancho O alto

Estoy tratando de crear un tablero con estos requisitos:

• Será cuadrado.
• DEBE ajustarse al ancho o alto disponible.
• DEBE estar centrado en el lienzo.
• PUEDE estar envuelto en tantos lienzos intermedios adicionales como sea necesario.

Estoy jugando con las anclas, pero no encuentro ninguna combinación para hacerlo. La única solución que puedo pensar es escribir un tipo de "OnResize" del contenedor y establecer el tamaño de la placa mediante programación.

Este es el diseño original. (1) es el BoardCanvas. (2) es la Junta.

Quiero que si la pantalla se vuelve más alta, el cuadrado crece, pero sigue siendo cuadrado:

O reduce:

Pero, aunque esos ejemplos anteriores se están ajustando a los bordes superior e inferior, también quiero que si el espacio vertical se vuelve más alto que el ancho disponible, entonces el cuadrado limita su tamaño dependiendo de los bordes izquierdo y derecho:

P1: ¿Hay alguna manera de hacer esto con los anclajes / pivotes? Está bien para mí crear lienzos intermedios entre BoardCanvas y Board en sí, si eso funciona.

P2: Si es así, ¿dónde debo colocar los anclajes? ¿Necesito objetos intermedios?

P3: Si no es así, ¿es la solución de script? ¿Hay algún OnResize en el lienzo para manejar? No puedo ver ningún evento de cambio de tamaño en la lista, pero tal vez no sé dónde buscarlo. Siento que probarlo en cada fotograma parece un poco exagerado, el evento impulsado parece mejor.

¡Gracias!

Finalmente encontré una forma de hacerlo (probado en v5.0.0), de una manera que:

• No necesita código ni condicionales para verificar la orientación.
• No piratea con escalas y tampoco necesita una resolución de referencia.

En los videos tutoriales de la interfaz de usuario, falta una gran parte, aunque está bien documentada en la documentación de texto: el sistema de "diseños automáticos".

Los diseños automáticos son mecanismos hechos de "diseños" y "controladores de diseño". Los controladores de diseño son componentes que se pueden adjuntar al objeto de juego de la interfaz de usuario. Los controladores pueden cambiar Rect Transformel tamaño de forma inteligente.

Ciertos controladores pueden cambiar el tamaño del objeto donde se aplica el componente, mientras que otros controladores pueden cambiar el tamaño de los elementos secundarios de ese objeto.

Hay algunos controladores incorporados. Uno de esos es el Aspect Ratio Fitter.

Primero, selecciono mi Boardpanel y adjunto un nuevo Aspect Ratio Fittercomponente:

El Aspect Ratio Fitterparece apuntar a "mantener" la relación de aspecto deseada del objeto. Para hacerlo, se puede configurar el objeto para que "se ajuste" alrededor de un objeto secundario (mientras se mantiene la relación de aspecto), o bien se puede configurar para expandir y ajustar su contenedor (mientras se mantiene la relación de aspecto).

Luego selecciono la Fit In Parentopción y especifico que quiero un cuadrado perfecto estableciendo la relación de aspecto deseada en 1:

Esto produce un diseño muy similar al que quería, pero no tuve que decirle al tablero sus dimensiones. Pero aún así, sabe que debe ser cuadrado, como se muestra:

Si me encojo verticalmente o me expando, el cuadrado sigue al padre, manteniendo la relación de aspecto:

Mágicamente, cuando el cambio se reduce reduciendo el ancho, no hay una secuencia de comandos para adjuntar y ninguna propiedad para cambiar, ya que el "Asistente de relación de aspecto" lo hace para nosotros automáticamente:

Finalmente, como quería un poco de margen allí, solo coloco un contenedor rect transform que actúa como el espaciador y muevo el Boardde BoardCanvasadentro al MarginCanvas:

Esto es posible, pero probablemente con solo una pequeña línea de código o dos para definir si la pantalla es horizontal o vertical y cambiar un par de valores.

En el lienzo, debe hacer que el "Modo de escala Ui" del escalador del lienzo sea "Escalar con tamaño de pantalla" y que el "Modo de coincidencia de pantalla" sea "Ancho o alto de coincidencia":

Suponiendo que se usa la Resolución de referencia predeterminada de 800x600, y suponiendo que la ventana de visualización de la pantalla es horizontal (por ejemplo, Screen.widthes mayor que Screen.height), el control deslizante Coincidencia debe establecerse completamente hacia Altura como 1.

Luego, querrá una imagen en el lienzo utilizando el valor predeterminado de anclaje medio / central. También desea que el ancho y la altura de la imagen coincidan con el valor Y de la resolución de referencia del escalador de lienzo.

Luego puede cambiar el tamaño de la ventana de visualización de la cámara y ver que la imagen conserva su forma mientras estira su altura para que coincida con la altura de la ventana de visualización:

Si la pantalla es vertical, y aquí es donde probablemente necesitará codificar para verificar y / o cambiar según sea necesario, debe hacer que el valor de Coincidencia del escalador sea 0y cambiar la Altura y el Ancho de su imagen para que coincida con la Resolución de referencia Valor X (en las imágenes a continuación, el ancho y la altura de la imagen son ambos 800)

Si está tratando de ajustar una imagen más pequeña en el interior, puede "escalar" la imagen ajustando su ancho y alto contra el valor X o Y de la Resolución de referencia (según el paisaje o el retrato). Entonces, por ejemplo, hice un cuadrado azul que usa la mitad del valor X de las Resoluciones de referencia (ya que la ventana gráfica es vertical), y se escala y se reduce muy bien:

Y además, si desea un tablero de ajedrez o algo así, la posición X e Y de cada imagen y la Altura y Ancho pueden basarse en un porcentaje de la Resolución del Escalador de Lienzo para hacer lo que quiera: