Al crear interfaces de usuario con bordes y esquinas personalizados, a menudo necesitarás renderizar elementos en diferentes proporciones y rodear visualmente texto localizado u otros contenidos de dimensiones desconocidas. Esto te permite crear elementos de interfaz de usuario de diferentes tamaños sin distorsionar los bordes o las esquinas.
Bajo el enfoque de 9-rodajas, una imagen (un solo activo de imagen de Roblox) se divide internamente en nueve sub-imágenes, cada una con diferentes reglas de escalado.
| Sub-imagen | Escalado |
|---|---|
| 1 3 7 9 (esquinas) | ninguno |
| 2 8 (bordes superior/inferior) | horizontal |
| 4 6 (bordes izquierdo/derecho) | vertical |
| 5 (centro) | horizontal + vertical |
Editor de Studio
La configuración de rodajas es posible configurando directamente la propiedad Enum.ScaleType y las propiedades de rodaja en una etiqueta de imagen o botón, pero el Editor de 9-Rodajas de Studio es más intuitivo.
Abriendo el editor
Para abrir el Editor de 9-Rodajas visual en Studio:
- Establece la propiedad ScaleType a Slice.
- Haz clic en la propiedad SliceCenter que aparece, luego haz clic en el … dentro de la fila.
- En la ventana que se abre, 4 líneas rojas superponen la imagen, representando los bordes de las rodajas. También se muestra el tamaño de la imagen fuente.
Establecer offsets
En Studio, arrastra las líneas rojas para establecer los offsets desde los bordes izquierdo, derecho, superior e inferior de la imagen.
Si necesitas una mejor precisión, ingresa los valores de offset en los campos en el lado derecho de la ventana del editor.
A medida que reposicionas las líneas de arrastre, el elemento de UI se actualiza automáticamente para mostrar el resultado.
Los valores de offset son diferentes de los valores de la propiedad SliceCenter del objeto de UI y representan el número de píxeles entre un borde de la imagen fuente y el controlador asociado con ese lado.