UI 9-조각 디자인

사용자 지정 경계와 모서리로 UI를 만들 때, 다른 측면 비율로 요소를 렌더링하고 알려지지 않은 차원의 로컬 텍스트나 다른 콘텐츠를 시각적으로 둘러싼 경우가 많습니다.이렇게 하면 경계나 모서리를 왜곡하지 않고 다양한 크기의 UI 요소를 만들 수 있습니다.

9-슬라이스 접근법에서 한 이미지(단일 Roblox 이미지 자산)는 내부적으로 9개의 하위 이미지로 분할되며, 각각 다른 크기 조정 규칙이 적용됩니다.

스튜디오 편집기

슬라이스 구성은 이미지 레이블이나 버튼에서 직접 Enum.ScaleType 및 슬라이스 속성을 설정하여 가능하지만, Studio의 기본 제공 9-Slice 편집기 는 더 직관적이다.

편집기 열기

Studio에서 시각적 9-Slice 편집기 를 열려면:

1. 유효한 자산 ID가 입력된 이미지 필드에 또는 를 선택하여 자산 ID를 입력하십시오.

1. 크기 유형 속성을 조각 으로 설정합니다.

1. 나타나는 슬라이스 센터 속성을 클릭한 다음 행 내의 … 에 클릭합니다.

1. 열린 창에서 4개의 빨간 선이 이미지를 가로지르며 조각의 가장자리를 나타냅니다. 원본 이미지 크기도 표시됩니다.

오프셋 설정

Studio에서 빨간색 선을 드래그하여 이미지의 왼쪽, 오른쪽, 상단 및 하단 가장자리에서 오프셋 을 설정합니다.

드래거 선을 재배치할 때, UI 요소가 자동으로 업데이트되어 결과를 표시합니다.