Al crear UI con bordes y esquinas personalizadas, a menudo tendrás que renderizar elementos en diferentes ratios de aspecto y visualmente rodear texto localizado o otros contenidos de dimensiones desconocidas. Esto te permite crear elementos de UI de diferentes tamaños sin distorsionar los bordes o las esquinas.
Con el enfoque de 9-Slice , una imagen (un solo recurso de imagen de Roblox) se divide internamente en nueve subimágenes, cada una con diferentes reglas de escalado.
| Sub-Imagen | Dimensiones |
|---|---|
| 137 0> 9 0> (esquinas) | ninguna |
| 28 (esquinas superiores/ inferiores) | horizontal |
| 46 (esquinas izquierda/derecha) | vertical |
| 5 (centro) | horizontal + vertical |
Editor de Studio
La configuración de la ranura es posible al configurar directamente el Enum.ScaleType y las propiedades de la ranura en una etiqueta de imagen o botón, pero Studio's built-in 9-Slice Editor es más intuitivo.
Abriendo el editor
Para abrir el visual Editor de 9-Slice en Studio:
- Establece la propiedad ScaleType a Slice .
- Haga clic en la propiedad SliceCenter que aparece, luego haga clic en el … dentro de la fila.
- En la ventana que se abre, 4 líneas rojas superponen la imagen, representando las esquinas de los cortes. El tamaño de la imagen de origen también se muestra.
Configurando Desplazamientos
En Studio, arrastra las líneas rojas para establecer los Offsets de la izquierda, derecha, parte superior y inferior de la imagen.
Si necesita mejor precisión, ingrese valores de compensación en los campos de la parte derecha de la ventana de edición.
A medida que reposiciona las líneas del desplazador, el elemento de la interfaz de usuario se actualiza automáticamente para mostrar el resultado.
Los valores de desplazamiento son diferentes a los valores de propiedad de la interfaz de objetoSliceCenter y representan el número de píxeles entre un borde de la imagen de origen y el desplazador asociado con ese lado.