UI 9-Slice 디자인

사용자 정의 테두리 및 모서리를 사용하여 UI를 생성할 때 항상 요소 비율을 변경하고 시각적으로 다른 크기의 콘텐츠를 둘러싸야 합니다. 이를 통해 테두리나 모서리를 왜곡하지 않고 크기가 다른 UI 요소를 생성할 수 있습니다.

9-Slice 접근법에 따라 하나의 이미지(단일 Roblox 이미지 자산)는 내부적으로 9개의 하위 이미지로 분할되며, 각각 다른 크기 조정 규칙을 가집니다.

Studio 편집기

구성은 이미지 레이블 또는 버튼에 있는 Enum.ScaleType 및 스ラ이스 속성을 직접 설정하여 가능하지만 Studio의 내장 9-Slice Editor 가 더 직관적입니다.

편집기 열기

Studio에서 시각적 9-Slice Editor 를 열려면:

1. 자산 ID를 입력한 유효한 이미지 필드에 있는 ImageLabel 또는 ImageButton를 선택합니다.

1. 크기 조정 유형 속성을 슬라이스 로 설정합니다.

1. 표시되는 슬라이스 센터 속성을 클릭한 다음 행 내에 있는 …를 클릭하십시오.

1. 열린 창에서 4개의 빨간색 줄이 이미지를 겹쳐서 슬라이스의 모서리를 나타냅니다. 원본 이미지 크기도 표시됩니다.

오프셋 설정

In Studio, drag the red lines to set the 오프셋 from the left, right, top, and bottom 모서리 of the image.

드래거 라인을 다시 배치하면 UI 요소가 자동으로 업데이트되어 결과를 표시합니다.