Estoy creando una interfaz de usuario de diseño automático simple que consta de un Panel con una imagen de fondo y tres filas de texto.
Para empezar, tengo un componente de Grupo de diseño vertical en un GameObject "Panel" de nivel superior, configurado para Controlar la altura del niño. También tiene un ajustador de tamaño de contenido con ajuste "preferido" para ajuste vertical. El objeto Panel tiene una imagen de fondo y algunos elementos secundarios que representan filas en la vista:
Panel [Vertical Layout Group] [Image] [Content Size Fitter] - Text 1 - Text 2 - Text 3Todo esto funciona bien como está.
Mi problema surge porque quiero que el fondo del panel se componga de dos imágenes: una es una imagen de fondo rellena y la otra es una imagen de "marco" en su mayoría transparente que se ajusta al fondo y agrega detalles solo en los bordes y las esquinas. Ambas imágenes están cortadas.
Desafortunadamente, Unity no permite más de un componente Imagen en un solo GameObject, por lo que esto me impide simplemente agregar ambas imágenes al Panel. Si esto funcionara, sería suficiente.
En cambio, si agrego la imagen a un nuevo elemento secundario del Panel, se incluye como elemento secundario en el VLG y el marco aparece como la nueva primera fila, es decir, parte del diseño vertical. No es lo que busco:
Panel [VLG] [Image:Background] [Content Size Fitter] - Frame [Image:Frame] - Text 1 - Text 2 - Text 3Intenté mover ambas Imágenes como dos hijos del Panel, y luego agregar un tercer hijo como "Diseño" con los hijos originales como hijos de eso, con el VLG (eliminándolo del Panel):
Panel [Content Size Fitter] - Background [Image: Background] - Frame [Image:Frame] - Layout [VLG] - Text 1 - Text 2 - Text 3Desafortunadamente, esto tampoco parece funcionar, porque las dimensiones de las dos Imágenes no están controladas por el Panel si no contiene un Grupo de diseño de algún tipo. Pero, obviamente, agregar un VLG al panel dividiría el fondo del marco y del diseño cuando realmente quiero que los tres se superpongan.
¿Hay alguna manera de crear un grupo de diseño "compuesto" de modo que los niños se combinen uno encima del otro, en lugar de horizontal o verticalmente? Examiné el código fuente de la clase base abstracta UnityEngine.UI.LayoutGroup y me pregunté si podría crear algo similar a VLG pero simplemente coloca a todos los niños en la misma ubicación emulando UnityEngine.UI.VerticalLayoutGroup pero devolviendo el mismo valor Y para la posición de cada niño. ¿Funcionaría esto?
Sé que puedo combinar manualmente las dos imágenes en una sola y usar una sola imagen; sin embargo, me gustaría comprender mejor cómo puedo hacer esto en el caso general. Además, puede obtener resultados más interesantes con la composición en tiempo de ejecución cuando las dimensiones de la división difieren entre las imágenes.
prueba este
Panel [Image:Background] [Content Size Fitter] - Frame [VLG] [Image:Frame] - Text 1 - Text 2 - Text 3Gracias a @Art Zolina III, la clave es colocar la segunda imagen en el único elemento secundario de Content Size Fitter y usar un Grupo de diseño vertical (VLG) en ese mismo elemento secundario para propagar los elementos secundarios finales al nivel superior. objeto (Panel).
Panel [Image:Background, sliced] [Content Size Fitter: Horiz Preferred, Vert Preferred] [Vertical Layout Group: Control Child Width, Height] - Frame [Image:Framing, sliced] [VLG: Control Child Width, Height; Child Force Expand Width] - Text 1 [TextMeshPro Text] - Text 2 [TextMeshPro Text] - Text 3 [TextMeshPro Text]Como nota, la altura preferida de una imagen dividida es la suma de las alturas de los bordes superior e inferior, lo que significa que no puede reducirse fácilmente a menos de esa altura. Esto me hizo tropezar porque mi imagen tenía un espacio de borde vertical combinado de 900 píxeles que me estaba engañando haciéndome pensar que mi diseño no se estaba reduciendo "para encajar". Una vez que usé una imagen cortada con márgenes superior e inferior más pequeños, el diseño del panel parecía funcionar correctamente.
Además, los límites de corte de un Sprite parecen verse afectados por el multiplicador de píxeles por unidad, lo que significa que puede hacer que los límites sean más pequeños de lo que deberían ser visualmente, pero aumentar el multiplicador para que todos los márgenes se rendericen en su totalidad (pero al menos). una resolución más alta).