Unity UI cuadrado que llena ancho O alto

11

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.

Diseño original

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

ingrese la descripción de la imagen aquí

O reduce:

ingrese la descripción de la imagen aquí

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:

ingrese la descripción de la imagen aquí

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!

Xavi Montero
fuente

Respuestas:

13

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:

ingrese la descripción de la imagen aquí

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:

ingrese la descripción de la imagen aquí

ingrese la descripción de la imagen aquí

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:

ingrese la descripción de la imagen aquí

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

ingrese la descripción de la imagen aquí

ingrese la descripción de la imagen aquí

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:

ingrese la descripción de la imagen aquí

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:

ingrese la descripción de la imagen aquí

Xavi Montero
fuente
Ah, increíble, parece una excelente solución. Me alegro de que lo hayas encontrado, ¡gracias por compartirlo!
Chris McFarland
3

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":

ingrese la descripción de la imagen aquí

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.

ingrese la descripción de la imagen aquí

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:

ingrese la descripción de la imagen aquí


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:

ingrese la descripción de la imagen aquí

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:

ingrese la descripción de la imagen aquí

Chris McFarland
fuente
1
Gracias Chris por tu respuesta altamente detallada. Finalmente encontré una solución que no necesita ninguna línea de código para verificar la orientación, y no piratea las escalas y no usa una resolución de referencia. Voy a publicar mi propia respuesta, pero no quería transmitir sin agradecer su esfuerzo e ilustración.
Xavi Montero