사용자 정의 가장자리와 코너로 UI를 만들 때, 종종 다양한 종횡비에서 요소를 렌더링해야 하며, 보통 크기를 알 수 없는 로컬라이즈된 텍스트나 기타 콘텐츠를 시각적으로 둘러싸야 합니다. 이를 통해 가장자리나 코너를 왜곡하지 않고 다양한 크기의 UI 요소를 만들 수 있습니다.
9-슬라이스 접근 방식에서는 하나의 이미지(단일 Roblox 이미지 자산)가 내부적으로 아홉 개의 하위 이미지로 나누어져, 각각이 다른 스케일링 규칙을 가집니다.
| 하위 이미지 | 스케일링 |
|---|---|
| 1 3 7 9 (모서리) | 없음 |
| 2 8 (상단/하단 가장자리) | 수평 |
| 4 6 (좌측/우측 가장자리) | 수직 |
| 5 (가운데) | 수평 + 수직 |
스튜디오 편집기
슬라이스 구성은 이미지 레이블 또는 버튼에서 Enum.ScaleType과 슬라이스 속성을 직접 설정하여 가능하지만, 스튜디오의 내장된 9-슬라이스 편집기가 더 직관적입니다.
편집기 열기
스튜디오에서 시각적 9-슬라이스 편집기를 열려면:
- ScaleType 속성을 슬라이스로 설정합니다.
- 나타나는 SliceCenter 속성을 클릭한 다음, 행 내의 **…**를 클릭합니다.
- 열리는 창에서 4개의 빨간 선이 이미지 위에 겹쳐져서 슬라이스의 가장자리를 나타냅니다. 소스 이미지 크기도 표시됩니다.
오프셋 설정
스튜디오에서 빨간 선을 드래그하여 이미지의 왼쪽, 오른쪽, 위쪽 및 아래쪽 가장자리에서 오프셋을 설정합니다.
더 나은 정밀도가 필요하면 편집기 창의 오른쪽 필드에 오프셋 값을 입력하세요.
드래그 라인을 재배치할 때마다 UI 요소가 자동으로 업데이트되어 결과를 보여줍니다.
오프셋 값은 UI 객체의 SliceCenter 속성 값과 다르며, 소스 이미지의 가장자리와 해당 측면과 연결된 드래거 사이의 픽셀 수를 나타냅니다.